From 249ef47332adf8c5c5f7b63bbe7172b4b4add8a3 Mon Sep 17 00:00:00 2001 From: muhdszakari6 Date: Thu, 1 Aug 2024 14:42:13 +0100 Subject: [PATCH 1/4] Dark mode fixes --- package.json | 4 +- src/styles/_light-palette.scss | 6 +- src/styles/dialog.scss | 115 +++++++++++++++++++++++++++++++++ 3 files changed, 120 insertions(+), 5 deletions(-) create mode 100644 src/styles/dialog.scss diff --git a/package.json b/package.json index 1434ad7f..ee225c71 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reloadly-ui", - "version": "1.0.2-beta", + "version": "1.0.3-beta", "description": "Angular UI library", "repository": { "type": "git", @@ -71,4 +71,4 @@ "url": "https://github.com/Reloadly/reloadly-ui/issues" }, "homepage": "https://ui.reloadly.com/" -} \ No newline at end of file +} diff --git a/src/styles/_light-palette.scss b/src/styles/_light-palette.scss index 8b703955..c9d29171 100644 --- a/src/styles/_light-palette.scss +++ b/src/styles/_light-palette.scss @@ -16,7 +16,7 @@ $light-palette: ( reloadly-black-1: #334054, reloadly-black-2: #606d80, reloadly-black-3: #50565b, - reloadly-black-3-hover: #3e4246, + reloadly-black-3-hover: #f1f2f4, reloadly-black-4: #868d95, reloadly-black-5: #0000008f, reloadly-black-6: #38456c, @@ -47,5 +47,5 @@ $light-palette: ( input-bg-color: #ffffff, container-bg-color: #f3ebff, card-btn-border-color: #e0e6eb, - card-bg-color: #f2f4f8 -); \ No newline at end of file + card-bg-color: #f2f4f8, +); diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss new file mode 100644 index 00000000..fc070195 --- /dev/null +++ b/src/styles/dialog.scss @@ -0,0 +1,115 @@ +@import "/src/styles/variables"; + +.dialog { + background-color: var(--ash); + border-radius: $input-radius; + max-width: 600px; + color: var(--text-color); + + .title { + font-size: $font-size-xxl; + font-weight: 450; + text-align: center; + padding-top: $spacing-10; + } + + &-header { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--ash); + padding: $spacing-16 $spacing-32; + border-top-right-radius: $input-radius; + border-top-left-radius: $input-radius; + + h3 { + font-size: 28px; + } + } + + &-message { + font-size: $font-size-l; + text-align: center; + padding: $spacing-16 $spacing-32; + + span { + vertical-align: text-top; + } + } + + &-footer, + &-buttons { + display: flex; + justify-content: space-between; + padding: $spacing-16 $spacing-32; + } + + &-form-modal { + width: 95%; + background-color: var(--violet-5); + border-radius: $border-radius-l; + margin: 0; + position: relative; + + @media (min-width: 48em) { + width: auto; + } + + &-header { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding: $spacing-32 $spacing-24 0; + + h3 { + font-weight: 450; + font-size: 24px; + } + + .svg-icon { + width: 20px; + height: 20px; + margin-left: auto; + cursor: pointer; + } + } + + &-body, + &-footer { + padding: 0 $spacing-24 $spacing-24; + gap: 2%; + + .confirm-buttons { + width: 100%; + display: flex; + justify-content: space-between; + margin-top: $spacing-16; + } + } + } + + .svg-icon { + color: var(--violet); + } + + .text-advice { + font-size: $font-size-s; + + .sm-button-icon { + width: 12px; + height: 12px; + margin-right: $spacing-10; + align-self: center; + transition: all 0.5s; + } + } + + .close-btn { + position: absolute; + cursor: pointer; + top: 20px; + right: 20px; + } +} \ No newline at end of file From bcf51a653ff140f5b8fc499f9703dff14c572101 Mon Sep 17 00:00:00 2001 From: muhdszakari6 Date: Fri, 2 Aug 2024 10:00:10 +0100 Subject: [PATCH 2/4] Fix --- src/styles/styles.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/styles.scss b/src/styles/styles.scss index 8da932ad..d472ebaf 100644 --- a/src/styles/styles.scss +++ b/src/styles/styles.scss @@ -4,3 +4,4 @@ @import "forms"; @import "button"; @import "table"; +@import "dialog"; From 3eb1292ac57ccb94da5d45e4ec70c2f8d079e690 Mon Sep 17 00:00:00 2001 From: Johnny Date: Fri, 2 Aug 2024 12:07:16 +0300 Subject: [PATCH 3/4] fix import --- src/styles/dialog.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss index fc070195..255492d6 100644 --- a/src/styles/dialog.scss +++ b/src/styles/dialog.scss @@ -1,4 +1,4 @@ -@import "/src/styles/variables"; +@import "variables"; .dialog { background-color: var(--ash); From cab426a9b29b92e770239cf6788949f920771115 Mon Sep 17 00:00:00 2001 From: Johnny Date: Fri, 2 Aug 2024 13:33:39 +0300 Subject: [PATCH 4/4] fix light mode for card and menu elements --- src/lib/components/menu/menu.component.scss | 43 +---------------- src/lib/containers/card/card.component.scss | 23 +-------- src/styles/_themeing.scss | 52 +++++++++++++++++++++ 3 files changed, 54 insertions(+), 64 deletions(-) diff --git a/src/lib/components/menu/menu.component.scss b/src/lib/components/menu/menu.component.scss index 37ccab19..b6d8aee4 100644 --- a/src/lib/components/menu/menu.component.scss +++ b/src/lib/components/menu/menu.component.scss @@ -31,45 +31,4 @@ height: 100%; width: 100%; } -} - -.rld-light-theme { - .rld-menu { - box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08), - 0px 15px 35px 0px rgba(60, 66, 87, 0.12); - background-color: var(--rld-shade); - border: 1px solid var(--rld-menu-border-color); - border-radius: $spacing-4; - color: var(--rld-black-1); - - &__outer-wrapper { - // don't use 'transparent' because of transition - background-color: rgba($color: #ffffff, $alpha: 0.0); - } - - &__inner-wrapper { - padding: $spacing-16 0; - } - } -} - -.rld-dark-theme { - .rld-menu { - color: var(--rld-text-color); - - &__outer-wrapper { - @import "../../../styles/dark-palette"; - background: var(--rld-shade); - border-radius: $spacing-4; - background: linear-gradient(30deg, #{map.get($dark-palette, shade)} 0%, - #{map.get($dark-palette, reloadly-black-7)} 100%); - padding: $spacing-4; - } - - &__inner-wrapper { - background: var(--rld-black-3); - border-radius: $spacing-4; - padding: $spacing-16 0; - } - } -} +} \ No newline at end of file diff --git a/src/lib/containers/card/card.component.scss b/src/lib/containers/card/card.component.scss index afb052cb..5abb46ef 100644 --- a/src/lib/containers/card/card.component.scss +++ b/src/lib/containers/card/card.component.scss @@ -24,25 +24,4 @@ padding: $spacing-8 $spacing-32; } } -} - - -.rld-light-theme { - .rld-card { - box-shadow: 0px 1px 2px var(--rld-shadow-contrast-3), 0px 2px 6px 2px var(--rld-shadow-contrast-1_5); - } - - .rld-card__wrapper { - // don't use 'transparent' because of transition - background-color: rgba($color: #ffffff, $alpha: 0.0); - border-radius: $spacing-8; - } -} - -.rld-dark-theme { - .rld-card__wrapper { - @import "../../../styles/dark-palette"; - background: var(--rld-card-bg-color); - border-radius: $spacing-8; - } -} +} \ No newline at end of file diff --git a/src/styles/_themeing.scss b/src/styles/_themeing.scss index 8b5494f0..c975d568 100644 --- a/src/styles/_themeing.scss +++ b/src/styles/_themeing.scss @@ -81,6 +81,7 @@ --rld-shadow-contrast-1_5: rgba(0, 0, 0, 0.15); } +body:not(.rld-dark-theme), .rld-light-theme { @import "light-palette"; @include themeing($light-palette); @@ -88,6 +89,34 @@ * { @include theme-transition(); } + + .rld-card { + box-shadow: 0px 1px 2px var(--rld-shadow-contrast-3), 0px 2px 6px 2px var(--rld-shadow-contrast-1_5); + } + + .rld-card__wrapper { + // don't use 'transparent' because of transition + background-color: rgba($color: #ffffff, $alpha: 0.0); + border-radius: $spacing-8; + } + + .rld-menu { + box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08), + 0px 15px 35px 0px rgba(60, 66, 87, 0.12); + background-color: var(--rld-shade); + border: 1px solid var(--rld-menu-border-color); + border-radius: $spacing-4; + color: var(--rld-black-1); + + &__outer-wrapper { + // don't use 'transparent' because of transition + background-color: rgba($color: #ffffff, $alpha: 0.0); + } + + &__inner-wrapper { + padding: $spacing-16 0; + } + } } .rld-dark-theme { @@ -100,4 +129,27 @@ * { @include theme-transition(); } + + .rld-card__wrapper { + background: var(--rld-card-bg-color); + border-radius: $spacing-8; + } + + .rld-menu { + color: var(--rld-text-color); + + &__outer-wrapper { + background: var(--rld-shade); + border-radius: $spacing-4; + background: linear-gradient(30deg, #{map.get($dark-palette, shade)} 0%, + #{map.get($dark-palette, reloadly-black-7)} 100%); + padding: $spacing-4; + } + + &__inner-wrapper { + background: var(--rld-black-3); + border-radius: $spacing-4; + padding: $spacing-16 0; + } + } } \ No newline at end of file