From c811a07c8caf82d81b6f418d5eebdc3ed19b1813 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 5 Apr 2023 19:57:54 +0100
Subject: [PATCH] remove pill buttons

---
 README.md                                     |   2 +-
 .../button-base/button-base.scss              |   1 +
 ui/components/ui/button/button.component.js   |   4 -
 ui/components/ui/button/buttons.scss          | 121 +-----------------
 ui/helpers/constants/design-system.ts         |   2 +-
 ui/pages/unlock-page/unlock-page.component.js |  14 +-
 6 files changed, 5 insertions(+), 139 deletions(-)

diff --git a/README.md b/README.md
index 3d521f98e..5fde01191 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 > 🦊 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.
 
-<img width="250" alt="Screenshot 2023-03-17 at 12 53 19" src="https://user-images.githubusercontent.com/90316/225910114-1e775b8b-de6d-45f5-bce3-d70da30cd30f.png">
+<img width="250" alt="Screenshot 2023-04-05 at 19 58 35" src="https://user-images.githubusercontent.com/90316/230178834-31b92326-70d8-4ff0-82d3-c0c03f53f1e9.png">
 
 **Don't blindly trust me and double check the changes before installing this in your own browser.**
 
diff --git a/ui/components/component-library/button-base/button-base.scss b/ui/components/component-library/button-base/button-base.scss
index 6b4e249c2..52496f528 100644
--- a/ui/components/component-library/button-base/button-base.scss
+++ b/ui/components/component-library/button-base/button-base.scss
@@ -5,6 +5,7 @@
   cursor: pointer;
   vertical-align: middle;
   user-select: none;
