chore: standardize buttons using a button component

components/Button/index.tsx

@@ -1,27 +1,44 @@
 import { ButtonHTMLAttributes } from "react";
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
- text: string;
+ title: string;
+ description?: string;
  customStyle?: string;
+ bold?: boolean;
+}
+
+interface ButtonTitleProps {
+ title: string;
+ bold?: boolean;
 }
 
 export default function Button({
- text,
+ title,
+ description,
  type,
  disabled,
  onClick,
  customStyle,
+ bold,
+ ...rest
 }: Props) {
  return (
  <button
+ {...rest}
  onClick={onClick}
  type={type}
  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 rounded-full hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75`}
  >
- {text}
+ <ButtonTitle title={title} bold={bold} />
+ <p className="font-iregular">{description}</p>
  </button>
  );
 }
+
+function ButtonTitle({ title, bold }: ButtonTitleProps) {
+ const className = bold ? "font-ibold" : "font-iregular";
+ return <div className={className}>{title}</div>;
+}

components/Layout/Layout.tsx

@@ -185,7 +185,7 @@ function MobileNavbar({
 
  <button type="button" onClick={onClose} className="h-12 w-12">
  <span className="sr-only">Close sidebar</span>
- <FontAwesomeIcon icon={faTimes} />
+ title={<FontAwesomeIcon icon={faTimes} />}
  </button>
  </div>
 

components/QRScanner/index.jsx

@@ -52,7 +52,7 @@ function QRScanner({
  </div>
  {removeClose !== true && (
  <Button
- text="Close"
+ title="Close"
  onClick={() => {
  setScanner(false);
  }}

layout/Attendee/Profile/Profile.tsx

@@ -6,6 +6,7 @@ import Form from "@components/Form";
 import Input from "@components/Input";
 
 import Layout from "@components/Layout";
+import Button from "@components/Button";
 import Heading from "@components/Heading";
 
 import { CheckpointTracker, CodeInput } from "./components";
@@ -92,13 +93,11 @@ function Profile() {
  <div className="col-span-1 float-left w-full xl:w-1/2">
  <Heading text="User Profile">
  <div className="w-auto">
- <button
- className="w-full items-center rounded-full border border-quinary bg-quinary py-2 px-4 text-center font-iregular text-sm text-secondary shadow-sm"
- type="submit"
+ <Button
+ customStyle="w-full items-center rounded-full border border-quinary bg-quinary py-2 px-4 text-center font-iregular text-sm text-secondary shadow-sm"
  form="profile-form"
- >
- {editing ? "Save Changes" : "Edit"}
- </button>
+ title={editing ? "Save Changes" : "Edit"}
+ />
  </div>
  </Heading>
 

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,18 @@ function WheelPage() {
  <div className="m-auto h-72 w-72 xs:h-80 xs:w-80 sm:h-96 sm:w-96">
  <WheelComponent steps={16} angle={st.angle} />
  </div>
- <button
- className={`${
+ <Button
+ customStyle={`${
  canSpin()
  ? "cursor-pointer bg-quinary"
  : "bg-gray-400 opacity-50"
  } m-auto mt-10 block h-20 w-64 rounded-full`}
  disabled={!canSpin()}
  onClick={spinTheWheel}
- >
- <p className="select-none font-ibold font-bold">SPIN THE WHEEL</p>
- <p className="select-none font-iregular">{price} tokens💰</p>
- </button>
+  title="SPIN THE WHEEL"
+ description={`${price} tokens💰`}
+ bold={true}
+ />
  </div>
  </div>
  <div className="col-span-1 float-right w-full 2xl:w-1/2 2xl:pl-6">

layout/Challenges/components/Challenges/Challenge/index.tsx

@@ -6,7 +6,7 @@ function Action({ text, url }) {
  <div className="mt-5 w-60">
  <Button
  onClick={(e) => (window.location.href = url)}
- text={text}
+ title={text}
  customStyle="text-white bg-primary border-tertiary hover:bg-tertiary"
  />
  </div>

layout/Hackathon/components/Hero/index.jsx

@@ -24,7 +24,7 @@ export default function Hero() {
  <span className="inline-block w-56 content-center items-center text-center align-middle">
  <a href="https://forms.gle/eFft9LTLSQzJjTG29">
  <Button
- text="REGISTER YOUR TEAM"
+ title="REGISTER YOUR TEAM"
  customStyle="text-white bg-primary border-tertiary hover:bg-tertiary"
  />
  </a>

layout/Hackathon/components/Regulations/index.jsx

@@ -13,7 +13,7 @@ export default function Regulations() {
  <div className="mt-6 sm:mt-0 sm:w-80">
  <Link href={"/docs/hackathon.pdf"}>
  <Button
- text="READ THE RULES"
+ title="READ THE RULES"
  customStyle="text-white bg-primary border-tertiary hover:bg-tertiary"
  />
  </Link>

layout/Home/components/Hackathon/index.jsx

@@ -15,7 +15,7 @@ export default function Hackathon() {
  <span className="w-56 self-center">
  <a href="https://forms.gle/8aSEUubkjei1Dpym6">
  <Button
- text="REGISTER YOUR TEAM"
+ title="REGISTER YOUR TEAM"
  customStyle="text-white bg-secondary border-quaternary hover:border-quinary"
  />
  </a>{" "}

layout/Home/components/Hero/Pitch/index.jsx

@@ -10,8 +10,9 @@ export default function Pitch() {
  <div className="mt-8 flex w-56">
  <a href="/team">
  <Button
- text="MEET THE TEAM"
- customStyle="hover:text-quinary hover:border-quinary"
+ title="MEET THE TEAM"
+ customStyle="w-56 h-20 border-2 text-white border-white hover:text-quinary hover:border-quinary"
+ bold={false}
  />
  </a>
  </div>

layout/Home/components/Speakers/index.jsx

@@ -15,8 +15,9 @@ export default function Speakers() {
  <div className="xs:w-70 w-60 sm:w-80">
  <Link href="/speakers">
  <Button
- text="MEET THE SPEAKERS"
- customStyle="text-white bg-secondary border-quaternary hover:border-quinary hover:bg-quinary "
+ title="MEET THE SPEAKERS"
+ customStyle="text-white border-white border-4 h-20 w-full hover:border-quinary hover:bg-quinary"
+ bold={true}
  />
  </Link>
  </div>

layout/Login/components/LoginForm/index.tsx

@@ -52,10 +52,10 @@ export default function LoginForm() {
  href="/forgot-password"
  />
  <Button
- text={isLoading ? "Authenticating..." : "LET'S GO"}
+ title={isLoading ? "Authenticating..." : "LET'S GO"}
  disabled={isLoading}
  type="submit"
- customStyle="text-secondary bg-quinary border-quinary"
+ customStyle="text-secondary bg-quinary border-quinary w-full h-16"
  />
  {errors && <p className="text-center text-failure">{errors}</p>}
  </Form>

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,19 @@ function ProductSlug() {
 
  <div className="mt-10">
  {product.can_buy > 0 && product.stock > 0 && (
- <button
+ <Button
  onClick={() =>
  buyProduct(product.id).then(() => {
  updateProductInfo((needsUpdate) => !needsUpdate);
  refetchUser();
  })
  }
- className="m-auto block h-20 w-full rounded-full bg-quinary hover:opacity-75 disabled:opacity-75"
+ customStyle="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}
- >
- <p className="font-ibold font-bold">REDEEM</p>
- <p className="font-iregular">{product.price} tokens 💰</p>
- </button>
+  title="REDEEM"
+ description={`${product.price} tokens 💰`}
+ bold={true}
+ />
  )}
  </div>
  <div className="mt-6 text-center">

layout/ResetPassword/components/ResetPasswordForm/index.tsx

@@ -100,7 +100,7 @@ export default function ResetPasswordForm() {
  <Link href="/login">
  <Button
  type="button"
- text="BACK TO LOGIN"
+ title="BACK TO LOGIN"
  customStyle="text-secondary bg-quinary border-quinary"
  />
  </Link>

layout/SignUp/components/SignUpForm/index.tsx

@@ -113,8 +113,8 @@ export default function SignUpForm() {
  onChange={(e) => updatePasswordConfirmation(e.currentTarget.value)}
  />
  <Button
- text={scanning ? "STOP SCANNING" : "SCAN QR"}
- customStyle="text-secondary bg-quinary border-quinary"
+ title={scanning ? "STOP SCANNING" : "SCAN QR"}
+ customStyle="w-full h-12 text-secondary bg-quinary border-quinary"
  onClick={(e) => {
  e.preventDefault();
  updateScanning(!scanning);
@@ -140,8 +140,8 @@ export default function SignUpForm() {
  )}
  <Button
  type="submit"
- text={isLoading ? "Registering..." : "LET'S GO"}
- customStyle="text-secondary bg-quinary border-quinary"
+ title={isLoading ? "Registering..." : "LET'S GO"}
+ customStyle="w-full h-12 text-secondary bg-quinary border-quinary"
  />
  {(local_error || (!isLoading && errors)) && (
  <p className="mt-3 font-iregular text-lg text-red-400">

layout/Staff/Prize/Prize.tsx

@@ -113,7 +113,7 @@ function Prize() {
  </div>
  <div className="w-32">
  <Button
- text={`REDEEM ${product.not_redeemed}`}
+ title={`REDEEM ${product.not_redeemed}`}
  onClick={() => {
  redeemRedeemables(product.id, product.not_redeemed);
  }}
@@ -156,7 +156,7 @@ function Prize() {
  </div>
  <div className="w-32">
  <Button
- text={`REDEEM ${product.not_redeemed}`}
+ title={`REDEEM ${product.not_redeemed}`}
  onClick={() => {
  redeemWheelRedeemables(
  product.id,

layout/Staff/components/StaffRedeemButton/index.jsx

@@ -1,9 +1,11 @@
+import Button from "@components/Button";
 export default function StaffRedeemButton() {
  return (
  <div className="mt-8 w-auto">
- <button className="m-auto block h-16 w-full rounded-full bg-quinary">
- <p className="font-ibold font-bold">💰 Redeem prizes</p>
- </button>
+ <Button
+ customStyle="m-auto block h-16 w-full rounded-full bg-quinary"
+ title="💰 Redeem prizes"
+ />
  </div>
  );
 }

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 (
  <div className="mt-8 w-auto">
- <button className="m-auto block h-16 w-full rounded-full bg-quinary">
- <p className="font-iregular"> 🏅 Dar Badge {text} </p>
- </button>
+ <Button
+ customStyle="m-auto block h-16 w-full rounded-full bg-quinary"
+ title="🏅 Dar Badge {text}"
+ />
  </div>
  );
 }

layout/moonstone/sponsor/dashboard/SponsorPrizeButton/index.jsx

@@ -1,9 +1,12 @@
+import Button from "@components/Button";
+
 export default function SponsorPrizeButton({ prize }) {
  return (
  <div className="mt-8 w-auto">
- <button className="m-auto block h-16 w-full rounded-full bg-quinary">
- <p className="font-iregular"> 🏅 Prémio: {prize} </p>
- </button>
+ <Button
+ customStyle="m-auto block h-16 w-full rounded-full bg-quinary"
+ title={`🏅 Prémio ${prize}`}
+ />
  </div>
  );
 }

layout/moonstone/sponsor/spotlight/SpotlightButton/index.jsx

@@ -1,9 +1,12 @@
+import Button from "@components/Button";
+
 export default function SpotlightButton() {
  return (
  <div className="mt-8 w-auto">
- <button className="m-auto block h-16 w-full rounded-full bg-quinary">
- <p className="font-ibold"> Ativar Spotlight </p>
- </button>
+ <Button
+ customStyle="m-auto block h-16 w-full rounded-full bg-quinary"
+ title="Ativar Spotlight"
+ />
  </div>
  );
 }

layout/shared/Leaderboard/Leaderboard.tsx

@@ -5,6 +5,7 @@ import { withAuth, useAuth } from "@context/Auth";
 import Layout from "@components/Layout";
 import { Table } from "./components";
 
+import Button from "@components/Button";
 import Day from "@components/Schedule/Day";
 import ErrorMessage from "@components/ErrorMessage";
 
@@ -130,26 +131,25 @@ function Leaderboard() {
  </div>
  <div className="col-span-1 w-full 2xl:pl-24">
  <div className="flex justify-center gap-6 xs:gap-10 md:gap-24">
- <button
- className={`font-iregular bg-${
+ <Button
+ customStyle={`font-iregular bg-${
  hallOfFame ? "white" : "quinary"
  } h-12 items-center rounded-full px-4 py-1 text-center text-black`}
  onClick={(e) => {
  updateHallOfFame(false);
  }}
- >
-  LEADERBOARD
- </button>
- <button
- className={`font-iregular bg-${
+  title="LEADERBOARD"
+ />
+
+ <Button
+ customStyle={`font-iregular bg-${
  hallOfFame ? "quinary" : "white"
  } h-12 items-center rounded-full px-4 py-1 text-center text-black`}
  onClick={(e) => {
  updateHallOfFame(true);
  }}
- >
- HALL OF FAME
- </button>
+ title="HALL OF FAME"
+ />
  </div>
  {error && <ErrorMessage />}
  <Table list={leaderboard} user={user.id} maxUsersToShow={5} />