migrate card component

djeck1432 · Jan 30, 2025 · 950a45d · 950a45d
1 parent b87a3e2
commit 950a45d
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 32 deletions.
diff --git a/frontend/src/components/dashboard/borrow/Borrow.jsx b/frontend/src/components/dashboard/borrow/Borrow.jsx
@@ -1,20 +1,23 @@
 import React from 'react';
-import './borrow.css';
 import BorrowIcon from '@/assets/icons/borrow_dynamic.svg?react';
 
 function Borrow({ data }) {
   return (
-    <div className="borrow-tab-content">
-      <div className="balance-info">
-        <div className="currency-info">
+    <div className="p-1 pt-0 text-left text-base font-normal w-fit h-fit">
+      <div className="flex flex-col gap-2 w-[594px] h-[190px] mt-3">
+        <div className="flex items-center">
           {React.createElement(data[1]?.currencyIcon || BorrowIcon, {
-            className: 'icon',
+            className: 'w-8 h-8 mr-2 bg-border-color rounded-full flex items-center justify-center p-2',
           })}
-          <span className="currency-name">{data[1]?.currencyName || 'N/A'}</span>
+          <span className="text-[20px] text-second-primary">
+            {data[1]?.currencyName || 'N/A'}
+          </span>
         </div>
         <span>
-          <span className="balance-label">Balance: </span>
-          <span className="balance-value">{data[1]?.balance ? Number(data[1].balance).toFixed(8) : '0.00'}</span>
+          <span className="text-gray text-base font-normal">Balance: </span>
+          <span className="text-second-primary ml-1">
+            {data[1]?.balance ? Number(data[1].balance).toFixed(8) : '0.00'}
+          </span>
         </span>
       </div>
     </div>

diff --git a/frontend/src/components/dashboard/deposited/Deposited.jsx b/frontend/src/components/dashboard/deposited/Deposited.jsx
@@ -36,15 +36,6 @@ function Deposited({ data }) {
           <p className="currency-value">{data.usdc}</p>
         </div>
 
-        {/* <div className="info-divider" />
-
-        <div className="deposited-item">
-          <div className="currency-name">
-            <EthIcon className="icon" />
-            <p className="currency-name">USDT</p>
-          </div>
-          <p className="currency-value">{data.usdt}</p>
-        </div> */}
       </div>
     </div>
   );

diff --git a/frontend/src/pages/dashboard/Dashboard.jsx b/frontend/src/pages/dashboard/Dashboard.jsx
@@ -152,11 +152,21 @@ export default function DashboardPage({ telegramId }) {
     <DashboardLayout>
       {loading && <Spinner loading={loading} />}
       <div className="flex justify-between gap-2 w-full max-w-[642px] h-[101px]">
-        <Card label="Health Factor" value={healthFactor} icon={<HealthIcon className="icon" />} />
-        <Card label="Borrow Balance" cardData={cardData} icon={<EthIcon className="icon" />} />
+        <Card
+          label="Health Factor"
+          value={healthFactor}
+          icon={<HealthIcon className="mr-[5px] w-4 h-4" />}
+          labelClassName="text-stormy-gray"
+        />
+        <Card
+          label="Borrow Balance"
+          cardData={cardData}
+          icon={<EthIcon className="mr-[5px] w-4 h-4" />}
+          labelClassName="text-stormy-gray"
+        />
       </div>
       <div className="flex flex-col items-center gap-6">
-      <div className="bg-transparent border-1 border-[#36294e] rounded-lg w-[642px] h-[318px] py-4 px-7 flex flex-col gap-3">
+        <div className="bg-transparent border-1 border-[#36294e] rounded-lg w-[642px] h-[318px] py-4 px-7 flex flex-col gap-3">
           <DashboardTabs activeTab={activeTab} switchTab={setActiveTab} />
 
           {activeTab === COLLATERAL && (
@@ -181,9 +191,9 @@ export default function DashboardPage({ telegramId }) {
         >
           {isClosing ? 'Closing...' : 'Redeem'}
         </Button>
-        <Button 
-          variant="secondary" 
-          size="lg" 
+        <Button
+          variant="secondary"
+          size="lg"
           className="w-full max-w-[642px] h-[60px] flex items-center justify-center gap-2"
           onClick={handleOpen}
         >

diff --git a/frontend/src/pages/position-history/PositionHistory.jsx b/frontend/src/pages/position-history/PositionHistory.jsx
@@ -36,8 +36,16 @@ function PositionHistory() {
     <DashboardLayout title="Position History">
       <div className="flex flex-col gap-6">
         <div className="flex justify-center gap-2.5 w-full max-w-[642px]">
-          <Card label="Health Factor" value={cardData?.health_ratio || '0.00'} icon={<HealthIcon className="icon" />} />
-          <Card label="Borrow Balance" cardData={cardData?.borrowed || '0.00'} icon={<EthIcon className="icon" />} />
+          <Card
+            label="Health Factor"
+            value={cardData?.health_ratio || '0.00'}
+            icon={<HealthIcon className="mr-[5px] w-4 h-4" />}
+          />
+          <Card
+            label="Borrow Balance"
+            cardData={cardData?.borrowed || '0.00'}
+            icon={<HealthIcon className="mr-[5px] w-4 h-4" />}
+          />
         </div>
       </div>
 
@@ -58,12 +66,22 @@ function PositionHistory() {
                   <th className="py-4 px-4 text-left text-[#9CA3AF] font-normal border-b border-[#36294E]"></th>
                   <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">Token</th>
                   <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">Amount</th>
-                  <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">Created At</th>
+                  <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">
+                    Created At
+                  </th>
                   <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">Status</th>
-                  <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">Start Price</th>
-                  <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">Multiplier</th>
-                  <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">Liquidated</th>
-                  <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">Closed At</th>
+                  <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">
+                    Start Price
+                  </th>
+                  <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">
+                    Multiplier
+                  </th>
+                  <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">
+                    Liquidated
+                  </th>
+                  <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">
+                    Closed At
+                  </th>
                   <th className="py-4 px-4 text-center text-[#9CA3AF] font-normal border-b border-[#36294E]">
                     <img src={filterIcon} alt="filter-icon" draggable="false" />
                   </th>
@@ -73,7 +91,9 @@ function PositionHistory() {
               <tbody>
                 {!tableData?.positions || tableData?.positions.length === 0 ? (
                   <tr>
-                    <td colSpan="10" className="text-center py-4">No opened positions</td>
+                    <td colSpan="10" className="text-center py-4">
+                      No opened positions
+                    </td>
                   </tr>
                 ) : (
                   tableData?.positions.map((data, index) => (
@@ -132,4 +152,4 @@ function PositionHistory() {
   );
 }
 
-export default PositionHistory;
+export default PositionHistory;