[deploy] Label Experience Level Scale in User Settings (#8454)

* Add labels to the experience levels in user settings

* modify helper methods to seperate module

* rename uxhelper to settingshelper for better understanding

app/assets/stylesheets/theme-selector.scss

@@ -137,6 +137,22 @@
 .rich-selector--experience {
   cursor: pointer;
   position: relative;
+  .level_tag {
+    font-size: 1em;
+    text-align: center;
+  }
+
+  @media screen and (max-width: 1100px) {
+    .level_tag {
+      font-size: 0.8em;
+    }
+  }
+
+  @media screen and (max-width: 900px) {
+    .level_tag {
+      font-size: 0.5em;
+    }
+  }
 }
 
 .rich-selector-radio {

app/helpers/settings_helper.rb

@@ -0,0 +1,9 @@
+module SettingsHelper
+  def user_experience_labels
+    %w[Novice Beginner Mid-level Advanced Expert]
+  end
+
+  def user_experience_levels
+    %w[1 3 5 8 10]
+  end
+end

app/views/users/_experience_selector.html.erb

@@ -1,4 +1,7 @@
 <label>
   <%= f.radio_button :experience_level, exp, checked: @user.experience_level == exp.to_i, class: "rich-selector-radio" %>
-  <div class="rich-selector rich-selector--experience align-center my-2 mx-3 fw-medium fs-l"><%= i + 1 %></div>
+  <div class="rich-selector rich-selector--experience align-center my-2 mx-3 fw-medium fs-l">
+    <p><%= i + 1 %></p>
+    <p class="level_tag"><%= label[i] %></p>
+  </div>
 </label>

app/views/users/_ux.html.erb

@@ -47,8 +47,8 @@
     <div class="crayons-field">
       <%= f.label :experience_level, "What is your approximate coding experience level (1-5)?", class: "crayons-field__label" %>
       <div class="theme-selector-field grid grid-cols-5">
-        <% %w[1 3 5 8 10].each_with_index do |exp, i| %>
-          <%= render partial: "experience_selector", locals: { f: f, exp: exp, i: i } %>
+        <% user_experience_levels.each_with_index do |exp, i| %>
+          <%= render partial: "experience_selector", locals: { f: f, exp: exp, i: i, label: user_experience_labels } %>
         <% end %>
       </div>
       <p>This will not be displayed on your profile or anywhere publicly. It helps gently determine what content you are shown along with tags you follow etc.</p>