From c637f5813abafcff01bbc45464fcdab5619e676a Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 16 Mar 2023 19:36:44 +0000 Subject: [PATCH] more lock page tweaks --- .storybook/metamask-storybook-theme.js | 2 +- README.md | 19 ++++++++++++------- ui/components/ui/button/buttons.scss | 3 ++- ui/css/base-styles.scss | 2 +- ui/pages/routes/routes.component.js | 6 +++++- ui/pages/swaps/fee-card/index.scss | 2 +- ui/pages/unlock-page/index.scss | 19 +------------------ ui/pages/unlock-page/unlock-page.component.js | 1 - 8 files changed, 23 insertions(+), 31 deletions(-) diff --git a/.storybook/metamask-storybook-theme.js b/.storybook/metamask-storybook-theme.js index 2bba8734c..595cd3358 100644 --- a/.storybook/metamask-storybook-theme.js +++ b/.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', }); diff --git a/README.md b/README.md index c23c61015..2ec9b1b0b 100644 --- a/README.md +++ b/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 diff --git a/ui/components/ui/button/buttons.scss b/ui/components/ui/button/buttons.scss index b0be64bb7..a9c5798fd 100644 --- a/ui/components/ui/button/buttons.scss +++ b/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); diff --git a/ui/css/base-styles.scss b/ui/css/base-styles.scss index f7ff52c19..c7c0a9fbf 100644 --- a/ui/css/base-styles.scss +++ b/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; } diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js index 8cb160764..268e762e3 100644 --- a/ui/pages/routes/routes.component.js +++ b/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() { diff --git a/ui/pages/swaps/fee-card/index.scss b/ui/pages/swaps/fee-card/index.scss index c7ac11f7d..7638fb334 100644 --- a/ui/pages/swaps/fee-card/index.scss +++ b/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; } } diff --git a/ui/pages/unlock-page/index.scss b/ui/pages/unlock-page/index.scss index d046bd66a..22fff6af6 100644 --- a/ui/pages/unlock-page/index.scss +++ b/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); - } } } diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js index 38f9cc55a..ef1af8583 100644 --- a/ui/pages/unlock-page/unlock-page.component.js +++ b/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', };