From 5d96336a399b2fcc3cb5173d32940ffba26cd9c4 Mon Sep 17 00:00:00 2001 From: Michela Frecchiami Date: Fri, 20 Oct 2023 18:42:23 +0200 Subject: [PATCH 1/2] Update colors for Solidus Legacy The previous version of colors reflected exactly the new Solidus Admin, but its application on the legacy UI makes more difficult for merchants to individuate links and clickable elements. --- .../spree/backend/components/_hint.scss | 4 ++++ .../components/_navigation_solidus_admin.scss | 2 +- .../spree/backend/shared/_tables.scss | 5 ++++ .../themes/solidus_admin/_variables.scss | 23 ++++++++++++++----- 4 files changed, 27 insertions(+), 7 deletions(-) diff --git a/backend/app/assets/stylesheets/spree/backend/components/_hint.scss b/backend/app/assets/stylesheets/spree/backend/components/_hint.scss index cff59f9f449..30b3309160b 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_hint.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_hint.scss @@ -1,3 +1,7 @@ .hint-tooltip { cursor: pointer; + + i { + color: $color-dark-light; + } } diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss index c5e92dea197..afdd73771d7 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss @@ -122,7 +122,7 @@ $color-navbar-hover: $color-navbar !default; padding: 2px 12px; width: 100%; border-radius: $border-radius; - color: $color-primary; + color: $solidus-admin-gray-800; gap: 12px; display: flex; align-items: center; diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss b/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss index 4200edbaa1c..3583ec49013 100644 --- a/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss +++ b/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss @@ -38,6 +38,7 @@ table { text-align: center; border-bottom: none; vertical-align: middle; + color: $color-dark-light; &:before { padding: 0; @@ -111,6 +112,10 @@ table { th a { color: $color-dark; + + &:hover { + color: $color-dark-light; + } } tbody { diff --git a/backend/app/assets/stylesheets/spree/backend/themes/solidus_admin/_variables.scss b/backend/app/assets/stylesheets/spree/backend/themes/solidus_admin/_variables.scss index 0d0007647c8..a3efacf8d6f 100644 --- a/backend/app/assets/stylesheets/spree/backend/themes/solidus_admin/_variables.scss +++ b/backend/app/assets/stylesheets/spree/backend/themes/solidus_admin/_variables.scss @@ -19,10 +19,10 @@ $color-dark-dark: $solidus-admin-gray-600; $color-dark-light: $solidus-admin-gray-500; $color-dark-accent: $solidus-admin-gray-200; -$color-primary: $solidus-admin-black; +$color-primary: $solidus-admin-gray-700; $color-primary-light: $solidus-admin-gray-100; -$color-light: $solidus-admin-gray-15; +$color-light: $solidus-admin-gray-25; $color-light-dark: $solidus-admin-gray-50; $color-light-accent: $solidus-admin-gray-100; @@ -49,10 +49,10 @@ $color-navbar-active: $solidus-admin-solidus-red; $color-navbar-active-bg: $solidus-admin-gray-50; $color-navbar-submenu: $color-dark-light; $color-navbar-submenu-bg: $color-light; -$color-navbar-submenu-active: $color-primary; +$color-navbar-submenu-active: $solidus-admin-solidus-red; $color-navbar-footer: $color-dark; $color-navbar-footer-bg: $color-light; -$color-navbar-footer-active: $color-primary; +$color-navbar-footer-active: $solidus-admin-solidus-red; $color-icon-navbar: $color-dark-light; $color-navbar-hover-bg: $solidus-admin-gray-50; @@ -61,7 +61,7 @@ $color-navbar-hover: $color-dark; // Basic Tabs colors $color-tab: $color-dark-light; $color-tab-bg: $color-light; -$color-tab-border: $color-border; +$color-tab-border: $color-light-accent; $color-tab-active: $color-primary; $color-tab-active-bg: $color-white; $color-tab-active-border: $color-white; @@ -74,6 +74,7 @@ $color-error: $color-red; // Breadcrumb custom variable $breadcrumb-color: $color-dark-light; +$breadcrumb-active-color: $color-dark; // Color for spinner $color-spinner: $color-white; @@ -157,4 +158,14 @@ $main-header-height: 84px; $content-wrapper-bg: $color-white; $admin-body-bg: $color-white; -$link-hover-color: $solidus-admin-solidus-red; +// Links +//-------------------------------------------------------------- + +$link-color: $solidus-admin-blue; +$link-hover-color: darken($solidus-admin-blue, 10%); + +// Pagination +//-------------------------------------------------------------- + +$pagination-color: $color-primary; +$pagination-hover-color: $color-dark; From 24b97b72e7e3d930677c3fc1ae87bb2c6aa663d3 Mon Sep 17 00:00:00 2001 From: Michela Frecchiami Date: Mon, 23 Oct 2023 12:46:24 +0200 Subject: [PATCH 2/2] Icon alignment on sidebar menu --- .../spree/backend/components/_navigation_solidus_admin.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss index afdd73771d7..ee2d567cbd3 100644 --- a/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss +++ b/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss @@ -129,7 +129,9 @@ $color-navbar-hover: $color-navbar !default; &::before, svg { - display: inline-block; + display: inline-flex; + align-items: center; + justify-content: center; width: 18px; height: 18px; padding: 0;