console: Update tabs component

TheThingsNetwork · Jan 15, 2024 · e1f2245 · e1f2245
1 parent fc35596
commit e1f2245
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/pkg/webui/components/tabs/story.js b/pkg/webui/components/tabs/story.js
@@ -86,7 +86,7 @@ export const WithIcons = () => {
     { title: 'Data', name: 'data', icon: 'data' },
   ]
 
-  return <Example tabs={tabs} active={tabs[0].name} narrow />
+  return <Example tabs={tabs} active={tabs[0].name} divider />
 }
 
 WithIcons.story = {

diff --git a/pkg/webui/components/tabs/tab/tab.styl b/pkg/webui/components/tabs/tab/tab.styl
@@ -21,13 +21,16 @@
 
 .tab-item
   display: flex
+  align-items: center
   white-space: nowrap
-  padding: $cs.m $cs.l
+  padding: $cs.m
+  gap: $cs.s
   text-align: center
   position: relative
   cursor: pointer
   user-select: none
   transition: color $ad.xs
+  color: #929196
 
   &-narrow
     padding: $cs.s $cs.m
@@ -37,8 +40,8 @@
     opacity: .4
 
   &-default:not(.tab-item-active)
-    pseudo-border-animated(3px, $c-divider)
+    pseudo-border-animated(3px, #1E5DFF)
 
   &-active
     pseudo-border(3px, $c-active-blue)
-    color: $tc-active
+    color: #29292B
diff --git a/pkg/webui/components/tabs/tabs.styl b/pkg/webui/components/tabs/tabs.styl
@@ -23,8 +23,5 @@
   &::-webkit-scrollbar
     display: none
 
-  .icon
-    margin-right: $cs.xs
-
 .divider
-  border-normal('bottom')
+  border-bottom: 1px solid #E8E7EC
diff --git a/pkg/webui/styles/variables/generic.styl b/pkg/webui/styles/variables/generic.styl
@@ -190,7 +190,7 @@ $br = {
   's': 0.4rem,
   'm': 0.5rem,
   'l': 0.75rem,
-  'xl': 0.9rem,
+  'xl': 1rem,
   'xxl': 1.25rem,
   'xl3': 3rem
 }