fix/adaptive-styles

frontend/src/components/layout/header/header.css

@@ -320,6 +320,7 @@
     width: 238px;
     height: 48px;
     border-radius: 900px;
+    left: 0px;
   }
 
   .logout-button::before {

frontend/src/components/layout/sidebar/sidebar.css

@@ -41,7 +41,7 @@
 }
 
 .narrow-sidebar .sidebar-nav {
-  padding-left: 80px;
+  padding-left: 60px;
 }
 
 @media (max-width: 1200px) {

frontend/src/components/ui/balance-cards/BalanceCards.jsx

@@ -7,7 +7,7 @@ import { ReactComponent as USDC } from '../../../assets/icons/borrow_usdc.svg';
 import { ReactComponent as STRK } from '../../../assets/icons/strk.svg';
 import './balanceCards.css';
 
-const BalanceCards = () => {
+const BalanceCards = ({ className }) => {
   const { walletId } = useWalletStore();
 
   const isMobile = useMatchMedia('(max-width: 768px)');
@@ -23,7 +23,7 @@ const BalanceCards = () => {
   ]);
 
   return (
-    <div className="balance-card">
+    <div className={`balance-card ${className}`}>
       <div className="balance-container">
         {balances.map((balance) =>
           isMobile ? (

frontend/src/components/ui/balance-cards/balanceCards.css

@@ -89,11 +89,20 @@
 
 /* Responsiveness */
 /* Mobile */
+@media (max-width: 1150px) {
+  .balance-card-withdraw {
+    width: 530px;
+  }
+
+  .balance-container {
+    gap: 8px;
+  }
+}
+
 @media (max-width: 768px) {
   .balance-container {
     flex-direction: row;
     justify-content: flex-start;
-    gap: 1rem;
     align-items: center;
     margin-bottom: 0;
     overflow-x: auto;
@@ -104,6 +113,10 @@
     -ms-overflow-style: none;
   }
 
+  .balance-card-withdraw {
+    width: 480px;
+  }
+
   .balance-item {
     height: fit-content;
     padding: 16px 8px;
@@ -114,14 +127,6 @@
     border-radius: 16px;
   }
 
-  .balance-item:first-child {
-    margin-left: 20px;
-  }
-
-  .balance-item:last-child {
-    margin-right: 20px;
-  }
-
   .balance-item .balance-title {
     font-size: 1rem;
     display: flex;

frontend/src/components/ui/card/card.css

@@ -38,6 +38,15 @@
   color: var(--second-primary);
 }
 
+@media (max-width: 1300px) {
+  .card {
+    width: 260px;
+  }
+  .top-cards-dashboard {
+    justify-content: center;
+  }
+}
+
 @media (max-width: 768px) {
   .card {
     height: 90px;

frontend/src/components/ui/token-selector/TokenSelector.jsx

@@ -10,13 +10,13 @@ const Tokens = [
   { id: 'strkOption', component: <STRK />, label: 'STRK' },
 ];
 
-const TokenSelector = ({ selectedToken, setSelectedToken }) => {
+const TokenSelector = ({ selectedToken, setSelectedToken, className }) => {
   const handleTokenChange = (token) => {
     setSelectedToken(token.label);
   };
 
   return (
-    <div className="token-selector-container">
+    <div className={`token-selector-container ${className}`}>
       <span className="token-select-label">Select Token</span>
       <div className="token-options">
         {Tokens.map((token) => (

frontend/src/components/ui/token-selector/tokenSelector.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 100%;
 }
 
 .token-select-label {
@@ -74,11 +75,41 @@ input[type='radio'] {
   box-sizing: border-box;
 }
 
+@media (max-width: 1300px) {
+  .deposit-token-selector {
+    width: 530px;
+  }
+}
+
+@media (max-width: 680px) {
+  .deposit-token-selector {
+    width: 500px;
+  }
+}
+
+@media (max-width: 550px) {
+  .deposit-token-selector {
+    width: 480px;
+  }
+}
+
+@media (max-width: 480px) {
+  .deposit-token-selector {
+    width: 420px;
+  }
+}
+
+@media (max-width: 420px) {
+  .deposit-token-selector {
+    width: 350px;
+  }
+}
+
 @media (max-width: 768px) {
   .token-select-label {
     font-size: 12px;
   }
-  
+
   .token-name-wrapper {
     padding-block: 12px;
   }

frontend/src/pages/add-deposit/AddDeposit.jsx

@@ -15,6 +15,12 @@ import withdrawIcon from 'assets/icons/withdraw.svg';
 import useDashboardData from 'hooks/useDashboardData';
 
 export const AddDeposit = () => {
+  const formatNumber = (value, currency = false) => {
+    const number = parseFloat(value);
+    if (isNaN(number)) return currency ? '$0.00' : '0';
+    return currency ? `$${number.toFixed(2)}` : number.toFixed();
+  };
+
   const [amount, setAmount] = useState('0');
   const [selectedToken, setSelectedToken] = useState('STRK');
   const { data: dashboardData } = useDashboardData();
@@ -59,12 +65,24 @@ export const AddDeposit = () => {
           <h1 className="deposit-title">zkLend Deposit</h1>
           <div className="main-container-deposit">
             <div className="top-cards-deposit">
-              <Card label="Health Factor" value="1.47570678" icon={<HealthIcon className="icon" />} />
-              <Card label="Borrow Balance" value="$-55.832665" icon={<EthIcon className="icon" />} />
+              <Card
+                label="Health Factor"
+                value={formatNumber(dashboardData?.health_ratio, false)}
+                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} />
+          <TokenSelector
+            selectedToken={selectedToken}
+            setSelectedToken={setSelectedToken}
+            className="deposit-token-selector"
+          />
           <div className="amount-input-deposit" aria-labelledby="amount-input-label">
             <input
               type="text"
@@ -82,7 +100,13 @@ export const AddDeposit = () => {
             </span>
           </div>
 
-          <Button size="lg" variant="primary" onClick={handleDeposit} disabled={isLoading || amount === '0'}>
+          <Button
+            size="lg"
+            className="deposit-btn"
+            variant="primary"
+            onClick={handleDeposit}
+            disabled={isLoading || amount === '0'}
+          >
             {isLoading ? 'Processing...' : 'Deposit'}
           </Button>
         </div>

frontend/src/pages/add-deposit/addDeposit.css

@@ -25,10 +25,12 @@
   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 {
@@ -96,7 +98,6 @@
 .currency-deposit {
   position: absolute;
   color: var(--dark-gray);
-  /* right: 23%; */
   top: 18%;
   transform: translateY(-50%);
   opacity: 0.5;
@@ -211,6 +212,12 @@
   display: none;
 }
 
+@media (max-width: 1300px) {
+  .deposit-btn {
+    width: 530px;
+  }
+}
+
 @media (max-width: 768px) {
   .deposit-wrapper {
     padding-top: 24px;
@@ -237,17 +244,41 @@
     gap: 6px;
   }
 
-  .main-container-deposit {
-    margin: auto;
-    padding-top: 0px;
+  .deposit-btn {
+    width: 500px;
+  }
+}
+
+@media (max-width: 550px) {
+  .top-cards-deposit,
+  .deposit-btn {
+    width: 480px;
   }
 }
 
 @media (max-width: 480px) {
+  .deposit-btn {
+    width: 420px;
+  }
   .top-cards-deposit {
-    width: 380px;
-    /* gap: 8px; */
+    width: 420px;
+    gap: 8px;
     height: 88px;
     margin-top: -6px;
   }
+  .deposit-container {
+    margin: 50px 0 50px 0;
+  }
+
+  @media (max-width: 420px) {
+    .top-cards-deposit,
+    .deposit-btn {
+      width: 350px;
+    }
+  }
+
+  .main-container-deposit {
+    margin: auto;
+    padding-top: 0px;
+  }
 }

frontend/src/pages/dashboard/Dashboard.jsx

@@ -214,6 +214,7 @@ export default function Component({ telegramId }) {
                 )}
               </div>
               <Button
+                className="redeem-btn"
                 variant="primary"
                 size="lg"
                 onClick={() => closePositionEvent()}