Merge pull request #2329 from HS-90/bootstrap521

Fix buttons after bootstrap update
garageScript · Sep 22, 2022 · 482e8a5 · 482e8a5 · vercel · Sep 22, 2022
2 parents d42954d + 3755cd9
commit 482e8a5
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 20 deletions.
diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap
@@ -27649,7 +27649,7 @@ exports[`Storyshots Pages/Login Login 1`] = `
           />
         </div>
         <button
-          className="btn text-white btn-lg btn discord__button"
+          className="text-white discord__button"
           onClick={[Function]}
         >
           <div
@@ -27662,7 +27662,9 @@ exports[`Storyshots Pages/Login Login 1`] = `
               width={32}
             />
           </div>
-          <span>
+          <span
+            className="discord_text"
+          >
             Login with Discord
           </span>
         </button>
@@ -27758,7 +27760,7 @@ exports[`Storyshots Pages/Login Login Basic 1`] = `
           />
         </div>
         <button
-          className="btn text-white btn-lg btn discord__button"
+          className="text-white discord__button"
           onClick={[Function]}
         >
           <div
@@ -27771,7 +27773,9 @@ exports[`Storyshots Pages/Login Login Basic 1`] = `
               width={32}
             />
           </div>
-          <span>
+          <span
+            className="discord_text"
+          >
             Login with Discord
           </span>
         </button>
@@ -27887,7 +27891,7 @@ exports[`Storyshots Pages/Login Login Error 1`] = `
           />
         </div>
         <button
-          className="btn text-white btn-lg btn discord__button"
+          className="text-white discord__button"
           onClick={[Function]}
         >
           <div
@@ -27900,7 +27904,9 @@ exports[`Storyshots Pages/Login Login Error 1`] = `
               width={32}
             />
           </div>
-          <span>
+          <span
+            className="discord_text"
+          >
             Login with Discord
           </span>
         </button>

diff --git a/__tests__/pages/__snapshots__/_app.test.js.snap b/__tests__/pages/__snapshots__/_app.test.js.snap
@@ -141,7 +141,7 @@ exports[`MyApp component should render Login component passed in as prop 1`] = `
               />
             </div>
             <button
-              class="btn text-white btn-lg btn discord__button"
+              class="text-white discord__button"
             >
               <div
                 class="discord__button__image__wrapper"
@@ -152,7 +152,9 @@ exports[`MyApp component should render Login component passed in as prop 1`] = `
                   width="32"
                 />
               </div>
-              <span>
+              <span
+                class="discord_text"
+              >
                 Login with Discord
               </span>
             </button>

diff --git a/__tests__/pages/__snapshots__/login.test.js.snap b/__tests__/pages/__snapshots__/login.test.js.snap
@@ -90,7 +90,7 @@ exports[`Login Page Should set alert visible on invalid credentials 1`] = `
             />
           </div>
           <button
-            class="btn text-white btn-lg btn discord__button"
+            class="text-white discord__button"
           >
             <div
               class="discord__button__image__wrapper"
@@ -101,7 +101,9 @@ exports[`Login Page Should set alert visible on invalid credentials 1`] = `
                 width="32"
               />
             </div>
-            <span>
+            <span
+              class="discord_text"
+            >
               Login with Discord
             </span>
           </button>

diff --git a/__tests__/pages/__snapshots__/reset.test.js.snap b/__tests__/pages/__snapshots__/reset.test.js.snap
@@ -70,13 +70,13 @@ exports[`ResetPassword Page Should render alert on error 1`] = `
           class="nav-buttons"
         >
           <a
-            class="btn m-2 me-lg-3 login-btn noUnderline"
+            class="m-2 me-lg-3 login-btn login-signup-size noUnderline"
             href="/login"
           >
             Login
           </a>
           <a
-            class="btn m-2 me-lg-3 signup-btn noUnderline"
+            class="m-2 me-lg-3 signup-btn login-signup-size noUnderline"
             href="/signup"
           >
             Signup
@@ -200,13 +200,13 @@ exports[`ResetPassword Page Should render confirm success on success 1`] = `
           class="nav-buttons"
         >
           <a
