From 4029b149ee3643f8e603c433136c7b74a5dd3df5 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 14 Nov 2022 14:25:24 -0800
Subject: [PATCH] Update tab styles

---
 src/renderer/components/tabs/index.tsx | 39 +++++++++++++++++++-------
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/tabs/index.tsx b/src/renderer/components/tabs/index.tsx
index 0757adf9b..bbf7610f0 100644
--- a/src/renderer/components/tabs/index.tsx
+++ b/src/renderer/components/tabs/index.tsx
@@ -7,22 +7,41 @@ import styled from 'styled-components';
 type TabsProps = MantineTabsProps;
 
 const StyledTabs = styled(MantineTabs)`
-  button[data-active] {
-    color: var(--main-fg);
-    border-color: var(--primary-color);
-    opacity: 1;
+  height: 100%;
 
-    &:hover {
-      border-color: var(--primary-color);
-    }
+  & .mantine-Tabs-tabsList {
+    padding-right: 1rem;
+    border-right: 1px solid var(--generic-border-color);
+  }
+
+  &.mantine-Tabs-tab {
+    background-color: var(--main-bg);
+  }
+
+  & .mantine-Tabs-panel {
+    padding: 0 1rem;
   }
 
   button {
-    color: var(--main-fg);
-    opacity: 0.6;
+    padding: 1rem;
+    color: var(--btn-subtle-fg);
 
     &:hover {
-      background-color: var(--btn-subtle-bg-hover);
+      color: var(--btn-subtle-fg-hover);
+      background: var(--btn-subtle-bg-hover);
+    }
+
+    transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+  }
+
+  button[data-active] {
+    color: var(--btn-primary-fg);
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+
+    &:hover {
+      background: var(--btn-primary-bg-hover);
+      border-color: var(--primary-color);
     }
   }
 `;