APT-1612-input+tabs-similarity

Zilliqa · Dec 27, 2024 · eff9cbe · eff9cbe
1 parent c55d58e
commit eff9cbe
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 13 deletions.
diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx
@@ -62,7 +62,7 @@ const StakingCalculator: React.FC = () => {
     }
     setZilToStake(valueTemp.replace(/0*(\d+)/, '$1'));
 
-    if (zilToStake === '') setZilToStake('1');
+    if (zilToStake === '') setZilToStake('0');
   };
 
   const zilToStakeNumber = parseFloat(zilToStake);
@@ -84,7 +84,7 @@ const StakingCalculator: React.FC = () => {
     stakingPoolForView && (
       <>
         <div>
-          <div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7.5 bg-darkbg rounded-3xl">
+          <div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7 bg-darkbg rounded-3xl items-center">
             <div className="h-fit self-center">
               <Input
                 className={`h3 flex items-baseline !bg-transparent !border-transparent ${
@@ -97,10 +97,10 @@ const StakingCalculator: React.FC = () => {
                 prefix="ZIL"
                 status={!zilToStakeOk ? 'error' : undefined}
               />
-              <span className="flex items-center ">
+              <span className="flex items-center whitespace-nowrap ">
                 {stakingPoolForView!.stakingPool.data ? (
                   <>
-                    <span className="body1">
+                    <span className="body2-bold">
                       ~
                       {
                         !isNaN(zilToStakeNumber) && !isNaN(stakingPoolForView.stakingPool.data
@@ -115,7 +115,7 @@ const StakingCalculator: React.FC = () => {
                           .tokenSymbol
                       }{' '}
                     </span>
-                    <span className="body1 ml-2 text-aqua1">
+                    <span className="body2-bold ml-2 text-aqua1">
                       ~
                       {formatPercentage(
                         stakingPoolForView!.stakingPool.data.apr
@@ -125,7 +125,7 @@ const StakingCalculator: React.FC = () => {
                 ) : (
                   <div className="animated-gradient mr-1 h-[1.5em] w-[3em]"></div>
                 )}
-                <span className="body1 text-aqua1"> APR</span>
+                <span className="body2-bold text-aqua1"> APR</span>
               </span>
             </div>
 

diff --git a/src/components/unstakingCalculator.tsx b/src/components/unstakingCalculator.tsx
@@ -82,7 +82,7 @@ const UnstakingCalculator: React.FC = () => {
     stakingPoolForView && (
       <div className="bg-black">
         <div>
-          <div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7.5 bg-darkbg rounded-3xl">
+          <div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7 bg-darkbg rounded-3xl items-center">
             <div className="h-fit self-center">
               <Input
                 className={`h3 flex items-baseline !bg-transparent !border-transparent ${

diff --git a/src/components/withdrawUnstakedZilPanel.tsx b/src/components/withdrawUnstakedZilPanel.tsx
@@ -60,7 +60,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
 
       {!!availableUnstake?.length ? (
         availableUnstake.map((item, claimIdx) => (
-          <div className="flex flex-col justify-between gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full"
+          <div className="flex flex-col min-h-[114px] lg:min-h-[157px] xl:min-h-[173px] justify-evenly gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full"
             key={claimIdx}
           >
             <div className="items-center h4 w-full flex justify-between text-gray4">
@@ -93,7 +93,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
           </div>
         ))
       ) : !!pendingUnstake?.length ? (
-        <div className="flex flex-col justify-between gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full">
+        <div className="flex flex-col min-h-[114px] lg:min-h-[157px] xl:min-h-[173px] justify-evenly gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full">
              <div className="body2 text-gray2">
             Next available reward             </div>
             <div className=" h4 mt-2 w-full flex justify-between text-gray4">

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -101,7 +101,7 @@ body {
   }
 
   .btn-secondary-colored {
-    @apply !gap-0 !bg-transparent !whitespace-normal py-3 px-8 w-full rounded font-int-extrabold text-12 leading-6 tracking-widest !h-auto uppercase border-solid border-2 cursor-pointer duration-500 ease-in-out;
+    @apply !gap-0 !bg-transparent !whitespace-normal py-1.5 px-4 w-full rounded font-int-extrabold text-12 leading-6 tracking-widest !h-auto uppercase border-solid border-2 cursor-pointer duration-500 ease-in-out;
 
     &:hover {
       @apply !opacity-80;

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -13,9 +13,8 @@ const config: Config = {
         "gradient-conic":
         "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
         'primary-gradient' : 'radial-gradient(120.62% 683.52% at 110.84% 156.15%, #C5FFFD 6.84%, rgba(111, 255, 194, 0.760784) 48.36%, #00DABA 100%)',
-        'gradientbg': 'linear-gradient(129.93deg, rgba(175, 175, 175, 0.12) 16.6%, rgba(17, 243, 179, 0.12) 90.65%)',
-        'darkbg': 'linear-gradient(314.92deg, rgba(17, 39, 49, 0.4) 28.08%, rgba(9, 9, 9, 0.4) 97.04%)',
-
+         'gradientbg': 'linear-gradient(129.93deg, rgba(175, 175, 175, 0.12) 16.6%, rgba(17, 243, 179, 0.12) 90.65%)',
+         'darkbg': 'linear-gradient(314.92deg, rgba(17, 39, 49, 0.4) 28.08%, rgba(9, 9, 9, 0.4) 97.04%)',
        },
        colors: {
         black1: '#010101',