style: change tab switch to switch 2 styles

djeck1432 · Jan 22, 2025 · cc64803 · cc64803
1 parent de4bcd4
commit cc64803
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/frontend/src/pages/dashboard/Dashboard.jsx b/frontend/src/pages/dashboard/Dashboard.jsx
@@ -198,7 +198,7 @@ export default function Component({ telegramId }) {
 
                   <button
                     onClick={() => setActiveTab("borrow")}
-                    className={`tab ${activeTab === "borrow" ? 'active borrow' : ''}`}
+                    className={`tab ${activeTab === "borrow" ? 'active' : ''}`}
                   >
                     <BorrowIcon className="tab-icon" />
                     <span className="tab-title">Borrow</span>
@@ -208,7 +208,7 @@ export default function Component({ telegramId }) {
 
                   <button
                     onClick={() => setActiveTab("deposited")}
-                    className={`tab ${activeTab === "deposited" ? 'active deposited' : ''}`}
+                    className={`tab ${activeTab === "deposited" ? 'active' : ''}`}
                   >
                     <DepositIcon className="tab-icon" />
                     <span className="tab-title">Deposited</span>

diff --git a/frontend/src/pages/dashboard/dashboard.css b/frontend/src/pages/dashboard/dashboard.css
@@ -112,13 +112,13 @@ body {
   color: var(--nav-button-hover);
 }
 
-.tab.active.borrow {
+/* .tab.active.borrow {
   color: #ff35d3;
 }
 
 .tab.active.deposited {
   color: var(--nav-button-hover)
-}
+} */
 
 .tab-indicator-container {
   position: absolute;
@@ -133,24 +133,30 @@ body {
   position: absolute;
   bottom: 0;
   left: 0;
-  width: 100%;
+  /* width: 100%; */
   height: 100%;
   transition: transform 0.3s ease;
 }
 
 .tab-indicator.collateral {
-  background: linear-gradient(90deg, #49abd2 0%, rgba(40, 16, 41, 0) 100%);
-  transform: translateX(0);
+  /* background: linear-gradient(90deg, #49abd2 0%, rgba(40, 16, 41, 0) 100%);
+  transform: translateX(0); */
+  width: 213px;
+  background: var(--nav-button-hover);
 }
 
 .tab-indicator.borrow {
-  background: linear-gradient(90deg, rgba(40, 16, 41, 0) 0%, #ff35d3 100%, rgba(40, 16, 41, 0) 0%,);
-  transform: translateX(0);
+  /* background: linear-gradient(90deg, rgba(40, 16, 41, 0) 0%, #ff35d3 100%, rgba(40, 16, 41, 0) 0%,);
+  transform: translateX(0); */
+  width: 155px;
+  background: var(--nav-button-hover);
 }
 
 .tab-indicator.deposited {
-  background: linear-gradient(90deg, rgba(40, 16, 41, 0) 0%, #74d6fd 100%);
-  transform: translateX(0);
+  /* background: linear-gradient(90deg, rgba(40, 16, 41, 0) 0%, #74d6fd 100%);
+  transform: translateX(0); */
+  width: 155px;
+  background: var(--nav-button-hover);
 }
 
 .tab-icon {