From 84ecddc015b769e14228d44405417025cce02725 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Tue, 12 Aug 2025 00:17:28 +0330
Subject: [PATCH] improve: tab component with gradient border like design

---
 src/app/globals.css                 | 41 +++++++++++++++++++++++++++--
 src/components/tab/TabContainer.tsx |  2 +-
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 405cd60..8d533c5 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -27,6 +27,7 @@ input[type="number"]::-webkit-inner-spin-button {
 /* Firefox */
 input[type="number"] {
   -moz-appearance: textfield;
+  appearance: textfield;
 }
 
 input[type="password"]:not(:placeholder-shown) {
@@ -62,8 +63,10 @@ input[type="password"]:not(:placeholder-shown) {
 
 /* Hide scrollbar for IE, Edge and Firefox */
 .noscrollbar {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
 }
 
 /* width */
@@ -109,6 +112,39 @@ input:autofill {
   box-shadow: 0px 2px 16px 0px #00000014;
 }
 
+.gradient-border {
+  position: relative;
+  z-index: 0;
+  box-sizing: border-box;
+}
+
+.gradient-border::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 2px;
+  /* border thickness */
+  border-radius: inherit;
+  /* inherit border-radius from parent */
+  background: linear-gradient(to bottom right,
+      #FFFFFF 6.25%,
+      rgba(255, 253, 253, 0) 52.01%,
+      #FFFFFF 96.87%);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  pointer-events: none;
+  /* so it doesn't block interactions */
+  z-index: -1;
+  box-sizing: border-box;
+}
+
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -216,6 +252,7 @@ input:autofill {
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
diff --git a/src/components/tab/TabContainer.tsx b/src/components/tab/TabContainer.tsx
index 5306895..336f91c 100644
--- a/src/components/tab/TabContainer.tsx
+++ b/src/components/tab/TabContainer.tsx
@@ -36,7 +36,7 @@ export type TabContainerClassName = {
 
 export const TabContainerClassNames: TabContainerClassName = {
     wrapper: 'h-full',
-    scrollView: 'h-[72px] !pt-3 !pb-2 w-full overflow-y-hidden bg-[#FFFFFF70] justify-center border border-2 border-solid border-white rounded-[32px] inline-flex items-center gap-10',
+    scrollView: 'h-[72px] gradient-border !pt-3 !pb-2 w-full overflow-y-hidden bg-[#FFFFFF70] justify-center rounded-[32px] inline-flex items-center gap-10',
     header: '',
     headerDeactive: '',
     headerActive: '',