-            class="btn m-2 me-lg-3 login-btn noUnderline"
+            class="m-2 me-lg-3 login-btn login-signup-size noUnderline"
             href="/login"
           >
             Login
           </a>
           <a
-            class="btn m-2 me-lg-3 signup-btn noUnderline"
+            class="m-2 me-lg-3 signup-btn login-signup-size noUnderline"
             href="/signup"
           >
             Signup

diff --git a/__tests__/pages/profile/__snapshots__/username.test.js.snap b/__tests__/pages/profile/__snapshots__/username.test.js.snap
@@ -1825,13 +1825,13 @@ exports[`user profile test Should render nulled challenges 1`] = `
           class="nav-buttons"
         >
           <a
-            class="btn m-2 me-lg-3 login-btn noUnderline"
+            class="m-2 me-lg-3 login-btn login-signup-size noUnderline"
             href="/login"
           >
             Login
           </a>
           <a
-            class="btn m-2 me-lg-3 signup-btn noUnderline"
+            class="m-2 me-lg-3 signup-btn login-signup-size noUnderline"
             href="/signup"
           >
             Signup

diff --git a/components/AppNav/AppNav.tsx b/components/AppNav/AppNav.tsx
@@ -64,13 +64,13 @@ const NotLoggedInAuthNav = () => (
   <div className={`${styles['nav-buttons']}`}>
     <NavLink
       path={LOGIN_PATH}
-      className={`btn m-2 me-lg-3 ${styles['login-btn']}`}
+      className={`m-2 me-lg-3 ${styles['login-btn']} ${styles['login-signup-size']}`}
     >
       Login
     </NavLink>
     <NavLink
       path={SIGNUP_PATH}
-      className={`btn m-2 me-lg-3 ${styles['signup-btn']}`}
+      className={`m-2 me-lg-3 ${styles['signup-btn']} ${styles['login-signup-size']}`}
     >
       Signup
     </NavLink>

diff --git a/pages/login.tsx b/pages/login.tsx
@@ -110,7 +110,7 @@ export const Login: React.FC<LoginFormProps> = ({
       </div>
       <button
         onClick={() => signIn('discord', { callbackUrl: '/curriculum' })}
-        className={`btn text-white btn-lg btn ${styles.discord__button}`}
+        className={`text-white ${styles.discord__button}`}
       >
         <div className={styles.discord__button__image__wrapper}>
           <Image
@@ -119,7 +119,7 @@ export const Login: React.FC<LoginFormProps> = ({
             width={32}
           />
         </div>
-        <span>Login with Discord</span>
+        <span className={styles.discord_text}>Login with Discord</span>
       </button>
     </div>
     <NavLink path="/forgotpassword" hoverUnderline>

diff --git a/scss/appNav.module.scss b/scss/appNav.module.scss
@@ -79,6 +79,17 @@
   }
 }
 
+.login-signup-size {
+  margin: 8px;
+  padding: 10.2px 13.6px;
+  border-radius: 0.375rem;
+  &:hover,
+  &:focus {
+    border: 1px solid variables.$primary;
+    padding: 9.2px 12.6px;
+  }
+}
+
 .isAdminBadge {
   font-size: 11px;
   letter-spacing: 0.07em;

diff --git a/scss/login.module.scss b/scss/login.module.scss
@@ -18,6 +18,12 @@
 
 .discord__button {
   @include thirdPartyAuthBtn(#5865f2);
+  height: 48px;
+  border: 0px transparent;
+  border-radius: 0.375rem;
+  text-transform: uppercase;
+  font-weight: 400;
+  font-size: 1.25rem;
 }
 
 .discord__button:hover {
@@ -26,6 +32,11 @@
 
 .discord__button__image__wrapper {
   display: flex;
+  padding-left: 11px;
+}
+
+.discord_text {
+  padding-right: 11px;
 }
 
 .orContainer {