chore: fix styles

deriv-com · Jul 30, 2024 · 8e9ceca · 8e9ceca
1 parent 27254d2
commit 8e9ceca
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 9 deletions.
diff --git a/src/components/layout/footer/footer.scss b/src/components/layout/footer/footer.scss
@@ -18,6 +18,11 @@
     &__icon {
         padding: 0.8rem;
 
+        svg > g > path,
+        svg > path {
+            fill: var(--text-prominent);
+        }
+
         @include mobile-or-tablet-screen {
             padding: 0;
         }
@@ -82,11 +87,11 @@
         align-items: center;
         flex-direction: column;
         padding: 0.8rem;
-    }
 
-    &-selected {
-        border-radius: 4px;
-        border: 1px solid var(--brand-blue, $color-green);
+        &-selected {
+            border-radius: 4px;
+            border: 1px solid var(--brand-blue, $color-green);
+        }
     }
 }
 

diff --git a/src/components/layout/header/MobileMenu/MenuContent.tsx b/src/components/layout/header/MobileMenu/MenuContent.tsx
@@ -26,11 +26,14 @@ export const MenuContent = () => {
                             key={index}
                         >
                             {item.map(({ LeftComponent, RightComponent, as, href, label, onClick, target }) => {
+                                const is_deriv_logo = label === 'Deriv.com';
                                 if (as === 'a') {
                                     return (
                                         <MenuItem
                                             as='a'
-                                            className='mobile-menu__content__items__item'
+                                            className={clsx('mobile-menu__content__items__item', {
+                                                'mobile-menu__content__items__icons': !is_deriv_logo,
+                                            })}
                                             disableHover
                                             href={href}
                                             key={label}
@@ -50,7 +53,9 @@ export const MenuContent = () => {
                                 return (
                                     <MenuItem
                                         as='button'
-                                        className='mobile-menu__content__items__item'
+                                        className={clsx('mobile-menu__content__items__item', {
+                                            'mobile-menu__content__items__icons': !is_deriv_logo,
+                                        })}
                                         disableHover
                                         key={label}
                                         leftComponent={

diff --git a/src/components/layout/header/MobileMenu/mobile-menu.scss b/src/components/layout/header/MobileMenu/mobile-menu.scss
@@ -4,7 +4,7 @@
     &__toggle {
         padding-inline-start: 1rem;
         padding-inline-end: 1rem;
-        border-inline-end: 1px solid rgb(242 243 244 / var(--tw-border-opacity));
+        border-inline-end: 1px solid var(--general-section-1);
         display: flex;
         height: 100%;
         cursor: pointer;
@@ -39,7 +39,7 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            border-bottom: 1px solid rgb(242 243 244 / var(--tw-border-opacity));
+            border-bottom: 1px solid var(--general-section-1);
             height: 7rem;
             cursor: pointer;
         }
@@ -55,7 +55,7 @@
             }
 
             &--bottom-border {
-                border-bottom: 1px solid rgb(242 243 244 / var(--tw-border-opacity));
+                border-bottom: 1px solid var(--general-section-1);
             }
 
             &__item {
@@ -66,6 +66,13 @@
             &--right-margin {
                 margin-inline-end: 1.6rem;
             }
+
+            &__icons {
+                g > path,
+                path {
+                    fill: var(--text-prominent);
+                }
+            }
         }
     }
 
@@ -85,6 +92,10 @@
             flex-direction: column;
             padding: 8px;
 
+            .deriv-text {
+                color: var(--text-prominent) !important;
+            }
+
             &-selected {
                 border: 1px solid var(--brand-blue, var(--brand-secondary));
                 border-radius: 4px;
@@ -103,4 +114,17 @@
             margin-inline-start: 1.6rem;
         }
     }
+
+    .deriv-drawer__container {
+        background: var(--general-section-1);
+    }
+
+    &__toggle,
+    &__back-btn,
+    .deriv-drawer__header__close-btn {
+        button > svg > path,
+        svg > path {
+            fill: var(--text-prominent);
+        }
+    }
 }
diff --git a/src/components/layout/header/PlatformSwitcher/platform-switcher.scss b/src/components/layout/header/PlatformSwitcher/platform-switcher.scss
@@ -2,5 +2,10 @@
     &__button {
         padding-inline-start: 1.6rem;
         padding-inline-end: 1.6rem;
+
+        svg > g > path,
+        &-chevron > path {
+            fill: var(--text-prominent);
+        }
     }
 }
diff --git a/src/components/layout/header/header.scss b/src/components/layout/header/header.scss
@@ -1,3 +1,5 @@
+@use 'components/shared/styles/constants' as *;
+
 .app-header {
     padding-inline-end: 20px;
 
@@ -6,4 +8,31 @@
         border-inline-end: 0.1rem solid var(--general-section-1);
         height: 3.2rem;
     }
+
+    &__account-settings,
+    .notifications__wrapper,
+    &__menu {
+        svg > path,
+        svg > g > path {
+            fill: var(--text-prominent);
+        }
+    }
+}
+
+.languages-modal {
+    background: var(--general-section-1);
+
+    .deriv-modal__header {
+        border-bottom: 2px solid var(--general-section-5);
+    }
+
+    .deriv-modal__close-icon {
+        path {
+            fill: var(--text-prominent);
+        }
+    }
+
+    .deriv-text {
+        color: var(--text-prominent) !important;
+    }
 }