Merge pull request #508 from Akanimorex/feat/dashboardLayout

feat:unified dashboard Layout
djeck1432 · Jan 26, 2025 · 22fa7ec · 22fa7ec
2 parents 7e265a3 + 4c20a27
commit 22fa7ec
Show file tree

Hide file tree

Showing 11 changed files with 1,165 additions and 837 deletions.
diff --git a/frontend/src/pages/DashboardLayout.css b/frontend/src/pages/DashboardLayout.css
diff --git a/frontend/src/pages/DashboardLayout.jsx b/frontend/src/pages/DashboardLayout.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Sidebar from 'components/layout/sidebar/Sidebar';
+import './DashboardLayout.css';
+
+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'
+
+
+
+const dashboardItems = [
+  {
+    id: 'dashboard',
+    name: 'Dashboard',
+    link: '/dashboard',
+    icon: computerIcon,
+  },
+  {
+    id: 'position_history',
+    name: 'Position History',
+    link: '/dashboard/position-history',
+    icon: clockIcon,
+  },
+  {
+    id: 'deposit',
+    name: 'Add Deposit',
+    link: '/dashboard/deposit',
+    icon: depositIcon,
+  },
+  {
+    id: 'withdraw',
+    name: 'Withdraw All',
+    link: '/dashboard/withdraw',
+    icon: withdrawIcon,
+  }
+];
+
+export default function DashboardLayout({ children, title = 'zkLend Position' }) {
+  return (
+    <div className="dashboard">
+      <Sidebar items={dashboardItems} />
+      <div className="dashboard-wrapper">
+        <div className="dashboard-container">
+          <h1 className="dashboard-title">{title}</h1>
+          <div className="dashboard-content">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/add-deposit/AddDeposit.jsx b/frontend/src/pages/add-deposit/AddDeposit.jsx
@@ -2,16 +2,12 @@ import React, { useState } from 'react';
 import { ReactComponent as HealthIcon } from 'assets/icons/health.svg';
 import { ReactComponent as EthIcon } from 'assets/icons/ethereum.svg';
 import { useAddDeposit } from 'hooks/useAddDeposit';
+import DashboardLayout from '../DashboardLayout';
 import './addDeposit.css';
 import Card from 'components/ui/card/Card';
 import TokenSelector from 'components/ui/token-selector/TokenSelector';
 import { NUMBER_REGEX } from 'utils/regex';
 import { Button } from 'components/ui/custom-button/Button';
-import Sidebar from 'components/layout/sidebar/Sidebar';
-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 useDashboardData from 'hooks/useDashboardData';
 
 export const AddDeposit = () => {
@@ -50,67 +46,54 @@ export const AddDeposit = () => {
     );
   };
 
-  const dashboardItems = [
-    { id: 'dashboard', name: 'Dashboard', link: '/dashboard', icon: computerIcon },
-    { id: 'position_history', name: 'Position History', link: '/dashboard/position-history', icon: clockIcon },
-    { id: 'deposit', name: 'Add Deposit', link: '/dashboard/deposit', icon: depositIcon },
-    { id: 'withdraw', name: 'Withdraw All', link: '/dashboard/withdraw', icon: withdrawIcon },
-  ];
-
   return (
-    <div className="deposit">
-      <Sidebar items={dashboardItems} />
-      <div className="deposit-wrapper">
-        <div className="deposit-container">
-          <h1 className="deposit-title">zkLend Deposit</h1>
-          <div className="main-container-deposit">
-            <div className="top-cards-deposit">
-              <Card
-                label="Health Factor"
-                value={dashboardData?.health_ratio}
-                icon={<HealthIcon className="icon" />}
-              />
-              <Card
-                label="Borrow Balance"
-                value={formatNumber(dashboardData?.borrowed, true)}
-                icon={<EthIcon className="icon" />}
-              />
-            </div>
-          </div>
-          <h1 className="deposit-title2">Please make a deposit</h1>
-          <TokenSelector
-            selectedToken={selectedToken}
-            setSelectedToken={setSelectedToken}
-            className="deposit-token-selector"
+    <DashboardLayout title="Add Deposit">
+      <div className="main-container-deposit">
+        <div className="top-cards-dashboard">
+          <Card
+            label="Health Factor"
+            value={dashboardData?.health_ratio}
+            icon={<HealthIcon className="icon" />}
+          />
+          <Card
+            label="Borrow Balance"
+            value={formatNumber(dashboardData?.borrowed, true)}
+            icon={<EthIcon className="icon" />}
           />
-          <div className="amount-input-deposit" aria-labelledby="amount-input-label">
-            <input
-              type="text"
-              id="amount-field"
-              value={amount}
-              onChange={handleAmountChange}
-              pattern="^\d*\.?\d*$"
-              className="amount-field-deposit"
-              aria-describedby="currency-symbol"
-              placeholder="0.00"
-              disabled={isLoading}
-            />
-            <span id="currency-symbol" className="currency-deposit">
-              {selectedToken}
-            </span>
-          </div>
-
-          <Button
-            size="lg"
-            className="deposit-btn"
-            variant="primary"
-            onClick={handleDeposit}
-            disabled={isLoading || amount === '0'}
-          >
-            {isLoading ? 'Processing...' : 'Deposit'}
-          </Button>
         </div>
       </div>
-    </div>
+      <h1 className="deposit-title2">Please make a deposit</h1>
+      <TokenSelector
+        selectedToken={selectedToken}
+        setSelectedToken={setSelectedToken}
+        className="deposit-token-selector"
+      />
+      <div className="amount-input-deposit" aria-labelledby="amount-input-label">
+        <input
+          type="text"
+          id="amount-field"
+          value={amount}
+          onChange={handleAmountChange}
+          pattern="^\d*\.?\d*$"
+          className="amount-field-deposit"
+          aria-describedby="currency-symbol"
+          placeholder="0.00"
+          disabled={isLoading}
+        />
+        <span id="currency-symbol" className="currency-deposit">
+          {selectedToken}
+        </span>
+      </div>
+
+      <Button
+        size="lg"
+        className="redeem-btn"
+        variant="primary"
+        onClick={handleDeposit}
+        disabled={isLoading || amount === '0'}
+      >
+        {isLoading ? 'Processing...' : 'Deposit'}
+      </Button>
+    </DashboardLayout>
   );
-};
+};
diff --git a/frontend/src/pages/add-deposit/addDeposit.css b/frontend/src/pages/add-deposit/addDeposit.css
@@ -1,47 +1,4 @@
-.deposit {
-  min-height: 100vh;
-  display: flex;
-  width: calc(100vw - 372px);
-  margin-left: 372px;
-}
-
-@media (max-width: 1024px) {
-  .deposit {
-    width: 100%;
-    margin-left: 0;
-    justify-content: center;
-  }
-}
-
-.deposit-wrapper {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: calc(100vw - 735px);
-}
-
-.deposit-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 32px;
-  padding: 0 26px;
-  padding-top: 20px;
-  width: fit-content;
-  margin: 100px 0 50px 0;
-}
-
-.deposit-title {
-  font-size: 24px;
-  font-weight: 600;
-  color: #ffffff;
-  text-align: center;
-  margin-bottom: 0;
-}
-
-.main-container-deposit {
+/* .main-container-deposit {
   gap: 2px;
   padding-top: 24px;
   border-radius: 8px;
@@ -52,7 +9,7 @@
 
   flex-direction: column;
   align-items: center;
-}
+} */
 .top-cards-deposit {
   display: flex;
   gap: 0.5rem;
@@ -219,22 +176,11 @@
 }
 
 @media (max-width: 768px) {
-  .deposit-wrapper {
-    padding-top: 24px;
-  }
 
-  .deposit-title {
-    font-size: 16px;
-  }
 
   .deposit-title2 {
     margin-top: 0px;
   }
-
-  .deposit-container {
-    margin-left: 0;
-    gap: 20px;
-  }
 }
 
 @media (max-width: 680px) {
@@ -266,9 +212,7 @@
     height: 88px;
     margin-top: -6px;
   }
-  .deposit-container {
-    margin: 50px 0 50px 0;
-  }
+
 
   @media (max-width: 420px) {
     .top-cards-deposit,