feat/migrate-stake-and-withdraw-page-to-tailwind

frontend/src/components/vault/gas-fee/GasFee.jsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import SettingIcon from '@/assets/icons/settings.svg?react';
-import './gasFee.css';
 
 export default function GasFee() {
   return (
-    <div className="main-card-footer">
-      <div className="gas-fee-container">
-        <div className="gas-fee-circle">
-          <SettingIcon className="gas-fee-icon" />
-        </div>
-        <div className="gas-fee-title">Gas fee: 0.00 STRK</div>
+    <div className="w-full flex flex-row  items-center justify-between gap-2 py-3 px-2 border-t border-[#36294e]">
+      <div className="bg-[#201338] rounded-full p-2">
+        <SettingIcon />
       </div>
+      <div className="text-sm text-[#83919F] font-normal ">Gas fee: 0.00 STRK</div>
     </div>
   );
 }

frontend/src/components/vault/metric-card/MetricCard.jsx

@@ -3,7 +3,7 @@ import './metricCard.css';
 
 export default function MetricCard({ title, value }) {
   return (
-    <div className="metric-card">
+    <div className="metric-card" >
       <div className="card-header">
         <span className="label">{title}</span>
       </div>

frontend/src/globals.css

@@ -163,14 +163,15 @@ a.svelte-1mtuslq.svelte-1mtuslq {
   --color-second-primary: #fdfdfd;
   --color-plain-button-bg: #0e0a16;
   --color-header-button-bg: #120721;
+  --color-btn-dark: rgb(18, 7, 33);
 
-  --font-text: "Rethink Sans", sans-serif;
-  --font-primary: "Open Sans", sans-serif;
-  --font-third: "Allerta Stencil", sans-serif;
-  --font-inter: "Inter", sans-serif;
+  --font-text: 'Rethink Sans', sans-serif;
+  --font-primary: 'Open Sans', sans-serif;
+  --font-third: 'Allerta Stencil', sans-serif;
+  --font-inter: 'Inter', sans-serif;
 
-  --bg-app: url("../public/desktop-background.png");
-  --bg-app-mobile: url("../public/mobile-background.png");
+  --bg-app: url('../public/desktop-background.png');
+  --bg-app-mobile: url('../public/mobile-background.png');
   --bg-main-gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
   --bg-button-gradient: linear-gradient(55deg, #74d6fd 0%, #e01dee 100%);
   --bg-button-gradient-hover: linear-gradient(55deg, #74d6fd 0%, #74d6fd 100%);
@@ -185,11 +186,12 @@ a.svelte-1mtuslq.svelte-1mtuslq {
   --shadow-card: inset 4px 4px 9px 0 rgba(153, 234, 255, 0.25), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
   --blur-card: 42.1875px;
   --blur-backdrop: 12px;
+
 
   --border-purple: 1px;
   --border-midnight-purple: 1px;
   --border-midnight-purple-hover: 1px;
 
   --z-9999: 9999;
   --z-100: 100;
-}
+}

frontend/src/pages/stake/Stake.jsx

@@ -1,19 +1,19 @@
 import React, { useState } from 'react';
-import MetricCard from '@/components/vault/stake-card/StakeCard';
+import MetricCard from '@/components/vault/metric-card/MetricCard';
 import STRK from '@/assets/icons/strk.svg';
 import USDCc from '@/assets/icons/apy_icon.svg';
-import './stake.css';
 import { VaultLayout } from '@/components/vault/VaultLayout';
-import { Button } from '@/components/ui/custom-button/Button';
+import { cn } from '@/utils/cn';
 import GasFee from '@/components/vault/gas-fee/GasFee';
-import BalanceCards from '@/components/ui/balance-cards/BalanceCards';
 
 function Stake() {
   const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
   const [amount, setAmount] = useState('0');
   const [showDrop, setShowDrop] = useState(false);
 
-  const networks = [{ name: 'Starknet', image: STRK }];
+  const networks = [
+    { name: 'Starknet', image: STRK },
+  ];
   const handleChange = (network) => {
     setSelectedNetwork(network.name);
   };
@@ -27,99 +27,107 @@ function Stake() {
   };
   return (
     <VaultLayout>
-      <div className="stake-wrapper">
-        <div className="stake-container">
-          <div className="balance-display-container">
-            <div className="large-screen-balance">
-              <div className="main-container">
-                <div className="top-cards">
-                  <MetricCard title="STRK Balance" value="0.046731" icon={STRK} />
-                  <MetricCard title="APY Balance" value="0.046731" icon={USDCc} />
-                </div>
-              </div>
-            </div>
-            <div className="mobile-screen-balance">
-              <BalanceCards />
-            </div>
+      <div className="w-screen h-full  min-h-screen p-[7%]  2xl:h-screen flex flex-col justify-center items-center lg:ml-32">
+        <div className='w-full max-w-[650px] h-full flex flex-col items-center justify-center' >
+          <h1 className="text-2xl text-white text-center mt-5 mb-10">zkLend Staking</h1>
+          <div className="w-full flex items-stretch h-[103px] justify-between space-x-5    ">
+            <MetricCard title="STRK Balance" value="0.046731" icon={STRK} />
+            <MetricCard title="APY Balance" value="0.046731" icon={USDCc} />
           </div>
-          <div className="form">
-            <h1 className="stake-title">Please submit your leverage details</h1>
-            <div className="main-stake-card">
-              <div
-                onClick={() => setShowDrop(!showDrop)}
-                className={showDrop ? 'clicked-network-selector-container' : 'network-selector-container'}
-              >
-                <div className="network-selector">
-                  <div className="selected-network">
-                    <img
-                      src={networks.find((network) => network.name === selectedNetwork)?.image}
-                      alt={selectedNetwork}
-                      className="network-icon"
-                    />
-                    <span>{selectedNetwork}</span>
+
+          <div className="mt-1.5">
+            <p className="text-white text-center text-lg mt-3 mb-2">Please submit your leverage details</p>
+            <div className="border border-[#36294e] p-5 pt-2 px-7 rounded-lg mt-5 w-[650px]">
+
+
+              <div className="w-full">
+                <div
+                  className={cn(
+                    'py-1 border-b border-b-[#36294E] relative',
+                    showDrop ? 'clicked-network-selector-container  w-full' : 'network-selector-container'
+                  )}
+                  onMouseEnter={() => setShowDrop(true)}
+                  onMouseLeave={() => setShowDrop(false)}
+                >
+                  <div className=" flex items-center justify-between gap-3 bg-[#120721]  text-white py-3 px-4 cursor-pointer text-[1rem] w-full relative z-[10] ">
+                    <div className=" flex items-center gap-3">
+                      <img
+                        src={networks.find((network) => network.name === selectedNetwork)?.image}
+                        alt={selectedNetwork}
+                        className="network-icon w-6 h-6 rounded-full  "
+                      />
+                      <span>{selectedNetwork}</span>
+                    </div>
+                    <svg
+                      className={`chevron transition-transform duration-300 ease-in-out ml-auto   transform ${showDrop ? "rotate-[180deg] " : "rotate-[0deg]"} `}
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M6 9L12 15L18 9"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
                   </div>
-                  <svg
-                    className="chevron"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M6 9L12 15L18 9"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </div>
 
-                <div className="network-dropdown">
-                  {networks.map((network) => (
-                    <div key={network.name} className="network-option" onClick={() => handleChange(network)}>
-                      <img src={network.image} alt={network.name} className="network-icon" />
-                      <span>{network.name}</span>
+                  {showDrop && (
+                    <div className="network-dropdown absolute top-[100%] left-0 w-full rounded-sm z-[1] shadow-custom group-hover:block">
+                      {networks.map((network) => (
+                        <div
+                          key={network.name}
+                          className={`network-option py-[0.75rem] px-[1rem] my-3 bg-[#83919f] text-[#0b0c10] flex  items-center gap-[0.75rem] cursor-pointer rounded-[2rem] transition-transform duration-300 ease-in-out ${showDrop ? 'visibile' : 'invisible'} `}
+                          onClick={() => handleChange(network)}
+                        >
+                          <img src={network.image} alt={network.name} className="network-icon" />
+                          <span>{network.name}</span>
+                        </div>
+                      ))}
                     </div>
-                  ))}
+                  )}
                 </div>
               </div>
 
-              <div className="amount-input" aria-labelledby="amount-input-label">
-                <input
-                  type="text"
-                  id="amount-field"
-                  value={amount}
-                  onChange={handleAmountChange}
-                  pattern="^\d*\.?\d*$"
-                  className="amount-field"
-                  aria-describedby="currency-symbol"
-                  placeholder="0.00"
-                />
-                <span id="currency-symbol" className="currency">
-                  STRK
-                </span>
+              <div
+                className="w h-[158px] flex flex-row justify-center items-center my-15"
+                aria-labelledby="amount-input-label"
+              >
+                <label className="w-full text-[#393942] min-w-[142px] max-w-[140px]  font-semibold flex flex-col  justify-center gap-3 ">
+                  <input
+                    type="text"
+                    id="amount-field"
+                    value={amount}
+                    onChange={handleAmountChange}
+                    pattern="^\d*\.?\d*$"
+                    className="amount-field  bg-transparent border-none text-[#83919f] text-[64px] font-semibold outline-none text-center w-full "
+                    aria-describedby="currency-symbol"
+                    placeholder="0.00"
+                    style={{
+                      fontSize: '64px',
+                    }}
+                  />
+                  <h3 className="font-semibold text-sm text-center">$0.00 APY / year</h3>
+                </label>
+                <div className="self-start text-[#393942] font-medium text-sm  ">STRK</div>
               </div>
 
-              <div className="apy-rate">$0.00 APY / year</div>
-              <div className="parent-divider1">
-                <div className="divider1"></div>
-              </div>
 
               <GasFee />
             </div>
-          </div>
-          <div className="can-stk">
-            <Button variant="secondary" size="lg" className="cancel">
-              {' '}
-              Cancel
-            </Button>
-            <Button variant="secondary" size="lg" className="stake-button1">
-              Stake
-            </Button>
+            <div class="relative p-[1px] rounded-lg bg-gradient-to-r from-[#74d6fd] to-[#e01dee] mb-5 mt-5 
+hover:from-[#e01dee] hover:to-[#74d6fd] transition duration-100 ease-in-out ">
+              <button class="w-full h-full bg-[rgb(18,7,33)] text-white px-4 py-4 rounded-lg font-semibold cursor-pointer">
+                Stake
+              </button>
+            </div>
           </div>
         </div>
+
       </div>
     </VaultLayout>
   );