FEAT: UI improvements

Plenty-network · Feb 8, 2024 · 855a4a5 · 855a4a5
1 parent 5ebc715
commit 855a4a5
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 53 deletions.
diff --git a/src/components/EmptyVault.tsx b/src/components/EmptyVault.tsx
@@ -1,29 +1,27 @@
 import React from "react";
+import Button from "./Button";
 
 const EmptyVault = ({ openModal }: { openModal: Function }) => {
   return (
-    <div className="rounded-lg overflow-hidden shadow-md bg-white">
-      <div className="px-6 py-2 bg-gradient-to-r from-blue-400 to-blue-200">
-        <h2 className="text-xl font-bold">Vault</h2>
+    <div className="rounded-lg overflow-hidden shadow-md bg-[#131313] text-[#797979]">
+      <div className="px-6 py-2 bg-gradient-to-r from-purple-800 to-purple-600">
+        <h2 className="text-xl font-bold text-white">Vault</h2>
       </div>
       <div className="flex items-center mb-4 px-6 pt-3">
-        <p className="text-xl font-semibold text-gray-700">
-          You haven't borrowed any pUSD yet.
-        </p>
+        <p className="text-xl font-semibold text-white">You haven't borrowed any pUSD yet.</p>
       </div>
-      <p className="text-large text-gray-700 px-6 pb-6">
-        You can borrow pUSD by opening a Vault.
-      </p>
+      <p className="text-large text-[#797979] px-6 pb-6">You can borrow pUSD by opening a Vault.</p>
       <div className="flex flex-row-reverse">
-        <button
-          className="right-0 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded mx-6 mb-3"
-          onClick={() => {
-            openModal(true);
-            console.log("Open modal");
-          }}
-        >
-          Open Vault
-        </button>
+        <div className="right-0 text-white mx-6 mb-3">
+          <Button
+            onClick={() => {
+              openModal(true);
+              console.log("Open modal");
+            }}
+          >
+            <div className="text-sm px-3 py-2.5">Open Vault</div>
+          </Button>
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/Params.tsx b/src/components/Params.tsx
@@ -19,40 +19,41 @@ const Params = ({
   pUSDInStabilityPool
 }: ParamsProps) => {
   return (
-    <div className="bg-white shadow-lg rounded-lg p-6 bg-gradient-to-r from-blue-200 to-blue-400 w-full md:w-[45%]">
-      <h3 className="text-xl mb-2 font-semibold border-b pb-2">Neper statistics</h3>
+    <div className="text-[#797979] shadow-lg rounded-lg p-6 bg-[#131313] w-full md:w-[45%]">
+      <h3 className="text-xl mb-2 font-semibold border-b pb-2 text-white">Neper statistics</h3>
       <div className="mb-6">
-        <h4 className="font-bold text-lg mb-3">Protocol</h4>
         <ul>
           <li className="flex justify-between py-1">
             <span>Current MCR</span>
-            <span className="font-medium">{mcr}%</span>
+            <span className="font-medium text-white">{mcr}%</span>
           </li>
           <li className="flex justify-between py-1">
             <span>Total Collateral Ratio</span>
-            <span className="font-medium">
+            <span className="font-medium text-white">
               {((parseFloat(totalColl) * 41000 * 100) / parseFloat(totalDebt)).toFixed(2)}%
             </span>
           </li>
           <li className="flex justify-between py-1">
             <span>Total Collateral</span>
-            <span className="font-medium">{totalColl} WBTC</span>
+            <span className="font-medium text-white">{totalColl} WBTC</span>
           </li>
           <li className="flex justify-between py-1">
             <span>Total Debt</span>
-            <span className="font-medium">{totalDebt} pUSD</span>
+            <span className="font-medium text-white">{totalDebt} pUSD</span>
           </li>
           <li className="flex justify-between py-1">
             <span>Borrowing Fee</span>
-            <span className="font-medium">{(parseFloat(baseRate) + 0.5).toFixed(3)} %</span>
+            <span className="font-medium text-white">
+              {(parseFloat(baseRate) + 0.5).toFixed(3)} %
+            </span>
           </li>
           <li className="flex justify-between py-1">
             <span>Vaults</span>
-            <span className="font-medium">{vaultCount}</span>
+            <span className="font-medium text-white">{vaultCount}</span>
           </li>
           <li className="flex justify-between py-1">
             <span>pUSD in Stability Pool</span>
-            <span className="font-medium">
+            <span className="font-medium text-white">
               {pUSDInStabilityPool} pUSD (
               {BigNumber(pUSDInStabilityPool)
                 .dividedBy(BigNumber(totalDebt))

diff --git a/src/components/StabilityPool.tsx b/src/components/StabilityPool.tsx
@@ -22,9 +22,8 @@ const StabilityPool = ({}) => {
 
   const { setLoader } = useActions();
 
-  const { depositStablityPool, withdrawStabilityPool, fetchAllData,
-    stabilityPool
-  } = useAppContext();
+  const { depositStablityPool, withdrawStabilityPool, fetchAllData, stabilityPool } =
+    useAppContext();
 
   const onStake = async () => {
     try {
@@ -62,18 +61,18 @@ const StabilityPool = ({}) => {
   return (
     <div>
       {
-        <div className="text-xl rounded-md bg-white">
-          <div className="px-6 py-2 bg-gradient-to-r from-blue-400 to-blue-200">
-            <h2 className="text-xl font-bold">Stability Pool</h2>
+        <div className="text-xl rounded-md bg-[#131313]">
+          <div className="px-6 py-2 bg-gradient-to-r from-purple-800 to-purple-600">
+            <h2 className="text-xl font-bold text-white">Stability Pool</h2>
           </div>
           <div className="flex items-center justify-between gap-8 px-8 py-4">
             <div>
-              <div className="font-medium mb-1">Unclaimed WBTC</div>
-              <div>{stabilityPool.reward_amount} WBTC</div>
+              <div className="font-medium mb-1 text-[#797979]">Unclaimed WBTC</div>
+              <div className="text-white">{stabilityPool.reward_amount} WBTC</div>
             </div>
             <div>
-              <div className="font-medium mb-1">pUSD Staked</div>
-              <div>{stabilityPool.stake_amount} pUSD</div>
+              <div className="font-medium mb-1 text-[#797979]">pUSD Staked</div>
+              <div className="text-white">{stabilityPool.stake_amount} pUSD</div>
             </div>
           </div>
           <div className="h-0.5"></div>
@@ -105,7 +104,7 @@ const StabilityPool = ({}) => {
         placeholder="pUSD amount"
         error={withdrawError}
         value={withdrawInput}
-        onClose={() => setWithdrawCollateralModalOpen(false)}
+        onClose={() => setWithdrawModalOpen(false)}
         onSubmit={onWithdraw}
         onChange={v => setWithdrawInput(v)}
       />

diff --git a/src/components/Vault.tsx b/src/components/Vault.tsx
@@ -119,25 +119,25 @@ const Vault = ({ isVault = false, id, coll, debt, collRatio, liquidationAt }: Va
       {!isVault ? (
         <EmptyVault openModal={setCreateVaultModalOpen} />
       ) : (
-        <div className="text-xl rounded-md bg-white">
-          <div className="px-6 py-2 bg-gradient-to-r from-blue-400 to-blue-200">
-            <h2 className="text-xl font-bold">Vault</h2>
+        <div className="text-xl rounded-md bg-[#131313] text-white">
+          <div className="px-6 py-2 bg-gradient-to-r from-purple-800 to-purple-600">
+            <h2 className="text-xl font-bold text-white">Vault</h2>
           </div>
-          <div className="flex flex-col md:flex-row items-center justify-between gap-8 px-8 py-4">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-8 px-8 py-4 ">
             <div className="flex justify-between w-full flex-row md:flex-col">
-              <div className="font-medium mb-1">Collateral Ratio</div>
+              <div className="font-medium mb-1 text-[#797979]">Collateral Ratio</div>
               <div className="text-base md:text-lg">{collRatio} %</div>
             </div>
             <div className="flex justify-between w-full flex-row md:flex-col">
-              <div className="font-medium mb-1">Collateral Value</div>
+              <div className="font-medium mb-1 text-[#797979]">Collateral Value</div>
               <div className="text-base md:text-lg">{coll} WBTC</div>
             </div>
             <div className="flex justify-between w-full flex-row md:flex-col">
-              <div className="font-medium mb-1">Debt</div>
+              <div className="font-medium mb-1 text-[#797979]">Debt</div>
               <div className="text-base md:text-lg">{debt} pUSD</div>
             </div>
             <div className="flex justify-between w-full flex-row md:flex-col">
-              <div className="font-medium mb-1">Liquidation at</div>
+              <div className="font-medium mb-1 text-[#797979]">Liquidation at</div>
               <div className="text-base md:text-lg">$ {liquidationAt}</div>
             </div>
           </div>

diff --git a/src/components/modals/Modal.tsx b/src/components/modals/Modal.tsx
@@ -30,14 +30,14 @@ const Modal = ({
   if (!show) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-70 flex justify-center items-center z-400">
-      <div className="p-4 bg-white rounded-md w-3/4 md:w-1/3 shadow-lg">
+    <div className="fixed inset-0 bg-black bg-opacity-70 flex justify-center items-center text-white z-400">
+      <div className="p-4 bg-[#131313] rounded-md w-3/4 md:w-1/3 shadow-lg">
         <div className="flex items-center justify-between mb-6">
-          <h2 className="text-lg font-medium">{heading}</h2>
+          <h2 className="text-lg font-medium text-white">{heading}</h2>
           <i onClick={onClose} className="hover:cursor-pointer bi bi-x text-2xl" />
         </div>
         <div className="mb-4">
-          <label htmlFor="input1" className="block text-gray-700 text-sm font-bold mb-2">
+          <label htmlFor="input1" className="block text-[#797979] text-sm font-bold mb-2">
             {label}
           </label>
           <input
@@ -46,7 +46,7 @@ const Modal = ({
             placeholder={placeholder}
             onChange={e => onChange(e.target.value)}
             value={value}
-            className="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none"
+            className="appearance-none border border-[#797979] text-white rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none bg-[#222222]"
           />
           {subLabel && <span className="text-xs">{subLabel}</span>}
           {error && <div className="text-base mt-3 text-red-600">Invalid amount</div>}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,7 +5,7 @@ module.exports = {
     extend: {
       colors: {
         primary: "#000000",
-        secondary: "#62A6F9",
+        secondary: "#7D29C6",
         beige: "#EFEAE0"
       }
     }