From 0e4d2cbdcb35d5f13aa87004cfc5d02953ed184c Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 20 Apr 2022 11:12:17 +0200 Subject: [PATCH 1/2] (wip)(style) refactor styles to use css variables --- .../prepaid-packs/propose-packs-modal.scss | 1 + app/themes/casemate/style.scss.erb | 19 +++++++++++++++++++ 2 files changed, 20 insertions(+) diff --git a/app/frontend/src/stylesheets/modules/prepaid-packs/propose-packs-modal.scss b/app/frontend/src/stylesheets/modules/prepaid-packs/propose-packs-modal.scss index f93199784..5c353f02d 100644 --- a/app/frontend/src/stylesheets/modules/prepaid-packs/propose-packs-modal.scss +++ b/app/frontend/src/stylesheets/modules/prepaid-packs/propose-packs-modal.scss @@ -8,6 +8,7 @@ border-width: 3px; border-style: solid; border-radius: 10px 3px; + border-color: var(--secondary); padding: 5px 15px; width: 264px; margin: 5px 10px; diff --git a/app/themes/casemate/style.scss.erb b/app/themes/casemate/style.scss.erb index ca75da0a8..3cbdffacb 100644 --- a/app/themes/casemate/style.scss.erb +++ b/app/themes/casemate/style.scss.erb @@ -12,6 +12,25 @@ $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-light: <%= Stylesheet.primary_light %>; + --main: <%= Stylesheet.primary %>; + --main-dark: <%= Stylesheet.primary_dark %>; + --main-darkest: darken(<%= Stylesheet.primary_dark %>, 20%); + + --secondary-lightest: lighten(<%= Stylesheet.secondary_light %>, 20%); + --secondary-light: <%= Stylesheet.secondary_light %>; + --secondary: <%= Stylesheet.secondary %>; + --secondary-dark: <%= Stylesheet.secondary_dark %>; + --secondary-darkest: darken(<%= Stylesheet.secondary_dark %>, 20%); + + --primary-text-color: <%= Stylesheet.primary_text_color %>; + --secondary-text-color: <%= Stylesheet.secondary_text_color %>; + + --primary-decoration-color: <%= Stylesheet.primary_decoration_color %>; +} + .bg-red { background-color: $primary; } From 6d1852252b1253ecb8f0fa7ba11f0113fe7eb536 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 11 May 2022 16:14:52 +0200 Subject: [PATCH 2/2] (style) Use of CSS variables for main and secondary colors in react components styles --- CHANGELOG.md | 2 + .../src/javascript/controllers/plans.js | 4 +- .../stylesheets/modules/base/fab-modal.scss | 21 +++ .../modules/machines/machine-card.scss | 1 + .../payment/payzen/payzen-keys-form.scss | 2 + .../payment/payzen/payzen-settings.scss | 3 + .../plan-categories/plan-categories-list.scss | 7 + .../stylesheets/modules/plans/plan-card.scss | 5 + .../stylesheets/modules/plans/plans-list.scss | 3 + .../src/stylesheets/variables/colors.scss | 7 +- app/themes/casemate/style.scss.erb | 128 ++---------------- 11 files changed, 65 insertions(+), 118 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c1d9a5356..bb8457197 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/app/frontend/src/javascript/controllers/plans.js b/app/frontend/src/javascript/controllers/plans.js index 3cc0d0c36..7c2c3a8a2 100644 --- a/app/frontend/src/javascript/controllers/plans.js +++ b/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', - function ($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, Subscription, Member, subscriptionExplicationsPromise, _t, Wallet, helpers, settingsPromise, Price) { /* PUBLIC SCOPE */ // user to deal with diff --git a/app/frontend/src/stylesheets/modules/base/fab-modal.scss b/app/frontend/src/stylesheets/modules/base/fab-modal.scss index a6d64d326..4e5d538b3 100644 --- a/app/frontend/src/stylesheets/modules/base/fab-modal.scss +++ b/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); + } } } } diff --git a/app/frontend/src/stylesheets/modules/machines/machine-card.scss b/app/frontend/src/stylesheets/modules/machines/machine-card.scss index 540bcd77f..cb26def75 100644 --- a/app/frontend/src/stylesheets/modules/machines/machine-card.scss +++ b/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; diff --git a/app/frontend/src/stylesheets/modules/payment/payzen/payzen-keys-form.scss b/app/frontend/src/stylesheets/modules/payment/payzen/payzen-keys-form.scss index c73cc6796..0a0c2a603 100644 --- a/app/frontend/src/stylesheets/modules/payment/payzen/payzen-keys-form.scss +++ b/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;; diff --git a/app/frontend/src/stylesheets/modules/payment/payzen/payzen-settings.scss b/app/frontend/src/stylesheets/modules/payment/payzen/payzen-settings.scss index d460f9249..35e4c0317 100644 --- a/app/frontend/src/stylesheets/modules/payment/payzen/payzen-settings.scss +++ b/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); } } } diff --git a/app/frontend/src/stylesheets/modules/plan-categories/plan-categories-list.scss b/app/frontend/src/stylesheets/modules/plan-categories/plan-categories-list.scss index c2f1834b0..27095ea22 100644 --- a/app/frontend/src/stylesheets/modules/plan-categories/plan-categories-list.scss +++ b/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); + } } diff --git a/app/frontend/src/stylesheets/modules/plans/plan-card.scss b/app/frontend/src/stylesheets/modules/plans/plan-card.scss index 71c4fcb0b..b0c80df31 100644 --- a/app/frontend/src/stylesheets/modules/plans/plan-card.scss +++ b/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; diff --git a/app/frontend/src/stylesheets/modules/plans/plans-list.scss b/app/frontend/src/stylesheets/modules/plans/plans-list.scss index 9917d9605..d3b514a3d 100644 --- a/app/frontend/src/stylesheets/modules/plans/plans-list.scss +++ b/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; } } diff --git a/app/frontend/src/stylesheets/variables/colors.scss b/app/frontend/src/stylesheets/variables/colors.scss index 708531e7f..50ba2ad5f 100644 --- a/app/frontend/src/stylesheets/variables/colors.scss +++ b/app/frontend/src/stylesheets/variables/colors.scss @@ -16,7 +16,7 @@ --main: #E72223; --main-dark: #BC1415; --main-darkest: #57090A; - + --secondary-light: #FFF8B3; --secondary: #FDE500; --secondary-dark: #CCB800; @@ -45,4 +45,9 @@ --warning: #D6AE47; --warning-dark: #8C6D1F; --warning-darkest: #5C4813; + + --main-text-color: black; + --secondary-text-color: black; + + --main-decoration-color: black; } diff --git a/app/themes/casemate/style.scss.erb b/app/themes/casemate/style.scss.erb index 3cbdffacb..8ea3c0eb9 100644 --- a/app/themes/casemate/style.scss.erb +++ b/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-light: <%= Stylesheet.primary_light %>; - --main: <%= Stylesheet.primary %>; - --main-dark: <%= Stylesheet.primary_dark %>; - --main-darkest: darken(<%= Stylesheet.primary_dark %>, 20%); + --main-lightest: lighten(<%= Stylesheet.primary_light %>, 20%) !important; + --main-light: <%= Stylesheet.primary_light %> !important; + --main: <%= Stylesheet.primary %> !important; + --main-dark: <%= Stylesheet.primary_dark %> !important; + --main-darkest: darken(<%= Stylesheet.primary_dark %>, 20%) !important; - --secondary-lightest: lighten(<%= Stylesheet.secondary_light %>, 20%); - --secondary-light: <%= Stylesheet.secondary_light %>; - --secondary: <%= Stylesheet.secondary %>; - --secondary-dark: <%= Stylesheet.secondary_dark %>; - --secondary-darkest: darken(<%= Stylesheet.secondary_dark %>, 20%); + --secondary-lightest: lighten(<%= Stylesheet.secondary_light %>, 20%) !important; + --secondary-light: <%= Stylesheet.secondary_light %> !important; + --secondary: <%= Stylesheet.secondary %> !important; + --secondary-dark: <%= Stylesheet.secondary_dark %> !important; + --secondary-darkest: darken(<%= Stylesheet.secondary_dark %>, 20%) !important; - --primary-text-color: <%= Stylesheet.primary_text_color %>; - --secondary-text-color: <%= Stylesheet.secondary_text_color %>; + --main-text-color: <%= Stylesheet.primary_text_color %> !important; + --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; - } - } -}