Merge pull request #56 from Reloadly/feature/dark-mode-issue-fix

Dark mode fixes
Reloadly · Aug 2, 2024 · cecb37b · cecb37b
2 parents 2e217ba + cab426a
commit cecb37b
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 69 deletions.
diff --git 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/"
-}
+}
diff --git 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;
-        }
-    }
-}
+}
diff --git 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;
-    }
-}
+}
diff --git 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
-);
+    card-bg-color: #f2f4f8,
+);
diff --git a/src/styles/_themeing.scss b/src/styles/_themeing.scss
@@ -81,13 +81,42 @@
     --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);
 
     * {
         @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;
+        }
+    }
 }
diff --git a/src/styles/dialog.scss b/src/styles/dialog.scss
@@ -0,0 +1,115 @@
+@import "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;
+    }
+}
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -4,3 +4,4 @@
 @import "forms";
 @import "button";
 @import "table";
+@import "dialog";