CHAL-31 #done

src/app/challengerwelcome/challenger-welcome.tsx

@@ -13,6 +13,7 @@ import stepThree from '../../../public/static/images/pages/challenger-welcome/st
 import stepFour from '../../../public/static/images/pages/challenger-welcome/step-4.png';
 import logo from '../../../public/static/images/shared/8by8-logo.svg';
 import styles from './styles.module.scss';
+import  { Button, type ButtonProps } from '../../components/utils/button/button';
 
 export const ChallengerWelcome = isSignedOut(
   wasNotInvited(function ChallengerWelcome() {
@@ -51,13 +52,14 @@ export const ChallengerWelcome = isSignedOut(
             #8by8Challenge—register 8 friends to register to vote in 8 days!
           </p>
 
-          <button
+          <Button
             type="button"
             className={styles.get_started_btn}
             onClick={() => router.push('/signup')}
           >
             Get Started
-          </button>
+          </Button>
+
 
           <p className={styles.signin_line}>
             Already have an account? <Link href="/signin">Sign in</Link>
@@ -111,13 +113,13 @@ export const ChallengerWelcome = isSignedOut(
             className={styles.image}
           />
 
-          <button
+          <Button
             type="button"
             className={styles.get_started_btn}
             onClick={() => router.push('/signup')}
           >
             Get Started
-          </button>
+          </Button>
 
           <p className={styles.signin_line}>
             Already have an account?{' '}

src/app/share/share.tsx

@@ -21,6 +21,7 @@ import socialMediaPostImage2 from '../../../public/static/images/pages/share/pos
 import styles from './styles.module.scss';
 import { createShareLink } from './create-share-link';
 
+
 interface ShareProps {
   hideShareButton?: boolean;
 }

src/app/signin/page.tsx

@@ -18,6 +18,7 @@ import { FormInvalidError } from '@/utils/client/form-invalid-error';
 import { LoadingWheel } from '@/components/utils/loading-wheel';
 import { isErrorWithMessage } from '@/utils/shared/is-error-with-message';
 import styles from './styles.module.scss';
+import { Button  } from '../../components/utils/button/button';
 
 export default isSignedOut(function SignIn() {
   const signInForm = useForm(new SignInForm());
@@ -84,13 +85,13 @@ export default isSignedOut(function SignIn() {
           <Turnstile field={signInForm.fields.captchaToken} />
         </div>
         <div className={styles.submit_btn_container}>
-          <button
+          <Button
             type="submit"
             className="btn_gradient btn_lg btn_wide"
             disabled={isLoading}
           >
             Sign in
-          </button>
+          </Button>
         </div>
       </form>
       <div className={styles.sign_up_link_container}>

src/app/signup/page.tsx

@@ -19,6 +19,8 @@ import { FormInvalidError } from '@/utils/client/form-invalid-error';
 import { LoadingWheel } from '@/components/utils/loading-wheel';
 import { isErrorWithMessage } from '@/utils/shared/is-error-with-message';
 import styles from './styles.module.scss';
+import  { Button  } from '../../components/utils/button/button';
+
 
 export default isSignedOut(function SignUp() {
   const signUpForm = useForm(new SignUpForm());
@@ -117,13 +119,13 @@ export default isSignedOut(function SignUp() {
           </p>
         </div>
         <div className={styles.submit_btn_container}>
-          <button
+          <Button
             type="submit"
             className="btn_gradient btn_lg btn_wide"
             disabled={isLoading}
           >
             Sign Up
-          </button>
+          </Button>
         </div>
       </form>
       <div className={styles.sign_in_link_container}>

src/components/header/hamburger-menu/hamburger-menu.tsx

@@ -7,6 +7,7 @@ import { Greeting } from './greeting';
 import { Links } from './links';
 import styles from './styles.module.scss';
 
+
 export function HamburgerMenu() {
   const {
     hamburgerMenuState,

src/components/progress/badges/player-badge.tsx

@@ -42,3 +42,4 @@ export function PlayerBadge({ badge, index }: PlayerBadgeProps): JSX.Element {
     </div>
   );
 }
+

src/components/utils/button/button.module.scss

@@ -32,6 +32,10 @@
   }
 }
 
+.button-wrapper {
+  padding: 4px;
+}
+
 @mixin -gradient-text {
   :first-child {
     background: $gradient-yellow-teal;
@@ -45,6 +49,8 @@
   }
 }
 
+
+
 .gradient {
   @include -base;
   @include -outline;
@@ -73,4 +79,4 @@
 
 .wide {
   width: 100%;
-}
+}

src/components/utils/button/button.tsx

@@ -27,7 +27,7 @@ export function Button({
   }
 
   return (
-    <button className={classNames.join(' ')} {...htmlButtonProps}>
+      <button className={`${styles['button-wrapper']} ${classNames.join(' ')}`} {...htmlButtonProps}>
       <span>{children}</span>
     </button>
   );