change tab button

Staketab · Jul 17, 2024 · 9a06bee · 9a06bee
1 parent f2b693f
commit 9a06bee
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/ui/components/molecules/tabs/index.module.css b/ui/components/molecules/tabs/index.module.css
@@ -25,3 +25,18 @@
   padding-left: 0;
   padding-right: 0;
 }
+
+.activeBlackButton {
+  border: 1px solid transparent;
+}
+
+.activeBlackButton:hover {
+  background-color: #1a1a1b;
+  color: var(--col--light);
+}
+
+.inActiveBlackButton:hover {
+  border: 1px solid #1a1a1b;
+  background-color: var(--col--gray3);
+  color: #1a1a1b;
+}
diff --git a/ui/components/molecules/tabs/tabs.tsx b/ui/components/molecules/tabs/tabs.tsx
@@ -49,6 +49,9 @@ const Tabs = ({
                       onTabChange?.(item?.value);
                       setValue(item?.value);
                     }}
+                    className={classNames(style.activeBlackButton,{
+                      [style.inActiveBlackButton]: value !== item?.value,
+                    })}
                   >
                     {item.title}
                   </Button>