docbrown/app/views/admin/settings/forms/_user_experience.html.erb

<%= form_for(Settings::UserExperience.new,
             url: admin_settings_user_experiences_path,
             html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
  <div class=" card mt-3">
    <%= render partial: "admin/shared/card_header",
               locals: {
                 header: "User Experience and Brand",
                 state: "collapse",
                 target: "uxBodyContainer",
                 expanded: false
               } %>
    <div id="uxBodyContainer" class="card-body collapse hide" aria-labelledby="uxBodyContainer">
      <fieldset class="grid gap-4">
        <div class="crayons-fieldx">
          <%= admin_config_label :feed_style, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:feed_style][:description] %>
          <%= f.text_field :feed_style,
                           class: "crayons-textfield",
                           value: Settings::UserExperience.feed_style,
                           placeholder: Constants::Settings::UserExperience::DETAILS[:feed_style][:placeholder] %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :feed_strategy, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:feed_strategy][:description] %>
          <%= f.text_field :feed_strategy,
                           class: "crayons-textfield",
                           value: Settings::UserExperience.feed_strategy,
                           placeholder: Constants::Settings::UserExperience::DETAILS[:feed_strategy][:placeholder] %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :tag_feed_minimum_score, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:tag_feed_minimum_score][:description] %>
          <%= f.number_field :tag_feed_minimum_score,
                             class: "crayons-textfield",
                             value: Settings::UserExperience.tag_feed_minimum_score,
                             placeholder: Constants::Settings::UserExperience::DETAILS[:tag_feed_minimum_score][:placeholder] %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :home_feed_minimum_score, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:home_feed_minimum_score][:description] %>
          <%= f.number_field :home_feed_minimum_score,
                             class: "crayons-textfield",
                             value: Settings::UserExperience.home_feed_minimum_score,
                             placeholder: Constants::Settings::UserExperience::DETAILS[:home_feed_minimum_score][:placeholder] %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :default_font, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:default_font][:description] %>
          <%= select_tag "settings_user_experience[default_font]",
                         options_for_select(
                           [%w[sans-serif sans_serif], %w[serif serif], %w[open-dyslexic open_dyslexic]],
                           Settings::UserExperience.default_font,
                         ),
                         multiple: false,
                         class: "selectpicker" %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :default_locale, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:default_locale][:description] %>
          <%= select_tag "settings_user_experience[default_locale]",
                         options_for_select(
                           [%w[English en], %w[Français fr]],
                           Settings::UserExperience.default_locale,
                         ),
                         multiple: false,
                         class: "selectpicker" %>
        </div>
        <div class="crayons-field">
          <%= admin_config_label :primary_brand_color_hex, model: Settings::UserExperience %>
          <%= admin_config_description Constants::Settings::UserExperience::DETAILS[:primary_brand_color_hex][:description] %>
          <%= f.color_field :primary_brand_color_hex,
                            class: "crayons-color-selector",
                            value: Settings::UserExperience.primary_brand_color_hex,
                            pattern: "^#+([a-fA-F0-9]{6})$",
                            placeholder: Constants::Settings::UserExperience::DETAILS[:primary_brand_color_hex][:placeholder] %>
        </div>
        <div class="crayons-field crayons-field--checkbox">
          <%= f.check_box :public, checked: Settings::UserExperience.public, class: "crayons-checkbox" %>
          <div class="mt-0">
            <%= admin_config_label :public, model: Settings::UserExperience %>
            <p class="crayons-field__description">
            Are most of the site pages (e.g. posts, profiles) public? <strong>Please take precaution when changing this setting.</strong>
            </p>
          </div>
        </div>
        <div class="crayons-field crayons-field--checkbox">
          <%= f.check_box :display_in_directory, checked: Settings::UserExperience.display_in_directory, class: "crayons-checkbox" %>
          <div class="mt-0">
            <%= admin_config_label :display_in_directory, model: Settings::UserExperience %>
            <p class="crayons-field__description">
              Do you want this Forem to be displayed in the <a href="https://discover.forem.com" target="_blank">Forem Directory</a>?
            </p>
          </div>
        </div>
      </fieldset>
      <%= render "update_setting_button", f: f %>
    </div>
  </div>
<% end %>
</div>