Merge pull request #1245 from casper-network/backport-light-theme

[UI] Light theme
casper-network · Aug 17, 2023 · 262abb7 · 262abb7
2 parents 9872fc8 + 4710c74
commit 262abb7
Show file tree

Hide file tree

Showing 19 changed files with 310 additions and 82 deletions.
diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
@@ -173,7 +173,6 @@ nav.menu {
     white-space: nowrap;
 }
 
-
 .main-wrapper {
     align-items: center;
 }
@@ -282,21 +281,99 @@ main > .container {
     }
 }
 
-html[data-theme="white"] {
-    .menu__list {
-        .menu__link {
-            color: var(--casper-color-royal);
+html[data-theme="light"] {
+    --black: var(--white);
+    --ifm-navbar-link-hover-color: var(--casperBlue);
+    --casperRed: var(--casperBlue);
+    --casperWhite: var(--liftedBlack);
+    --casperYellow: var(--casperBlue);
+    --halfTitleGray: var(--liftedBlack);
+
+    [class*="navbar"] {
+        background: var(--liftedBlack-light-theme);
+        [class*="wrapper"] {
+            background-color: var(--liftedBlack-light-theme);
         }
+    }
 
-        .menu__link--active.active {
-            color: var(--casper-color-black);
-            background: #ecfdf5;
+    [class*="container_search"] {
+        --casperYellow: var(--casperBlue);
+        > input {
+            background: var(--white);
+            color: var(--liftedBlack);
+            border: 1px solid var(--liftedBlack);
+        }
+        [class*="results_container"] {
+            border: 1px solid rgba(0, 0, 0, 0.25);
+            color: var(--liftedBlack);
+            background-color: var(--white);
+            a,
+            div {
+                border: none;
+            }
+        }
+    }
+
+    [class*="navbar_logo_container"],
+    [class*="social_icons"],
+    [class*="navbar_list"],
+    [class*="container_icon"],
+    [class*="logoCasper"] {
+        color: var(--liftedBlack);
+        --casperWhite: var(--liftedBlack);
+        svg {
+            fill: var(--liftedBlack);
+            path {
+                fill: var(--liftedBlack) !important;
+            }
         }
+    }
 
-        .menu__link--sublist {
+    [class*="navbar_list_container_button"] {
+        > button {
             color: var(--casper-color-black);
         }
     }
+
+    [class*="switchWrapper"] {
+        --liftedBlack: var(--white);
+        --casperWhite: var(--casperWhite-light-theme);
+    }
+
+    [class*="navbar--fixed-top"],
+    [class*="ExtendedNavbar"] {
+        [class*="dropdown_container"] {
+            background-color: var(--liftedBlack-light-theme);
+            border: 1px solid rgba(0, 0, 0, 0.25);
+        }
+    }
+
+    [class*="container_icon"] {
+        background-color: transparent;
+    }
+
+    [class*="sidebar"] {
+        background-color: var(--liftedBlack-light-theme);
+        [class*="dropdown_container"] {
+            border: none !important;
+        }
+    }
+
+    [class*="CookieModal"] {
+        color: black;
+    }
+
+    [class*="nav_category_title"] {
+        color: var(--casperWhite-light-theme);
+    }
+
+    @media (max-width: 996px) {
+        [class*="ExtendedNavbar"] {
+            [class*="SearchBox"] {
+                width: 100%;
+            }
+        }
+    }
 }
 
 html[data-theme="dark"] {

diff --git a/src/assets/scss/variables/_custom-properties.scss b/src/assets/scss/variables/_custom-properties.scss
@@ -3,6 +3,7 @@
     //Primary
     --casperRed: #ff2d2e;
     --black: #000000;
+    --white: #ffffff;
     --casperWhite: #f4f4f4;
     --liftedBlack: #141414;
     //Secondary
@@ -21,8 +22,24 @@
     //Tiles
     --casperTilesBrownLight: #96697c;
     //Social Media Logos
-    --socialMediaLogos: #c4c4c4
-
+    --socialMediaLogos: #c4c4c4;
+    //Nav Items
+    --halfTitleGray: #aeaeae;
     // Border radius
     //--borderRadius: 3px;
+
+    // Gradients
+    --pink-fade-small: #670e60;
+    --pinkLight-fade-small: #7b5464;
+    --pale-fade-small: #5e1585;
+    --tile-red-fade: #b92121;
+    --blue-fade: #12197d;
+    --lime-fade: #77a004;
+    //light-mode
+    --light-mode-dark-gray: #646464;
+    --light-mode-dark-gray-hover: #000000bf;
+
+    --casperWhite-light-theme: #141414;
+    --liftedBlack-light-theme: #f4f4f4;
 }
+
diff --git a/src/icons/index.tsx b/src/icons/index.tsx
@@ -124,6 +124,30 @@ const icons = {
             <path d="M1 6.85L8.09677 14L21 1" />
         </svg>
     ),
+    moon: (
+        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M10.8877 20.2069C8.09143 20.2069 5.46776 19.1231 3.49989 17.1553C1.53201 15.1875 0.448303 12.5637 0.448303 9.76744C0.447886 7.83846 0.982 5.94709 1.99136 4.30326C3.00072 2.65944 4.44585 1.32746 6.16634 0.455165C6.34335 0.364934 6.54301 0.328837 6.7404 0.351381C6.9378 0.373925 7.12418 0.45411 7.27628 0.581928C7.42838 0.709745 7.53947 0.879533 7.59567 1.07009C7.65187 1.26066 7.6507 1.46355 7.5923 1.65345C7.10135 3.23923 7.0531 4.92902 7.45276 6.54023C7.85242 8.15143 8.68479 9.62278 9.85994 10.7953C10.7033 11.6449 11.7067 12.3188 12.8122 12.7779C13.9177 13.2371 15.1034 13.4724 16.3004 13.4702C17.2162 13.4709 18.1268 13.3336 19.0016 13.0628C19.1915 13.0044 19.3944 13.0032 19.585 13.0593C19.7756 13.1155 19.9454 13.2266 20.0733 13.3787C20.2011 13.5309 20.2813 13.7173 20.3038 13.9147C20.3263 14.1121 20.2902 14.3118 20.1999 14.4888C19.3276 16.2093 17.9957 17.6544 16.3518 18.6638C14.708 19.6732 12.8166 20.2073 10.8877 20.2069ZM6.13022 1.99058C4.79607 2.80232 3.69398 3.94464 2.93058 5.30703C2.16717 6.66941 1.76827 8.20576 1.77247 9.76744C1.77247 14.7936 5.86149 18.8828 10.8877 18.8828C12.4493 18.887 13.9857 18.4881 15.3481 17.7247C16.7105 16.9612 17.8528 15.8592 18.6646 14.525C17.8894 14.7044 17.0962 14.7948 16.3005 14.7945C14.9295 14.7971 13.5716 14.5278 12.3053 14.002C11.0391 13.4763 9.88974 12.7046 8.92375 11.7317C7.66884 10.4792 6.7538 8.92752 6.26503 7.22318C5.77625 5.51885 5.72986 3.71807 6.13022 1.99083V1.99058Z"
+                fill="white"
+            />
+        </svg>
+    ),
+    sun: (
+        <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M9.99962 4.60693C6.53149 4.60693 3.70996 7.42846 3.70996 10.8966C3.70996 14.3647 6.53149 17.1862 9.99962 17.1862C13.4677 17.1862 16.2893 14.3647 16.2893 10.8966C16.2893 7.42846 13.4677 4.60693 9.99962 4.60693ZM9.99962 15.8621C9.01753 15.8621 8.0575 15.5709 7.24092 15.0253C6.42435 14.4796 5.7879 13.7041 5.41208 12.7968C5.03625 11.8895 4.93791 10.8911 5.12951 9.92786C5.32111 8.96465 5.79403 8.07988 6.48847 7.38544C7.18291 6.691 8.06768 6.21808 9.03089 6.02648C9.99411 5.83489 10.9925 5.93322 11.8998 6.30905C12.8072 6.68488 13.5827 7.32132 14.1283 8.1379C14.6739 8.95447 14.9651 9.9145 14.9651 10.8966C14.9636 12.2131 14.44 13.4752 13.5091 14.4061C12.5782 15.337 11.3161 15.8606 9.99962 15.8621Z"
+                fill="#141414"
+            />
+            <path d="M10.6618 0.965576H9.33765V2.95178H10.6618V0.965576Z" fill="#141414" />
+            <path d="M10.6618 18.8414H9.33765V20.8276H10.6618V18.8414Z" fill="#141414" />
+            <path d="M19.931 10.2346H17.9448V11.5588H19.931V10.2346Z" fill="#141414" />
+            <path d="M2.05505 10.2346H0.0688477V11.5588H2.05505V10.2346Z" fill="#141414" />
+            <path d="M16.4265 16.3871L15.4902 17.3234L16.8144 18.6475L17.7507 17.7112L16.4265 16.3871Z" fill="#141414" />
+            <path d="M3.18487 3.14557L2.24854 4.08191L3.57268 5.40605L4.50901 4.46972L3.18487 3.14557Z" fill="#141414" />
+            <path d="M3.57265 16.3871L2.24854 17.7113L3.18486 18.6476L4.50898 17.3234L3.57265 16.3871Z" fill="#141414" />
+            <path d="M16.8144 3.14571L15.4902 4.46985L16.4266 5.40618L17.7507 4.08204L16.8144 3.14571Z" fill="#141414" />
+        </svg>
+    ),
 };
 
 export default icons;
diff --git a/src/theme/Footer/ExtendedFooter/ExtendedFooter.module.scss b/src/theme/Footer/ExtendedFooter/ExtendedFooter.module.scss
@@ -76,8 +76,12 @@
             }
             a:hover {
                 @include transition(0.3s all);
-                color: var(--casperRed);
+                color: var(--casperRed) !important;
+            }
+            a:not(:hover) {
+                transition: none;
             }
+
             .button_modal_cookie:hover {
                 @include transition(0.3s all);
                 color: var(--casperRed);

diff --git a/src/theme/Footer/ExtendedFooter/Nav/Nav.module.scss b/src/theme/Footer/ExtendedFooter/Nav/Nav.module.scss
@@ -36,7 +36,11 @@
 
             a:hover {
                 @include transition(0.3s all);
-                color: var(--casperRed);
+                color: var(--casperRed) !important;
+            }
+
+            a:not(:hover) {
+                transition: none;
             }
         }
     }

diff --git a/src/theme/Modals/CookieModal/CookieModal.module.scss b/src/theme/Modals/CookieModal/CookieModal.module.scss
@@ -31,10 +31,12 @@
         @include mixins.custom_scrollbar(var(--black) var(--casperWhite));
 
         h2 {
+            color: var(--casperWhite);
             margin-bottom: 12px;
         }
 
         p {
+            color: var(--casperWhite);
             font-weight: 300;
         }
         a {

diff --git a/src/theme/Navbar/ExtendedNavbar/ExtendedNavbar.module.scss b/src/theme/Navbar/ExtendedNavbar/ExtendedNavbar.module.scss
@@ -26,24 +26,15 @@
         color: var(--casperWhite);
         margin: 0;
         align-items: unset;
+        padding: 0 30px;
 
         .navbar {
             display: flex;
             flex-direction: row;
             justify-content: space-between;
-            gap: 4%;
+            gap: 3%;
             align-items: center;
 
-            .navBarSectionBeginning,
-            .navBarSectionEnd {
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-                align-items: center;
-                gap: 4%;
-                width: 45%;
-            }
-
             .navbar_logo_container {
                 width: 163px;
                 min-width: 83px;
@@ -56,16 +47,25 @@
                 display: flex;
                 justify-content: center;
                 align-items: center;
+                cursor: pointer;
+
                 &_cancel,
                 &_menu {
                     position: absolute;
                     transform: scale(all);
-                    @include transition(0.3s ease-in);
+                    @include transition(transform 0.3s ease-in);
                     > svg {
                         path {
                             fill: var(--casperWhite);
                         }
                     }
+                    &:hover {
+                        > svg {
+                            path {
+                                fill: var(--casperRed);
+                            }
+                        }
+                    }
                 }
                 &_cancel_none,
                 &_menu_none {

diff --git a/src/theme/Navbar/ExtendedNavbar/Nav/Nav.module.scss b/src/theme/Navbar/ExtendedNavbar/Nav/Nav.module.scss
@@ -60,11 +60,11 @@
                 .navbar_list_item {
                     @include transition(0.3s all);
                     color: var(--casperRed);
-                }
-                svg {
-                    path {
-                        @include transition(0.3s all);
-                        fill: var(--casperRed);
+                    > svg {
+                        path {
+                            @include transition(0.3s all);
+                            fill: var(--casperRed) !important;
+                        }
                     }
                 }
             }
@@ -88,7 +88,6 @@
                 .navbar_list_item {
                     width: 100%;
                     justify-content: space-between;
-                    background-color: var(--liftedBlack);
                     z-index: 5;
                 }
             }

diff --git a/...eme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarColumn/NavBarGroup/NavBarGroup.module.scss b/...eme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarColumn/NavBarGroup/NavBarGroup.module.scss
@@ -6,7 +6,7 @@
     gap: 15px;
     padding-bottom: 20px;
     > span {
-        color: #aeaeae;
+        color: var(--halfTitleGray);
     }
 
     .linkList {

diff --git a/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarDropdown.module.scss b/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/NavBarDropdown.module.scss
@@ -7,7 +7,7 @@
     width: fit-content;
     overflow: hidden;
 
-    .dropdown {
+    .dropdown_container{
         /* In order to comply with the proposed design (0.25px border) 
         and given the impossibility of using units smaller than 1px, 
         we came to the following workaround that does the job using alpha color in the border. */
@@ -28,7 +28,7 @@
         margin-left: 15px;
         z-index: 0;
 
-        .dropdown {
+        .dropdown_container {
             flex-direction: column;
             border: none;
             background-color: var(--liftedBlack);

diff --git a/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/index.tsx b/src/theme/Navbar/ExtendedNavbar/NavBarDropdown/index.tsx
@@ -11,7 +11,7 @@ interface INavBarDropdownProps {
 export default function NavBarDropdown({ content, locale, closeNavBarHandler }: INavBarDropdownProps) {
     return (
         <div className={styles.wrapper} onClick={(e) => e.stopPropagation()}>
-            <div className={styles.dropdown}>
+            <div className={styles.dropdown_container}>
                 {content.columns &&
                     content.columns.map((column, i) => {
                         return <NavBarColumn key={`column_${i}`} {...{ locale, ...column }} closeNavBarHandler={closeNavBarHandler} />;

diff --git a/src/theme/Navbar/ExtendedNavbar/Search/SearchBox/index.tsx b/src/theme/Navbar/ExtendedNavbar/Search/SearchBox/index.tsx
@@ -70,7 +70,7 @@ export default function SearchBox({ placeholder, locale, siteUrl }: any) {
         setShowResults(false);
     }
     return (
-        <div ref={refInput} tabIndex={-1} className={styles.container} onFocus={() => setHasFocus(true)}>
+        <div ref={refInput} tabIndex={-1} className={styles.container_search} onFocus={() => setHasFocus(true)}>
             <input
                 id="inputSearch"
                 tabIndex={0}

diff --git a/src/theme/Navbar/ExtendedNavbar/Search/SearchBox/styles.module.scss b/src/theme/Navbar/ExtendedNavbar/Search/SearchBox/styles.module.scss
@@ -1,7 +1,7 @@
-.container {
+.container_search {
     position: relative;
     margin: 0;
-    width: 45%;
+    width: 25%;
     min-width: 15%;
 
     .container_icon_search {
@@ -48,7 +48,7 @@
             + .container_icon_search {
                 svg {
                     path {
-                        fill: var(--casperYellow);
+                        fill: var(--casperYellow) !important;
                     }
                 }
             }
@@ -57,7 +57,7 @@
                 &:hover {
                     svg {
                         path {
-                            fill: var(--casperYellow);
+                            fill: var(--casperYellow) !important;
                         }
                     }
                 }
@@ -67,6 +67,9 @@
 }
 
 @media (max-width: 996px) {
+    .container_search {
+        width: 100%;
+    }
     .container {
         width: 100%;
     }