chore: standardize buttons using a button component

components/Button/index.tsx

@@ -1,12 +1,14 @@
 import { ButtonHTMLAttributes } from "react";
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  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}
+      <p className="font-ibold font-bold">{title}</p>
+      <p className="font-iregular">{description}</p>
     </button>
   );
 }

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>
 

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() {
             <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={`${
-                canSpin()
+            <Button
+              customStyle={`${canSpin()
                   ? "cursor-pointer bg-quinary"
                   : "bg-gray-400 opacity-50"
-              } m-auto mt-10 block h-20 w-64 rounded-full`}
+                } 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💰`}
+            />
           </div>
         </div>
         <div className="col-span-1 float-right w-full 2xl:w-1/2 2xl:pl-6">

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() {
 
               <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 💰`}
+                  />
                 )}
               </div>
               <div className="mt-6 text-center">

layout/Staff/components/StaffRedeemButton/index.jsx

@@ -1,9 +1,8 @@
+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"
+        text="🏅 Dar Badge {text}"
+      />
     </div>
   );
 }

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

@@ -1,9 +1,9 @@
+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,9 @@
+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" text="Ativar Spotlight" />
     </div>
   );
 }