CHAL-31 #done

package.json

@@ -43,15 +43,15 @@
   },
   "devDependencies": {
     "@actions/core": "^1.11.1",
-    "@chromatic-com/storybook": "^2.0.2",
-    "@storybook/addon-essentials": "^8.6.9",
-    "@storybook/addon-interactions": "^8.6.9",
-    "@storybook/addon-links": "^8.3.5",
-    "@storybook/addon-onboarding": "^8.3.5",
-    "@storybook/blocks": "^8.3.5",
-    "@storybook/nextjs": "^8.6.9",
-    "@storybook/react": "^8.6.9",
-    "@storybook/test": "^8.6.9",
+    "@chromatic-com/storybook": "^3.2.5",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-onboarding": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/nextjs": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/test": "^8.6.4",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -69,15 +69,15 @@
     "eslint": "^8",
     "eslint-config-next": "^14.2.4",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-storybook": "^0.11.4",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-location-mock": "^2.0.0",
     "next-router-mock": "^0.9.13",
     "prettier": "^3.2.5",
     "sass": "^1.72.0",
-    "storybook": "^8.3.5",
+    "storybook": "^8.6.4",
     "supabase": "^1.187.10",
     "typescript": "^5",
     "uuid": "^10.0.0"

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 } from '../../components/utils/button';
 
 export const ChallengerWelcome = isSignedOut(
   wasNotInvited(function ChallengerWelcome() {
@@ -51,13 +52,13 @@ 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')}
+            className={styles.get_started_btn}
           >
             Get Started
-          </button>
+          </Button>
 
           <p className={styles.signin_line}>
             Already have an account? <Link href="/signin">Sign in</Link>
@@ -111,13 +112,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/challengerwelcome/styles.module.scss

@@ -1,10 +1,9 @@
-@use '../../styles/partials';
+@use '../../styles/partials' as *;
 
 .get_started_btn {
-  @extend .btn_gradient;
-  @extend .btn_lg;
   width: 70%;
   margin: 30px 0px;
+
 }
 
 .signin_line {
@@ -14,7 +13,7 @@
   a {
     padding-left: 2px;
     @extend .link;
-    font-size: partials.$font-size-xxs;
+    font-size: $font-size-xxs;  
   }
 }
 
@@ -23,19 +22,19 @@
   justify-content: center;
   align-items: center;
   flex-direction: column;
-
+  
   .background {
     width: 100%;
     height: 300px;
   }
-
+  
   .container {
     height: 0;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-
+    
     .logo {
       position: relative;
       bottom: 170px;
@@ -49,13 +48,13 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-
+  
   .content {
     margin-top: 20px;
     text-align: left;
     @extend .b2;
   }
-
+  
   .teal_link {
     @extend .link;
     @extend .b5;
@@ -66,32 +65,32 @@
 }
 
 .content_3 {
-  background-color: partials.$color-white;
-  color: partials.$color-black-text;
+  background-color: $color-white;  
+  color: $color-black-text;  
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: left;
   padding: 30px 30px 40px;
-
+  
   h2 {
     margin-bottom: 24px;
     line-height: normal;
     letter-spacing: 1.08px;
   }
-
+  
   .step_header {
     align-self: flex-start;
     line-height: normal;
     letter-spacing: 0.72px;
   }
-
+  
   .step_text {
     @extend .b2;
     letter-spacing: 0.36px;
   }
-
+  
   .image {
     margin: 20px 0px;
   }
-}
+}

src/app/signin/page.tsx

@@ -21,6 +21,7 @@ import { sendAnalyticsEvent } from '@/analytics/send-analytics-event';
 import { AnalyticsEventType } from '@/analytics/analytics-event-type';
 import { getInvalidFieldNames } from '@/utils/client/get-invalid-field-names';
 import styles from './styles.module.scss';
+import { Button } from '../../components/utils/button';
 
 export default isSignedOut(function SignIn() {
   const signInForm = useForm(new SignInForm());
@@ -105,13 +106,9 @@ export default isSignedOut(function SignIn() {
           <Turnstile field={signInForm.fields.captchaToken} />
         </div>
         <div className={styles.submit_btn_container}>
-          <button
-            type="submit"
-            className="btn_gradient btn_lg btn_wide"
-            disabled={isLoading}
-          >
+          <Button type="submit" disabled={isLoading} size="lg" wide>
             Sign in
-          </button>
+          </Button>
         </div>
       </form>
       <div className={styles.sign_up_link_container}>

src/app/signin/styles.module.scss

@@ -33,4 +33,4 @@
   display: flex;
   justify-content: center;
   margin-bottom: $spacing-lg;
-}
+}

src/app/signup/page.tsx

@@ -22,6 +22,7 @@ import { sendAnalyticsEvent } from '@/analytics/send-analytics-event';
 import { AnalyticsEventType } from '@/analytics/analytics-event-type';
 import { getInvalidFieldNames } from '@/utils/client/get-invalid-field-names';
 import styles from './styles.module.scss';
+import { Button } from '../../components/utils/button';
 
 export default isSignedOut(function SignUp() {
   const signUpForm = useForm(new SignUpForm());
@@ -138,13 +139,9 @@ export default isSignedOut(function SignUp() {
           </p>
         </div>
         <div className={styles.submit_btn_container}>
-          <button
-            type="submit"
-            className="btn_gradient btn_lg btn_wide"
-            disabled={isLoading}
-          >
+          <Button type="submit" size="lg" wide disabled={isLoading}>
             Sign Up
-          </button>
+          </Button>
         </div>
       </form>
       <div className={styles.sign_in_link_container}>

src/app/signup/styles.module.scss

@@ -47,4 +47,4 @@
   display: flex;
   justify-content: center;
   margin-bottom: $spacing-lg;
-}
+}

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

@@ -1,76 +1,64 @@
 @use '../../../styles/partials' as *;
 
-@mixin -base {
-  position: relative;
-  display: inline-block;
-  font-family: $font-family-bebas-neue;
-  font-weight: $font-weight-regular;
-  letter-spacing: $letter-spacing-large;
-  text-align: center;
-  text-decoration: none;
-  text-transform: uppercase;
-  border-style: solid;
-  border-radius: 40px;
-  border-width: 4px;
-  border-color: $color-black-8by8;
-
-  &:disabled {
-    opacity: 0.6;
+@layer {
+  @mixin -base {
+    position: relative;
+    display: inline-block;
+    font-family: $font-family-bebas-neue;
+    font-weight: $font-weight-regular;
+    letter-spacing: $letter-spacing-large;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+    border-style: solid;
+    border-radius: 40px;
+    border-width: 4px;
+    border-color: $color-black-8by8;
+    margin: 4px;
+    box-shadow: 0 0 0 4px $color-white;
+    &:disabled {
+      opacity: 0.6;
+    }
   }
-}
 
-@mixin -outline {
-  &::after {
-    content: '';
-    position: absolute;
-    border-radius: 40px;
-    top: -8px;
-    left: -8px;
-    right: -8px;
-    bottom: -8px;
-    border: $color-white 4px solid;
+  @mixin -gradient-text {
+    :first-child {
+      background: $gradient-yellow-teal;
+      background-clip: text;
+      -webkit-background-clip: text;
+      -moz-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      -moz-text-fill-color: transparent;
+      color: transparent;
+      font-size: inherit;
+    }
   }
-}
 
-@mixin -gradient-text {
-  :first-child {
+  .gradient {
+    @include -base;
     background: $gradient-yellow-teal;
-    background-clip: text;
-    -webkit-background-clip: text;
-    -moz-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    -moz-text-fill-color: transparent;
-    color: transparent;
-    font-size: inherit;
+    color: $color-black-8by8;
   }
-}
 
-.gradient {
-  @include -base;
-  @include -outline;
-  background: $gradient-yellow-teal;
-  color: $color-black-8by8;
-}
-
-.inverted {
-  @include -base;
-  @include -gradient-text;
-  @include -outline;
-  background: $color-black-8by8;
-}
+  .inverted {
+    @include -base;
+    @include -gradient-text;
+    background: $color-black-8by8;
+  }
 
-.lg {
-  font-size: $font-size-lg;
-  height: 64px;
-  border-radius: 40px;
-  border-width: 4px;
-}
+  .lg {
+    font-size: $font-size-lg;
+    height: 64px;
+    border-radius: 40px;
+    border-width: 4px;
+  }
 
-.sm {
-  font-size: $font-size-md;
-  padding: 4px 14px;
-}
+  .sm {
+    font-size: $font-size-md;
+    padding: 4px 14px;
+  }
 
-.wide {
-  width: 100%;
-}
+  .wide {
+    width: 100%;
+  }
+}