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; background-color: #33a4e7;
.msg { .msg {
@include H7;
width: 100%; width: 100%;
display: block; display: block;
color: white; color: white;
font-size: 12px;
text-align: center; text-align: center;
} }
} }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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