Translate general and colors theme settings sections

app/views/settings/_theme.haml

@@ -10,9 +10,8 @@
 = bootstrap_form_for(current_user.theme || Theme.new, url: { action: "update_theme" }, html: { id: "update_theme" }, method: :patch) do |f|
   .card
     .card-body
-      %h2 General
+      %h2= t(".general.heading")
-      %p
+      %p= t(".general.body")
-        Here you'll find general page values that are basically visible all across the page.
       .row
         .col-sm-6
           = f.text_field :background_color, class: 'color', data: { default: 0xF0EDF4 }
@@ -20,86 +19,63 @@
           = f.text_field :body_text, class: 'color', data: { default: 0x000000 }
   .card
     .card-body
-      %h2 Colors
+      %h2= t(".colors.heading")
-      %p
+      %p= t(".colors.body")
-        Colors you can find used on the site. The names of the colors usually describe the context.
-        The "text" colors for all styles represent the color that text on top of these colors has.
 
-      %ul
-        %li
-          %b Primary:
-          The primary/brand color of the site, used for navigation, links, etc.
-        %li
-          %b Danger:
-          Color used for errors or critical actions like deleting something.
-        %li
-          %b Warning:
-          Color used for warnings if something non-critical has happened.
-        %li
-          %b Info:
-          Color used for informational popups or messages.
-        %li
-          %b Success:
-          Color used for messages if something went through successfully.
       .row
         .col-sm-6
           = f.text_field :primary_color, class: 'color', data: { default: 0x5E35B1 }
         .col-sm-6
           = f.text_field :primary_text, class: 'color', data: { default: 0xFFFFFF }
         .col-sm-12
-          .alert.alert-primary
+          .alert.alert-primary= t(".colors.alert.example", type: t(".colors.alert.type.primary"))
-            A simple primary alert—check it out!
       .row
         .col-sm-6
           = f.text_field :danger_color, class: 'color', data: { default: 0xDC3545 }
         .col-sm-6
           = f.text_field :danger_text, class: 'color', data: { default: 0xFFFFFF }
         .col-sm-12
-          .alert.alert-danger
+          .alert.alert-danger= t(".colors.alert.example", type: t(".colors.alert.type.danger"))
-            A simple danger alert—check it out!
       .row
         .col-sm-6
           = f.text_field :warning_color, class: 'color', data: { default: 0xFFC107 }
         .col-sm-6
           = f.text_field :warning_text, class: 'color', data: { default: 0x292929 }
         .col-sm-12
-          .alert.alert-warning
+          .alert.alert-warning= t(".colors.alert.example", type: t(".colors.alert.type.warning"))
-            A simple warning alert—check it out!
       .row
         .col-sm-6
           = f.text_field :info_color, class: 'color', data: { default: 0x17A2B8 }
         .col-sm-6
           = f.text_field :info_text, class: 'color', data: { default: 0xFFFFFF }
         .col-sm-12
-          .alert.alert-info
+          .alert.alert-info= t(".colors.alert.example", type: t(".colors.alert.type.info"))
-            A simple info alert—check it out!
       .row
         .col-sm-6
           = f.text_field :success_color, class: 'color', data: { default: 0x28A745 }
         .col-sm-6
           = f.text_field :success_text, class: 'color', data: { default: 0xFFFFFF }
         .col-sm-12
-          .alert.alert-success
+          .alert.alert-success= t(".colors.alert.example", type: t(".colors.alert.type.success"))
-            A simple success alert—check it out!
       .row
         .col-sm-6
           = f.text_field :dark_color, class: 'color', data: { default: 0x343A40 }
         .col-sm-6
           = f.text_field :dark_text, class: 'color', data: { default: 0xFFFFFF }
         .col-sm-12
-          %a.btn.btn-dark.mb-3{ href: '#' } A dark button
+          %a.btn.btn-dark.mb-3{ href: '#' }= t(".colors.button.example", type: t(".colors.button.type.dark"))
       .row
         .col-sm-6
           = f.text_field :light_color, class: 'color', data: { default: 0xF8F9FA }
         .col-sm-6
           = f.text_field :light_text, class: 'color', data: { default: 0xFFFFFF }
         .col-sm-12
-          %a.btn.btn-light.mb-3{ href: '#' } A light button
+          %a.btn.btn-light.mb-3{ href: '#' }= t(".colors.button.example", type: t(".colors.button.type.light"))
       .row
         .col-sm-6
           = f.text_field :muted_text, class: 'color', data: { default: 0x6C757D }
         .col-sm-6
-          %p.pt-4.text-muted Some muted text
+          %p.pt-4.text-muted= t(".colors.text.example")
   .card
     .card-body
       %h2 Forms and Inputs

config/locales/views.en.yml

@@ -60,6 +60,29 @@ en:
         descriptions on their general use on the site!</p>
         <p>And with that: <b>Happy Theming!</b>
       delete: "Delete Theme"
+      general:
+        heading: "General"
+        body: "Here you'll find general page values that are basically visible all across the page."
+      colors:
+        heading: "Colors"
+        body: |
+          Colors you can find used on the site. The names of the colors usually describe the context.
+          The "text" colors for all styles represent the color that text on top of these colors has.
+        alert:
+          example: "A simple %{type} alert — check it out!"
+          type:
+            danger: "danger"
+            info: "info"
+            primary: "primary"
+            success: "success"
+            warning: "warning"
+        button:
+          example: "A %{type} button"
+          type:
+            dark: "dark"
+            light: "light"
+        text:
+          example: "Some muted text"
   user:
     edit:
       title: "Profile Settings"