docbrown/app/views/admin/creator_settings/_form.html.erb

<div class="crayons-field mt-6 align-left">
  <%= label_tag :community_name, class: "crayons-field__label" do %>
    Community name
    <span class="crayons-field__required crayons-tooltip" data-tooltip="This will set the primary name for your Forem" aria-describedby="community-name-subtitle"></span>
    <p id="community-name-subtitle" class="crayons-field__description">Used as the primary name for your Forem.</p>
  <% end %>
  <%= text_field_tag :community_name, "", placeholder: "Climbing Life", class: "crayons-textfield", required: true %>
</div>

<div class="crayons-field mt-6 align-left">
  <%= label_tag :logo, class: "crayons-field__label" do %>
    Logo
    <span class="crayons-field__required crayons-tooltip" data-tooltip="This will set the logo for your Forem" aria-describedby="logo-subtitle"></span>
    <p id="logo-subtitle" class="crayons-field__description">Ideally SVG, but PNG or JPEG will work, too.</p>
  <% end %>
  <div class="flex flex-1 gap-4">
    <%= file_field_tag :logo, accept: @logo_allowed_types.to_s, data: { "max-file-size-mb": @max_file_size.to_s, action: "change->creator-settings#previewLogo" }, aria: { describedby: "logo-subtitle" } %>
    <div data-creator-settings-target="previewLogo">
    </div>
  </div>
</div>

<div class="crayons-field mt-6 align-left">
  <%= label_tag :primary_brand_color_hex, class: "crayons-field__label" do %>
    Brand color
    <span class="crayons-field__required crayons-tooltip" data-tooltip="This will set the accent color for buttons, links, etc. on your Forem" aria-describedby="color-selector-subtitle"></span>
    <p id="color-selector-subtitle" class="crayons-field__description">This will be the "accent" color used for buttons, links, etc.</p>
  <% end %>

  <div class="flex w-100 m:w-50 crayons-field">
    <div class="flex">
      <%= text_field_tag :primary_brand_color_hex,
                         ::Settings::UserExperience.primary_brand_color_hex,
                         pattern: "^#+([a-fA-F0-9]{6})$",
                         title: "Provide a valid HEX Color or pick your color from the color picker.",
                         placeholder: ::Settings::UserExperience.primary_brand_color_hex,
                         class: "crayons-textfield js-color-field",
                         "data-action": "change->creator-settings#handleValidationsAndUpdates",
                         "data-creator-settings-target": "brandColor",
                         "aria-describedby": "color-contrast-error" %>
      <%= color_field_tag :primary_brand_color_hex,
                          ::Settings::UserExperience.primary_brand_color_hex,
                          pattern: "^#+([a-fA-F0-9]{6})$",
                          placeholder: ::Settings::UserExperience.primary_brand_color_hex,
                          class: "crayons-color-selector js-color-field ml-2",
                          required: true,
                          "data-action": "change->creator-settings#handleValidationsAndUpdates" %>
    </div>
  </div>
  <div id="color-contrast-error" data-creator-settings-target="colorContrastError" aria-live="polite" class="mt-1 color-accent-danger"></div>
</div>

<div class="crayons-field mt-6 align-left">
  <fieldset aria-describedby="section-description">
    <legend class="crayons-field__label mb-2">Who can join this community?</legend>
    <div class="flex gap-3">
      <div>
        <%= radio_button_tag :invite_only_mode, "0", false, class: "crayons-radio" %>
        <label for="invite_only_mode_0">Everyone</label>
      </div>
      <div>
        <%= radio_button_tag :invite_only_mode, "1", true, class: "crayons-radio" %>
        <label for="invite_only_mode_1">Invite only</label>
      </div>
    </div>
  </fieldset>
</div>

<div class="crayons-field mt-6 align-left">
  <fieldset aria-describedby="section-description">
    <legend class="crayons-field__label mb-2">Who can view content in this community?</legend>
    <div class="flex gap-3">
      <div>
        <%= radio_button_tag :public, "1", true, class: "crayons-radio" %>
        <label for="public_0">Everyone</label>
      </div>
      <div>
        <%= radio_button_tag :public, "0", false, class: "crayons-radio" %>
        <label for="public_1">Members only</label>
      </div>
    </div>
  </fieldset>
</div>

<div class="crayons-field mt-6 align-left">
  <fieldset aria-describedby="section-description">
    <legend class="crayons-field__label">Finally, please agree to the following:</legend>
    <div>
      <p class="crayons-field__description">You will have the opportunity to establish the Code of Conduct and Terms and Conditions for the users of your Forem during the setup process.</p>
      <div class="mb-2">
        <%= hidden_field_tag :checked_code_of_conduct, "0" %>
        <%= check_box_tag :checked_code_of_conduct, "1", false, class: "crayons-checkbox", required: true %>
        <label for="checked_code_of_conduct">I agree to uphold our <a href="/code-of-conduct">Code of Conduct</a>.</label>
      </div>
      <div>
        <%= hidden_field_tag :checked_terms_and_conditions, "0" %>
        <%= check_box_tag :checked_terms_and_conditions, "1", false, class: "crayons-checkbox", required: true %>
        <label for="checked_terms_and_conditions">I agree to our <a href="/terms">Terms and Conditions</a>.</label>
      </div>
    </div>
  </fieldset>
</div>