resolved conflicts

djeck1432 · Jan 27, 2025 · 824a72f · 824a72f
1 parent a1eaeda
commit 824a72f
Show file tree

Hide file tree

Showing 9 changed files with 8,025 additions and 33 deletions.
diff --git a/frontend/src/components/dashboard/borrow/Borrow.jsx b/frontend/src/components/dashboard/borrow/Borrow.jsx
@@ -4,7 +4,7 @@ import BorrowIcon from '../../../assets/icons/borrow_dynamic.svg?react';
 
 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.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 UsdIcon from '../../../assets/icons/usdc-icon.svg?react';
 
 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.jsx b/frontend/src/pages/dashboard/Dashboard.jsx
@@ -1,30 +1,25 @@
-import React, { useEffect, useState } from 'react';
-import DashboardLayout from '../DashboardLayout';
+import { useEffect, useState } from 'react';
+import BorrowIcon from '../../assets/icons/borrow_dynamic.svg?react';
+import CollateralIcon from '../../assets/icons/collateral_dynamic.svg?react';
 import EthIcon from '../../assets/icons/ethereum.svg?react';
+import HealthIcon from '../../assets/icons/health.svg?react';
 import StrkIcon from '../../assets/icons/strk.svg?react';
-import UsdIcon from '../../assets/icons/usd_coin.svg?react';
-import BorrowIcon from '../../assets/icons/borrow_dynamic.svg?react';
 import TelegramIcon from '../../assets/icons/telegram_dashboard.svg?react';
-import Spinner from '../../components/ui/spinner/Spinner';
-import useDashboardData from '../../hooks/useDashboardData';
-import { useClosePosition, useCheckPosition } from '../../hooks/useClosePosition';
-import { Button } from '../../components/ui/custom-button/Button';
-import { useWalletStore } from '../../stores/useWalletStore';
-import { ActionModal } from '../../components/ui/action-modal';
-import useTelegramNotification from '../../hooks/useTelegramNotification';
+import UsdIcon from '../../assets/icons/usd_coin.svg?react';
 import Borrow from '../../components/dashboard/borrow/Borrow';
-import CollateralIcon from '../../assets/icons/collateral_dynamic.svg?react';
 import Collateral from '../../components/dashboard/collateral/Collateral';
-import Card from '../../components/ui/card/Card';
-import HealthIcon from '../../assets/icons/health.svg?react';
-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 Deposited from '../../components/dashboard/deposited/Deposited';
 import DashboardTabs from '../../components/dashboard/dashboard-tab/DashboardTabs';
+import Deposited from '../../components/dashboard/deposited/Deposited';
+import { ActionModal } from '../../components/ui/action-modal';
+import Card from '../../components/ui/card/Card';
+import { Button } from '../../components/ui/custom-button/Button';
+import Spinner from '../../components/ui/spinner/Spinner';
+import { useCheckPosition, useClosePosition } from '../../hooks/useClosePosition';
+import useDashboardData from '../../hooks/useDashboardData';
+import useTelegramNotification from '../../hooks/useTelegramNotification';
+import { useWalletStore } from '../../stores/useWalletStore';
 import { DASHBOARD_TABS } from '../../utils/constants';
+import DashboardLayout from '../DashboardLayout';
 
 export default function DashboardPage({ telegramId }) {
   const { walletId } = useWalletStore();

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;
   }
-}
+}