From 4a9fed34f0728cb7d91390723737e377d88dea9b Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Tue, 4 Jul 2023 16:36:24 +0200
Subject: [PATCH] fix: profile tab borders

---
 src/pages/profile-page.css | 22 ++++++++++++++--------
 src/pages/profile-page.tsx |  3 +++
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/pages/profile-page.css b/src/pages/profile-page.css
index c7750bb..94ab2ec 100644
--- a/src/pages/profile-page.css
+++ b/src/pages/profile-page.css
@@ -119,10 +119,10 @@
 }
 
 .tabs-tab {
-  background: black;
+  background: #0A0A0A;
   background-clip: padding-box;
   color: white;
-  border: 1px solid black;
+  border: 1px solid #0A0A0A;
   border-bottom: 1px solid transparent;
   position: relative;
   cursor: pointer;
@@ -137,18 +137,24 @@
   font-style: normal;
   font-weight: 500;
   line-height: 24px;
+  display: flex;
+  flex-direction: column;
 }
 @media (max-width: 400px){
   .tabs-tab {
     font-size: 14px;
   }
 }
-.tabs-tab[data-state='active']:before {
-  content: '';
-  position: absolute;
-  top: 0; right: 0; bottom: 0; left: 0;
-  z-index: -1;
-  margin: -1px;
+
+.tab-border {
+  height: 1px;
+  margin-top: 12px;
+  background: transparent;
+  width: 100%;
+}
+
+.tabs-tab[data-state='active'] .tab-border {
+  height: 1px;
   background: linear-gradient(94.73deg, #2BD9FF 0%, #8C8DED 47.4%, #F838D9 100%);
 }
 
diff --git a/src/pages/profile-page.tsx b/src/pages/profile-page.tsx
index e1b9bc3..67faffc 100644
--- a/src/pages/profile-page.tsx
+++ b/src/pages/profile-page.tsx
@@ -149,12 +149,15 @@ export function ProfilePage() {
             >
               <Tabs.Trigger className="tabs-tab" value="top-zappers">
                 Top Zappers
+                <div className="tab-border"></div>
               </Tabs.Trigger>
               <Tabs.Trigger className="tabs-tab" value="past-streams">
                 Past Streams
+                <div className="tab-border"></div>
               </Tabs.Trigger>
               <Tabs.Trigger className="tabs-tab" value="schedule">
                 Schedule
+                <div className="tab-border"></div>
               </Tabs.Trigger>
             </Tabs.List>
             <Tabs.Content className="tabs-content" value="top-zappers">