Merge pull request #507 from isazaharadeen/fix/mobscreens

Fix/mobscreens
djeck1432 · Jan 27, 2025 · c9a53f7 · c9a53f7
2 parents c88b828 + c841211
commit c9a53f7
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 30 deletions.
diff --git a/frontend/src/components/dashboard/borrow/Borrow.jsx b/frontend/src/components/dashboard/borrow/Borrow.jsx
@@ -4,7 +4,7 @@ import { ReactComponent as BorrowIcon } from 'assets/icons/borrow_dynamic.svg';
 
 function Borrow({ data }) {
   return (
-    <div className="tab-content">
+    <div className="borrow-tab-content">
       <div className="balance-info">
         <div className="currency-info">
           {React.createElement(data[1]?.currencyIcon || BorrowIcon, {

diff --git a/frontend/src/components/dashboard/borrow/borrow.css b/frontend/src/components/dashboard/borrow/borrow.css
@@ -9,7 +9,6 @@
 }
 
 .currency-info {
-  margin-top: 1rem;
   display: flex;
   align-items: center;
 }

diff --git a/frontend/src/components/dashboard/collateral/Collateral.jsx b/frontend/src/components/dashboard/collateral/Collateral.jsx
@@ -5,7 +5,7 @@ import { TrendingDown, TrendingUp } from 'lucide-react';
 
 function Collateral({ data, startSum, currentSum, getCurrentSumColor }) {
   return (
-    <div className="tab-content">
+    <div className="collateral-tab-content">
       <div className="balance-info">
         <div className="currency-info">
           {React.createElement(data[0]?.currencyIcon || CollateralIcon, {
@@ -26,7 +26,7 @@ function Collateral({ data, startSum, currentSum, getCurrentSumColor }) {
         </span>
         <span>
           <span className="balance-label">Current sum: </span>
-          <span className={currentSum === 0 ? 'current-sum-green' : getCurrentSumColor()}>
+          <span className={currentSum >= 0 ? 'current-sum-green' : getCurrentSumColor()}>
             <span className="currency-symbol">$</span>
             {currentSum ? Number(currentSum).toFixed(8) : '0.00'}
             {currentSum > startSum && currentSum !== 0 && <TrendingUp className="lucide-up-icon" />}

diff --git a/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx b/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import './dashboardTabs.css';
 import { ReactComponent as DepositIcon } from '../../../assets/icons/deposited_dynamic.svg';
 import { ReactComponent as CollateralIcon } from '../../../assets/icons/collateral_dynamic.svg';
@@ -7,26 +8,40 @@ import { DASHBOARD_TABS } from 'utils/constants';
 function DashboardTabs({ activeTab, switchTab }) {
   const { COLLATERAL, BORROW, DEPOSITED } = DASHBOARD_TABS;
 
+  const tabConfig = [
+    {
+      key: COLLATERAL,
+      Icon: CollateralIcon,
+      title: 'Collateral & Earnings',
+    },
+    {
+      key: BORROW,
+      Icon: BorrowIcon,
+      title: 'Borrow',
+    },
+    {
+      key: DEPOSITED,
+      Icon: DepositIcon,
+      title: 'Deposited',
+    },
+  ];
+
   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>
+      {tabConfig.map((tab, index) => (
+        <React.Fragment key={tab.key}>
+          <button
+            type="button"
+            onClick={() => switchTab(tab.key)}
+            className={`tab ${activeTab === tab.key ? 'active' : ''}`}
+          >
+            <tab.Icon className="tab-icon" />
+            <span className="tab-title">{tab.title}</span>
+          </button>
+
+          {index < tabConfig.length - 1 && <div className="tab-divider"></div>}
+        </React.Fragment>
+      ))}
 
       <div className="tab-indicator-container">
         <div className={`tab-indicator ${activeTab}`} />

diff --git a/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css b/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css
@@ -3,6 +3,12 @@
   justify-content: space-between;
   position: relative;
   align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #36294e;
 }
 
 .tab {
@@ -74,6 +80,8 @@
   height: 18px;
   border-radius: 8px;
   background-color: var(--border-color);
+  min-width: 3px;
+  min-height: 18px;
   margin: 0 1rem;
 }
 
@@ -93,7 +101,7 @@
   .tab-divider {
     width: 2px;
     height: 16px;
-    margin: 0 4px;
+    margin: 0 10px;
     background-color: var(--border-color);
   }
 
@@ -122,7 +130,7 @@
   .tab-divider {
     width: 2px;
     height: 16px;
-    margin: 0 18px;
+    margin: 0 15px;
     background-color: var(--border-color);
   }
 

diff --git a/frontend/src/components/dashboard/deposited/Deposited.jsx b/frontend/src/components/dashboard/deposited/Deposited.jsx
@@ -5,7 +5,7 @@ import { ReactComponent as UsdIcon } from '../../../assets/icons/usdc-icon.svg';
 
 function Deposited({ data }) {
   return (
-    <div className="tab-content">
+    <div className="deposited-tab-content">
       <div className="deposited-info">
         <div className="deposited-item">
           <div className="currency-name">

diff --git a/frontend/src/components/dashboard/deposited/deposited.css b/frontend/src/components/dashboard/deposited/deposited.css
@@ -1,6 +1,6 @@
 .tab-content {
   text-align: left;
-  width: 580px;
+  width: 100%;
   height: 190px;
   padding: 0px 40px 0 20px;
   margin: 16px auto 0;
@@ -10,13 +10,38 @@
   margin: 0;
 }
 
+.collateral-tab-content,
+.borrow-tab-content {
+  text-align: left;
+  width: 100%;
+  height: 190px;
+  margin: 16px auto 0;
+}
+
+.collateral-tab-content,
+.borrow-tab-content p {
+  margin: 0;
+}
+
+.deposited-tab-content p {
+  margin: 0;
+}
+
 .deposited-info {
   display: flex;
   flex-direction: column;
   gap: 8px;
   justify-content: center;
 }
 
+.deposited-tab-content {
+  text-align: left;
+  width: 100%;
+  height: 190px;
+  padding: 0px 40px 0 20px;
+  margin: 16px auto 0;
+}
+
 .deposited-item {
   display: flex;
   align-items: center;
@@ -71,12 +96,37 @@
     padding: 16px;
     margin-top: 0;
   }
+
+  .collateral-tab-content,
+  .borrow-tab-content {
+    width: 100%;
+    height: auto;
+    margin-top: 0;
+  }
+
+  .deposited-tab-content {
+    width: 100%;
+    height: auto;
+    padding: 10px;
+    margin-top: 0;
+  }
 }
 
 @media (max-width: 480px) {
   .tab-content {
-    width: fit-content;
     font-size: 14px;
+    padding: 0px 0px 0px 0px;
+  }
+
+  .collateral-tab-content,
+  .borrow-tab-content {
+    font-size: 14px;
+    padding: 15px 0px 0 0px;
+  }
+
+  .deposited-tab-content {
+    font-size: 14px;
+    padding: 15px 0px 0 0px;
   }
 
   .icon {

diff --git a/frontend/src/pages/dashboard/dashboard.css b/frontend/src/pages/dashboard/dashboard.css
@@ -1,3 +1,78 @@
+body {
+  font-family:
+    'Rethink Sans',
+    -apple-system,
+    Roboto,
+    Helvetica,
+    sans-serif;
+}
+
+.dashboard {
+  min-height: 100vh;
+  display: flex;
+  width: calc(100vw - 372px);
+  margin-left: 372px;
+}
+
+@media (max-width: 1024px) {
+  .dashboard {
+    width: 100vw;
+    margin-left: 0;
+    justify-content: center;
+  }
+}
+
+.dashboard-wrapper {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: calc(100vw - 735px);
+  height: 100%;
+}
+
+.dashboard-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  padding: 0 24px;
+  padding-top: 20px;
+  margin: 100px 0 50px 0;
+  height: 100%;
+}
+
+.dashboard-content {
+  width: 642px;
+  gap: 24px;
+  border-radius: 20px;
+  padding: 1rem 0;
+  color: var(--second-primary);
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.dashboard-title {
+  margin-top: 1rem;
+  font-size: 32px;
+  font-weight: 600;
+  color: var(--second-primary);
+  text-align: center;
+}
+
+.top-cards-dashboard {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0px;
+  margin: 0px;
+  width: 642px;
+  height: 101px;
+}
+
 .dashboard-error {
   color: var(--error-color);
 }
@@ -159,6 +234,7 @@
   .balance-value,
   .current-sum-red {
     font-size: 14px;
+    color: #ff0000;
   }
 
   .lucide-up-icon {
@@ -175,6 +251,7 @@
 
   .current-sum-green {
     font-size: 14px;
+    color: #60af77;
   }
 
   .icon {
@@ -190,14 +267,12 @@
 }
 
 @media (max-width: 550px) {
-
   .dashboard-title {
     font-size: 18px;
     font-weight: 600;
     line-height: 21.79px;
   }
 
-
   .dashboard-info-container {
     display: grid;
     gap: 30px;
@@ -313,4 +388,4 @@
   .dashboard-btn {
     height: 45px;
   }
-}
+}