fix: dashboard page

djeck1432 · Feb 2, 2025 · 72c2118 · 72c2118
1 parent c5532f8
commit 72c2118
Show file tree

Hide file tree

Showing 18 changed files with 162 additions and 613 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -55,6 +55,7 @@
   },
   "devDependencies": {
     "@vitest/ui": "^3.0.4",
+    "class-variance-authority": "^0.7.1",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",

diff --git a/frontend/src/components/dashboard/borrow/borrow.css b/frontend/src/components/dashboard/borrow/borrow.css
diff --git a/frontend/src/components/dashboard/collateral/Collateral.jsx b/frontend/src/components/dashboard/collateral/Collateral.jsx
@@ -2,16 +2,22 @@ import React from 'react';
 import CollateralIcon from '@/assets/icons/collateral_dynamic.svg?react';
 import { TrendingDown, TrendingUp } from 'lucide-react';
 
-function Collateral({ data, startSum, currentSum, getCurrentSumColor }) {
+function Collateral({ data, startSum, currentSum }) {
+  const getCurrentSumColor = () => {
+    if (currentSum > startSum) return 'text-profit-indicator';
+    if (currentSum < startSum) return 'text-loss-indicator';
+    return '';
+  };
+
   return (
     <div className="h-fit w-full text-left text-base font-normal">
       <div className="flex h-fit w-fit flex-col gap-2 text-base">
-        <div className="flex items-center">
+        <div className="mb-1 flex items-center">
           {React.createElement(data[0]?.currencyIcon || CollateralIcon, {
-            className: 'w-8 h-8 mr-2 bg-border-color rounded-full flex items-center justify-center p-2',
+            className: 'size-5 md:size-8 mr-2 bg-border-color rounded-full flex items-center justify-center p-1 md:p-2',
           })}
 
-          <span className="text-secondary text-lg">{data[0]?.currencyName || 'N/A'}</span>
+          <span className="text-secondary md:text-lg">{data[0]?.currencyName || 'N/A'}</span>
         </div>
         <span>
           <span className="font-normal text-gray-500">Balance: </span>
@@ -26,11 +32,11 @@ function Collateral({ data, startSum, currentSum, getCurrentSumColor }) {
         </span>
         <span className="flex">
           <span className="mr-2 font-normal text-gray-500">Current sum: </span>
-          <span className={`flex ${currentSum > 0 ? 'text-green-500' : getCurrentSumColor()}`}>
+          <span className={`flex ${currentSum > 0 ? 'text-profit-indicator' : getCurrentSumColor()}`}>
             <span>$</span>
             {currentSum ? Number(currentSum).toFixed(8) : '0.00'}
-            {currentSum > startSum && currentSum !== 0 && <TrendingUp className="ml-2 h-6 w-6 text-green-500" />}
-            {currentSum < startSum && currentSum !== 0 && <TrendingDown className="ml-2 h-6 w-6 text-red-500" />}
+            {currentSum > startSum && currentSum !== 0 && <TrendingUp className="text-profit-indicator ml-2 h-6 w-6" />}
+            {currentSum < startSum && currentSum !== 0 && <TrendingDown className="text-loss-indicator ml-2 h-6 w-6" />}
           </span>
         </span>
       </div>

diff --git a/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx b/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import './dashboardTabs.css';
 import DepositIcon from '@/assets/icons/deposited_dynamic.svg?react';
 import CollateralIcon from '@/assets/icons/collateral_dynamic.svg?react';
 import BorrowIcon from '@/assets/icons/borrow_dynamic.svg?react';
 import { DASHBOARD_TABS } from '@/utils/constants';
+import { cn } from '@/utils/cn';
 
 function DashboardTabs({ activeTab, switchTab }) {
   const { COLLATERAL, BORROW, DEPOSITED } = DASHBOARD_TABS;
@@ -13,38 +13,57 @@ function DashboardTabs({ activeTab, switchTab }) {
       key: COLLATERAL,
       Icon: CollateralIcon,
       title: 'Collateral & Earnings',
+      indicatorClass: 'w-[180px] left-0',
     },
     {
       key: BORROW,
       Icon: BorrowIcon,
       title: 'Borrow',
+      indicatorClass: 'w-[155px] left-[38%]',
     },
     {
       key: DEPOSITED,
       Icon: DepositIcon,
       title: 'Deposited',
+      indicatorClass: 'w-[155px] left-[78%]',
     },
   ];
 
   return (
-    <div className="tabs">
+    <div className="no-scrollbar relative flex items-center justify-between overflow-x-auto overflow-y-hidden border-b border-[#36294e] pb-1.5">
       {tabConfig.map((tab, index) => (
         <React.Fragment key={tab.key}>
           <button
             type="button"
             onClick={() => switchTab(tab.key)}
-            className={`tab ${activeTab === tab.key ? 'active' : ''}`}
+            className={cn(
+              'flex flex-1 cursor-pointer items-center justify-center border-none bg-transparent py-2 text-center',
+              activeTab === tab.key ? 'text-brand' : 'text-gray'
+            )}
           >
-            <tab.Icon className="tab-icon" />
-            <span className="tab-title">{tab.title}</span>
+            <tab.Icon className="mr-1 size-5" />
+            <span className="text-sm font-semibold whitespace-nowrap md:text-[14px]">{tab.title}</span>
           </button>
 
-          {index < tabConfig.length - 1 && <div className="tab-divider"></div>}
+          {index < tabConfig.length - 1 && (
+            <div className="bg-border-color mx-4 min-h-4 min-w-[3px] rounded-lg md:h-2" />
+          )}
         </React.Fragment>
       ))}
 
-      <div className="tab-indicator-container">
-        <div className={`tab-indicator ${activeTab}`} />
+      <div className="bg-light-purple absolute -bottom-4 left-0 h-px w-[calc(100%-20px)] overflow-hidden md:-bottom-3 md:w-[calc(100%-16px)]">
+        {tabConfig.map(
+          (tab) =>
+            activeTab === tab.key && (
+              <div
+                key={tab.key}
+                className={cn(
+                  'bg-brand absolute bottom-0 h-full transition-transform duration-300 ease-in-out',
+                  tab.indicatorClass
+                )}
+              />
+            )
+        )}
       </div>
     </div>
   );

diff --git a/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css b/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css