remove max-width on container for ulta-wide displays (#1906)

* remove max-width on container for ulta-wide displays

* update container styles

* update faucet styles for ulta-wide displays

* update container and font sizes to support wide-screen display

* update auth modal padding

* remove vw font sizes

* adjust nav and footer padding

* add max-width for footer

* fix ts error

Author: AndyMBridges

src/components/Accordion/accordion.module.scss

@@ -11,7 +11,7 @@
 .accordion {
   background: var(--accordion-background);
   border-radius: 8px;
-  margin-bottom: 24px;
+  margin-bottom: 2rem;
 
   .header {
     display: flex;
@@ -21,17 +21,17 @@
 
     .closeButton {
       cursor: pointer;
-      margin-left: 24px;
-      margin-right: 24px;
-      display: block;
-      height: 16px;
+      margin-left: 2rem;
+      margin-right: 2rem;
+      display: flex;
+      height: 1rem;
       line-height: 1;
 
       .image {
-        min-width: 16px;
-        width: 16px;
-        min-height: 16px;
-        height: 16px;
+        min-width: 1rem;
+        width: 1rem;
+        min-height: 1rem;
+        height: 1rem;
         transition: all 0.5s;
         transform: rotate(45deg);
 

src/components/AuthLogin/AuthModal.tsx

@@ -16,6 +16,7 @@ import {
 import { REQUEST_PARAMS } from '@site/src/lib/constants'
 import { MetamaskProviderContext } from '@site/src/theme/Root'
 import Button from '@site/src/components/elements/buttons/button'
+import Text from '@site/src/components/Text'
 
 Modal.setAppElement('#__docusaurus')
 type AuthModalProps = {
@@ -47,10 +48,12 @@ const ConnectingModal = () => {
         <img src="/img/spinner.png" className={styles.spinner} />
         <Icon name="metamask" classes={styles.metamask} />
       </div>
-      <div className={styles.heading}>Waiting for MetaMask</div>
-      <div className={styles.content}>
+      <Text as="p" className={styles.heading}>
+        Waiting for MetaMask
+      </Text>
+      <Text as="p" className={styles.content}>
         Don’t close or exit this window. Please continue connecting on your extension.
-      </div>
+      </Text>
     </>
   )
 }
@@ -62,12 +65,16 @@ const ConnectionSuccessModal = () => {
         <Icon name="spinner-success" classes={styles.spinner} />
         <Icon name="metamask" classes={styles.metamask} />
       </div>
-      <div className={styles.heading}>Wallet Connected!</div>
-      <div className={styles.content}>
-        Your wallet is successfully connected.
-        <br />
-        You’re all set!
-      </div>
+      <Text as="p" className={styles.heading}>
+        Wallet Connected!
+      </Text>
+      <Text as="p" className={styles.content}>
+        <span>
+          Your wallet is successfully connected.
+          <br />
+          You’re all set!
+        </span>
+      </Text>
     </>
   )
 }
@@ -91,10 +98,14 @@ const ConnectionErrorModal = ({
         <Icon name="spinner-error" classes={styles.spinner} />
         <Icon name="metamask" classes={styles.metamask} />
       </div>
-      <div className={styles.heading}>There was an issue connecting your wallet</div>
-      <div className={styles.content}>
-        Please try again or <a href="https://support.metamask.io/">contact us</a>.
-      </div>
+      <Text as="p" className={styles.heading}>
+        There was an issue connecting your wallet
+      </Text>
+      <Text as="p" className={styles.content}>
+        <span>
+          Please try again or <a href="https://support.metamask.io/">contact us</a>.
+        </span>
+      </Text>
       <div className={styles.flexButton}>
         <Button as="button" onClick={handleCancel} label={'Cancel'} />
         <Button as="button" onClick={login} label={'Retry'} />

src/components/AuthLogin/styles.module.scss

@@ -22,33 +22,34 @@
   transform: translate(-50%, -50%);
   overflow: auto;
   outline: none;
-  /* background: var(--background-default, #24272a); */
   background: var(--modal-bg-color-primary);
-  width: 360px;
-  padding: 16px;
-  border-radius: 8px;
+  width: 60%;
+  padding: 1.4rem;
+  border-radius: 1rem;
   margin: auto;
   text-align: center;
+  @include bp(desktop) {
+    width: 20%;
+  }
 }
 
 .modalContent {
   color: #fff;
-
-  --font-family-sans: 'Euclid Circular B', 'Roboto', sans-serif;
-
   position: relative;
 }
 
 .modalClose {
   position: absolute;
   top: 0;
   right: 0;
-  width: 24px;
-  height: 24px;
+  width: 2rem;
+  height: 2rem;
   border: 0;
   background: transparent;
   cursor: pointer;
   svg {
+    width: 2rem;
+    height: 2rem;
     path {
       fill: var(--modal-font-color-primary);
     }
@@ -59,8 +60,8 @@
   display: flex;
   align-items: center;
   position: relative;
-  width: 60px;
-  height: 60px;
+  width: 5rem;
+  height: 5rem;
   margin: auto;
 }
 
@@ -69,9 +70,13 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 60px;
-  height: 60px;
+  width: 5rem;
+  height: 5rem;
   animation: rotating 3s linear infinite;
+  svg {
+    width: 5rem;
+    height: 5rem;
+  }
 }
 
 @keyframes spinner /* Safari and Chrome */ {
@@ -97,29 +102,30 @@
 .metamask {
   display: block;
   margin: auto;
-  width: 30px;
-  height: 28px;
+  width: 2rem;
+  height: 2.4rem;
+  svg {
+    width: 2rem;
+    height: 2.4rem;
+  }
 }
 
 .heading {
-  font-size: 18px;
   font-weight: 500;
-  line-height: 24px;
-  margin: 12px 0 0;
+  margin: 1rem 0 0;
   color: var(--modal-font-color-primary);
 }
 
 .content {
   margin: 12px 0;
-  font-size: 16px;
   color: var(--modal-font-color-primary);
 }
 
 .flexButton {
   display: flex;
   justify-content: center;
-  gap: 10px;
-  padding: 10px;
+  gap: 1rem;
+  padding: 1rem;
   button {
     &:hover {
       --button-color-hover: var(--general-black);

src/components/Card.module.scss

@@ -127,10 +127,7 @@
 .item-description {
   font-size: 1.7rem;
   @include bp(tablet) {
-    max-width: 40rem;
-  }
-  @include bp(desktop) {
-    max-width: 50rem;
+    max-width: 82%;
   }
 }
 

src/components/CustomReferencePage/styles.module.css

@@ -10,7 +10,6 @@
 }
 
 .contentWrapper {
-  max-width: 1440px;
   margin: 0 auto;
 }
 
@@ -24,7 +23,6 @@
   }
 }
 
-
 @media (width >= 997px) {
   .sidebarViewport {
     height: 100%;
@@ -42,7 +40,7 @@
     border-right: 1px solid var(--ifm-toc-border-color);
   }
 
-  .sidebar>div {
+  .sidebar > div {
     padding-top: 0 !important;
   }
-}
+}

src/components/Faucet/Faq.tsx

@@ -62,7 +62,9 @@ export default function Faq({ network, className, classNameHeading, isLimitedUse
         <div className={className}>
           <div className={classNameHeading}>
             <Text as="h2">Frequently Asked Questions</Text>
-            <Text as="p">Answers to commonly asked questions about the MetaMask faucet.</Text>
+            <Text as="p" className={styles.faqDescription}>
+              Answers to commonly asked questions about the MetaMask faucet.
+            </Text>
           </div>
           {isLimitedUserPlan && (
             <Accordion>
@@ -171,7 +173,9 @@ export default function Faq({ network, className, classNameHeading, isLimitedUse
         <div className={className}>
           <div className={classNameHeading}>
             <Text as="h2">Frequently Asked Questions</Text>
-            <Text as="p">Answers to commonly asked questions about the MetaMask faucet.</Text>
+            <Text as="p" className={styles.faqDescription}>
+              Answers to commonly asked questions about the MetaMask faucet.
+            </Text>
           </div>
           {isLimitedUserPlan && (
             <Accordion>

src/components/Faucet/faq.module.scss

@@ -1,8 +1,11 @@
 .accordionHeader {
   margin: 0;
-  padding: 24px;
+  padding: 2rem;
 }
 .accordionContainer {
   margin: 0;
   padding: 0 24px 24px;
 }
+.faqDescription {
+  line-height: normal;
+}

src/components/Faucet/hero.module.scss

@@ -25,9 +25,11 @@
 }
 
 .heroWrapper {
-  max-width: 1420px;
-  width: 100%;
+  width: calc(100% - var(--page-padding-x) * 2);
   margin: 0 auto;
+  @include bp(desktop) {
+    max-width: 70%;
+  }
 }
 
 .hero {
@@ -58,7 +60,7 @@
 
     .inputCont {
       width: 100%;
-      max-width: 600px;
+      max-width: 40%;
 
       @media screen and (max-width: 996px) {
         max-width: 100%;
@@ -83,24 +85,21 @@
         }
         input {
           height: 4.2rem;
+          font-size: inherit;
           margin-bottom: 0;
           cursor: auto;
         }
       }
 
       .caption {
-        font-size: 12px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px;
         margin-bottom: 0;
       }
     }
 
     .alignedButtons {
       display: flex;
       align-items: flex-end;
-      margin-left: 8px;
+      margin-left: 1rem;
       @media screen and (max-width: 996px) {
         width: 100%;
         margin-top: 1rem;

src/components/Faucet/maintenance.module.scss

@@ -11,7 +11,7 @@
 .maintenance {
   background: rgba(0, 0, 0, 0.4);
   position: absolute;
-  top: -74px;
+  top: -100%;
   bottom: 0;
   left: 0;
   right: 0;
@@ -20,13 +20,13 @@
 
   .modal {
     position: sticky;
-    top: 80px;
+    top: 30%;
     width: 100%;
-    max-width: 480px;
+    max-width: 80%;
     margin: 0 auto;
-    padding: 16px;
+    padding: 1.4rem;
     text-align: center;
-    border-radius: 8px;
+    border-radius: 1rem;
     background: var(--maintenance-modal-background);
     box-shadow:
       0px 0px 16px 0px var(--maintenance-modal-shadow),
@@ -36,6 +36,10 @@
       0px 4px 4px 0px var(--maintenance-modal-shadow),
       0px 2px 2px 0px var(--maintenance-modal-shadow);
 
+    @include bp(desktop) {
+      max-width: 25%;
+    }
+
     .button {
       padding: 0 36px;
     }

src/components/Hero/Hero.module.scss

@@ -85,8 +85,11 @@
 
 .title {
   color: var(--developer-purple-light);
-  margin-top: 1.4rem;
+  margin-top: 4rem;
   font-family: var(--ifm-heading-font-family);
+  @include bp('tablet') {
+    margin-top: 1.4rem;
+  }
 }
 
 .description {