(style) Use of CSS variables for main and secondary colors in react components styles

CHANGELOG.md

@@ -15,6 +15,7 @@
 - Updated nodejs version to 16.13.2 for dev environment, to reflect production version
 - Changed the apparence of the modal dialogs (React): no more logo and the close button appears in full-text in the top right corner.
 - Use react-hook-form to manage and validate forms
+- Use of CSS variables for main and secondary colors in react components styles
 - New text editor
 - Change font family to "Work Sans"
 - Updated eslint to v8 and eslint related packages to their latest versions
@@ -31,6 +32,7 @@
 - Fix a security issue: updated ruby to 2.6.10 to fix [CVE-2022-28739](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2022-28739)
 - Fix a security issue: updated rails to 5.2.7.1 to fix [CVE-2022-22577](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2022-22577) and [CVE-2022-27777](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2022-27777)
 - [TODO DEPLOY] `rails db:seed`
+- [TODO DEPLOY] `rails fablab:maintenance:rebuild_stylesheet`
 
 ## v5.3.13 2022 May 02
 

app/frontend/src/javascript/controllers/plans.js

@@ -12,8 +12,8 @@
  */
 'use strict';
 
-Application.Controllers.controller('PlansIndexController', ['$scope', '$rootScope', '$state', '$uibModal', 'Auth', 'AuthService', 'dialogs', 'growl', 'groupsPromise', 'Subscription', 'Member', 'subscriptionExplicationsPromise', '_t', 'Wallet', 'helpers', 'settingsPromise', 'Price',
+Application.Controllers.controller('PlansIndexController', ['$scope', '$rootScope', '$state', '$uibModal', 'Auth', 'AuthService', 'dialogs', 'growl', 'Subscription', 'Member', 'subscriptionExplicationsPromise', '_t', 'Wallet', 'helpers', 'settingsPromise', 'Price',
-  function ($scope, $rootScope, $state, $uibModal, Auth, AuthService, dialogs, growl, groupsPromise, Subscription, Member, subscriptionExplicationsPromise, _t, Wallet, helpers, settingsPromise, Price) {
+  function ($scope, $rootScope, $state, $uibModal, Auth, AuthService, dialogs, growl, Subscription, Member, subscriptionExplicationsPromise, _t, Wallet, helpers, settingsPromise, Price) {
     /* PUBLIC SCOPE */
 
     // user to deal with

app/frontend/src/stylesheets/modules/base/fab-modal.scss

@@ -103,6 +103,27 @@
       .modal-btn {
         &--confirm {
           margin-left: 0.5em;
+          background-color: var(--secondary);
+          color: var(--secondary-text-color);
+          border-color: var(--secondary);
+
+          &:hover {
+            background-color: var(--secondary-dark);
+            border-color: var(--secondary-dark);
+            color: var(--secondary-text-color);
+          }
+
+          &[disabled] {
+            background-color: var(--secondary-light);
+            color: var(--secondary-lightest);
+            border-color: var(--secondary-lightest);
+          }
+
+          &[disabled]:hover {
+            background-color: var(--secondary-light);
+            color: var(--secondary-lightest);
+            border-color: var(--secondary-lightest);
+          }
         }
       }
     }

app/frontend/src/stylesheets/modules/machines/machine-card.scss

@@ -121,6 +121,7 @@
         font-size: 16px;
         line-height: 1.5;
         border-radius: 4px;
+        color: var(--main);
 
         & > i {
           margin-right: 5px;

app/frontend/src/stylesheets/modules/payment/payzen/payzen-keys-form.scss

@@ -25,6 +25,8 @@
       margin-left: 1em;
       margin-bottom: 0;
       position: relative;
+      background-color: var(--secondary);
+      color: var(--secondary-text-color);
 
       &.with-addon {
         border-radius: 4px 0 0 4px;;

app/frontend/src/stylesheets/modules/payment/payzen/payzen-settings.scss

@@ -35,6 +35,9 @@
       }
       .save-currency {
         margin: 34px 15px 5px;
+        background-color: var(--secondary);
+        border-color: var(--secondary);
+        color: var(--secondary-text-color);
       }
     }
   }

app/frontend/src/stylesheets/modules/plan-categories/plan-categories-list.scss

@@ -27,4 +27,11 @@
       text-align: right;
     }
   }
+
+  .add-category,
+  .add-category:hover {
+    background-color: var(--secondary-dark);
+    border-color: var(--secondary-dark);
+    color: var(--secondary-text-color);
+  }
 }

app/frontend/src/stylesheets/modules/plans/plan-card.scss

@@ -90,6 +90,11 @@
         background-color: white;
         padding-left: 30px;
         padding-right: 30px;
+        border-color: var(--secondary);
+
+        &.selected-card {
+          background-color: var(--secondary);
+        }
       }
       button.subscribe-button:focus, button.subscribe-button:hover {
         outline: 0;

app/frontend/src/stylesheets/modules/plans/plans-list.scss

@@ -24,6 +24,7 @@
       z-index: -1;
       margin: -$border;
       border-radius: inherit;
+      background: linear-gradient(to left, white, var(--main), white);
     }
   }
 
@@ -35,6 +36,8 @@
       width: 50%;
       margin: 2em auto;
       line-height: 3em;
