From 15fd335e907707acac97db67035bac8925f40213 Mon Sep 17 00:00:00 2001 From: Arnei Date: Fri, 15 Aug 2025 13:47:32 +0200 Subject: [PATCH 01/11] Align dropdown colors Make more dropdowns have the same background and text color for hovered options. --- src/styles/base/_variables.scss | 15 ++++-------- src/styles/components/_dropdowns.scss | 28 ++--------------------- src/styles/components/_menu-dropdown.scss | 4 ++-- src/utils/componentStyles.ts | 2 +- 4 files changed, 10 insertions(+), 39 deletions(-) diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index 725a29ec6f..c9e394394d 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -69,17 +69,12 @@ $color-white: #fff; // Primary color with light/medium/darker shades $prim-color: color.adjust(#fff, $lightness: -50%); -$light-prim-color: color.adjust($prim-color, $lightness: 15%); -$medium-prim-color: color.adjust($prim-color, $lightness: -10%); -$dark-prim-color: color.adjust($prim-color, $lightness: -30%); +$light-prim-color: color.adjust($prim-color, $lightness: 15%); //#a6a6a6 +$medium-prim-color: color.adjust($prim-color, $lightness: -10%); //#666666 +$dark-prim-color: color.adjust($prim-color, $lightness: -30%); //#333333 $global-text-color: $medium-prim-color; -// Alpha Channel -$light-black-alpha: rgba($black, 0.04); - - - // Element Colors // ---------------------------------------- @@ -147,8 +142,8 @@ $modal-nav-bg-color: #eeeff0; $modal-nav-border-color: #d6d6d6; $modal-nav-link-color: #646E75; $modal-nav-link-active-color: $header-link-color; -$subpage-navigation-link-color: color.adjust($header-link-color, $lightness: 25%); -$subpage-navigation-link-hover-color: color.adjust($header-link-color, $lightness: 35%); +$subpage-navigation-link-color: color.adjust($header-link-color, $lightness: 25%); //#fafafa +$subpage-navigation-link-hover-color: color.adjust($header-link-color, $lightness: 35%); //#9cabbc // Stats // ---------------------------------------- diff --git a/src/styles/components/_dropdowns.scss b/src/styles/components/_dropdowns.scss index 21a7b21049..dd9581a1a3 100644 --- a/src/styles/components/_dropdowns.scss +++ b/src/styles/components/_dropdowns.scss @@ -99,8 +99,8 @@ line-height: 20px; &:hover, &:focus { - color: variables.$global-text-color; - background: #f2f2f2; + color: variables.$off-white; + background: variables.$bright-blue; } &.more-link { @@ -155,21 +155,12 @@ z-index: variables.$max-z + 10; > li { - text-decoration: none; - text-shadow: 0 1px 0 variables.$white; color: variables.$medium-prim-color; font-size: 12px; line-height: 20px; font-weight: 600; cursor: default; display: block; - position: relative; - transition: all 200ms; - - span { - padding: 3px 15px 3px 45px; - display: block; - } span > span { display: block; @@ -181,21 +172,6 @@ button { display: block; padding: 4px 15px; - - &:hover, &:focus { - color: variables.$global-text-color; - background: #f2f2f2; - } - - &.more-link { - text-align: center; - color: variables.$l-blue; - } - } - - &:last-child a { - border-bottom-left-radius: variables.$main-border-radius; - border-bottom-right-radius: variables.$main-border-radius; } } } diff --git a/src/styles/components/_menu-dropdown.scss b/src/styles/components/_menu-dropdown.scss index 2bbb3409a9..49156e423c 100644 --- a/src/styles/components/_menu-dropdown.scss +++ b/src/styles/components/_menu-dropdown.scss @@ -40,7 +40,6 @@ $point-position-from-right: 10px; // Link Properties (List Items) - $link-hover-color: rgba(variables.$black, 0.05); $link-padding: 8px 15px; $link-transition-property: background, color; $link-transition-duration: 250ms; @@ -68,7 +67,8 @@ text-align: left; &:hover, &:focus { - background: $link-hover-color; + color: variables.$off-white; + background: variables.$bright-blue; } } diff --git a/src/utils/componentStyles.ts b/src/utils/componentStyles.ts index 61e1445483..3ee7f4ef51 100644 --- a/src/utils/componentStyles.ts +++ b/src/utils/componentStyles.ts @@ -4,7 +4,7 @@ import { StylesConfig, Theme } from "react-select"; // colors const colorDropDownMain = "#aaa"; -const colorDropDownNormalFocus = "#5897fb"; +const colorDropDownNormalFocus = "#4da1f7"; const colorDropDownDarkerFocus = "#2a62bc"; export function dropDownStyle(customCss: { From 05edee1b7756ba6fd56d856cadfc21329f481cfb Mon Sep 17 00:00:00 2001 From: Arnei Date: Fri, 15 Aug 2025 14:43:05 +0200 Subject: [PATCH 02/11] Adjust header and button colors --- src/styles/base/_variables.scss | 3 + src/styles/components/_header.scss | 12 +-- src/styles/components/_inputs.scss | 49 ------------ src/styles/components/_menu.scss | 4 +- src/styles/components/_progress-bar.scss | 6 +- src/styles/mixins/_button.scss | 94 ++++++++++++------------ 6 files changed, 61 insertions(+), 107 deletions(-) diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index c9e394394d..55e0b113cb 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -65,6 +65,9 @@ $color-silver: #CCC; $color-lightgray: #F8F8F8; $color-white: #fff; +$l-blue-gradient: #2b77b9; +$b-blue-gradient: #55cef2; + // Primary color with light/medium/darker shades diff --git a/src/styles/components/_header.scss b/src/styles/components/_header.scss index e33a8e1486..0eaf39a509 100644 --- a/src/styles/components/_header.scss +++ b/src/styles/components/_header.scss @@ -36,8 +36,8 @@ height: $height; box-shadow: 0 1px 3px 1px rgba(variables.$black, 0.3); position: relative; - border-bottom: 1px solid #1d3041; - background: linear-gradient(to bottom, #388ed6, #2075b1); + border-bottom: 1px solid color.adjust(variables.$d-blue, $lightness: -5%); //1d3041; + background: linear-gradient(to bottom, variables.$l-blue, color.adjust(variables.$l-blue, $lightness: -9%)); //2075b1 .header-branding { float: left; @@ -220,10 +220,10 @@ .menu-top { width: 80px; height: 42px; - background: #243e55; + background: color.adjust(variables.$d-blue, $lightness: -3%); border-top-left-radius: 4px; border-top-right-radius: 4px; - border: variables.$thin-border-stroke color.adjust(#1e364b, $lightness: -3%); + border: variables.$thin-border-stroke color.adjust(variables.$d-blue, $lightness: -12%); border-bottom: none; margin: 0 variables.$side-margin; position: relative; @@ -232,13 +232,13 @@ width: 100%; height: 100%; font-size: 22px; - color: #9badbb; + color: variables.$color-silver; //9badbb; display: flex; align-items: center; justify-content: center; &:hover { - color: #b9c6d0; + color: variables.$off-white; //b9c6d0; } } } diff --git a/src/styles/components/_inputs.scss b/src/styles/components/_inputs.scss index a2a98aad2a..3be80916e6 100644 --- a/src/styles/components/_inputs.scss +++ b/src/styles/components/_inputs.scss @@ -94,55 +94,6 @@ select[multiple] { } } -// Input made by Joshua Hibbert | http://codepen.io/joshnh/pen/hjbuH -input[type="checkbox"].ios, -input[type="radio"].ios { - - $white: variables.$white; - $grey: #d3d3d3; - $transition-duration: 250ms; - - background-color: color.adjust($white, $lightness: -2%); - border: 1px solid $grey; - border-radius: 26px; - box-shadow: inset 0 0 0 1px $grey; - cursor: pointer; - height: 28px; - position: relative; - transition: border $transition-duration 150ms, box-shadow $transition-duration 300ms, padding $transition-duration; - width: 44px; - vertical-align: top; - - &:after { - background-color: $white; - border: 1px solid $grey; - border-radius: 24px; - box-shadow: inset 0 -3px 3px hsla(0, 0%, 0%, 0.025), 0 1px 4px hsla(0, 0%, 0%, 0.15), 0 4px 4px hsla(0, 0%, 0%, 0.1); - content: ''; - display: block; - height: 24px; - left: 0; - position: absolute; - right: 16px; - top: 0; - transition: border 250ms 150ms, left 250ms 100ms, right 150ms 175ms; - } - - &:checked { - border-color: variables.$green; - box-shadow: inset 0 0 0 13px variables.$green; - padding-left: 18px; - transition: border 250ms, box-shadow 250ms, padding 250ms 150ms; - - &:after { - border-color: variables.$green; - left: 16px; - right: 0; - transition: border 250ms, left 150ms 250ms, right 250ms 175ms; - } - } -} - .search-container { width: 100% !important; height: 40px; diff --git a/src/styles/components/_menu.scss b/src/styles/components/_menu.scss index a8176e9685..1ab976aa19 100644 --- a/src/styles/components/_menu.scss +++ b/src/styles/components/_menu.scss @@ -29,7 +29,7 @@ float: left; width: 80px; background: variables.$white; - border: variables.$thin-border-stroke #c3cbd0; + border: variables.$thin-border-stroke variables.$color-silver; border-top: none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; @@ -64,7 +64,7 @@ font-size: 29px; vertical-align: middle; transition: all .2s; - color: #818181; + color: variables.$color-gray; } &:hover > .main-nav-icon, diff --git a/src/styles/components/_progress-bar.scss b/src/styles/components/_progress-bar.scss index 27aeb1514a..6df403295f 100644 --- a/src/styles/components/_progress-bar.scss +++ b/src/styles/components/_progress-bar.scss @@ -30,7 +30,7 @@ margin-bottom: 10px; background-color: variables.$white; border-radius: variables.$main-border-radius; - border: 1px solid color.adjust(#388ed6, $lightness: -10%); + border: 1px solid color.adjust(variables.$l-blue, $lightness: -10%); &.compact { height: 8px; @@ -47,8 +47,8 @@ text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2); text-align: center; background-color: variables.$progress-bar-color; - background: linear-gradient(to bottom, #388ed6, #2b77b9); - border-right: 1px solid color.adjust(#388ed6, $lightness: -15%); + background: linear-gradient(to bottom, variables.$l-blue, variables.$l-blue-gradient); + border-right: 1px solid color.adjust(variables.$l-blue, $lightness: -15%); transition: width 600ms ease; &[aria-valuenow="1"], diff --git a/src/styles/mixins/_button.scss b/src/styles/mixins/_button.scss index fe46a4a16e..00fd82e6e5 100644 --- a/src/styles/mixins/_button.scss +++ b/src/styles/mixins/_button.scss @@ -55,28 +55,28 @@ } } - @else if $color == blue-dark-bg { - box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05); + // @else if $color == blue-dark-bg { + // box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05); - background: linear-gradient(#3a5e7e, #2c9966); + // background: linear-gradient(#3a5e7e, #2c9966); - border: variables.$thin-border-stroke variables.$dark-bg-border-color; + // border: variables.$thin-border-stroke variables.$dark-bg-border-color; - &:hover { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: 5%), color.adjust(#2c9966, $lightness: -10%)); - } + // &:hover { + // cursor: pointer; + // background: linear-gradient(color.adjust(#3a5e7e, $lightness: 5%), color.adjust(#2c9966, $lightness: -10%)); + // } - &:focus { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: 5%), color.adjust(#2c9966, $lightness: -10%)); - } + // &:focus { + // cursor: pointer; + // background: linear-gradient(color.adjust(#3a5e7e, $lightness: 5%), color.adjust(#2c9966, $lightness: -10%)); + // } - &:active { - cursor: pointer; - box-shadow: inset 0px 3px 10px 1px color.adjust(#2c9966, $lightness: -3%); - } - } + // &:active { + // cursor: pointer; + // box-shadow: inset 0px 3px 10px 1px color.adjust(#2c9966, $lightness: -3%); + // } + // } @else if $color == green { box-shadow: inset 0px 1px 0px 0px variables.$primary-color-green-light-1, 0px 2px 3px 1px rgba(0,0,0,.05); @@ -102,69 +102,69 @@ } } - @else if $color == blue { - box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05); + // @else if $color == blue { + // box-shadow: inset 0px 1px 0px 0px #456c8e, 0px 2px 3px 1px rgba(0,0,0,.05); - background: linear-gradient(#3a5e7e, #2c9966); + // background: linear-gradient(#3a5e7e, #2c9966); - border: variables.$thin-border-stroke variables.$dark-bg-border-color; + // border: variables.$thin-border-stroke variables.$dark-bg-border-color; - &:hover { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: -1%), color.adjust(#2c9966, $lightness: -10%)); - } + // &:hover { + // cursor: pointer; + // background: linear-gradient(color.adjust(#3a5e7e, $lightness: -1%), color.adjust(#2c9966, $lightness: -10%)); + // } - &:focus { - cursor: pointer; - background: linear-gradient(color.adjust(#3a5e7e, $lightness: -1%), color.adjust(#2c9966, $lightness: -10%)); - } + // &:focus { + // cursor: pointer; + // background: linear-gradient(color.adjust(#3a5e7e, $lightness: -1%), color.adjust(#2c9966, $lightness: -10%)); + // } - &:active { - cursor: pointer; - box-shadow: inset 0 3px 10px 1px color.adjust(#2c9966, $lightness: -3%); - } - } + // &:active { + // cursor: pointer; + // box-shadow: inset 0 3px 10px 1px color.adjust(#2c9966, $lightness: -3%); + // } + // } @else if $color == lightblue { - box-shadow: inset 0px 1px 0px 0px color.adjust(#388ed6, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px color.adjust(variables.$l-blue, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); - background: linear-gradient(#388ed6, #2b77b9); + background: linear-gradient(variables.$l-blue, variables.$l-blue-gradient); - border: variables.$thin-border-stroke color.adjust(#2b77b9, $lightness: -5%); + border: variables.$thin-border-stroke color.adjust(variables.$l-blue-gradient, $lightness: -5%); &:hover { cursor: pointer; - background: linear-gradient(color.adjust(#388ed6, $lightness: 10%), color.adjust(#2b77b9, $lightness: -10%)); + background: linear-gradient(color.adjust(variables.$l-blue, $lightness: 10%), color.adjust(variables.$l-blue-gradient, $lightness: -10%)); } &:focus { cursor: pointer; - background: linear-gradient(color.adjust(#388ed6, $lightness: 10%), color.adjust(#2b77b9, $lightness: -10%)); + background: linear-gradient(color.adjust(variables.$l-blue, $lightness: 10%), color.adjust(variables.$l-blue-gradient, $lightness: -10%)); } &:active { cursor: pointer; - box-shadow: inset 0px 3px 10px 1px color.adjust(#2b77b9, $lightness: -5%); + box-shadow: inset 0px 3px 10px 1px color.adjust(variables.$l-blue-gradient, $lightness: -5%); } } @else if $color == brightblue { - box-shadow: inset 0px 1px 0px 0px color.adjust(#55cef2, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); + box-shadow: inset 0px 1px 0px 0px color.adjust(variables.$b-blue-gradient, $lightness: 10%), 0px 2px 3px 1px rgba(0,0,0,.05); - background: linear-gradient(#55cef2, variables.$bright-blue); + background: linear-gradient(variables.$b-blue-gradient, variables.$bright-blue); border: variables.$thin-border-stroke color.adjust(variables.$bright-blue, $lightness: -10%); &:hover { cursor: pointer; - background: linear-gradient(color.adjust(#55cef2, $lightness: 5%), color.adjust(variables.$bright-blue, $lightness: -10%)); + background: linear-gradient(color.adjust(variables.$b-blue-gradient, $lightness: 5%), color.adjust(variables.$bright-blue, $lightness: -10%)); } &:focus { cursor: pointer; - background: linear-gradient(color.adjust(#55cef2, $lightness: 5%), color.adjust(variables.$bright-blue, $lightness: -10%)); + background: linear-gradient(color.adjust(variables.$b-blue-gradient, $lightness: 5%), color.adjust(variables.$bright-blue, $lightness: -10%)); } &:active { @@ -200,7 +200,7 @@ @else if $color == white { - background: linear-gradient(variables.$white, #f7f7f7); + background: linear-gradient(variables.$white, variables.$color-lightgray); border: variables.$thin-border-stroke variables.$main-border-color; box-shadow: inset 0px 1px 0px 0px variables.$white, 0px 1px 2px rgba(0,0,0,.05); color: variables.$medium-prim-color; @@ -209,14 +209,14 @@ &:hover { cursor: pointer; border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -4%), color.adjust(#f7f7f7, $lightness: -10%)); + background: linear-gradient(color.adjust(variables.$white, $lightness: -4%), color.adjust(variables.$color-lightgray, $lightness: -10%)); color: variables.$medium-prim-color; } &:focus { cursor: pointer; border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -2%); - background: linear-gradient(color.adjust(variables.$white, $lightness: -4%), color.adjust(#f7f7f7, $lightness: -10%)); + background: linear-gradient(color.adjust(variables.$white, $lightness: -4%), color.adjust(variables.$color-lightgray, $lightness: -10%)); color: variables.$medium-prim-color; } From 9e12f1bd677259c4613bd2aa7408cd7c9a6aa516 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 2 Sep 2025 10:18:57 +0200 Subject: [PATCH 03/11] Adjust published cell Make the published cell in the events table look like other cells with similar appearance. --- .../events/partials/PublishedCell.tsx | 14 ++--- src/styles/components/_popover.scss | 59 +------------------ src/styles/components/_tables.scss | 1 + 3 files changed, 8 insertions(+), 66 deletions(-) diff --git a/src/components/events/partials/PublishedCell.tsx b/src/components/events/partials/PublishedCell.tsx index 084bde911d..8c9e6c5516 100644 --- a/src/components/events/partials/PublishedCell.tsx +++ b/src/components/events/partials/PublishedCell.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; import { Event } from "../../../slices/eventSlice"; -import { Tooltip } from "../../shared/Tooltip"; import ButtonLikeAnchor from "../../shared/ButtonLikeAnchor"; import { enrichPublications } from "../../../thunks/assetsThunks"; import { useAppDispatch } from "../../../store"; @@ -9,6 +8,7 @@ import { Publication } from "../../../slices/eventDetailsSlice"; import { unwrapResult } from "@reduxjs/toolkit"; import { ParseKeys } from "i18next"; import { LuCirclePlay } from "react-icons/lu"; +import { Tooltip } from "@mui/material"; // References for detecting a click outside of the container of the popup listing publications of an event const containerPublications = React.createRef(); @@ -77,19 +77,17 @@ const PublishCell = ({ && publications[0].id === "engage-player"; return ( -
+ <> {onlyEngage && publications.length > 0 && ( - - - {t("YES")} - + + {t("YES")} )} {!onlyEngage && publications.length > 0 && ( <> - + setShowPopup(!showPopup)}>{t("YES")} {showPopup && ( @@ -124,7 +122,7 @@ const PublishCell = ({ )} )} -
+ ); }; diff --git a/src/styles/components/_popover.scss b/src/styles/components/_popover.scss index 8cf17f6181..08ee3571bc 100644 --- a/src/styles/components/_popover.scss +++ b/src/styles/components/_popover.scss @@ -1,71 +1,14 @@ @use "../base/variables"; -// controlling element of the popover -.popover-wrapper { - position: relative; -} - -.popover-wrapper__trigger { - color: #4D687E; - - &:hover { - text-decoration: underline; - } -} - .popover { position: absolute; width: 250px; - background: #efefef; + background: variables.$table-highlight; border-radius: variables.$main-border-radius; border: variables.$thin-border-stroke variables.$main-border-color; z-index: 1; } -.popover.popover-right { - &:after { - right: 100%; - top: 2px; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: transparent; - border-right-color: variables.$main-border-color; - border-width: 10px; - margin-top: 0; - } -} -@mixin popover-arrow() { - top: 0; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - border-color: transparent; - border-width: 10px; -} - -.popover.popover-left { - &:after { - @include popover-arrow(); - border-left-color: variables.$main-border-color; - left: 100%; - } -} - -.popover.popover-right { - &:after { - @include popover-arrow(); - right: 100%; - border-right-color: variables.$main-border-color; - } -} - .popover__header { background: variables.$main-border-color; height: 26px; diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss index 438380f259..a984df99e7 100644 --- a/src/styles/components/_tables.scss +++ b/src/styles/components/_tables.scss @@ -287,6 +287,7 @@ border-radius: inherit; color: variables.$ref-blue; padding: unset; + line-height: normal; &.action-cell-button { width: 17px; From 66ede6c72aa9afa839f48626f54ac1b7499331e2 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 2 Sep 2025 11:12:31 +0200 Subject: [PATCH 04/11] Progress bar leftover colors --- src/styles/components/_progress-bar.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/styles/components/_progress-bar.scss b/src/styles/components/_progress-bar.scss index 6df403295f..c9bfa74524 100644 --- a/src/styles/components/_progress-bar.scss +++ b/src/styles/components/_progress-bar.scss @@ -57,7 +57,6 @@ } &[aria-valuenow="0"] { - color: #777777; min-width: 30px; background-color: transparent; background-image: none; @@ -77,7 +76,7 @@ background: variables.$yellow; } &.strong { - background: #388ed6; + background: variables.$l-blue; } &.verystrong { background: linear-gradient(variables.$primary-color-green, variables.$primary-color-green-dark-1); From 3952dd8938dccbe8d4d467f8573b634a5c1df05c Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 2 Sep 2025 11:42:26 +0200 Subject: [PATCH 05/11] Remove unused css from wizard stepper --- src/styles/components/_steps.scss | 58 ------------------------------- 1 file changed, 58 deletions(-) diff --git a/src/styles/components/_steps.scss b/src/styles/components/_steps.scss index c05ede9c06..91f0e02fb3 100644 --- a/src/styles/components/_steps.scss +++ b/src/styles/components/_steps.scss @@ -66,7 +66,6 @@ align-items: center; svg { - color: #92a0ab; width: 20px; height: 20px; @@ -94,63 +93,6 @@ ); } - > a { - color: variables.$modal-nav-link-color; - margin: 0 10px; - position: relative; - line-height: $height + 30; - user-select: none; - - // Dot - &:after { - content: ""; - position: absolute; - top: -20px; - left: 50%; - margin-left: -5px; - background: variables.$modal-nav-link-color; - border-radius: 50%; - width: 12px; - height: 12px; - } - - // First line - &:first-child:before { - background: linear-gradient(to right, variables.$modal-nav-bg-color, variables.$modal-nav-border-color); - } - - // Last line - &:last-child:before { - background: linear-gradient(to right, variables.$modal-nav-border-color, variables.$modal-nav-bg-color); - } - - // Active step - &.active { - color: variables.$modal-nav-link-active-color; - font-weight: 600; - - // Active Dot - &:after { - width: 22px; height: 22px; - background: variables.$modal-nav-link-active-color; - margin-left: -11px; top: -25px; - } - } - - // Not complete dot - &.not-complete:after { - background: #92a0ab; - - // Generated by http://www.colorzilla.com/gradient-editor/ - background: -moz-radial-gradient(center, ellipse cover, rgba(238,239,240,1) 35%, rgba(146,160,171,1) 40%); - background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(35%,rgba(238,239,240,1)), color-stop(40%,rgba(146,160,171,1))); - background: -webkit-radial-gradient(center, ellipse cover, rgba(238,239,240,1) 35%,rgba(146,160,171,1) 40%); - background: -o-radial-gradient(center, ellipse cover, rgba(238,239,240,1) 35%,rgba(146,160,171,1) 40%); - background: -ms-radial-gradient(center, ellipse cover, rgba(238,239,240,1) 35%,rgba(146,160,171,1) 40%); - background: radial-gradient(ellipse at center, rgba(238,239,240,1) 35%,rgba(146,160,171,1) 40%); - } - } - &.MuiStepper-horizontal { .MuiStep-horizontal { word-break: break-word; From 58da7be5bfc5cc7e087d97be6aaa95ccfce80891 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 2 Sep 2025 11:42:54 +0200 Subject: [PATCH 06/11] Turn "OK" button colors to variables --- src/styles/components/_multi-value.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/components/_multi-value.scss b/src/styles/components/_multi-value.scss index 7e39ba95f0..7eb97f28a2 100644 --- a/src/styles/components/_multi-value.scss +++ b/src/styles/components/_multi-value.scss @@ -19,10 +19,10 @@ } &-green { - background: #4bcc8f; + background: variables.$primary-color-green-light-1; } &-red { - background: #ff0000; + background: variables.$red; } } From 90d84e5c0ffd24716271188eb91f2612f75af32b Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 2 Sep 2025 12:21:08 +0200 Subject: [PATCH 07/11] Normalize table border colors --- src/styles/base/_variables.scss | 1 + .../components/_table-filter-profiles.scss | 13 ++----------- src/styles/components/_tables.scss | 16 ++++++++-------- 3 files changed, 11 insertions(+), 19 deletions(-) diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index 55e0b113cb..d13a3e26c7 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -103,6 +103,7 @@ $table-highlight: color.adjust($light-prim-color, $lightness: 28%); $main-border-color: #c9d0d3; $light-border-color: #cfd3d5; +$lighter-border-color: #e2e2e2; $main-border-radius: 4px; $thin-border: 1px; $thin-border-stroke: $thin-border solid; diff --git a/src/styles/components/_table-filter-profiles.scss b/src/styles/components/_table-filter-profiles.scss index 509f3b82fd..95b325d6a1 100644 --- a/src/styles/components/_table-filter-profiles.scss +++ b/src/styles/components/_table-filter-profiles.scss @@ -61,15 +61,6 @@ font-size: 17px; } } // header - .footer-btn { - background: linear-gradient(variables.$off-white, #f0f2f5); - border-top: 1px solid color.adjust(#f0f2f5, $lightness: -10%); - border-bottom-left-radius: variables.$main-border-radius; - border-bottom-right-radius: variables.$main-border-radius; - display: block; - line-height: 30px; - text-align: center; - } // footer-btn } .df-profile-filters { @@ -99,8 +90,8 @@ li { display: flex; - border-top: 1px solid #e2e2e2; - border-bottom: 1px solid #e2e2e2; + border-top: 1px solid variables.$lighter-border-color; + border-bottom: 1px solid variables.$lighter-border-color; padding: 7px 10px; .remove { diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss index a984df99e7..c34b5a5e57 100644 --- a/src/styles/components/_tables.scss +++ b/src/styles/components/_tables.scss @@ -54,7 +54,7 @@ } .main-tbl { - $border-color: #c7ced3; + $border-color: variables.$main-border-color; $col-padding: 7px; width: 100%; @@ -68,8 +68,8 @@ background: variables.$color-lightgray; > td { - border-top: 1px solid #e2e2e2; - border-bottom: 1px solid #e2e2e2; + border-top: 1px solid variables.$lighter-border-color; + border-bottom: 1px solid variables.$lighter-border-color; > .hidden-input { background: variables.$color-lightgray; @@ -86,7 +86,7 @@ &.sortable { cursor: pointer; &:hover { - background: linear-gradient(to bottom, variables.$off-white, color.adjust(#f1f3f5, $lightness: -3%)); + background: linear-gradient(to bottom, variables.$off-white, color.adjust(variables.$off-white, $lightness: -5%)); } &:active { box-shadow: inset 0 3px 10px 2px rgba(variables.$black, 0.05); @@ -111,11 +111,11 @@ } // Aesthetic Style - border-right: 1px solid #c9d0d6; + border-right: 1px solid variables.$main-border-color; border-left: 1px solid variables.$white; border-bottom: 1px solid $border-color; user-select: none; - background: linear-gradient(to bottom, color.adjust(variables.$off-white, $lightness: -1%), color.adjust(#f1f3f5, $lightness: -3%)); + background: linear-gradient(to bottom, color.adjust(variables.$off-white, $lightness: -1%), color.adjust(variables.$off-white, $lightness: -5%)); // Typography line-height: 35px; @@ -131,7 +131,7 @@ // Darken tbl when sorted on &.col-sort { - background: color.adjust(#f1f3f5, $lightness: -2%); + background: color.adjust(variables.$off-white, $lightness: -4%); box-shadow: inset 0 3px 10px 2px rgba(variables.$black, 0.05); } @@ -274,7 +274,7 @@ max-width: 800px; padding: $col-padding; color: variables.$medium-prim-color; - border-right: 1px solid #c9d0d6; + border-right: 1px solid variables.$main-border-color; line-height: 20px; vertical-align: middle; From 6cb7168dd63b6b7b6d5818e110e8fed91cfcbff4 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 2 Sep 2025 16:05:45 +0200 Subject: [PATCH 08/11] Normalize various table colors --- src/styles/base/_variables.scss | 2 ++ src/styles/components/modals/_header.scss | 3 +- src/styles/components/modals/_modal-base.scss | 2 +- .../components/modals/_modal-components.scss | 6 ++-- src/styles/components/modals/_nav.scss | 2 +- src/styles/mixins/_button.scss | 2 +- src/styles/views/_core.scss | 33 ++++--------------- src/styles/views/_statistics.scss | 3 +- src/styles/views/modals/_edit-table-view.scss | 6 ++-- 9 files changed, 21 insertions(+), 38 deletions(-) diff --git a/src/styles/base/_variables.scss b/src/styles/base/_variables.scss index d13a3e26c7..39c4ec22e6 100644 --- a/src/styles/base/_variables.scss +++ b/src/styles/base/_variables.scss @@ -51,6 +51,7 @@ $off-white: $primary-color-white; $bright-blue: #4da1f7; $ref-blue: #1d5888; +$ref-blue-button: #069; $red: #fa1919; $alt-red: #e45253; $orange: #ff8c00; @@ -82,6 +83,7 @@ $global-text-color: $medium-prim-color; // ---------------------------------------- $body-background: $off-white; +$table-title-color: #46647e; $header-link-color: #435263; $color-link: $medium-prim-color; $color-link-hover: $dark-prim-color; diff --git a/src/styles/components/modals/_header.scss b/src/styles/components/modals/_header.scss index cb6f953444..9a77e58b63 100644 --- a/src/styles/components/modals/_header.scss +++ b/src/styles/components/modals/_header.scss @@ -1,3 +1,4 @@ +@use "sass:color"; @use "../../base/variables"; /** @@ -29,7 +30,7 @@ width: 100%; height: 40px; line-height: 40px; - background: linear-gradient(to bottom, #fbfbfb, #e8e8e8); + background: linear-gradient(to bottom, variables.$color-lightgray, color.adjust(variables.$color-lightgray, $lightness: -7%)); border-bottom: 1px solid variables.$main-border-color; border-bottom-left-radius: variables.$main-border-radius; border-bottom-right-radius: variables.$main-border-radius; diff --git a/src/styles/components/modals/_modal-base.scss b/src/styles/components/modals/_modal-base.scss index f62b8a32cd..5f63ce21ce 100644 --- a/src/styles/components/modals/_modal-base.scss +++ b/src/styles/components/modals/_modal-base.scss @@ -204,7 +204,7 @@ box-sizing: border-box; height: $height; line-height: $height; - background: linear-gradient(to bottom, variables.$white, #f3f5f6); + background: linear-gradient(to bottom, variables.$white, color.adjust(variables.$off-white, $lightness: -3%)); border-bottom: 1px solid variables.$main-border-color; border-top-left-radius: variables.$main-border-radius; border-top-right-radius: variables.$main-border-radius; diff --git a/src/styles/components/modals/_modal-components.scss b/src/styles/components/modals/_modal-components.scss index 666e3a2f67..7910d21204 100644 --- a/src/styles/components/modals/_modal-components.scss +++ b/src/styles/components/modals/_modal-components.scss @@ -138,15 +138,15 @@ } } - .active { - background: #BDDAF1; + &.active { + background: variables.$color-lightgray; //BDDAF1; } } } .add-comment { background: variables.$off-white; - border-top: variables.$thin-border-stroke #e9e9e9; + border-top: variables.$thin-border-stroke variables.$lighter-border-color; border-bottom-left-radius: variables.$main-border-radius; border-bottom-right-radius: variables.$main-border-radius; height: 191px; diff --git a/src/styles/components/modals/_nav.scss b/src/styles/components/modals/_nav.scss index bb109ca4be..5b704a29ce 100644 --- a/src/styles/components/modals/_nav.scss +++ b/src/styles/components/modals/_nav.scss @@ -77,7 +77,7 @@ position: absolute; top: 10px; right: 0px; - background: #db3232; + background: variables.$red; line-height: 14px; color: variables.$white; font-size: 10px; diff --git a/src/styles/mixins/_button.scss b/src/styles/mixins/_button.scss index 00fd82e6e5..a59616b655 100644 --- a/src/styles/mixins/_button.scss +++ b/src/styles/mixins/_button.scss @@ -251,7 +251,7 @@ button { font-weight: inherit; font-family: inherit; - color: #069; + color: variables.$ref-blue-button; } // Buttons diff --git a/src/styles/views/_core.scss b/src/styles/views/_core.scss index ba40fc84ab..f35186e7b9 100644 --- a/src/styles/views/_core.scss +++ b/src/styles/views/_core.scss @@ -30,23 +30,6 @@ body { min-width: variables.$app-min-width; } -.page-title { - - h1 { - font-size: 23px; - font-weight: 100; - color: #46647e; - padding: 0 0 6px; - margin: 0; - } - - h4 { - font-size: 11px; - color: variables.$medium-prim-color; - } -} - - .main-view { box-sizing: border-box; @@ -68,7 +51,7 @@ body { h1 { font-size: 23px; font-weight: 100; - color: #46647e; + color: variables.$table-title-color; padding: 0 0 6px; margin: 0; } @@ -82,12 +65,10 @@ body { .controls-container { margin-bottom: 20px; - // ## Refactor out to .page-title (Start) - > h1 { font-size: 23px; font-weight: 100; - color: #46647e; + color: variables.$table-title-color; padding: 0 0 6px; margin: 0; } @@ -97,8 +78,6 @@ body { color: variables.$medium-prim-color; } - // ## (End) - .filters-container { float: right; position: relative; @@ -151,10 +130,10 @@ body { font-size: 12px; font-weight: 600; text-decoration: none; - color: #717171; + color: variables.$color-gray; text-shadow: 0 1px 0 rgba(variables.$white, 1); border: variables.$thin-border-stroke variables.$main-border-color; - background: linear-gradient(to bottom, variables.$color-lightgray, #e9e9e9); + background: linear-gradient(to bottom, variables.$off-white, variables.$color-lightgray); // Pulled from Button Mixin (keep in sync with those styles) background: linear-gradient(variables.$white, variables.$color-lightgray); @@ -183,9 +162,9 @@ body { padding: 7px 10px; margin-right: 4px; border: none; - background: #616161; + background: variables.$medium-prim-color; box-shadow: inset 0 0 8px rgba(variables.$black, 0.5); - color: #f0f0f0; + color: variables.$off-white; text-shadow: 0 0 3px rgba(variables.$black, 0.5); } } diff --git a/src/styles/views/_statistics.scss b/src/styles/views/_statistics.scss index 21d35dede3..32057f7ebf 100644 --- a/src/styles/views/_statistics.scss +++ b/src/styles/views/_statistics.scss @@ -1,3 +1,4 @@ +@use "sass:color"; @use "../base/variables"; .statistics header { @@ -5,7 +6,7 @@ width: 100%; height: 40px; line-height: 40px; - background: linear-gradient(to bottom, #fbfbfb, #e8e8e8); + background: linear-gradient(to bottom, variables.$color-lightgray, color.adjust(variables.$color-lightgray, $lightness: -7%)); border-bottom: 1px solid variables.$main-border-color; border-top-left-radius: variables.$main-border-radius; border-top-right-radius: variables.$main-border-radius; diff --git a/src/styles/views/modals/_edit-table-view.scss b/src/styles/views/modals/_edit-table-view.scss index 5365889232..e2d608ecf7 100644 --- a/src/styles/views/modals/_edit-table-view.scss +++ b/src/styles/views/modals/_edit-table-view.scss @@ -71,7 +71,7 @@ border-radius: variables.$main-border-radius; cursor: move; border: variables.$thin-border-stroke variables.$main-border-color; - background: linear-gradient(to bottom, variables.$white, #f3f5f6); + background: linear-gradient(to bottom, variables.$white, color.adjust(variables.$off-white, $lightness: -3%)); color: color.adjust(variables.$grey, $lightness: -10%); font-weight: 600; text-shadow: 0px 1px 0px variables.$white; @@ -89,12 +89,12 @@ padding-left: 5px; &:hover { - background: linear-gradient(to bottom, variables.$white, color.adjust(#f3f5f6, $lightness: -2%)); + background: linear-gradient(to bottom, variables.$white, color.adjust(variables.$off-white, $lightness: -5%)); } &:active, &.being-dragged { - background: linear-gradient(to bottom, color.adjust(variables.$white, $lightness: -2%), color.adjust(#f3f5f6, $lightness: -3%)); + background: linear-gradient(to bottom, color.adjust(variables.$white, $lightness: -2%), color.adjust(variables.$off-white, $lightness: -6%)); cursor: move; border: variables.$thin-border-stroke color.adjust(variables.$main-border-color, $lightness: -5%); box-shadow: 0 0 4px rgba(0,0,0,0.1); From 58f6e4287b1b8016b2c6569a983289d47bd1bb69 Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 2 Sep 2025 16:22:11 +0200 Subject: [PATCH 09/11] Normalize statistics dropdown colors --- src/styles/views/_statistics.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/styles/views/_statistics.scss b/src/styles/views/_statistics.scss index 32057f7ebf..77fa6304ac 100644 --- a/src/styles/views/_statistics.scss +++ b/src/styles/views/_statistics.scss @@ -65,11 +65,10 @@ This file is generated by `grunt build`, do not edit it by hand. overflow: hidden; padding: 0 0 0 8px; height: 25px; - border: 1px solid #aaa; + border: 1px solid variables.$light-prim-color; border-radius: 5px; background-color: variables.$white; - background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, variables.$white), color-stop(50%, #f6f6f6), color-stop(52%, #eee), to(#f4f4f4)); - background: linear-gradient(variables.$white 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%); + background: linear-gradient(variables.$white 20%, variables.$color-lightgray 50%); background-clip: padding-box; -webkit-box-shadow: 0 0 3px variables.$white inset, 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 3px variables.$white inset, 0 1px 1px rgba(0, 0, 0, 0.1); From 80bb941829c2f47e183793bff3027f241417f58d Mon Sep 17 00:00:00 2001 From: Arnei Date: Tue, 2 Sep 2025 16:56:09 +0200 Subject: [PATCH 10/11] Normalize colors in various modals --- src/styles/views/modals/_embedded-code.scss | 3 +-- src/styles/views/modals/_registration.scss | 6 +----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/styles/views/modals/_embedded-code.scss b/src/styles/views/modals/_embedded-code.scss index 9e013416d0..0f7a0eba1f 100644 --- a/src/styles/views/modals/_embedded-code.scss +++ b/src/styles/views/modals/_embedded-code.scss @@ -23,7 +23,7 @@ .embedSizeButton { display: inline-block; - background-color: #e2e1e1; + background-color: variables.$table-highlight; border: 1px solid variables.$color-silver; border-radius: 10px; cursor: pointer; @@ -45,7 +45,6 @@ width: 100%; font-weight: bold; font-size: 15.4px; - color: #466DC3; } .size_620x349 { diff --git a/src/styles/views/modals/_registration.scss b/src/styles/views/modals/_registration.scss index 36b75c49da..c867a475ac 100644 --- a/src/styles/views/modals/_registration.scss +++ b/src/styles/views/modals/_registration.scss @@ -136,10 +136,6 @@ font-weight: 700; transform: translate3d(0, -35%, 0); opacity: 1; - color: #4b4b4b - } - - .form-control:focus + .form-control-placeholder { color: variables.$l-blue; } @@ -148,7 +144,7 @@ } .form-control:required + label:after { - color: #e32; + color: variables.$red; content: ' *'; display:inline; } From a6fb6e1c309e597cfef7ab797f9f17065833da30 Mon Sep 17 00:00:00 2001 From: Arnei Date: Mon, 8 Sep 2025 17:26:44 +0200 Subject: [PATCH 11/11] Fix chevron color In the table heeader, fix both sorting chevrons being colored as "active", instead of only one. Also make the active chevron darker to be more easily recognizable. --- src/components/shared/Table.tsx | 2 +- src/styles/components/_tables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/shared/Table.tsx b/src/components/shared/Table.tsx index d880ee206c..574fbdf2de 100644 --- a/src/components/shared/Table.tsx +++ b/src/components/shared/Table.tsx @@ -209,7 +209,7 @@ const Table = ({ className={cn("chevron-up", { active: reverse === "ASC" && column.name === sortBy })} /> diff --git a/src/styles/components/_tables.scss b/src/styles/components/_tables.scss index c34b5a5e57..243bd98f8c 100644 --- a/src/styles/components/_tables.scss +++ b/src/styles/components/_tables.scss @@ -195,7 +195,7 @@ color: variables.$grey; } .active { - color: variables.$l-blue; + color: variables.$color-darkgray; } } }