Modal style fixes

src/components/Nav/AuthModal/AuthModal.module.scss

@@ -87,14 +87,20 @@
 
 .disclaimer {
   @include font-size(1.2rem);
-
   color: #9fa1a7;
   margin-bottom: 0;
+
+  a {
+    color: #fff !important;
+
+    &:hover {
+      color: rgb(255, 255, 255, 0.6) !important;
+    }
+  }
 }
 
 .authActions {
   @include font-size(1.5rem);
-
   margin-top: 1.6rem;
   text-align: center;
 

src/components/Nav/Modal/Modal.module.scss

@@ -16,18 +16,16 @@
 .modal {
   background: #fff;
   max-width: 1000px;
-  padding: 5.4rem 2.4rem 2.4rem;
   position: relative;
   width: 100%;
 
   @include media-breakpoint-up(sm) {
-    padding: 4.2rem;
     width: 80%;
   }
 
   .close {
     position: absolute;
-    top: 1.6rem;
+    top: 2rem;
     cursor: pointer;
     height: 18px;
     width: 16px;
@@ -38,7 +36,7 @@
     z-index: 1;
 
     @include media-breakpoint-up(sm) {
-      right: 1.6rem;
+      right: 2rem;
     }
 
     &:hover {
@@ -74,9 +72,30 @@
   }
 }
 
+.modalInner {
+  overflow: auto;
+  padding: 5.4rem 2.4rem 2.4rem;
+  position: relative;
+
+  @include media-breakpoint-up(sm) {
+    padding: 5rem;
+  }
+}
+
 .noPadding {
   background: none;
+  left: 50%;
+  padding: 0;
+  transform: translateX(-50%);
+
+  .modalInner {
     padding: 0 2rem;
+  }
+
+  .close {
+    right: 2rem;
+    top: 2rem;
+  }
 }
 
 .maxHeight {

src/components/Nav/Modal/Modal.tsx

@@ -10,7 +10,7 @@ import { router } from '../../../stores/router'
 
 interface Props {
   name: string
-  variant: 'narrow' | 'wide'
+  variant: 'narrow' | 'wide' | 'medium'
   children: JSX.Element
   onClose?: () => void
   noPadding?: boolean
@@ -43,15 +43,17 @@ export const Modal = (props: Props) => {
   return (
     <Show when={visible()}>
       <div class={styles.backdrop} onClick={handleHide}>
+        <div className="wide-container">
           <div
             class={clsx(styles.modal, {
               [styles.narrow]: props.variant === 'narrow',
+              ['col-auto col-md-20 offset-md-2 col-lg-14 offset-lg-5']: props.variant === 'medium',
               [styles.noPadding]: props.noPadding,
               [styles.maxHeight]: props.maxHeight
             })}
             onClick={(event) => event.stopPropagation()}
           >
-          {props.children}
+            <div class={styles.modalInner}>{props.children}</div>
             <div class={styles.close} onClick={handleHide}>
               <svg
                 class={styles.icon}
@@ -68,6 +70,7 @@ export const Modal = (props: Props) => {
             </div>
           </div>
         </div>
+      </div>
     </Show>
   )
 }