Add instructions to design colors form

app/views/custom_styles/show.html.erb

@@ -80,6 +80,15 @@ See doc/COPYRIGHT.rdoc for more details.
               <%= styled_text_field_tag "design_colors[]" + design_color.variable, design_color.hexcode, placeholder: DesignColor.defaults[design_color.variable], style: "border: 2px solid #{design_color.get_hexcode}" %>
             </div>
           </div>
+          <div class="form--field-instructions">
+            <% if design_color.variable == "primary-color" %>
+              <%= t("admin.custom_styles.instructions.primary_color") %>
+            <% elsif design_color.variable == "primary-color-dark" %>
+              <%= t("admin.custom_styles.instructions.primary_color_dark") %>
+            <% elsif design_color.variable == "alternative-color" %>
+              <%= t("admin.custom_styles.instructions.alternative_color") %>
+            <% end %>
+          </div>
         </div>
       <% end %>
 

config/locales/en.yml

@@ -44,6 +44,10 @@ en:
       customize: "Customize your OpenProject installation with your own logo. Note: This logo will be publicly accessible."
       enterprise_notice: "As a special 'Thank you!' for their financial contribution to develop OpenProject, this tiny feature is only available for Enterprise Edition support subscribers."
       manage_colors: "Edit color select options"
+      instructions:
+        primary_color: "Main color."
+        primary_color_dark: "Typically a darker version of the main color used for hover effects."
+        alternative_color: "Strong accent color, typically used for most the important button on a screen."
     enterprise:
       upgrade_to_ee: "Upgrade to Enterprise Edition"
       add_token: "Upload an Enterprise Edition support token"