feat: add "Forgot password?" and "Sign up" links to LoginModal; update Button and styles for link variant

Author: mitchdowney

src/components/Auth/LoginModal.tsx

@@ -49,6 +49,14 @@ export const LoginModal: React.FC = () => {
             Submit
           </Button>
         </div>
+        <div className={styles.links}>
+          <Button type='button' variant='link' onClick={() => console.log('Forgot password clicked')}>
+            Forgot password?
+          </Button>
+          <Button type='button' variant='link' onClick={() => console.log('Sign up clicked')}>
+            Sign up
+          </Button>
+        </div>
       </form>
     </Modal>
   )

src/components/Button/Button.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classNames from 'classnames'
 import styles from '../../styles/components/Button/Button.module.scss'
 
-type ButtonVariant = 'primary' | 'secondary' | 'warning' | 'success' | 'danger' | 'outline'
+type ButtonVariant = 'primary' | 'secondary' | 'warning' | 'success' | 'danger' | 'outline' | 'link'
 
 type ButtonProps = {
   children: React.ReactNode

src/styles/components/Auth/LoginModal.module.scss

@@ -4,3 +4,9 @@
   gap: 8px;
   margin-top: 2.25rem;
 }
+
+.links {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1.5rem;
+}

src/styles/components/Button/Button.module.scss

@@ -62,3 +62,16 @@
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+.link {
+  color: var(--text-color-link);
+  text-decoration: none;
+  font-size: 1rem;
+  font-weight: var(--font-weight-normal);
+  min-width: auto;
+}
+
+.link:hover,
+.link:focus {
+  color: var(--text-color-link-hover);
+}

src/styles/components/Header/Header.module.scss

@@ -1,8 +1,7 @@
 .header {
   background-color: var(--background-color-secondary);
-  padding: 1rem 1.5rem;
+  padding: 0 1.5rem;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--border-color-opaque);
   height: var(--header-desktop-height);
 }

src/styles/themes/dark.scss

@@ -13,13 +13,14 @@
   --text-color-secondary: #cccccc;
   --text-color-tertiary: #000000;
   --text-color-link: #74a8dc;
+  --text-color-link-hover: #49a4ff;;
 }
 
 :root,
 [data-theme="dark"] {
-  --button-primary-bg: #3d9dfe;
+  --button-primary-bg: var(--border-color-primary);
   --button-primary-color: var(--text-color-tertiary);
-  --button-primary-bg-hover: #49a4ff;
+  --button-primary-bg-hover: var(--text-color-link-hover);
   --button-secondary-bg: var(--background-color-glow);
   --button-secondary-color: var(--text-color-primary);
   --button-secondary-bg-hover: #34397b;