more lock page tweaks

.storybook/metamask-storybook-theme.js

@@ -7,6 +7,6 @@ export default create({
   brandTitle: 'MetaMask Storybook',
 
   // Typography
-  fontBase: 'Euclid Circular B, Roboto, Helvetica, Arial, sans-serif',
+  fontBase: "'Avenir Next', -apple-system, BlinkMacSystemFont, sans-serif",
   fontCode: 'Inconsolata, monospace',
 });

README.md

@@ -1,18 +1,23 @@
 # MetaMask Browser Extension
 
-**Minimalized version of MetaMask for my own personal use without the myriad of banners & buttons I will never use. Don't blindly trust me and double check the changes before installing this in your own browser.**
+> 🦊 Minimalized version of MetaMask for my own personal use without the myriad of banners & buttons I will never use, and without that terrible Roboto typeface.
 
-Notable changes compared to upstream:
+**Don't blindly trust me and double check the changes before installing this in your own browser.**
 
-- tweaked overall typography defaulting to system font Avenir Next (will only work on macOS)
-- hide all those unneccessary nagging banners, like Ledger connection instructions (have connected it for many years) or network is busy (it always is)
+[**Compare code changes →**](https://github.com/MetaMask/metamask-extension/compare/develop...kremalicious:metamask-extension:minimal)
+
+## Notable Changes
+
+- tweaked overall typography defaulting to system font Avenir Next on macOS, respective default system font on all other OS
+- hide all those unneccessary nagging banners, like *Ledger connection instructions* or *network is busy* (it always is)
+- minimal lock screen
 - NFT tab enabled by default
 - UX improvements around account dropdown when many accounts are in there
 - UX improvements around network dropdown
-- remove all the Buy, Swap etc. buttons, replace remaining Send with text only
-- remove all "contact support" banners
+- remove all the *Buy*, *Swap* etc. buttons, replace remaining *Send* with text only
+- remove all *contact support* banners
 
-Quickstart:
+## Quick Start
 
 ```bash
 yarn

ui/components/ui/button/buttons.scss

@@ -5,7 +5,7 @@
 .button {
   @include H6;
 
-  font-weight: 500;
+  font-weight: 600;
   padding: 0.75rem 1rem;
   display: flex;
   justify-content: center;
@@ -165,6 +165,7 @@
   color: var(--color-primary-default);
   cursor: pointer;
   background-color: transparent;
+  font-weight: 400;
 
   &:hover {
     color: var(--color-primary-alternative);

ui/css/base-styles.scss

@@ -120,5 +120,5 @@ input.form-control {
 
 /** Default Typography on base elements **/
 * {
-  font-family: $font-family;
+  font-family: $font-family !important;
 }

ui/pages/routes/routes.component.js

@@ -390,7 +390,11 @@ export default class Routes extends Component {
       }),
     );
 
-    return isHandlingPermissionsRequest || isHandlingAddEthereumChainRequest;
+    return (
+      isHandlingPermissionsRequest ||
+      isHandlingAddEthereumChainRequest ||
+      !this.props.isUnlocked
+    );
   }
 
   showOnboardingHeader() {

ui/pages/swaps/fee-card/index.scss

@@ -207,7 +207,7 @@
   }
 
   &__tilde {
-    font-family: Roboto, Helvetica, Arial, sans-serif;
+    font-family: $font-family;
     margin-right: -3.5px;
   }
 }

ui/pages/unlock-page/index.scss

@@ -7,6 +7,7 @@
   width: 357px;
   padding: 30px;
   font-weight: 400;
+  margin-top: 10vh;
 
   &__container {
     display: flex;
@@ -34,14 +35,6 @@
     }
   }
 
-  &__title {
-    @include H2;
-
-    margin-top: 5px;
-    font-weight: 800;
-    color: var(--color-text-alternative);
-  }
-
   &__form {
     width: 100%;
     margin: 56px 0 8px;
@@ -56,15 +49,5 @@
 
   &__link {
     font-size: unset;
-    font-weight: bold;
-  }
-
-  &__support {
-    margin-top: 25px;
-    font-size: 0.75rem;
-
-    a {
-      color: var(--color-primary-default);
-    }
   }
 }

ui/pages/unlock-page/unlock-page.component.js

@@ -129,7 +129,6 @@ export default class UnlockPage extends Component {
       color: 'var(--color-primary-inverse)',
       marginTop: '20px',
       height: '60px',
-      fontWeight: '400',
       boxShadow: 'none',
       borderRadius: '100px',
     };