feat: add new button variants

Abstracted-Labs · Nov 24, 2023 · 72ceadd · 72ceadd
1 parent c258ee2
commit 72ceadd
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  variant: "primary" | "secondary";
+}
+
+const Button = (props: ButtonProps) => {
+  const { children, variant } = 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' }`}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -59,7 +59,7 @@ const Header = () => {
             </Link>
           </div>
 
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-4 text-xs lg:text-md">
             <Link to="/staking">
               <span className="truncate text-white">Staking</span>
             </Link>

diff --git a/src/routes/staking.tsx b/src/routes/staking.tsx
@@ -15,6 +15,7 @@ import { UnsubscribePromise } from "@polkadot/api/types";
 import { StakesInfo } from "./claim";
 import ProjectCard from "../components/ProjectCard";
 import StakingDashboard from "../components/StakingDashboard";
+import Button from "../components/Button";
 
 const TotalRewardsClaimedQuery = `
   query totalRewardsClaimed($accountId: String!) {
@@ -690,27 +691,22 @@ const Staking = () => {
             unclaimedEras ? (
             <>
               <div className="flex flex-col flex-wrap items-center justify-between md:flex-row">
-                <div>
-                  <span className="sr-only">OCIF Staking Dashboard</span>
-                </div>
+                <h4 className="lg:text-xl font-normal my-3">
+                  <span>OCIF Staking</span>
+                </h4>
                 <div className="flex gap-4 justify-between">
-                  <button
-                    type="button"
-                    className="leading-4 inline-flex items-center justify-center rounded-md bg-amber-300 px-4 py-2 text-base font-medium text-black shadow-sm hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 disabled:bg-neutral-400 text-sm md:text-base"
+                  <Button
                     onClick={handleUnbondTokens}
                     disabled={!hasUnbondedTokens}
-                  >
+                    variant="secondary">
                     Withdraw Unbonded TNKR
-                  </button>
-
-                  <button
-                    type="button"
-                    className="leading-4 inline-flex items-center justify-center rounded-md bg-amber-300 px-4 py-2 font-medium text-black shadow-sm hover:bg-amber-200 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2 disabled:bg-neutral-400 text-sm md:text-base"
+                  </Button>
+                  <Button
                     onClick={handleClaimAll}
                     disabled={unclaimedEras.total === 0 || isWaiting}
-                  >
+                    variant="primary">
                     Redeem Staking Rewards
-                  </button>
+                  </Button>
                 </div>
               </div>
 
@@ -728,7 +724,7 @@ const Staking = () => {
             </>
           ) : null}
 
-          <div>
+          {/* <div>
             {selectedAccount ? (
               <button
                 type="button"
@@ -738,7 +734,7 @@ const Staking = () => {
                 Register Project
               </button>
             ) : null}
-          </div>
+          </div> */}
 
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
             {stakingCores.map((core: StakingCore) => {