Merge pull request #1017 from Retrospring/feature/raised-texts

Add new raised text and raised accent text theme fields

app/assets/stylesheets/_variables.scss

@@ -125,6 +125,8 @@ $spacers: map-merge($rs-spacers, $spacers);
   --muted-text: 108, 117, 125;
   --input-text: 0, 0, 0;
   --input-placeholder: 108, 117, 125;
+  --raised-text: 0, 0, 0;
+  --raised-accent-text: 0, 0, 0;
 
   --turbolinks-progress-color: #a58adc; // --primary lightened by 25%
 }

app/assets/stylesheets/components/_notifications.scss

@@ -42,7 +42,7 @@
     & .dropdown-item:hover,
     & .dropdown-item:active {
       background: transparent;
-      color: RGB(var(--body-text));
+      color: RGB(var(--raised-text));
     }
   }
 

app/assets/stylesheets/overrides/_card.scss

@@ -4,6 +4,7 @@
   margin-bottom: map.get($spacers, 3);
   box-shadow: $box-shadow-sm;
   background-color: var(--raised-bg);
+  color: RGB(var(--raised-text));
 
   p:last-child {
     margin-bottom: 0;
@@ -17,4 +18,5 @@
 .card-header,
 .card-footer {
   background-color: var(--raised-accent);
+  color: RGB(var(--raised-accent-text));
 }

app/assets/stylesheets/overrides/_dropdown.scss

@@ -1,12 +1,12 @@
 .dropdown-menu {
-  color: RGB(var(--body-text));
+  color: RGB(var(--raised-text));
   background-color: var(--raised-bg);
   box-shadow: $box-shadow-lg;
   border: none;
 }
 
 .dropdown-item {
-  color: RGB(var(--body-text));
+  color: RGB(var(--raised-text));
 
   &.active,
   &:active,
@@ -16,6 +16,7 @@
   }
 
   &:hover {
+    color: RGB(var(--raised-accent-text));
     background-color: var(--raised-accent);
   }
 }

app/assets/stylesheets/overrides/_list-group.scss

