From f9bf2a5a01484da4132b4020338c3ce9078205c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= Date: Thu, 9 Nov 2023 21:51:26 +0000 Subject: [PATCH 1/2] chore: change disabled button background --- layout/Product/Product.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layout/Product/Product.tsx b/layout/Product/Product.tsx index f6f16c0e..7bcff6be 100644 --- a/layout/Product/Product.tsx +++ b/layout/Product/Product.tsx @@ -89,7 +89,7 @@ function ProductSlug() { refetchUser(); }) } - className="m-auto block h-20 w-full rounded-full bg-quinary hover:opacity-75 disabled:opacity-75" + className="m-auto block h-20 w-full rounded-full bg-quinary hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75" disabled={user.token_balance < product.price} >

REDEEM

From 644aec268f49d4c9624d6afd4b46458322c73d4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A1rio=20Rodrigues?= Date: Fri, 10 Nov 2023 08:46:56 +0000 Subject: [PATCH 2/2] chore: use a Button component --- components/Button/index.tsx | 11 +++++++---- components/Layout/Layout.tsx | 2 +- layout/Attendee/Wheel/Wheel.tsx | 16 +++++++--------- layout/Product/Product.tsx | 13 ++++++------- .../Staff/components/StaffRedeemButton/index.jsx | 5 ++--- .../dashboard/SponsorBadgeButton/index.jsx | 9 ++++++--- .../dashboard/SponsorPrizeButton/index.jsx | 6 +++--- .../sponsor/spotlight/SpotlightButton/index.jsx | 6 +++--- 8 files changed, 35 insertions(+), 33 deletions(-) diff --git a/components/Button/index.tsx b/components/Button/index.tsx index 87dcc5f3..838e4880 100644 --- a/components/Button/index.tsx +++ b/components/Button/index.tsx @@ -1,12 +1,14 @@ import { ButtonHTMLAttributes } from "react"; interface Props extends ButtonHTMLAttributes { - text: string; + title: string; + description: string; customStyle?: string; } export default function Button({ - text, + title, + description, type, disabled, onClick, @@ -19,9 +21,10 @@ export default function Button({ disabled={disabled} className={`${ customStyle || "" - } w-full items-center rounded-full border px-4 py-4 text-center font-iregular text-sm shadow-sm`} + } m-auto block h-20 rounded-full bg-quinary hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75`} > - {text} +

{title}

+

{description}

); } diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx index 09b6a0ac..3b233892 100644 --- a/components/Layout/Layout.tsx +++ b/components/Layout/Layout.tsx @@ -185,7 +185,7 @@ function MobileNavbar({ diff --git a/layout/Attendee/Wheel/Wheel.tsx b/layout/Attendee/Wheel/Wheel.tsx index 5aa9f2e2..fc113973 100644 --- a/layout/Attendee/Wheel/Wheel.tsx +++ b/layout/Attendee/Wheel/Wheel.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from "react"; import { withAuth, useAuth } from "@context/Auth"; import Heading from "@components/Heading"; - +import Button from "@components/Button"; import Layout from "@components/Layout"; import { @@ -202,18 +202,16 @@ function WheelPage() {
- + title="SPIN THE WHEEL" + description={`${price} tokens💰`} + />
diff --git a/layout/Product/Product.tsx b/layout/Product/Product.tsx index 7bcff6be..9d985882 100644 --- a/layout/Product/Product.tsx +++ b/layout/Product/Product.tsx @@ -7,7 +7,7 @@ import { getProduct, buyProduct } from "@lib/api"; import { withAuth, useAuth } from "@context/Auth"; import Balance from "@components/Balance"; - +import Button from "@components/Button"; import Layout from "@components/Layout"; function ProductSlug() { @@ -82,19 +82,18 @@ function ProductSlug() {
{product.can_buy > 0 && product.stock > 0 && ( - + title="REDEEM" + description={`${product.price} tokens 💰`} + /> )}
diff --git a/layout/Staff/components/StaffRedeemButton/index.jsx b/layout/Staff/components/StaffRedeemButton/index.jsx index f817b489..6274fae0 100644 --- a/layout/Staff/components/StaffRedeemButton/index.jsx +++ b/layout/Staff/components/StaffRedeemButton/index.jsx @@ -1,9 +1,8 @@ +import Button from "@components/Button"; export default function StaffRedeemButton() { return (
- +
); } diff --git a/layout/moonstone/sponsor/dashboard/SponsorBadgeButton/index.jsx b/layout/moonstone/sponsor/dashboard/SponsorBadgeButton/index.jsx index 3fb2f6ef..38f1fafc 100644 --- a/layout/moonstone/sponsor/dashboard/SponsorBadgeButton/index.jsx +++ b/layout/moonstone/sponsor/dashboard/SponsorBadgeButton/index.jsx @@ -1,3 +1,5 @@ +import Button from "@components/Button"; + export default function SponsorBadgeButton({ sponsor, all }) { let text = all ? ( <> @@ -8,9 +10,10 @@ export default function SponsorBadgeButton({ sponsor, all }) { ); return (
- +
); } diff --git a/layout/moonstone/sponsor/dashboard/SponsorPrizeButton/index.jsx b/layout/moonstone/sponsor/dashboard/SponsorPrizeButton/index.jsx index ae0e2fde..cc251010 100644 --- a/layout/moonstone/sponsor/dashboard/SponsorPrizeButton/index.jsx +++ b/layout/moonstone/sponsor/dashboard/SponsorPrizeButton/index.jsx @@ -1,9 +1,9 @@ +import Button from "@components/Button"; + export default function SponsorPrizeButton({ prize }) { return (
- +
); } diff --git a/layout/moonstone/sponsor/spotlight/SpotlightButton/index.jsx b/layout/moonstone/sponsor/spotlight/SpotlightButton/index.jsx index 40b85b0c..4390eb63 100644 --- a/layout/moonstone/sponsor/spotlight/SpotlightButton/index.jsx +++ b/layout/moonstone/sponsor/spotlight/SpotlightButton/index.jsx @@ -1,9 +1,9 @@ +import Button from "@components/Button"; + export default function SpotlightButton() { return (
- +
); }