chore: setup tailwind

djeck1432 · Jan 24, 2025 · 8b27468 · 8b27468
1 parent 63aecc6
commit 8b27468
Show file tree

Hide file tree

Showing 11 changed files with 24,259 additions and 423 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,7 +30,10 @@
     "eject": "react-scripts eject"
   },
   "options": {
-    "allowedHosts": ["localhost", ".localhost"],
+    "allowedHosts": [
+      "localhost",
+      ".localhost"
+    ],
     "proxy": "http://localhost:8000"
   },
   "browserslist": {
@@ -46,11 +49,12 @@
     ]
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.26.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.26.0",
     "@tanstack/eslint-plugin-query": "^5.60.1",
     "@testing-library/jest-dom": "^6.6.2",
     "@types/jest": "^29.5.14",
+    "autoprefixer": "^10.4.20",
     "babel-jest": "^29.7.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
@@ -59,7 +63,9 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "globals": "^15.11.0",
     "jest": "^27.5.1",
+    "postcss": "^8.5.1",
     "prettier": "^3.3.3",
-    "starknet": "^6.11.0"
+    "starknet": "^6.11.0",
+    "tailwindcss": "^3.4.17"
   }
 }
diff --git a/frontend/postcss.config.mjs b/frontend/postcss.config.mjs
@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: [
+      require('tailwindcss'),
+      require('autoprefixer'),
+    ],
+  }
+
diff --git a/frontend/src/components/ui/card/Card.jsx b/frontend/src/components/ui/card/Card.jsx
@@ -1,23 +1,21 @@
-import './card.css';
-
 function Card({ label, icon, value = '', cardData = [] }) {
   return (
-    <div className="card">
-      <div className="card-header">
+    <div className="w-[317px] h-[101px] bg-transparent border border-light-purple rounded-lg px-[24px] pt-[4px] text-center">
+      <div className="flex justify-center items-center border-none text-second-primary">
         {icon}
-        <span className="label">{label}</span>
+        <span className="text-[14px] font-semibold">{label}</span>
       </div>
-      <div className="card-value">
+      <div className="text-[24px] font-semibold text-second-primary h-fit">
         {cardData.length > 0 ? (
           <>
-            <span className="currency-symbol">$</span>
-            <span className="top-card-value">
+            <span className="text-inherit  mr-1">$</span>
+            <span className="text-[24px]">
               {' '}
               {cardData[1]?.balance ? Number(cardData[1].balance).toFixed(8) : '0.00'}
             </span>
           </>
         ) : (
-          <span className="top-card-value">{value}</span>
+          <span className="text-[24px]">{value}</span>
         )}
       </div>
     </div>

diff --git a/frontend/src/components/ui/card/card.css b/frontend/src/components/ui/card/card.css
diff --git a/frontend/src/components/ui/custom-button/Button.jsx b/frontend/src/components/ui/custom-button/Button.jsx
@@ -1,11 +1,33 @@
 import React from 'react';
-import './button.css';
 
 export const Button = ({ variant = 'primary', size = 'md', className = '', children, ...props }) => {
-  const buttonClasses = ['button', `button--${variant}`, `button--${size}`, className].filter(Boolean).join(' ');
+  const sizeClasses = {
+    lg: 'w-[642px] py-4 px-8',
+    md: 'w-[309px] py-4 px-6',
+    sm: 'w-[167px] py-4 px-4',
+  };
+
+  const variantClasses = {
+    primary: 'text-white bg-transparent relative border-none cursor-pointer font-semibold rounded-lg text-sm h-[60px] flex justify-center items-center transition-all duration-200 ease-in-out',
+    secondary: 'text-white bg-transparent border border-midnight-purple cursor-pointer font-semibold rounded-lg text-sm h-[60px] flex justify-center items-center transition-all duration-200 ease-in-out relative z-10',
+  };
+
+  const primaryHover = 'hover:after:bg-gradient-to-r hover:after:from-[#e01dee] hover:after:to-[#49abd2]';
+  const primaryActive = 'active:translate-y-[1px]';
+  const primaryFocus = 'focus:outline-none focus:ring-2 focus:ring-[#3B82F6] focus:ring-opacity-50';
+
+  const buttonClasses = [
+    'button', 
+    sizeClasses[size], 
+    variantClasses[variant], 
+    className,
+    variant === 'primary' ? primaryHover : '',
+    variant === 'primary' ? primaryActive : '',
+    variant === 'primary' ? primaryFocus : '',
+  ].filter(Boolean).join(' ');
 
   return (
-    <button className={buttonClasses} {...props}>
+    <button className={buttonClasses}  {...props}>
       {children}
     </button>
   );

diff --git a/frontend/src/globals.css b/frontend/src/globals.css
@@ -1,4 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
   --text-font: 'Rethink Sans', sans-serif;

diff --git a/frontend/src/pages/dashboard/Dashboard.jsx b/frontend/src/pages/dashboard/Dashboard.jsx
@@ -167,83 +167,88 @@ export default function Component({ telegramId }) {
   ];
 
   return (
-    <div className="dashboard">
-      <Sidebar items={dashboardItems} />
-      <div className="dashboard-wrapper">
-        <div className="dashboard-container">
-          {loading && <Spinner loading={loading} />}
-          <h1 className="dashboard-title">zkLend Position</h1>
-          <div className="dashboard-content">
-            <div className="top-cards-dashboard">
-              <Card label="Health Factor" value={healthFactor} icon={<HealthIcon className="icon" />} />
-              <Card label="Borrow Balance" cardData={cardData} icon={<EthIcon className="icon" />} />
-            </div>
-            <div className="dashboard-info-container">
-              <div className="dashboard-info-card">
-                <div className="tabs">
-                  <button
-                    onClick={() => setIsCollateralActive(true)}
-                    className={`tab ${isCollateralActive ? 'active' : ''}`}
-                  >
-                    <CollateralIcon className="tab-icon" />
-                    <span className="tab-title">Collateral & Earnings</span>
-                  </button>
-
-                  <div className="tab-divider" />
-
-                  <button
-                    onClick={() => setIsCollateralActive(false)}
-                    className={`tab ${!isCollateralActive ? 'active borrow' : ''}`}
-                  >
-                    <BorrowIcon className="tab-icon" />
-                    <span className="tab-title">Borrow</span>
-                  </button>
-                  <div className="tab-indicator-container">
-                    <div className={`tab-indicator ${isCollateralActive ? 'collateral' : 'borrow'}`} />
-                  </div>
-                </div>
-                {isCollateralActive ? (
-                  <Collateral
-                    getCurrentSumColor={getCurrentSumColor}
-                    startSum={startSum}
-                    currentSum={currentSum}
-                    data={cardData}
-                  />
-                ) : (
-                  <Borrow data={cardData} />
-                )}
-              </div>
-              <Button
-                className="redeem-btn"
-                variant="primary"
-                size="lg"
-                onClick={() => closePositionEvent()}
-                disabled={isClosing || !hasOpenedPosition}
+    <div className="dashboard flex min-h-screen w-[calc(100vw-372px)] ml-[372px]">
+  <Sidebar items={dashboardItems} />
+
+  <div className="dashboard-wrapper flex justify-center items-center w-[calc(100vw-735px)] h-full">
+    <div className="dashboard-container flex flex-col justify-center gap-2.5 p-6 pt-5 mx-24 h-full">
+      {loading && <Spinner loading={loading} />}
+      <h1 className="dashboard-title text-center text-[32px] font-semibold text-second-primary">
+        zkLend Position
+      </h1>
+      <div className="dashboard-content flex flex-col items-center justify-center w-[642px] gap-6 rounded-2xl py-4 text-second-primary">
+        <div className="top-cards-dashboard flex justify-between gap-2 p-0 m-0 w-[642px] h-[101px]">
+          <Card label="Health Factor" value={healthFactor} icon={<HealthIcon className="icon" />} />
+          <Card label="Borrow Balance" cardData={cardData} icon={<EthIcon className="icon" />} />
+        </div>
+        <div className="dashboard-info-container grid gap-6">
+          <div className="dashboard-info-card bg-transparent border border-light-purple rounded-lg w-[642px] h-[318px] p-4">
+            <div className="tabs flex justify-between relative items-center">
+              <button
+                onClick={() => setIsCollateralActive(true)}
+                className={`tab flex-1 text-center py-2 text-gray-500 cursor-pointer border-none bg-none text-lg font-semibold flex items-center justify-center ${isCollateralActive ? 'text-nav-button-hover' : ''}`}
+              >
+                <CollateralIcon className="tab-icon mr-2" />
+                <span className="tab-title text-lg font-semibold">Collateral & Earnings</span>
+              </button>
+
+              <div className="tab-divider w-[3px] h-[18px] rounded-lg bg-border-color mx-4" />
+
+              <button
+                onClick={() => setIsCollateralActive(false)}
+                className={`tab flex-1 text-center py-2 text-gray-500 cursor-pointer border-none bg-none text-lg font-semibold flex items-center justify-center ${!isCollateralActive ? 'text-[#ff35d3]' : ''}`}
               >
-                {isClosing ? 'Closing...' : 'Redeem'}
-              </Button>
-              <Button variant="secondary" size="lg" className="dashboard-btn telegram" onClick={handleOpen}>
-                <TelegramIcon className="tab-icon" />
-                Enable telegram notification bot
-              </Button>
-              {showModal && (
-                <ActionModal
-                  isOpen={showModal}
-                  title="Telegram Notification"
-                  subTitle="Do you want to enable telegram notification bot?"
-                  content={[
-                    'This will allow you to receive quick notifications on your telegram line in realtime. You can disable this setting anytime.',
-                  ]}
-                  cancelLabel="Cancel"
-                  submitLabel="Yes, Sure"
-                  submitAction={handleSubscribe}
-                  cancelAction={handleClose}
-                />
-              )}
+                <BorrowIcon className="tab-icon mr-2" />
+                <span className="tab-title text-lg font-semibold">Borrow</span>
+              </button>
+              <div className="tab-indicator-container absolute bottom-[-16px] left-0 w-[calc(100%-20px)] h-[1px] overflow-hidden">
+                <div className={`tab-indicator absolute bottom-0 left-0 w-full h-full transition-transform ease-in-out duration-300 ${isCollateralActive ? 'bg-gradient-to-r from-[#49abd2] to-transparent' : 'bg-gradient-to-r from-transparent to-[#ff35d3]'}`} />
+              </div>
             </div>
+            {isCollateralActive ? (
+              <Collateral
+                getCurrentSumColor={getCurrentSumColor}
+                startSum={startSum}
+                currentSum={currentSum}
+                data={cardData}
+              />
+            ) : (
+              <Borrow data={cardData} />
+            )}
           </div>
+          <Button
+            className="redeem-btn w-full"
+            variant="primary"
+            size="lg"
+            onClick={() => closePositionEvent()}
+            disabled={isClosing || !hasOpenedPosition}
+          >
+            {isClosing ? 'Closing...' : 'Redeem'}
+          </Button>
+          <Button variant="secondary" size="lg" className="dashboard-btn telegram" onClick={handleOpen}>
+            <TelegramIcon className="tab-icon" />
+            Enable telegram notification bot
+          </Button>
+
+          {showModal && (
+            <ActionModal
+              isOpen={showModal}
+              title="Telegram Notification"
+              subTitle="Do you want to enable telegram notification bot?"
+              content={[
+                'This will allow you to receive quick notifications on your telegram line in realtime. You can disable this setting anytime.',
+              ]}
+              cancelLabel="Cancel"
+              submitLabel="Yes, Sure"
+              submitAction={handleSubscribe}
+              cancelAction={handleClose}
+            />
+          )}
         </div>
       </div>
     </div>
+  </div>
+</div>
+
   );
 }