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;
-  padding: 0 2rem;
+  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,28 +43,31 @@ export const Modal = (props: Props) => {
   return (
     <Show when={visible()}>
       <div class={styles.backdrop} onClick={handleHide}>
-        <div
-          class={clsx(styles.modal, {
-            [styles.narrow]: props.variant === 'narrow',
-            [styles.noPadding]: props.noPadding,
-            [styles.maxHeight]: props.maxHeight
-          })}
-          onClick={(event) => event.stopPropagation()}
-        >
-          {props.children}
-          <div class={styles.close} onClick={handleHide}>
-            <svg
-              class={styles.icon}
-              width="16"
-              height="18"
-              viewBox="0 0 16 18"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7.99987 7.52552L14.1871 0.92334L15.9548 2.80968L9.76764 9.41185L15.9548 16.014L14.1871 17.9004L7.99987 11.2982L1.81269 17.9004L0.0449219 16.014L6.23211 9.41185L0.0449225 2.80968L1.81269 0.92334L7.99987 7.52552Z"
-                fill="currentColor"
-              />
-            </svg>
+        <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()}
+          >
+            <div class={styles.modalInner}>{props.children}</div>
+            <div class={styles.close} onClick={handleHide}>
+              <svg
+                class={styles.icon}
+                width="16"
+                height="18"
+                viewBox="0 0 16 18"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.99987 7.52552L14.1871 0.92334L15.9548 2.80968L9.76764 9.41185L15.9548 16.014L14.1871 17.9004L7.99987 11.2982L1.81269 17.9004L0.0449219 16.014L6.23211 9.41185L0.0449225 2.80968L1.81269 0.92334L7.99987 7.52552Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>