m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

remove pill buttons

Browse Source
This commit is contained in:
Matthias Kretschmann 2023-04-05 19:57:54 +01:00
parent 23f23249d4
commit c811a07c8c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
6 changed files with 5 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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.**

1
ui/components/component-library/button-base/button-base.scss
View File

@ -5,6 +5,7 @@
cursor: pointer;
vertical-align: middle;
user-select: none;
font-weight: 600;
&--block {
display: block;

4
ui/components/ui/button/button.component.js
View File

@ -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,

121
ui/components/ui/button/buttons.scss
View File

@ -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);

2
ui/helpers/constants/design-system.ts
View File

@ -212,7 +212,7 @@ export enum BorderRadius {
LG = 'lg',
XL = 'xl',
none = 'none',
pill = 'pill',
pill = 'md',
full = 'full',
}

14
ui/pages/unlock-page/unlock-page.component.js
View File

@ -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')}