fix: update Tabs component

DistributedCollective · Oct 14, 2022 · bddb6bd · bddb6bd
1 parent 2ce3037
commit bddb6bd
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 38 deletions.
diff --git a/packages/tailwindcss-config/index.js b/packages/tailwindcss-config/index.js
@@ -55,7 +55,7 @@ module.exports = {
       'primary-20': '#F5A549',
       'primary-10': '#FFDAA7',
 
-      negative: '#FF6868',
+      negative: '#FF0D39',
       positive: '#72EADE',
 
       error: '#FF0000',

diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.module.css b/packages/ui/src/1_atoms/Tabs/Tabs.module.css
@@ -4,23 +4,14 @@
   .tabs {
     @apply inline-flex rounded-t items-center flex-nowrap overflow-auto;
 
-    &.primaryWithBorder,
     &.primary {
-      @apply bg-gray-80/65;
-    }
-
-    &.primaryWithBorder {
-      @apply border border-b-0 border-gray-50;
+      @apply border border-b-0 border-gray-50 bg-gray-90;
     }
   }
+
   .content {
-    &.primaryWithBorder,
     &.primary {
-      @apply bg-gray-80 rounded-b text-gray-10;
-    }
-
-    &.primaryWithBorder {
-      @apply border-b border-x border-gray-50;
+      @apply bg-gray-90 rounded-b text-gray-10 border-b border-x border-gray-50;
     }
   }
 }
diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.stories.tsx b/packages/ui/src/1_atoms/Tabs/Tabs.stories.tsx
@@ -46,8 +46,9 @@ Primary.args = {
   ],
   index: 0,
   contentClassName: 'p-6',
+  className: '',
   size: TabSize.normal,
-  type: TabType.primaryWithBorder,
+  type: TabType.primary,
 };
 
 export const Secondary = Template.bind();
@@ -56,7 +57,7 @@ Secondary.args = {
     {
       label: 'Default',
       content: <div>Default</div>,
-      activeClassName: 'text-primary-30',
+      activeClassName: 'text-primary-20',
       dataActionId: 'default',
     },
     {
@@ -81,6 +82,7 @@ Secondary.args = {
   ],
   index: 0,
   contentClassName: 'p-4',
+  className: '',
   size: TabSize.normal,
   type: TabType.secondary,
 };
diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.tsx b/packages/ui/src/1_atoms/Tabs/Tabs.tsx
@@ -28,7 +28,7 @@ export const Tabs: React.FC<TabsProps> = ({
   items,
   index,
   onChange,
-  className,
+  className = '',
   contentClassName,
   type = TabType.primary,
   size = TabSize.normal,

diff --git a/packages/ui/src/1_atoms/Tabs/Tabs.types.ts b/packages/ui/src/1_atoms/Tabs/Tabs.types.ts
@@ -6,5 +6,4 @@ export enum TabSize {
 export enum TabType {
   primary = 'primary',
   secondary = 'secondary',
-  primaryWithBorder = 'primaryWithBorder',
 }
diff --git a/packages/ui/src/1_atoms/Tabs/components/Tab/Tab.module.css b/packages/ui/src/1_atoms/Tabs/components/Tab/Tab.module.css
@@ -1,9 +1,8 @@
 .button {
   @apply cursor-pointer inline-flex box-border items-center justify-center text-center rounded cursor-pointer transition-colors relative;
 
-  &.primaryWithBorder,
   &.primary {
-    @apply border-t-2 border-t-transparent text-base text-gray-9 rounded-b-none h-12;
+    @apply border-t-2 border-t-transparent border-b text-base text-gray-10/50 rounded-b-none h-12;
     min-width: 10rem;
 
     &.normal {
@@ -15,16 +14,8 @@
     }
 
     &.active {
-      @apply text-gray-10 bg-gray-80;
+      @apply text-gray-10 bg-gray-90 border-x border-x-gray-50 pb-0.5 border-b-transparent;
     }
-  }
-
-  &.primaryWithBorder {
-    @apply border-b;
-  }
-
-  &.primaryWithBorder.active {
-    @apply border-x border-x-gray-50 pb-0.5 border-b-transparent;
 
     &:last-child {
       @apply border-r-0;
@@ -33,14 +24,14 @@
     &:first-child {
       @apply border-l-0;
     }
-  }
 
-  &.primaryWithBorder:not(.active) {
-    @apply border-b-gray-50 border-r border-r-gray-50 rounded-none border-t-0;
+    &:not(.active) {
+      @apply bg-gray-80 border-b-gray-50 border-r border-r-gray-50 rounded-none border-t-0;
 
-    &:last-child,
-    &.noRightBorder {
-      @apply border-r-0;
+      &:last-child,
+      &.noRightBorder {
+        @apply border-r-0;
+      }
     }
   }
 
@@ -56,18 +47,18 @@
     }
 
     &.active {
-      @apply bg-gray-80;
+      @apply bg-gray-70;
     }
 
     &:not(.active) {
-      @apply text-gray-10 opacity-75;
+      @apply text-gray-10/75;
       &:not(:disabled):hover {
-        @apply opacity-100;
+        @apply text-gray-10;
       }
     }
   }
 
   &:disabled {
-    @apply text-gray-9/65 cursor-not-allowed;
+    @apply cursor-not-allowed;
   }
 }