From e1f2245780a2df149af60516cedc7f1f589d3ae0 Mon Sep 17 00:00:00 2001
From: Darya Plotnytska <d.plotnytska.s@gmail.com>
Date: Thu, 4 Jan 2024 11:13:42 +0100
Subject: [PATCH] console: Update tabs component

---
 pkg/webui/components/tabs/story.js      | 2 +-
 pkg/webui/components/tabs/tab/tab.styl  | 9 ++++++---
 pkg/webui/components/tabs/tabs.styl     | 5 +----
 pkg/webui/styles/variables/generic.styl | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/pkg/webui/components/tabs/story.js b/pkg/webui/components/tabs/story.js
index 2548867409d..e1d43b5388d 100644
--- 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
index 265dc922ec4..387ff9faaa4 100644
--- 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
index 0db1cd04302..840e4ae1e5b 100644
--- 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
index 6ca958bebb0..456855fdd27 100644
--- 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
 }