m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

normalize UI component font styles (#9694)

Browse Source
This commit is contained in:
Brad Decker 2020-10-29 09:30:38 -05:00 committed by GitHub
parent aabecad34f
commit 186ee97d36
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 62 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/app/components/ui/alert/index.scss
View File

@ -4,10 +4,11 @@
background-color: #33a4e7;
.msg {
@include H7;
width: 100%;
display: block;
color: white;
font-size: 12px;
text-align: center;
}
}

2
ui/app/components/ui/button-group/index.scss
View File

@ -4,7 +4,7 @@
align-items: center;
&__button {
font-size: 1rem;
font-size: $font-size-h5;
color: $tundora;
border-style: solid;
border-color: $alto;

14
ui/app/components/ui/button/buttons.scss
View File

@ -14,7 +14,6 @@ $warning-light-orange: #f8b588;
@include H6;
font-weight: 500;
line-height: 1.25rem;
padding: 0.75rem 1rem;
display: flex;
justify-content: center;
@ -170,7 +169,6 @@ $warning-light-orange: #f8b588;
@include H4;
color: $Blue-500;
line-height: 1.25rem;
cursor: pointer;
background-color: transparent;
@ -211,11 +209,12 @@ $warning-light-orange: #f8b588;
}
.btn--first-time {
@include H4;
height: 54px;
width: 198px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
color: $white;
font-size: 1.25rem;
font-weight: 500;
transition: 200ms ease-in-out;
background-color: rgba(247, 134, 28, 0.9);
@ -228,15 +227,6 @@ input[type="submit"][disabled] {
opacity: 0.5;
}
button.primary {
padding: 8px 12px;
background: #f7861c;
box-shadow: 0 3px 6px rgba(247, 134, 28, 0.36);
color: $white;
font-size: 1.1em;
text-transform: uppercase;
}
.btn--rounded {
border-radius: 100px;
will-change: box-shadow;

4
ui/app/components/ui/currency-input/index.scss
View File

@ -1,7 +1,7 @@
.currency-input {
&__conversion-component {
font-size: 12px;
line-height: 12px;
@include H7;
padding-left: 1px;
}

4
ui/app/components/ui/dialog/dialog.scss
View File

@ -1,6 +1,6 @@
.dialog {
font-size: 0.75rem;
line-height: 1rem;
@include H7;
padding: 1rem;
border: 1px solid $black;
box-sizing: border-box;

3
ui/app/components/ui/dropdown/dropdown.scss
View File

@ -1,4 +1,6 @@
.dropdown {
@include H6;
appearance: none;
// TODO: remove these after getting autoprefixer working in Storybook
@ -11,7 +13,6 @@
background-position: right 18px top 50%;
background-color: white;
padding: 8px 32px 8px 16px;
font-size: 14px;
[dir='rtl'] & {
background-position: left 18px top 50%;

3
ui/app/components/ui/editable-label/index.scss
View File

@ -12,8 +12,9 @@
}
&__input {
@include H6;
width: 250px;
font-size: 14px;
text-align: center;
border: 1px solid $alto;

3
ui/app/components/ui/error-message/index.scss
View File

@ -1,10 +1,11 @@
.error-message {
@include H7;
min-height: 32px;
border: 1px solid $monzo;
color: $monzo;
background: lighten($monzo, 56%);
border-radius: 4px;
font-size: 0.75rem;
display: flex;
justify-content: flex-start;
align-items: center;

6
ui/app/components/ui/export-text-container/index.scss
View File

@ -17,10 +17,11 @@
}
&__text {
@include H4;
resize: none;
border: none;
background: $alabaster;
font-size: 20px;
text-align: center;
}
@ -32,12 +33,13 @@
}
&__button {
@include H7;
padding: 10px;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
cursor: pointer;
color: $primary-blue;

3
ui/app/components/ui/icon-with-label/index.scss
View File

@ -3,7 +3,8 @@
align-items: center;
&__label {
font-size: 10px;
@include H8;
margin-left: 4px;
color: $Grey-500;
}

11
ui/app/components/ui/list-item/index.scss
View File

@ -37,9 +37,9 @@
}
&__heading {
@include H5;
grid-area: head;
font-size: 16px;
line-height: 160%;
position: relative;
display: flex;
align-items: center;
@ -57,9 +57,9 @@
}
&__subheading {
@include H7;
grid-area: sub;
font-size: 12px;
line-height: 14px;
color: $Grey-500;
margin-top: 4px;
// all direct descendants should be truncated with ellipses
@ -76,8 +76,9 @@
}
&__mid-content {
@include H7;
grid-area: mid;
font-size: 12px;
color: $Grey-500;
}

7
ui/app/components/ui/loading-screen/index.scss
View File

@ -26,13 +26,6 @@
align-items: center;
}
&__message {
margin-top: 32px;
font-weight: 400;
font-size: 20px;
color: $manatee;
}
&__error-screen {
display: flex;
flex-direction: column;

5
ui/app/components/ui/menu/menu.scss
View File

@ -1,5 +1,7 @@
.menu {
&__container {
@include H6;
background: $white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.214);
border-radius: 8px;
@ -9,9 +11,6 @@
flex-direction: column;
align-items: center;
padding: 0 16px;
font-size: 14px;
font-weight: normal;
line-height: 20px;
z-index: 1050;
}

18
ui/app/components/ui/page-container/index.scss
View File

@ -73,9 +73,10 @@
a,
a:hover {
@include H7;
text-decoration: none;
cursor: pointer;
font-size: 0.75rem;
text-transform: uppercase;
color: #2f9ae0;
}
@ -91,24 +92,24 @@
}
&__back-button {
@include Paragraph;
color: #2f9ae0;
font-size: 1rem;
cursor: pointer;
font-weight: 400;
}
&__title {
@include H2;
color: $black;
font-size: 2rem;
font-weight: 500;
line-height: 2rem;
margin-right: 1.5rem;
}
&__subtitle {
@include H6;
padding-top: 0.5rem;
line-height: initial;
font-size: 0.9rem;
color: $gray;
}
@ -118,9 +119,10 @@
}
&__tab {
@include Paragraph;
min-width: 5rem;
color: $dusty-gray;
font-size: 1rem;
border-bottom: none;
margin-right: 16px;

5
ui/app/components/ui/popover/index.scss
View File

@ -36,7 +36,7 @@
@include H4;
font-weight: bold;
line-height: 25px;
padding-bottom: 8px;
h2 {
white-space: nowrap;
@ -51,9 +51,6 @@
&__subtitle {
@include H6;
padding-top: 8px;
line-height: 20px;
}
&__button {

6
ui/app/components/ui/qr-code/index.scss
View File

@ -5,13 +5,15 @@
align-items: center;
&__message-container > div:first-child {
@include Paragraph;
margin-top: 18px;
font-size: 15px;
color: #4d4d4d;
}
&__message {
font-size: 12px;
@include H7;
color: #f7861c;
}

9
ui/app/components/ui/sender-to-recipient/index.scss
View File

@ -69,11 +69,12 @@
}
&__name {
@include H6;
padding-left: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.875rem;
[dir='rtl'] & {
/*rtl:ignore*/
@ -117,10 +118,11 @@
}
&__name {
@include H9;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.5rem;
[dir='rtl'] & {
/*rtl:ignore*/
@ -171,10 +173,11 @@
}
&__name {
@include H8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.6875rem;
[dir='rtl'] & {
/*rtl:ignore*/

3
ui/app/components/ui/snackbar/index.scss
View File

@ -1,6 +1,7 @@
.snackbar {
@include H7;
padding: 0.75rem 1rem;
font-size: 0.75rem;
color: $Blue-600;
min-width: 360px;
width: fit-content;

6
ui/app/components/ui/toggle-button/index.scss
View File

@ -3,10 +3,8 @@
$self: &;
&__status {
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 23px;
@include Paragraph;
display: flex;
align-items: center;
text-transform: uppercase;

15
ui/app/components/ui/unit-input/index.scss
View File

@ -1,4 +1,6 @@
.unit-input {
@include Paragraph;
display: flex;
flex-flow: row nowrap;
align-items: center;
@ -7,7 +9,6 @@
border-radius: 4px;
background-color: #fff;
color: #4d4d4d;
font-size: 16px;
padding: 8px 10px;
position: relative;
@ -34,12 +35,12 @@
}
&__input {
@include Paragraph;
color: #4d4d4d;
font-size: 1rem;
border: none;
max-width: 22ch;
height: 16px;
line-height: 18px;
&__disabled {
background-color: rgb(222, 222, 222);
@ -48,14 +49,14 @@
&__input-container {
display: flex;
align-items: flex-start;
padding-bottom: 4px;
align-items: center;
padding-bottom: 2px;
}
&__suffix {
@include Paragraph;
margin-left: 3px;
font-size: 1rem;
line-height: 1rem;
}
&--error {