@@ -13,9 +13,10 @@
 }
 
 .list-group-item-action {
-  color: RGB(var(--body-text));
+  color: RGB(var(--raised-text));
 
   &:hover, &:focus {
+    color: RGB(var(--raised-accent-text));
     background-color: var(--raised-accent);
   }
 

app/controllers/settings/theme_controller.rb

@@ -8,22 +8,8 @@ class Settings::ThemeController < ApplicationController
   def edit; end
 
   def update
-    update_attributes = params.require(:theme).permit(%i[
-                                                        primary_color primary_text
-                                                        danger_color danger_text
-                                                        success_color success_text
-                                                        warning_color warning_text
-                                                        info_color info_text
-                                                        dark_color dark_text
-                                                        light_color light_text
-                                                        raised_background raised_accent
-                                                        background_color body_text
-                                                        muted_text input_color
-                                                        input_text input_placeholder
-                                                      ])
-
     if current_user.theme.nil?
-      current_user.theme = Theme.new update_attributes
+      current_user.theme = Theme.new theme_attributes
       current_user.theme.user_id = current_user.id
 
       if current_user.theme.save
@@ -31,7 +17,7 @@ class Settings::ThemeController < ApplicationController
       else
         flash[:error] = t(".error", errors: current_user.theme.errors.messages.flatten.join(" "))
       end
-    elsif current_user.theme.update(update_attributes)
+    elsif current_user.theme.update(theme_attributes)
       flash[:success] = t(".success")
     else
       flash[:error] = t(".error", errors: current_user.theme.errors.messages.flatten.join(" "))
@@ -43,4 +29,23 @@ class Settings::ThemeController < ApplicationController
     current_user.theme.destroy!
     redirect_to edit_settings_theme_path
   end
+
+  private
+
+  def theme_attributes
+    params.require(:theme).permit(%i[
+                                    primary_color primary_text
+                                    danger_color danger_text
+                                    success_color success_text
+                                    warning_color warning_text
+                                    info_color info_text
+                                    dark_color dark_text
+                                    light_color light_text
+                                    raised_background raised_accent
+                                    raised_text raised_accent_text
+                                    background_color body_text
+                                    muted_text input_color
+                                    input_text input_placeholder
+                                  ])
+  end
 end

app/helpers/theme_helper.rb

@@ -17,7 +17,9 @@ module ThemeHelper
     "light_color"        => "light",
     "light_text"         => "light-text",
     "raised_background"  => %w[raised-bg raised-bg-rgb],
+    "raised_text"        => "raised-text",
     "raised_accent"      => %w[raised-accent raised-accent-rgb],
+    "raised_accent_text" => "raised-accent-text",
     "background_color"   => "background",
     "body_text"          => "body-text",
     "input_color"        => "input-bg",

app/javascript/retrospring/utilities/theme.ts

@@ -14,7 +14,9 @@ export const THEME_MAPPING = {
   'light_color': 'light',
   'light_text': 'light-text',
   'raised_background': 'raised-bg',
+  'raised_text': 'raised-text',
   'raised_accent': 'raised-accent',
+  'raised_accent_text': 'raised-accent-text',
   'background_color': 'background',
   'body_text': 'body-text',
   'input_color': 'input-bg',

app/views/settings/theme/edit.html.haml

@@ -21,6 +21,23 @@
           = f.text_field :background_color, class: "color", data: { default: 0xF0EDF4, theme_target: "color", action: "theme#updatePreview" }
         .col-sm-6
           = f.text_field :body_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" }
+  .card
+    .card-body
+      %h2= t(".raised.heading")
+      %p= t(".raised.body")
+
+      .row
+        .col-sm-6
+          = f.text_field :raised_background, class: "color", data: { default: 0xFFFFFF, theme_target: "color", action: "theme#updatePreview" }
+        .col-sm-6
+          = f.text_field :raised_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" }
+      .row
+        .col-sm-6
+          = f.text_field :raised_accent, class: "color", data: { default: 0xF7F7F7, theme_target: "color", action: "theme#updatePreview" }
+        .col-sm-6
+          = f.text_field :raised_accent_text, class: "color", data: { default: 0x000000, theme_target: "color", action: "theme#updatePreview" }
+    .card-footer
+      %p= t(".raised.accent.example")
   .card
     .card-body
       %h2= t(".colors.heading")
@@ -93,23 +110,11 @@
 
       .row
         .col-sm-6
-          = f.text_field :input_placeholder, class: "color", data: { default: 0x6C757D, theme_target: "color" }
+          = f.text_field :input_placeholder, class: "color", data: { default: 0x6C757D, theme_target: "color", action: "theme#updatePreview" }
         .col-sm-6
           .form-group
             %label.form-label Example Input
             %input.form-control{ placeholder: "A test placeholder" }
-  .card
-    .card-body
-      %h2= t(".raised.heading")
-      %p= t(".raised.body")
-
-      .row
-        .col-sm-6
-          = f.text_field :raised_background, class: "color", data: { default: 0xFFFFFF, theme_target: "color" }
-        .col-sm-6
-          = f.text_field :raised_accent, class: "color", data: { default: 0xF7F7F7, theme_target: "color" }
-    .card-footer
-      %p= t(".raised.accent.example")
   .card
     .card-body
       .pull-left

config/locales/activerecord.en.yml

@@ -49,7 +49,9 @@ en:
         primary_color: "Primary colour"
         primary_text: "Primary text colour"
         raised_accent: "Raised accent colour"
+        raised_accent_text: "Raised accent text colour"
         raised_background: "Raised background colour"
+        raised_text: "Raised text colour"
         success_color: "Success colour"
         success_text: "Success text colour"
         warning_color: "Warning colour"

db/migrate/20230123214851_add_raised_and_accent_text_to_themes.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class AddRaisedAndAccentTextToThemes < ActiveRecord::Migration[6.1]
+  def up
+    add_column :themes, :raised_text, :integer, default: 0x000000, null: false
+    add_column :themes, :raised_accent_text, :integer, default: 0x000000, null: false
+  end
+
+  def down
+    remove_column :themes, :raised_text
+    remove_column :themes, :raised_accent_text
+  end
+end

db/migrate/20230129194809_use_body_text_for_raised_texts_in_themes.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class UseBodyTextForRaisedTextsInThemes < ActiveRecord::Migration[6.1]
+  def up
+    execute <<~SQUIRREL
+      UPDATE themes
+      SET raised_text = body_text,
+          raised_accent_text = body_text
+      WHERE body_text != 0;
+    SQUIRREL
+  end
+
+  def down; end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2023_01_08_114333) do
+ActiveRecord::Schema.define(version: 2023_01_29_194809) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -181,7 +181,7 @@ ActiveRecord::Schema.define(version: 2023_01_08_114333) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.index ["name", "resource_type", "resource_id"], name: "index_roles_on_name_and_resource_type_and_resource_id"
-    t.index ["resource_type", "resource_id"], name: "index_roles_on_resource"
+    t.index ["resource_type", "resource_id"], name: "index_roles_on_resource_type_and_resource_id"
   end
 
   create_table "rpush_apps", force: :cascade do |t|
@@ -301,6 +301,8 @@ ActiveRecord::Schema.define(version: 2023_01_08_114333) do
     t.integer "light_color", default: 16316922
     t.integer "light_text", default: 0
     t.integer "input_placeholder", default: 7107965, null: false
+    t.integer "raised_text", default: 0, null: false
+    t.integer "raised_accent_text", default: 0, null: false
     t.index ["user_id", "created_at"], name: "index_themes_on_user_id_and_created_at"
   end
 

spec/factories/theme.rb

@@ -15,12 +15,14 @@ FactoryBot.define do
     dark_color { 6_710_886 }
     dark_text { 15_658_734 }
     raised_background { 16_777_215 }
+    raised_text { 3_355_443 }
     background_color { 13_026_795 }
     body_text { 3_355_443 }
     muted_text { 3_355_443 }
     input_color { 15_789_556 }
     input_text { 6_710_886 }
     raised_accent { 16_250_871 }
+    raised_accent_text { 3_355_443 }
     light_color { 16_316_922 }
     light_text { 0 }
   end

spec/lib/use_case/data_export/theme_spec.rb

@@ -37,6 +37,7 @@ describe UseCase::DataExport::Theme, :data_export do
             dark_color:         6710886,
             dark_text:          15658734,
             raised_background:  16777215,
+            raised_text:        3355443,
             background_color:   13026795,
             body_text:          3355443,
             muted_text:         3355443,
@@ -45,6 +46,7 @@ describe UseCase::DataExport::Theme, :data_export do
             input_color:        15789556,
             input_text:         6710886,
             raised_accent:      16250871,
+            raised_accent_text: 3355443,
             light_color:        16316922,
             light_text:         0,
             input_placeholder:  7107965