From 8db88378694a74ff81781223a8172b85b6231e6a Mon Sep 17 00:00:00 2001 From: benji-bitfly Date: Mon, 29 Jul 2024 16:18:36 +0200 Subject: [PATCH 1/3] Add `our` style changes to toast messages. wip. BIDS-3206. --- frontend/assets/css/colors.scss | 24 ++++- frontend/assets/css/fonts.scss | 21 ++++ frontend/assets/css/prime.scss | 184 +++++++++++++++++--------------- 3 files changed, 141 insertions(+), 88 deletions(-) diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss index c422961f7..a91529917 100644 --- a/frontend/assets/css/colors.scss +++ b/frontend/assets/css/colors.scss @@ -20,15 +20,20 @@ --dark-blue: #2f2e42; --purple-blue: #3e4461; --light-purple-blue: #545C7E; - --blue: #2e82ae; + --sky-blue:#CDE3EE; --light-blue: #66bce9; - --melllow-blue: #7DB5EC; + --blue: #2e82ae; + --dark-blue: #116897; + --mint-green: #D3E4D4; --flashy-green: #90ed7d; --light-green: #4e7451; --green: #7dc382; + --dark-green: #346f39; --flashy-red: #f3454a; --light-red: #d42127; --dark-red: #ce3438; + --bold-red: #b10b11; + --pastel-red: #F1C5C6; --yellow: #ffd600; --purple: #9747ff; --light-orange: #e77f27; @@ -124,6 +129,19 @@ --toggle-button-slider-color: var(--light-grey); + --toast-background-color--success: var(--dark-green); + --toast-background-success-color: var(--mint-green); + --toast-border-sucess-color: var(--dark-green); + + --toast-message-info-color: var(--dark-blue); + --toast-background-info-color: var(--sky-blue); + --toast-border-info-color: var(--dark-blue); + + --toast-message-error-color: var(--bold-red); + --toast-background-error-color: var(--pastel-red); + --toast-border-error-color: var(--bold-red); + + &.dark-mode { --primary-color: var(--primary-orange); --primary-contrast-color: var(--light-black); @@ -185,4 +203,4 @@ --list-hover-background: var(--dark-grey); --list-hover-descrete-color: var(--grey); } -} +} \ No newline at end of file diff --git a/frontend/assets/css/fonts.scss b/frontend/assets/css/fonts.scss index b6433635c..782e4c34e 100644 --- a/frontend/assets/css/fonts.scss +++ b/frontend/assets/css/fonts.scss @@ -277,6 +277,27 @@ h1 { font-weight: var(--button_font_weight); } + .button_text{ @include button_text } + +@mixin text-toast(){ + font-family:var(--roboto-family); + font-size:var(--standard_text_font_size); + font-weight: var(--roboto-bold); +} + +.text-toast{ + @include text-toast +} + +@mixin text-toast--sm(){ + font-family:var(--roboto-family); + font-size: var(--small_text_font_size); + font-weight: var(--roboto-regular); +} + +.text-toast--sm{ + @include text-toast--sm +} \ No newline at end of file diff --git a/frontend/assets/css/prime.scss b/frontend/assets/css/prime.scss index 2e6202af7..9ca73ff9c 100644 --- a/frontend/assets/css/prime.scss +++ b/frontend/assets/css/prime.scss @@ -225,93 +225,107 @@ // Toast // https://primevue.org/toast/ -// TODO: apply our styles .p-toast { opacity: 1; + + .p-toast-message { + margin: 0 0 1rem 0; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: var(--border-radius); + + &-content { + padding: 1rem; + border-width: 0 0 0 6px; + + .p-toast-message-text { + margin: 0 0 0 1rem; + } + + .p-toast-message-icon { + font-size: 2rem; + + &.p-icon { + width: 1rem; + height: 1rem; + align-self: center; + } + } + + .p-toast-summary { + @include text-toast; + } + + .p-toast-detail { + color: var(--light-black); + margin: 0.5rem 0 0 0; + @include text-toast--sm; + } + } + + .p-toast-icon-close { + width: 2rem; + height: 2rem; + border-radius: 50%; + background: transparent; + transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; + + &:hover { + background: rgba(255, 255, 255, 0.5); + } + + &:focus-visible { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 0.2rem #a7f3d0; + } + } + + &.p-toast-message-info { + border: solid var(--toast-border-info-color) 1px; + background: var(--toast-background-info-color); + color: var(--toast-message-info-color); + + .p-toast-message-icon, + .p-toast-icon-close { + color: var(--toast-message-info-color); + } + } + + &.p-toast-message-success { + border: solid var(--toast-border-sucess-color) 1px; + background: var(--toast-background-success-color); + color: var(--toast-background-color--success); + + .p-toast-message-icon, + .p-toast-icon-close { + color: var(--toast-background-color--success); + } + } + + &.p-toast-message-warn { + border: solid var(--toast-border-error-color) 1px; + background: var(--toast-background-error-color); + color: var(--primary-color); + + .p-toast-message-icon, + .p-toast-icon-close { + color: var(--primary-color); + } + } + + &.p-toast-message-error { + border: solid var(--toast-border-error-color) 1px; + background: var(--toast-background-error-color); + color: var(--toast-message-error-color); + + .p-toast-message-icon, + .p-toast-icon-close { + color: var(--toast-message-error-color); + } + } + } } -.p-toast .p-toast-message { - margin: 0 0 1rem 0; - box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); - border-radius: var(--border-radius); -} -.p-toast .p-toast-message .p-toast-message-content { - padding: 1rem; - border-width: 0 0 0 6px; -} -.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { - margin: 0 0 0 1rem; -} -.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon { - font-size: 2rem; -} -.p-toast - .p-toast-message - .p-toast-message-content - .p-toast-message-icon.p-icon { - width: 2rem; - height: 2rem; -} -.p-toast .p-toast-message .p-toast-message-content .p-toast-summary { - font-weight: 700; -} -.p-toast .p-toast-message .p-toast-message-content .p-toast-detail { - margin: 0.5rem 0 0 0; -} -.p-toast .p-toast-message .p-toast-icon-close { - width: 2rem; - height: 2rem; - border-radius: 50%; - background: transparent; - transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; -} -.p-toast .p-toast-message .p-toast-icon-close:hover { - background: rgba(255, 255, 255, 0.5); -} -.p-toast .p-toast-message .p-toast-icon-close:focus-visible { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; -} -.p-toast .p-toast-message.p-toast-message-info { - background: rgba(219, 234, 254, 0.7); - border: solid #3b82f6; - border-width: 0 0 0 6px; - color: #3b82f6; -} -.p-toast .p-toast-message.p-toast-message-info .p-toast-message-icon, -.p-toast .p-toast-message.p-toast-message-info .p-toast-icon-close { - color: #3b82f6; -} -.p-toast .p-toast-message.p-toast-message-success { - background: rgba(228, 248, 240, 0.7); - border: solid #1ea97c; - border-width: 0 0 0 6px; - color: #1ea97c; -} -.p-toast .p-toast-message.p-toast-message-success .p-toast-message-icon, -.p-toast .p-toast-message.p-toast-message-success .p-toast-icon-close { - color: #1ea97c; -} -.p-toast .p-toast-message.p-toast-message-warn { - background: rgba(255, 242, 226, 0.7); - border: solid #cc8925; - border-width: 0 0 0 6px; - color: #cc8925; -} -.p-toast .p-toast-message.p-toast-message-warn .p-toast-message-icon, -.p-toast .p-toast-message.p-toast-message-warn .p-toast-icon-close { - color: #cc8925; -} -.p-toast .p-toast-message.p-toast-message-error { - background: rgba(255, 231, 230, 0.7); - border: solid #ff5757; - border-width: 0 0 0 6px; - color: #ff5757; -} -.p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon, -.p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close { - color: #ff5757; -} + // Multiselect drop-down @@ -521,4 +535,4 @@ } } } -} +} \ No newline at end of file From 067d88ddbf9cbe6381ceb4e062206fa121ddd20d Mon Sep 17 00:00:00 2001 From: benji-bitfly Date: Wed, 31 Jul 2024 12:35:15 +0200 Subject: [PATCH 2/3] style: address code review comments on styling. BIDS-3206 --- frontend/assets/css/colors.scss | 5 +++-- frontend/assets/css/fonts.scss | 6 +++--- frontend/assets/css/prime.scss | 11 +++++------ 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/assets/css/colors.scss b/frontend/assets/css/colors.scss index a91529917..45387d8d9 100644 --- a/frontend/assets/css/colors.scss +++ b/frontend/assets/css/colors.scss @@ -20,8 +20,9 @@ --dark-blue: #2f2e42; --purple-blue: #3e4461; --light-purple-blue: #545C7E; - --sky-blue:#CDE3EE; + --sky-blue:#cde3ee; --light-blue: #66bce9; + --melllow-blue: #7db5eC; --blue: #2e82ae; --dark-blue: #116897; --mint-green: #D3E4D4; @@ -129,7 +130,7 @@ --toggle-button-slider-color: var(--light-grey); - --toast-background-color--success: var(--dark-green); + --toast-background-color-success: var(--dark-green); --toast-background-success-color: var(--mint-green); --toast-border-sucess-color: var(--dark-green); diff --git a/frontend/assets/css/fonts.scss b/frontend/assets/css/fonts.scss index 782e4c34e..92458a110 100644 --- a/frontend/assets/css/fonts.scss +++ b/frontend/assets/css/fonts.scss @@ -292,12 +292,12 @@ h1 { @include text-toast } -@mixin text-toast--sm(){ +@mixin text-toast-sm(){ font-family:var(--roboto-family); font-size: var(--small_text_font_size); font-weight: var(--roboto-regular); } -.text-toast--sm{ - @include text-toast--sm +.text-toast-sm{ + @include text-toast-sm } \ No newline at end of file diff --git a/frontend/assets/css/prime.scss b/frontend/assets/css/prime.scss index 9ca73ff9c..e116c77b0 100644 --- a/frontend/assets/css/prime.scss +++ b/frontend/assets/css/prime.scss @@ -229,7 +229,7 @@ opacity: 1; .p-toast-message { - margin: 0 0 1rem 0; + margin: var(--content-margin); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); border-radius: var(--border-radius); @@ -242,8 +242,7 @@ } .p-toast-message-icon { - font-size: 2rem; - + font-size: var(--logo_font_size); &.p-icon { width: 1rem; height: 1rem; @@ -258,7 +257,7 @@ .p-toast-detail { color: var(--light-black); margin: 0.5rem 0 0 0; - @include text-toast--sm; + @include text-toast-sm; } } @@ -294,11 +293,11 @@ &.p-toast-message-success { border: solid var(--toast-border-sucess-color) 1px; background: var(--toast-background-success-color); - color: var(--toast-background-color--success); + color: var(--toast-background-color-success); .p-toast-message-icon, .p-toast-icon-close { - color: var(--toast-background-color--success); + color: var(--toast-background-color-success); } } From d099d0488df8999aa2dbebe3dcd9f361c7560e64 Mon Sep 17 00:00:00 2001 From: benji-bitfly Date: Wed, 31 Jul 2024 13:46:33 +0200 Subject: [PATCH 3/3] style: replace the rem units with px or if possible with exisitng variables. BIDS-3206 --- frontend/assets/css/prime.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/assets/css/prime.scss b/frontend/assets/css/prime.scss index e116c77b0..dc3852f2b 100644 --- a/frontend/assets/css/prime.scss +++ b/frontend/assets/css/prime.scss @@ -234,18 +234,18 @@ border-radius: var(--border-radius); &-content { - padding: 1rem; + padding: var(--padding-large); border-width: 0 0 0 6px; .p-toast-message-text { - margin: 0 0 0 1rem; + margin: 0 0 0 16px; } .p-toast-message-icon { font-size: var(--logo_font_size); &.p-icon { - width: 1rem; - height: 1rem; + width: 16px; + height: 16px; align-self: center; } } @@ -256,14 +256,14 @@ .p-toast-detail { color: var(--light-black); - margin: 0.5rem 0 0 0; + margin: 8px 0 0 0; @include text-toast-sm; } } .p-toast-icon-close { - width: 2rem; - height: 2rem; + width: 32px; + height: 32px; border-radius: 50%; background: transparent; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; @@ -275,7 +275,7 @@ &:focus-visible { outline: 0 none; outline-offset: 0; - box-shadow: 0 0 0 0.2rem #a7f3d0; + box-shadow: 0 0 0 3.2px #a7f3d0; } } @@ -534,4 +534,4 @@ } } } -} \ No newline at end of file +}