fix: standardize button component implementation (#585)

cesium · Dec 6, 2023 · 4b897ad · 4b897ad
1 parent fe4618a
commit 4b897ad
Show file tree

Hide file tree

Showing 17 changed files with 27 additions and 45 deletions.
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
@@ -3,9 +3,7 @@ import { ButtonHTMLAttributes, ReactNode } from "react";
 interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
   title: ReactNode;
   description?: string;
-  customStyle?: string;
   bold?: boolean;
-  disabled?: boolean;
 }
 
 interface ButtonTitleProps {
@@ -16,22 +14,15 @@ interface ButtonTitleProps {
 export default function Button({
   title,
   description,
-  type,
-  disabled,
-  onClick,
-  customStyle,
-  bold,
+  bold = false,
   ...rest
 }: Props) {
   return (
     <button
       {...rest}
-      onClick={onClick}
-      type={type}
-      disabled={disabled}
-      className={`${
-        customStyle || ""
-      } m-auto block rounded-full hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75`}
+      className={`m-auto block rounded-full hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75 ${
+        rest.className || ""
+      }`}
     >
       <ButtonTitle title={title} bold={bold} />
       <p className="font-iregular">{description}</p>

diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -174,7 +174,7 @@ function MobileNavbar({
 
                   <button type="button" onClick={onClose} className="h-12 w-12">
                     <span className="sr-only">Close sidebar</span>
-                    title={<FontAwesomeIcon icon={faTimes} />}
+                    <FontAwesomeIcon icon={faTimes} />
                   </button>
                 </div>
 

diff --git a/layout/Attendee/Profile/Profile.tsx b/layout/Attendee/Profile/Profile.tsx
@@ -102,10 +102,10 @@ function Profile({ courses }) {
           <Heading text="User Profile">
             <div className="w-auto">
               <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"
                 title={editing ? "Save Changes" : "Edit"}
-                form="profile-form"
+                className="w-full items-center border border-quinary bg-quinary py-2 px-4 text-center font-iregular text-sm text-secondary shadow-sm"
                 type="submit"
+                form="profile-form"
               />
             </div>
           </Heading>

diff --git a/layout/Attendee/Wheel/Wheel.tsx b/layout/Attendee/Wheel/Wheel.tsx
@@ -203,11 +203,11 @@ function WheelPage() {
               <WheelComponent steps={16} angle={st.angle} />
             </div>
             <Button
-              customStyle={`${
+              className={`${
                 canSpin()
                   ? "cursor-pointer bg-quinary"
                   : "bg-gray-400 opacity-50"
-              } m-auto mt-10 block h-20 w-64 rounded-full`}
+              } mt-10 block h-20 w-64`}
               disabled={!canSpin()}
               onClick={spinTheWheel}
               title="SPIN THE WHEEL"

diff --git a/layout/Challenges/components/Challenges/Challenge/index.tsx b/layout/Challenges/components/Challenges/Challenge/index.tsx
@@ -7,7 +7,7 @@ function Action({ text, url }) {
       <Button
         onClick={(e) => (window.location.href = url)}
         title={text}
-        customStyle="text-white bg-primary border-tertiary hover:bg-tertiary"
+        className="text-white bg-primary border-tertiary hover:bg-tertiary"
       />
     </div>
   );

diff --git a/layout/Home/components/Hero/Pitch/index.jsx b/layout/Home/components/Hero/Pitch/index.jsx
@@ -11,8 +11,8 @@ export default function Pitch() {
         <a href="/team">
           <Button
             title="MEET THE TEAM"
-            customStyle="w-56 h-20 border-2 text-white border-white hover:text-quinary hover:border-quinary"
-            bold={false}
+            className="h-20 w-56 border-2 border-white text-white hover:border-quinary hover:text-quinary"
+            bold={true}
           />
         </a>
       </div>

diff --git a/layout/Home/components/Speakers/index.jsx b/layout/Home/components/Speakers/index.jsx
@@ -16,7 +16,7 @@ export default function Speakers() {
           <Link href="/speakers">
             <Button
               title="MEET THE SPEAKERS"
-              customStyle="text-white border-white border-4 h-20 w-full hover:border-quinary hover:bg-quinary"
+              className="h-20 w-full border-4 border-white text-white hover:border-quinary hover:bg-quinary"
               bold={true}
             />
           </Link>

diff --git a/layout/Login/components/LoginForm/index.tsx b/layout/Login/components/LoginForm/index.tsx
@@ -54,7 +54,7 @@ export default function LoginForm() {
           title={isLoading ? "Authenticating..." : "LET'S GO"}
           disabled={isLoading}
           type="submit"
-          customStyle="text-secondary bg-quinary border-quinary w-full h-16"
+          className="h-16 w-full border-quinary bg-quinary text-secondary"
         />
         {errors && <p className="text-center text-failure">{errors}</p>}
       </Form>

diff --git a/layout/Product/Product.tsx b/layout/Product/Product.tsx
@@ -89,7 +89,7 @@ function ProductSlug() {
                         refetchUser();
                       })
                     }
-                    customStyle="m-auto block h-20 w-full rounded-full bg-quinary hover:opacity-75 disabled:bg-gray-400 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}
                     title="REDEEM"
                     description={`${product.price} tokens 💰`}

diff --git a/layout/ResetPassword/components/ResetPasswordForm/index.tsx b/layout/ResetPassword/components/ResetPasswordForm/index.tsx
@@ -97,7 +97,7 @@ export default function ResetPasswordForm() {
               <Button
                 type="button"
                 title="BACK TO LOGIN"
-                customStyle="text-secondary bg-quinary border-quinary"
+                className="border-quinary bg-quinary text-secondary"
               />
             </Link>
           </div>

diff --git a/layout/SignUp/components/SignUpForm/index.tsx b/layout/SignUp/components/SignUpForm/index.tsx
@@ -131,7 +131,7 @@ export default function SignUpForm({ courses }) {
         />
         <Button
           title={scanning ? "STOP SCANNING" : "SCAN QR"}
-          customStyle="w-full h-12 text-secondary bg-quinary border-quinary"
+          className="h-12 w-full border-quinary bg-quinary text-secondary"
           onClick={(e) => {
             e.preventDefault();
             updateScanning(!scanning);
@@ -158,7 +158,7 @@ export default function SignUpForm({ courses }) {
         <Button
           type="submit"
           title={isLoading ? "Registering..." : "LET'S GO"}
-          customStyle="w-full h-12 text-secondary bg-quinary border-quinary"
+          className="h-12 w-full border-quinary bg-quinary text-secondary"
         />
         {(local_error || (!isLoading && errors)) && (
           <p className="mt-3 font-iregular text-lg text-red-400">

diff --git a/layout/Staff/components/StaffRedeemButton/index.jsx b/layout/Staff/components/StaffRedeemButton/index.jsx
@@ -2,10 +2,7 @@ import Button from "@components/Button";
 export default function StaffRedeemButton() {
   return (
     <div className="mt-8 w-auto">
-      <Button
-        customStyle="m-auto block h-16 w-full rounded-full bg-quinary"
-        title="💰  Redeem prizes"
-      />
+      <Button className="h-16 w-full bg-quinary" title="💰  Redeem prizes" />
     </div>
   );
 }
diff --git a/layout/moonstone/sponsor/dashboard/SponsorBadgeButton/index.jsx b/layout/moonstone/sponsor/dashboard/SponsorBadgeButton/index.jsx
@@ -10,10 +10,7 @@ export default function SponsorBadgeButton({ sponsor, all }) {
   );
   return (
     <div className="mt-8 w-auto">
-      <Button
-        customStyle="m-auto block h-16 w-full rounded-full bg-quinary"
-        title="🏅 Dar Badge {text}"
-      />
+      <Button className="h-16 w-full bg-quinary" title="🏅 Dar Badge {text}" />
     </div>
   );
 }
diff --git a/layout/moonstone/sponsor/dashboard/SponsorPrizeButton/index.jsx b/layout/moonstone/sponsor/dashboard/SponsorPrizeButton/index.jsx
@@ -4,7 +4,7 @@ export default function SponsorPrizeButton({ prize }) {
   return (
     <div className="mt-8 w-auto">
       <Button
-        customStyle="m-auto block h-16 w-full rounded-full bg-quinary"
+        className="h-16 w-full bg-quinary"
         title={`🏅  Prémio ${prize}`}
       />
     </div>

diff --git a/layout/moonstone/sponsor/spotlight/SpotlightButton/index.jsx b/layout/moonstone/sponsor/spotlight/SpotlightButton/index.jsx
@@ -3,10 +3,7 @@ import Button from "@components/Button";
 export default function SpotlightButton() {
   return (
     <div className="mt-8 w-auto">
-      <Button
-        customStyle="m-auto block h-16 w-full rounded-full bg-quinary"
-        title="Ativar Spotlight"
-      />
+      <Button className="h-16 w-full bg-quinary" title="Ativar Spotlight" />
     </div>
   );
 }
diff --git a/layout/shared/Leaderboard/Leaderboard.tsx b/layout/shared/Leaderboard/Leaderboard.tsx
@@ -132,7 +132,7 @@ function Leaderboard() {
         <div className="col-span-1 w-full 2xl:pl-24">
           <div className="flex justify-center gap-6 xs:gap-10 md:gap-24">
             <Button
-              customStyle={`font-iregular bg-${
+              className={`font-iregular bg-${
                 hallOfFame ? "white" : "quinary"
               } h-12 items-center rounded-full px-4 py-1 text-center text-black`}
               onClick={(e) => {
@@ -142,7 +142,7 @@ function Leaderboard() {
             />
 
             <Button
-              customStyle={`font-iregular bg-${
+              className={`font-iregular bg-${
                 hallOfFame ? "quinary" : "white"
               } h-12 items-center rounded-full px-4 py-1 text-center text-black`}
               onClick={(e) => {

diff --git a/pages/register/[uuid].js b/pages/register/[uuid].js
@@ -116,9 +116,9 @@ function Register({ courses }) {
             onChange={(e) => updatePasswordConfirmation(e.currentTarget.value)}
           />
           <Button
-            title="Submit"
-            text={isLoading ? "Registering..." : "LET'S GO"}
-            customStyle="w-full h-12 text-secondary bg-quinary border-quinary"
+            type="submit"
+            title={isLoading ? "Registering..." : "LET'S GO"}
+            className="h-12 w-full border-quinary bg-quinary text-secondary"
           />
           {errors && (
             <p className="mt-3 font-iregular text-lg text-red-400">