+  font-weight: 600;
 
   &--block {
     display: block;
diff --git a/ui/components/ui/button/button.component.js b/ui/components/ui/button/button.component.js
index b43bafda1..55d64da33 100644
--- a/ui/components/ui/button/button.component.js
+++ b/ui/components/ui/button/button.component.js
@@ -7,7 +7,6 @@ const CLASSNAME_PRIMARY = 'btn-primary';
 const CLASSNAME_SECONDARY = 'btn-secondary';
 const CLASSNAME_RAISED = 'btn-raised';
 const CLASSNAME_LARGE = 'btn--large';
-const CLASSNAME_ROUNDED = 'btn--rounded';
 const CLASSNAME_INLINE = 'btn--inline';
 
 const typeHash = {
@@ -29,10 +28,8 @@ const Button = ({
   children,
   icon,
   className,
-  rounded = true,
   ...buttonProps
 }) => {
-  const doRounding = rounded && type !== 'link' && type !== 'inline';
   // To support using the Button component to render styled links that are semantic html
   // we swap the html tag we use to render this component and delete any buttonProps that
   // we know to be erroneous attributes for a link. We will likely want to extract Link
@@ -56,7 +53,6 @@ const Button = ({
     <Tag
       className={classnames(
         'button',
-        doRounding && CLASSNAME_ROUNDED,
         typeHash[type] || CLASSNAME_DEFAULT,
         large && CLASSNAME_LARGE,
         className,
diff --git a/ui/components/ui/button/buttons.scss b/ui/components/ui/button/buttons.scss
index a9c5798fd..29b731144 100644
--- a/ui/components/ui/button/buttons.scss
+++ b/ui/components/ui/button/buttons.scss
@@ -3,8 +3,6 @@
  */
 
 .button {
-  @include H6;
-
   font-weight: 600;
   padding: 0.75rem 1rem;
   display: flex;
@@ -160,8 +158,6 @@
 }
 
 .btn-link {
-  @include H4;
-
   color: var(--color-primary-default);
   cursor: pointer;
   background-color: transparent;
@@ -209,122 +205,6 @@ input[type="submit"][disabled] {
   opacity: 0.5;
 }
 
-.btn--rounded {
-  border-radius: 100px;
-  will-change: box-shadow;
-  transition: box-shadow cubic-bezier(0.6, -0.28, 0.735, 0.045) 200ms;
-
-  &:hover {
-    box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
-  }
-
-  &.btn-secondary {
-    border: 1px solid var(--color-primary-default);
-
-    &:hover {
-      box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);
-    }
-
-    &--disabled,
-    &[disabled] {
-      border-color: var(--color-primary-disabled);
-      color: var(--color-primary-disabled);
-    }
-
-    &:active {
-      border-color: var(--color-primary-alternative);
-    }
-  }
-
-  &.btn-default {
-    border: 1px solid var(--color-icon-default);
-
-    &:hover {
-      box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
-    }
-
-    &--disabled,
-    &[disabled] {
-      border-color: var(--color-border-muted);
-      color: var(--color-text-muted);
-    }
-
-    &:active {
-      border-color: var(--color-text-alternative);
-    }
-  }
-
-  &.btn-danger {
-    border: 1px solid var(--color-error-default);
-
-    &:hover {
-      box-shadow: var(--shadow-size-sm) var(--color-error-shadow);
-    }
-
-    &--disabled,
-    &[disabled] {
-      border-color: var(--color-error-disabled);
-      color: var(--color-error-disabled);
-    }
-
-    &:active {
-      border-color: var(--color-error-alternative);
-    }
-  }
-
-  &.btn-warning {
-    border: 1px solid var(--color-warning-default);
-
-    &:hover {
-      box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
-    }
-
-    &--disabled,
-    &[disabled] {
-      border-color: var(--color-warning-alternative);
-      color: var(--color-text-muted);
-    }
-
-    &:active {
-      border-color: var(--color-warning-alternative);
-    }
-  }
-
-  &.btn-primary {
-    background-color: var(--color-primary-default);
-
-    &:hover {
-      box-shadow: var(--shadow-size-sm) var(--color-primary-shadow);
-    }
-
-    &--disabled,
-    &[disabled] {
-      background-color: var(--color-primary-disabled);
-    }
-
-    &:active {
-      background-color: var(--color-primary-alternative);
-    }
-  }
-
-  &.btn-danger-primary {
-    background-color: var(--color-error-default);
-
-    &:hover {
-      box-shadow: var(--shadow-size-sm) var(--color-error-shadow);
-    }
-
-    &--disabled,
-    &[disabled] {
-      background-color: var(--color-error-disabled);
-    }
-
-    &:active {
-      background-color: var(--color-error-alternative);
-    }
-  }
-}
-
 .btn--inline {
   display: inline;
   padding: 0;
@@ -333,6 +213,7 @@ input[type="submit"][disabled] {
   color: var(--color-primary-default);
   cursor: pointer;
   background-color: transparent;
+  font-weight: 400;
 
   &:hover {
     color: var(--color-primary-alternative);
diff --git a/ui/helpers/constants/design-system.ts b/ui/helpers/constants/design-system.ts
index bc17859c0..4af1fec9d 100644
--- a/ui/helpers/constants/design-system.ts
+++ b/ui/helpers/constants/design-system.ts
@@ -212,7 +212,7 @@ export enum BorderRadius {
   LG = 'lg',
   XL = 'xl',
   none = 'none',
-  pill = 'pill',
+  pill = 'md',
   full = 'full',
 }
 
diff --git a/ui/pages/unlock-page/unlock-page.component.js b/ui/pages/unlock-page/unlock-page.component.js
index aee1cde10..72da7b821 100644
--- a/ui/pages/unlock-page/unlock-page.component.js
+++ b/ui/pages/unlock-page/unlock-page.component.js
@@ -95,23 +95,11 @@ export default class UnlockPage extends Component {
   }
 
   renderSubmitButton() {
-    const style = {
-      backgroundColor: 'var(--color-primary-default)',
-      color: 'var(--color-primary-inverse)',
-      marginTop: '20px',
-      height: '60px',
-      boxShadow: 'none',
-      borderRadius: '100px',
-    };
-
     return (
       <Button
-        type="submit"
+        type="primary"
         data-testid="unlock-submit"
-        style={style}
         disabled={!this.state.password}
-        variant="contained"
-        size="large"
         onClick={this.handleSubmit}
       >
         {this.context.t('unlock')}