chore: update new styles for existing components

Abstracted-Labs · Dec 7, 2023 · 81bafc6 · 81bafc6
1 parent 4ed5fb0
commit 81bafc6
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 110 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -3,12 +3,13 @@ import React from "react";
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   variant: "primary" | "secondary";
+  mini?: boolean;
 }
 
 const Button = (props: ButtonProps) => {
-  const { children, variant } = props;
+  const { children, variant, mini, type, ...rest } = props;
   return (
-    <button {...props} type="button" className={`w-full h-auto flex items-center justify-center px-4 py-2 lg:py-3 lg:px-7 rounded-lg disabled:cursor-not-allowed disabled:bg-opacity-10 disabled:text-opacity-40 text-xs sm:text-sm lg:text-lg text-center leading-normal whitespace-nowrap backdrop-blur-sm transition duration-100 ${ variant === 'secondary' ? 'text-tinkerYellow text-opacity-60 bg-tinkerYellow bg-opacity-10 border-[1px] border-tinkerYellow border-opacity-50 hover:text-opacity-100 hover:bg-opacity-20 hover:border-opacity-100 disabled:border-opacity-30 disabled:bg-opacity-5 disabled:text-opacity-20' : 'text-tinkerYellow bg-tinkerYellow bg-opacity-20 enabled:hover:text-black hover:bg-opacity-100 hover:cursor-pointer' }`}>
+    <button {...rest} type={type} className={`${ mini ? 'h-9 lg:h-[46px]' : 'px-4 py-2 lg:py-3 lg:px-7 h-auto' } w-full flex items-center justify-center rounded-xl disabled:cursor-not-allowed disabled:bg-opacity-10 disabled:text-opacity-40 text-xs sm:text-sm lg:text-lg text-center leading-normal whitespace-nowrap backdrop-blur-sm transition duration-100 ${ variant === 'secondary' ? 'text-tinkerYellow text-opacity-60 bg-tinkerYellow bg-opacity-10 border-[1px] border-tinkerYellow border-opacity-50 hover:text-opacity-100 hover:bg-opacity-20 hover:border-opacity-100 disabled:border-opacity-30 disabled:bg-opacity-5 disabled:text-opacity-20' : 'text-tinkerYellow bg-tinkerYellow bg-opacity-20 enabled:hover:text-black hover:bg-opacity-100 hover:cursor-pointer' }`}>
       {children}
     </button>
   );

diff --git a/src/components/DashboardCard.tsx b/src/components/DashboardCard.tsx
@@ -10,7 +10,7 @@ interface DashboardCardProps {
 const DashboardCard = (props: DashboardCardProps) => {
   const { children, cardTitle, iconSrc, leading } = props;
   return (
-    <div className="min-w-[151px] h-[194px] bg-tinkerDarkGrey rounded-lg p-8 flex flex-col justify-between items-center">
+    <div className="min-w-[151px] h-[194px] bg-tinkerDarkGrey rounded-xl p-8 flex flex-col justify-between items-center">
       <div className="w-[48px] h-[48px] bg-[#393a3e] rounded-full mx-auto flex items-center justify-center">
         {iconSrc && <img src={iconSrc} alt="icon" />}
       </div>

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -0,0 +1,24 @@
+import { InputHTMLAttributes, forwardRef } from "react";
+
+interface InputProps extends InputHTMLAttributes<Partial<HTMLInputElement>> {
+  id?: string;
+  type?: string;
+  disabled?: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  return (
+    <>
+      <input
+        {...props}
+        ref={ref}
+        className="rounded-md w-full h-[45px] py-2 px-3 text-white text-xs leading-tight bg-tinkerGrey border-transparent focus:outline-none focus:ring-0 focus:border-tinkerYellow"
+      />
+    </>
+  );
+});
+
+export default Input;
+
diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx
@@ -48,7 +48,7 @@ const ProjectCard = (props: ProjectCardProps) => {
   return (
     <div
       key={core.account}
-      className="flex flex-col justify-between w-full bg-tinkerGrey rounded-lg space-y-4">
+      className="flex flex-col justify-between w-full bg-tinkerGrey rounded-xl space-y-4">
       <div className='p-8 h-96 flex flex-col justify-between'>
         <div className="flex items-center space-x-4">
           <Avatar src={core.metadata.image} alt="Project Image" />
@@ -136,7 +136,7 @@ const ProjectCard = (props: ProjectCardProps) => {
       </div>
       {selectedAccount ? (
         <div className='relative' style={{ margin: 0 }}>
-          <button type="button" className="bg-tinkerYellow bg-opacity-20 hover:bg-opacity-100 text-tinkerYellow hover:text-black w-full rounded-bl-lg rounded-br-lg p-4 transition duration-100 disabled:cursor-not-allowed disabled:bg-opacity-20 focus:outline-none disabled:hover:bg-opacity-20 disabled:text-black disabled:text-opacity-40"
+          <button type="button" className="bg-tinkerYellow bg-opacity-20 hover:bg-opacity-100 text-tinkerYellow hover:text-black w-full rounded-bl-xl rounded-br-xl p-4 transition duration-100 disabled:cursor-not-allowed disabled:bg-opacity-20 focus:outline-none disabled:hover:bg-opacity-20 disabled:text-black disabled:text-opacity-40"
             onClick={() => {
               const parsedTotalStaked =
                 totalUserStaked || new BigNumber("0");

diff --git a/src/components/StakingDashboard.tsx b/src/components/StakingDashboard.tsx
@@ -40,7 +40,7 @@ const StakingDashboard = (props: StakingDashboardProps) => {
 
   return (
     <div
-      className="relative overflow-x-auto w-full rounded-lg shadow flex flex-row gap-4 justify-between backdrop-blur-sm bg-black bg-opacity-40 tinker-scrollbar scrollbar scrollbar-thumb-amber-300 scrollbar-thin overflow-x-auto p-4">
+      className="relative overflow-x-auto w-full rounded-xl shadow flex flex-row gap-4 justify-between backdrop-blur-sm bg-black bg-opacity-40 tinker-scrollbar scrollbar scrollbar-thumb-amber-300 scrollbar-thin overflow-x-auto p-4">
 
       <DashboardCard cardTitle="My Total Stake" iconSrc={MyStakeIcon}>
         {formatBalance(totalUserStaked.toString(), {
@@ -50,6 +50,20 @@ const StakingDashboard = (props: StakingDashboardProps) => {
         }) || "0 TNKR"}
       </DashboardCard>
 
+      <DashboardCard cardTitle="Staking APY" iconSrc={StakingApyIcon}>
+        {totalSupply &&
+          totalSupply.toNumber() > 0 &&
+          totalStaked &&
+          totalStaked.toNumber() > 0
+          ? totalSupply
+            .times(4) // 4 eras per year
+            .dividedBy(totalStaked) // Total supply / total staked
+            .decimalPlaces(2)
+            .toString()
+          : 0}
+        %
+      </DashboardCard>
+
       <DashboardCard
         cardTitle={
           <>
@@ -70,20 +84,6 @@ const StakingDashboard = (props: StakingDashboardProps) => {
         {totalStaked && totalStaked.toNumber() > 0 && aggregateStaked && aggregateStaked.toNumber() > 0 ? totalStaked.dividedBy(aggregateStaked).times(100).toFixed(2) : 0}%
       </DashboardCard>
 
-      <DashboardCard cardTitle="Staking APY" iconSrc={StakingApyIcon}>
-        {totalSupply &&
-          totalSupply.toNumber() > 0 &&
-          totalStaked &&
-          totalStaked.toNumber() > 0
-          ? totalSupply
-            .times(4) // 4 eras per year
-            .dividedBy(totalStaked) // Total supply / total staked
-            .decimalPlaces(2)
-            .toString()
-          : 0}
-        %
-      </DashboardCard>
-
       <DashboardCard cardTitle="Annual DAO Rewards" iconSrc={AnnualRewardIcon}>
         {totalSupply && totalSupply.toNumber() > 0
           ? formatBalance(

diff --git a/src/modals/AccountSelector.tsx b/src/modals/AccountSelector.tsx
@@ -50,7 +50,7 @@ const AccountSelector = (props: { isOpen: boolean; }) => {
       </button>
       <Dialog.Panel>
         <>
-          <div className="fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 flex flex-col justify-between w-[350px] md:w-[530px] h-[472px] bg-tinkerGrey rounded-lg space-y-4 p-8">
+          <div className="fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 flex flex-col justify-between w-[350px] md:w-[530px] h-[472px] bg-tinkerGrey rounded-xl space-y-4 p-8">
             <h2 className="text-md font-bold text-white fixed bg-tinkerGrey w-[calc(100%-2rem)] max-w-lg pb-4">Select your Wallet</h2>
             <ul className="w-full h-80 tinker-scrollbar scrollbar scrollbar-thumb-amber-300 overflow-y-auto mb-10 pt-8 pr-4">
               {accounts.map((account, index) => {
@@ -59,7 +59,7 @@ const AccountSelector = (props: { isOpen: boolean; }) => {
                     role="menuitem"
                     tabIndex={0}
                     key={`${ account.address }-${ index }}`}
-                    className={`flex flex-row items-center gap-4 cursor-pointer p-6 transition-colors hover:text-amber-300 ${ account.address === selectedAccount?.address ? 'rounded-lg bg-tinkerLightGrey text-white hover:bg-neutral-900' : 'text-white' }`}
+                    className={`flex flex-row items-center gap-4 cursor-pointer p-6 transition-colors hover:text-amber-300 ${ account.address === selectedAccount?.address ? 'rounded-xl bg-tinkerLightGrey text-white hover:bg-neutral-900' : 'text-white' }`}
                     onClick={() => {
                       handleAccountSelection(account);
                     }}
@@ -91,7 +91,7 @@ const AccountSelector = (props: { isOpen: boolean; }) => {
               </span>
             </button>
           </div>
-          <div className="fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[49] w-[370px] md:w-[550px] h-[492px] rounded-lg border-[30px] border-tinkerGrey border-opacity-50" />
+          <div className="fixed left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[49] w-[370px] md:w-[550px] h-[492px] rounded-xl border-[30px] border-tinkerGrey border-opacity-50" />
         </>
       </Dialog.Panel>
     </Dialog>