feat: dark dropdown

reef-chain · May 17, 2024 · 1620c92 · 1620c92
1 parent d39bbef
commit 1620c92
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/src/ui-kit/components/atoms/Dropdown/Dropdown.tsx b/src/ui-kit/components/atoms/Dropdown/Dropdown.tsx
@@ -7,12 +7,14 @@ export interface Props {
   onClose: (...args: any[]) => any,
   position?: "top" | "bottomRight" | "bottomLeft" | "topRight" | "topLeft",
   className?: string,
+  isDarkMode?:boolean,
   children?: any
 }
 
 const Dropdown = ({
   isOpen,
   stayOpen,
+  isDarkMode,
   onClose,
   position,
   children,
@@ -51,14 +53,14 @@ const Dropdown = ({
     >
       <CSSTransition
         in={isOpen}
-        className='uik-dropdown__dropdown'
+        className={`uik-dropdown__dropdown ${isDarkMode?'dark':''}`}
         nodeRef={dropdown}
         timeout={150}
         unmountOnExit
       >
         <div
           ref={dropdown}
-          className='uik-dropdown__dropdown'
+          className={`uik-dropdown__dropdown ${isDarkMode?'dark':''}`}
         >
           { getChildren }
         </div>

diff --git a/src/ui-kit/components/atoms/Dropdown/DropdownItem.tsx b/src/ui-kit/components/atoms/Dropdown/DropdownItem.tsx
@@ -3,6 +3,7 @@ import Icon from './../Icon';
 export interface Props {
   text?: string,
   icon?: any,
+  isDarkMode?:boolean,
   onClick?: (...args: any[]) => any,
   className?: string,
   children?: any
@@ -12,6 +13,7 @@ const DropdownItem = ({
   text,
   icon,
   onClick,
+  isDarkMode,
   children,
   className
 }: Props): JSX.Element => (
@@ -32,7 +34,7 @@ const DropdownItem = ({
         />
       </div>
     }
-    <span className="uik-dropdown__item-text">{children}{text}</span>
+    <span className={`uik-dropdown__item-text ${isDarkMode?'dark':''}`}>{children}{text}</span>
   </button>
 );
 

diff --git a/src/ui-kit/styles/dropdown.scss b/src/ui-kit/styles/dropdown.scss
@@ -24,6 +24,15 @@
     padding: 8px;
     margin: 4px 0;
 
+    &.dark{
+      background: #38393f;
+      color: white ;
+
+      &:hover{
+        color: black;
+      }
+    }
+
     &.enter {
       opacity: 0;
       transform: scale(0.8);
@@ -83,11 +92,19 @@
         font-weight: 600;
         color: var(--text);
         user-select: none;
+
+        &.dark{
+          color: white;
+          &:hover{
+            color: black!important;
+          }
+        }
       }
 
-      &:hover {
+      &:hover  {
         transition: none;
         background-color: var(--border-color-light);
+        color: black!important;
         cursor: pointer;
 
         .uik-dropdown__item-icon {
@@ -96,7 +113,7 @@
           }
         }
       }
-      
+
       &:active {
         background-color: var(--border-color);
       }