From e02771cd5f6408199c4fdb6c9bade2b1da7e80e8 Mon Sep 17 00:00:00 2001
From: obah <olusojiobah@gmail.com>
Date: Thu, 23 Jan 2025 09:47:11 +0100
Subject: [PATCH] chore: fixes to resolve comments

---
 .../dashboard/dashboard-tab/DashboardTab.jsx  |  45 +++++
 .../dashboard/dashboard-tab/dashboardTab.css  | 160 ++++++++++++++++
 .../dashboard/deposited/Deposited.jsx         |   2 +-
 frontend/src/pages/dashboard/Dashboard.jsx    |  61 ++----
 frontend/src/pages/dashboard/dashboard.css    | 178 +++---------------
 5 files changed, 245 insertions(+), 201 deletions(-)
 create mode 100644 frontend/src/components/dashboard/dashboard-tab/DashboardTab.jsx
 create mode 100644 frontend/src/components/dashboard/dashboard-tab/dashboardTab.css

diff --git a/frontend/src/components/dashboard/dashboard-tab/DashboardTab.jsx b/frontend/src/components/dashboard/dashboard-tab/DashboardTab.jsx
new file mode 100644
index 000000000..24d5982b9
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-tab/DashboardTab.jsx
@@ -0,0 +1,45 @@
+import "./dashboardTab.css";
+import { ReactComponent as DepositIcon} from '../../../assets/icons/deposited.svg';
+import { ReactComponent as CollateralIcon } from '../../assets/icons/collateral_dynamic.svg';
+import { ReactComponent as BorrowIcon } from '../../assets/icons/borrow_dynamic.svg';
+
+function DashboardTab({activeTab, switchTab, tabs}) {
+    const { COLLATERAL, BORROW, DEPOSITED } = tabs;    
+
+    return (
+        <div className="tabs">
+            <button
+                onClick={() => switchTab(COLLATERAL)}
+                className={`tab ${activeTab === COLLATERAL ? 'active' : ''}`}
+            >
+                <CollateralIcon className="tab-icon" />
+                <span className="tab-title">Collateral & Earnings</span>
+            </button>
+
+            <div className="tab-divider" />
+
+            <button
+                onClick={() => switchTab(BORROW)}
+                className={`tab ${activeTab === BORROW ? 'active' : ''}`}
+            >
+                <BorrowIcon className="tab-icon" />
+                <span className="tab-title">Borrow</span>
+            </button>
+
+            <div className="tab-divider" />
+
+            <button
+                onClick={() => switchTab(DEPOSITED)}
+                className={`tab ${activeTab === DEPOSITED ? 'active' : ''}`}
+            >
+                <DepositIcon className="tab-icon" />
+                <span className="tab-title">Deposited</span>
+            </button>
+            <div className="tab-indicator-container">
+                <div className={`tab-indicator ${activeTab}`} />
+            </div>
+        </div>
+    )
+}
+
+export default DashboardTab;
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/dashboard-tab/dashboardTab.css b/frontend/src/components/dashboard/dashboard-tab/dashboardTab.css
new file mode 100644
index 000000000..96652b6e8
--- /dev/null
+++ b/frontend/src/components/dashboard/dashboard-tab/dashboardTab.css
@@ -0,0 +1,160 @@
+.tabs {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    align-items: center;
+}
+
+.tab {
+    flex: 1;
+    text-align: center;
+    padding: 0.5rem 0;
+    color: var(--gray);
+    cursor: pointer;
+    border: none;
+    background: none;
+    font-size: 18px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.tab.active {
+    color: var(--nav-button-hover);
+}
+
+/* .tab.active.borrow {
+    color: #ff35d3;
+  }
+  
+  .tab.active.deposited {
+    color: var(--nav-button-hover)
+  } */
+
+.tab-indicator-container {
+    position: absolute;
+    bottom: -16px;
+    left: 0;
+    width: calc(100% - 20px);
+    height: 1px;
+    overflow: hidden;
+}
+
+.tab-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    /* 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); */
+    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); */
+    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); */
+    width: 155px;
+    background: var(--nav-button-hover);
+}
+
+.tab-icon {
+    margin-right: 0.5rem;
+}
+
+.tab-title {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.tab-divider {
+    width: 3px;
+    height: 18px;
+    border-radius: 8px;
+    background-color: var(--border-color);
+    margin: 0 1rem;
+}
+
+@media (max-width: 768px) {
+    .tab-title {
+        font-size: 14px;
+        font-weight: 600;
+        white-space: nowrap;
+    }
+
+    .tab {
+        padding: 8px 0px;
+        font-size: 14px;
+        white-space: nowrap;
+    }
+
+    .tab-divider {
+        width: 2px;
+        height: 16px;
+        margin: 0 4px;
+        background-color: var(--border-color);
+    }
+
+    .tab-icon {
+        width: 20px;
+        height: 20px;
+        margin-right: 4px;
+    }
+
+    .tab-indicator-container {
+        bottom: -12px;
+        width: calc(100% - 16px);
+    }
+}
+
+@media (max-width: 550px) {
+    .tab-divider {
+        width: 2px;
+        height: 16px;
+        margin: 0 30px;
+        background-color: var(--border-color);
+    }
+}
+
+@media (max-width: 480px) {
+    .tab-divider {
+        width: 2px;
+        height: 16px;
+        margin: 0 18px;
+        background-color: var(--border-color);
+    }
+
+    .tab-title {
+        font-size: 14px;
+    }
+
+    .tab {
+        padding: 6px 0px;
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 400px) {
+    .tab-title {
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 350px) {
+    .tabs {
+        padding: 0;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/deposited/Deposited.jsx b/frontend/src/components/dashboard/deposited/Deposited.jsx
index b3139e1c9..d43b99a35 100644
--- a/frontend/src/components/dashboard/deposited/Deposited.jsx
+++ b/frontend/src/components/dashboard/deposited/Deposited.jsx
@@ -1,4 +1,4 @@
-import "./dashboard.css";
+import "./deposited.css";
 import { ReactComponent as EthIcon } from '../../../assets/icons/ethereum.svg';
 import { ReactComponent as StrkIcon } from '../../../assets/icons/strk.svg';
 import { ReactComponent as UsdIcon } from '../../../assets/icons/usd_coin.svg';
diff --git a/frontend/src/pages/dashboard/Dashboard.jsx b/frontend/src/pages/dashboard/Dashboard.jsx
index 879963e5b..b176b2b61 100644
--- a/frontend/src/pages/dashboard/Dashboard.jsx
+++ b/frontend/src/pages/dashboard/Dashboard.jsx
@@ -5,7 +5,6 @@ import { ReactComponent as StrkIcon } from '../../assets/icons/strk.svg';
 import { ReactComponent as UsdIcon } from '../../assets/icons/usd_coin.svg';
 import { ReactComponent as BorrowIcon } from '../../assets/icons/borrow_dynamic.svg';
 import { ReactComponent as TelegramIcon } from '../../assets/icons/telegram_dashboard.svg';
-import { ReactComponent as DepositIcon} from '../../assets/icons/deposited.svg';
 import Spinner from '../../components/ui/spinner/Spinner';
 import useDashboardData from '../../hooks/useDashboardData';
 import { useClosePosition, useCheckPosition } from '../../hooks/useClosePosition';
@@ -23,12 +22,12 @@ import clockIcon from 'assets/icons/clock.svg';
 import computerIcon from 'assets/icons/computer-icon.svg';
 import depositIcon from 'assets/icons/deposit.svg';
 import withdrawIcon from 'assets/icons/withdraw.svg';
-import Deposited from "../../components/dashboard/deposited/Deposited";
+import Deposited from 'components/dashboard/deposited/Deposited';
+import DashboardTab from 'components/dashboard/dashboard-tab/DashboardTab';
 
 export default function Component({ telegramId }) {
   const { walletId } = useWalletStore();
-  // const [isCollateralActive, setIsCollateralActive] = useState(true);
-  const [activeTab, setActiveTab] = useState("collateral");
+  const [activeTab, setActiveTab] = useState(DashboardTabs.COLLATERAL);
   const [showModal, setShowModal] = useState(false);
   const handleOpen = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
@@ -169,6 +168,12 @@ export default function Component({ telegramId }) {
     },
   ];
 
+  const DashboardTabs = {
+    COLLATERAL: 'collateral',
+    BORROW: 'borrow',
+    DEPOSITED: 'deposited'
+  }
+
   const depositedData = {eth: 1, strk: 12, usdc: 4, usdt: 9};
 
   return (
@@ -185,40 +190,10 @@ export default function Component({ telegramId }) {
             </div>
             <div className="dashboard-info-container">
               <div className="dashboard-info-card">
-                <div className="tabs">
-                  <button
-                    onClick={() => setActiveTab("collateral")}
-                    className={`tab ${activeTab === "collateral" ? 'active' : ''}`}
-                  >
-                    <CollateralIcon className="tab-icon" />
-                    <span className="tab-title">Collateral & Earnings</span>
-                  </button>
-
-                  <div className="tab-divider" />
-
-                  <button
-                    onClick={() => setActiveTab("borrow")}
-                    className={`tab ${activeTab === "borrow" ? 'active' : ''}`}
-                  >
-                    <BorrowIcon className="tab-icon" />
-                    <span className="tab-title">Borrow</span>
-                  </button>
 
-                  <div className="tab-divider" />
+              <DashboardTab activeTab={activeTab} switchTab={setActiveTab} tabs={DashboardTabs}/>
 
-                  <button
-                    onClick={() => setActiveTab("deposited")}
-                    className={`tab ${activeTab === "deposited" ? 'active' : ''}`}
-                  >
-                    <DepositIcon className="tab-icon" />
-                    <span className="tab-title">Deposited</span>
-                  </button>
-                  <div className="tab-indicator-container">
-                    {/* <div className={`tab-indicator ${isCollateralActive ? 'collateral' : 'borrow'}`} /> */}
-                    <div className={`tab-indicator ${activeTab}`} />
-                  </div>
-                </div>
-                {activeTab === "collateral" && (
+                {activeTab === DashboardTabs.COLLATERAL && (
                   <Collateral
                     getCurrentSumColor={getCurrentSumColor}
                     startSum={startSum}
@@ -227,23 +202,13 @@ export default function Component({ telegramId }) {
                   />
                 )} 
 
-                {activeTab === "borrow" && (
+                {activeTab === DashboardTabs.BORROW && (
                   <Borrow data={cardData} />
                 )}
 
-                {activeTab === "deposited" && (
+                {activeTab === DashboardTabs.DEPOSITED && (
                   <Deposited data={depositedData} />
                 )}
-                {/* {isCollateralActive ? (
-                  <Collateral
-                    getCurrentSumColor={getCurrentSumColor}
-                    startSum={startSum}
-                    currentSum={currentSum}
-                    data={cardData}
-                  />
-                ) : (
-                  <Borrow data={cardData} />
-                )} */}
               </div>
               <Button
                 className="redeem-btn"
diff --git a/frontend/src/pages/dashboard/dashboard.css b/frontend/src/pages/dashboard/dashboard.css
index 498b07b0e..b0a48373d 100644
--- a/frontend/src/pages/dashboard/dashboard.css
+++ b/frontend/src/pages/dashboard/dashboard.css
@@ -6,6 +6,7 @@ body {
     Helvetica,
     sans-serif;
 }
+
 .dashboard {
   min-height: 100vh;
   display: flex;
@@ -60,6 +61,7 @@ body {
   color: var(--second-primary);
   text-align: center;
 }
+
 .top-cards-dashboard {
   display: flex;
   justify-content: space-between;
@@ -86,96 +88,6 @@ body {
   gap: 20px;
 }
 
-.tabs {
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-  align-items: center;
-}
-
-.tab {
-  flex: 1;
-  text-align: center;
-  padding: 0.5rem 0;
-  color: var(--gray);
-  cursor: pointer;
-  border: none;
-  background: none;
-  font-size: 18px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tab.active {
-  color: var(--nav-button-hover);
-}
-
-/* .tab.active.borrow {
-  color: #ff35d3;
-}
-
-.tab.active.deposited {
-  color: var(--nav-button-hover)
-} */
-
-.tab-indicator-container {
-  position: absolute;
-  bottom: -16px;
-  left: 0;
-  width: calc(100% - 20px);
-  height: 1px;
-  overflow: hidden;
-}
-
-.tab-indicator {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  /* 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); */
-  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); */
-  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); */
-  width: 155px;
-  background: var(--nav-button-hover);
-}
-
-.tab-icon {
-  margin-right: 0.5rem;
-}
-
-.tab-title {
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.tab-divider {
-  width: 3px;
-  height: 18px;
-  border-radius: 8px;
-  background-color: var(--border-color);
-  margin: 0 1rem;
-}
-
 .telegram-button {
   position: relative;
   display: inline-block;
@@ -228,6 +140,7 @@ body {
 .form-alert-hex {
   margin-left: auto;
 }
+
 .icon {
   width: 32px;
   height: 32px;
@@ -239,6 +152,11 @@ body {
   justify-content: center;
   padding: 7px;
 }
+
+.tab-icon {
+  margin-right: 0.5rem;
+}
+
 .dashboard-info-container {
   display: grid;
   gap: 24px;
@@ -249,9 +167,11 @@ body {
     justify-items: center;
     width: 528px;
   }
+
   .dashboard-info-card {
     width: 528px;
   }
+
   .dashboard-btn {
     width: 100%;
   }
@@ -285,9 +205,10 @@ body {
     padding: 3px;
   }
 
-  .tab-title {
-    font-size: 14px;
-    white-space: nowrap;
+  .tab-icon {
+    width: 20px;
+    height: 20px;
+    margin-right: 4px;
   }
 
   .dashboard-btn {
@@ -315,41 +236,12 @@ body {
     font-size: 24px;
   }
 
-  .tab-title {
-    font-size: 14px;
-    font-weight: 600;
-  }
-
   .balance-label,
   .balance-value,
   .current-sum-red {
     font-size: 14px;
   }
 
-  .tab {
-    padding: 8px 0px;
-    font-size: 14px;
-    white-space: nowrap;
-  }
-
-  .tab-divider {
-    width: 2px;
-    height: 16px;
-    margin: 0 4px;
-    background-color: var(--border-color);
-  }
-
-  .tab-icon {
-    width: 20px;
-    height: 20px;
-    margin-right: 4px;
-  }
-
-  .tab-indicator-container {
-    bottom: -12px;
-    width: calc(100% - 16px);
-  }
-
   .lucide-up-icon {
     width: 22px;
     height: 22px;
@@ -365,6 +257,7 @@ body {
   .current-sum-green {
     font-size: 14px;
   }
+
   .icon {
     width: 24px;
     height: 24px;
@@ -381,25 +274,30 @@ body {
   .dashboard-container {
     width: 550px;
   }
+
   .dashboard-title {
     font-size: 18px;
     font-weight: 600;
     line-height: 21.79px;
   }
+
   .dashboard-content {
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
   }
+
   .dashboard-info-container {
     display: grid;
     gap: 30px;
     padding-bottom: 40px;
   }
+
   .dashboard-info-container {
     width: 100%;
   }
+
   .dashboard-info-card {
     margin: 0px auto;
     width: 400px;
@@ -421,21 +319,17 @@ body {
     padding: 0px;
     margin: 0px;
   }
+
   .telegram {
     display: none;
   }
-  .tab-divider {
-    width: 2px;
-    height: 16px;
-    margin: 0 30px;
-    background-color: var(--border-color);
-  }
 }
 
 @media (max-width: 480px) {
   .dashboard-info-container {
     width: 100%;
   }
+
   .dashboard-info-card {
     width: 380px;
   }
@@ -443,12 +337,7 @@ body {
   .redeem-btn {
     width: 380px;
   }
-  .tab-divider {
-    width: 2px;
-    height: 16px;
-    margin: 0 18px;
-    background-color: var(--border-color);
-  }
+
   .icon {
     width: 20px;
     height: 20px;
@@ -466,10 +355,6 @@ body {
     gap: 8px;
   }
 
-  .tab-title {
-    font-size: 14px;
-  }
-
   .icon {
     width: 20px;
     height: 20px;
@@ -478,20 +363,17 @@ body {
   .balance-info {
     width: fit-content;
   }
-
-  .tab {
-    padding: 6px 0px;
-    font-size: 12px;
-  }
 }
 
 @media (max-width: 400px) {
   .dashboard-info-card {
     width: 350px;
   }
+
   .dashboard-info-container {
     width: 100%;
   }
+
   .top-cards-dashboard {
     width: 350px;
     padding: 0px;
@@ -501,10 +383,6 @@ body {
   .redeem-btn {
     width: 350px;
   }
-
-  .tab-title {
-    font-size: 12px;
-  }
 }
 
 @media (max-width: 350px) {
@@ -525,8 +403,4 @@ body {
   .dashboard-btn {
     height: 45px;
   }
-
-  .tabs {
-    padding: 0;
-  }
-}
+}
\ No newline at end of file