+      background-color: var(--main);
+      color: var(--main-text-color) !important;
     }
   }
 

app/frontend/src/stylesheets/variables/colors.scss

@@ -45,4 +45,9 @@
   --warning: #D6AE47;
   --warning-dark: #8C6D1F;
   --warning-darkest: #5C4813;
+
+  --main-text-color: black;
+  --secondary-text-color: black;
+
+  --main-decoration-color: black;
 }

app/themes/casemate/style.scss.erb

@@ -13,22 +13,22 @@ $secondary-text-color: <%= Stylesheet.secondary_text_color %> !default;
 $primary-decoration-color: <%= Stylesheet.primary_decoration_color %> !default;
 
 :root {
-  --main-lightest: lighten(<%= Stylesheet.primary_light %>, 20%);
+  --main-lightest: lighten(<%= Stylesheet.primary_light %>, 20%) !important;
-  --main-light: <%= Stylesheet.primary_light %>;
+  --main-light: <%= Stylesheet.primary_light %> !important;
-  --main: <%= Stylesheet.primary %>;
+  --main: <%= Stylesheet.primary %> !important;
-  --main-dark: <%= Stylesheet.primary_dark %>;
+  --main-dark: <%= Stylesheet.primary_dark %> !important;
-  --main-darkest: darken(<%= Stylesheet.primary_dark %>, 20%);
+  --main-darkest: darken(<%= Stylesheet.primary_dark %>, 20%) !important;
 
-  --secondary-lightest: lighten(<%= Stylesheet.secondary_light %>, 20%);
+  --secondary-lightest: lighten(<%= Stylesheet.secondary_light %>, 20%) !important;
-  --secondary-light: <%= Stylesheet.secondary_light %>;
+  --secondary-light: <%= Stylesheet.secondary_light %> !important;
-  --secondary: <%= Stylesheet.secondary %>;
+  --secondary: <%= Stylesheet.secondary %> !important;
-  --secondary-dark: <%= Stylesheet.secondary_dark %>;
+  --secondary-dark: <%= Stylesheet.secondary_dark %> !important;
-  --secondary-darkest: darken(<%= Stylesheet.secondary_dark %>, 20%);
+  --secondary-darkest: darken(<%= Stylesheet.secondary_dark %>, 20%) !important;
 
-  --primary-text-color: <%= Stylesheet.primary_text_color %>;
+  --main-text-color: <%= Stylesheet.primary_text_color %> !important;
-  --secondary-text-color: <%= Stylesheet.secondary_text_color %>;
+  --secondary-text-color: <%= Stylesheet.secondary_text_color %> !important;
 
-  --primary-decoration-color: <%= Stylesheet.primary_decoration_color %>;
+  --main-decoration-color: <%= Stylesheet.primary_decoration_color %> !important;
 }
 
 .bg-red {
@@ -297,9 +297,6 @@ a.label:focus,
   color: $primary;
 }
 
-.about-picture {
-}
-
 .social-icons > div:hover {
   background-color: $secondary;
   color: $secondary-text-color;
@@ -321,102 +318,3 @@ section#cookies-modal div.cookies-consent .cookies-actions button.accept {
   background-color: $secondary;
   color: $secondary-text-color;
 }
-
-.plans-list {
-  .group-title:before {
-    background: linear-gradient(to left, white, $primary, white);
-  }
-  .category-title {
-    background-color: $primary;
-    color: $primary-text-color !important;
-  }
-}
-
-.plan-card  {
-  .card-footer {
-    .cta-button {
-      button.subscribe-button {
-        border-color: $secondary;
-
-        &.selected-card {
-          background-color: $secondary;
-        }
-      }
-    }
-  }
-}
-
-.fab-modal {
-  .fab-modal-footer {
-    .modal-btn--confirm {
-      & {
-        background-color: $secondary;
-        color: $secondary-text-color;
-        border-color: $secondary
-      }
-
-      &:hover {
-        background-color: $secondary-dark;
-        border-color: $secondary-dark;
-        color: $secondary-text-color;
-      }
-
-      &[disabled] {
-        background-color: $secondary-light;
-        color: $secondary-lighter;
-        border-color: $secondary-lighter;
-      }
-
-      &[disabled]:hover {
-        background-color: $secondary-light;
-        color: $secondary-lighter;
-        border-color: $secondary-lighter;
-      }
-    }
-  }
-}
-
-.payzen-keys-form {
-  fieldset > legend {
-    background-color: $secondary;
-    color: $secondary-text-color;
-  }
-}
-
-.payzen-settings {
-  .payzen-currency {
-    .payzen-currency-form {
-      .save-currency {
-        background-color: $secondary;
-        border-color: $secondary;
-        color: $secondary-text-color;
-      }
-    }
-  }
-}
-
-.plan-categories-list {
-  .add-category,
-  .add-category:hover {
-    background-color: $secondary-dark;
-    border-color: $secondary-dark;
-    color: $secondary-text-color;
-  }
-}
-
-.machine-card {
-  .machine-actions {
-    button {
-      color: $primary;
-    }
-  }
-}
-
-
-.propose-packs-modal {
-  .list-of-packs {
-    .pack {
-      border-color: $secondary;
-    }
-  }
-}