fix: styling problems

cesium · Nov 10, 2023 · 758e7c4 · 758e7c4
1 parent f746adc
commit 758e7c4
Show file tree

Hide file tree

Showing 19 changed files with 47 additions and 40 deletions.
diff --git a/components/Button/index.tsx b/components/Button/index.tsx
@@ -2,8 +2,9 @@ import { ButtonHTMLAttributes } from "react";
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   title: string;
-  description: string;
+  description?: string;
   customStyle?: string;
+  bold?: boolean;
 }
 
 export default function Button({
@@ -13,6 +14,7 @@ export default function Button({
   disabled,
   onClick,
   customStyle,
+  bold,
 }: Props) {
   return (
     <button
@@ -21,9 +23,11 @@ export default function Button({
       disabled={disabled}
       className={`${
         customStyle || ""
-      } m-auto block h-20 rounded-full bg-quinary hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75`}
+      } m-auto block rounded-full hover:opacity-75 disabled:bg-gray-400 disabled:opacity-75`}
     >
-      <p className="font-ibold font-bold">{title}</p>
+      <p className={bold ? "font-ibold font-ibold" : "font-iregular"}>
+        {title}
+      </p>
       <p className="font-iregular">{description}</p>
     </button>
   );

diff --git a/components/QRScanner/index.jsx b/components/QRScanner/index.jsx
@@ -52,7 +52,7 @@ function QRScanner({
       </div>
       {removeClose !== true && (
         <Button
-          text="Close"
+          title="Close"
           onClick={() => {
             setScanner(false);
           }}

diff --git a/layout/Attendee/Profile/Profile.tsx b/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>
 

diff --git a/layout/Attendee/Wheel/Wheel.tsx b/layout/Attendee/Wheel/Wheel.tsx
@@ -212,6 +212,7 @@ function WheelPage() {
               onClick={spinTheWheel}
               title="SPIN THE WHEEL"
               description={`${price} tokens💰`}
+              bold={true}
             />
           </div>
         </div>

diff --git a/layout/Challenges/components/Challenges/Challenge/index.tsx b/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>

diff --git a/layout/Hackathon/components/Hero/index.jsx b/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>

diff --git a/layout/Hackathon/components/Regulations/index.jsx b/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>

diff --git a/layout/Home/components/Hackathon/index.jsx b/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>{" "}

diff --git a/layout/Home/components/Hero/Pitch/index.jsx b/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>

diff --git a/layout/Home/components/Speakers/index.jsx b/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>

diff --git a/layout/Login/components/LoginForm/index.tsx b/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>

diff --git a/layout/Product/Product.tsx b/layout/Product/Product.tsx
@@ -93,6 +93,7 @@ function ProductSlug() {
                     disabled={user.token_balance < product.price}
                     title="REDEEM"
                     description={`${product.price} tokens 💰`}
+                    bold={true}
                   />
                 )}
               </div>

diff --git a/layout/ResetPassword/components/ResetPasswordForm/index.tsx b/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>

diff --git a/layout/SignUp/components/SignUpForm/index.tsx b/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">

diff --git a/layout/Staff/Prize/Prize.tsx b/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,

diff --git a/layout/moonstone/sponsor/dashboard/SponsorBadgeButton/index.jsx b/layout/moonstone/sponsor/dashboard/SponsorBadgeButton/index.jsx
@@ -12,7 +12,7 @@ export default function SponsorBadgeButton({ sponsor, all }) {
     <div className="mt-8 w-auto">
       <Button
         customStyle="m-auto block h-16 w-full rounded-full bg-quinary"
-        text="🏅 Dar Badge {text}"
+        title="🏅 Dar Badge {text}"
       />
     </div>
   );

diff --git a/layout/moonstone/sponsor/spotlight/SpotlightButton/index.jsx b/layout/moonstone/sponsor/spotlight/SpotlightButton/index.jsx
@@ -5,7 +5,7 @@ export default function SpotlightButton() {
     <div className="mt-8 w-auto">
       <Button
         customStyle="m-auto block h-16 w-full rounded-full bg-quinary"
-        text="Ativar Spotlight"
+        title="Ativar Spotlight"
       />
     </div>
   );

diff --git a/layout/shared/Leaderboard/Leaderboard.tsx b/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} />

diff --git a/pages/register/[uuid].js b/pages/register/[uuid].js
@@ -89,7 +89,7 @@ function Register() {
             onChange={(e) => updatePasswordConfirmation(e.currentTarget.value)}
           />
           <Button
-            type="submit"
+            title="submit"
             text={isLoading ? "Registering..." : "LET'S GO"}
             customStyle="text-secondary bg-quinary border-quinary"
           />