aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/css
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/css')
-rw-r--r--ui/app/css/itcss/components/add-token.scss189
-rw-r--r--ui/app/css/itcss/components/buttons.scss84
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss3
-rw-r--r--ui/app/css/itcss/components/modal.scss13
-rw-r--r--ui/app/css/itcss/components/new-account.scss27
-rw-r--r--ui/app/css/itcss/components/request-signature.scss35
-rw-r--r--ui/app/css/itcss/components/send.scss8
-rw-r--r--ui/app/css/itcss/components/settings.scss38
-rw-r--r--ui/app/css/itcss/components/token-list.scss9
-rw-r--r--ui/app/css/itcss/generic/index.scss2
-rw-r--r--ui/app/css/itcss/settings/variables.scss3
11 files changed, 265 insertions, 146 deletions
diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
index 13020f62f..f5c1de67c 100644
--- a/ui/app/css/itcss/components/add-token.scss
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -1,37 +1,118 @@
.add-token {
width: 498px;
+ max-height: 805px;
display: flex;
flex-flow: column nowrap;
- align-items: center;
position: relative;
z-index: 12;
- font-family: 'DIN Next Light';
+ font-family: 'Roboto';
+ background: white;
+ border-radius: 8px;
&__wrapper {
background-color: $white;
- box-shadow: 0 2px 4px 0 rgba($black, .08);
display: flex;
flex-flow: column nowrap;
align-items: center;
flex: 0 0 auto;
}
- &__title-container {
+ &__header {
display: flex;
flex-flow: column nowrap;
- align-items: center;
- padding: 30px 60px 12px;
- border-bottom: 1px solid $gallery;
+ padding: 16px 16px 0px;
+ border-bottom: 1px solid $geyser;
flex: 0 0 auto;
+
+ &__cancel {
+ color: $dodger-blue;
+ display: flex;
+ align-items: center;
+
+ span {
+ font-family: Roboto;
+ font-size: 16px;
+ line-height: 21px;
+ margin-left: 8px;
+ }
+ }
+
+ &__title {
+ color: $tundora;
+ font-size: 32px;
+ font-weight: 500;
+ margin-top: 4px;
+ }
+
+ &__tabs {
+ margin-left: 22px;
+ display: flex;
+
+ &__tab {
+ height: 54px;
+ padding: 15px 10px;
+ color: $dusty-gray;
+ font-family: Roboto;
+ font-size: 18px;
+ line-height: 24px;
+ text-align: center;
+ }
+
+ &__tab:first-of-type {
+ margin-right: 20px;
+ }
+
+ &__unselected:hover {
+ color: $black;
+ border-bottom: none;
+ }
+
+ &__selected {
+ color: $curious-blue;
+ border-bottom: 3px solid $curious-blue;
+ }
+ }
}
- &__title {
- color: $scorpion;
- font-size: 20px;
- line-height: 26px;
- text-align: center;
- font-weight: 600;
- margin-bottom: 12px;
+ &__info-box {
+ height: 96px;
+ margin: 20px 24px 0px;
+ border-radius: 4px;
+ background-color: $alabaster;
+ position: relative;
+ padding-left: 18px;
+ display: flex;
+ flex-flow: column;
+
+ &__close::after {
+ content: '\00D7';
+ font-size: 29px;
+ font-weight: 200;
+ color: $dusty-gray;
+ position: absolute;
+ right: 17px;
+ cursor: pointer;
+ }
+
+ &__title {
+ color: $mid-gray;
+ font-family: Roboto;
+ font-size: 14px;
+ margin-top: 15px;
+ margin-bottom: 9px;
+ }
+
+ &__copy,
+ &__copy--blue {
+ color: $mid-gray;
+ font-family: Roboto;
+ font-size: 12px;
+ line-height: 18px;
+ }
+
+ &__copy--blue {
+ color: $curious-blue;
+ }
}
&__description {
@@ -48,19 +129,17 @@
&__content-container {
width: 100%;
- border-bottom: 1px solid $gallery;
}
&__input-container {
- padding: 11px 0;
- width: 263px;
- margin: 0 auto;
+ display: flex;
position: relative;
}
&__search-input-error-message {
position: absolute;
bottom: -10px;
+ left: 22px;
font-size: 12px;
width: 100%;
text-overflow: ellipsis;
@@ -69,16 +148,24 @@
color: $red;
}
- &__input {
- width: 100%;
- border: 2px solid $gallery;
+ &__input,
+ &__add-custom-input {
+ height: 54px;
+ padding: 21px 6px;
+ border: 1px solid $geyser;
border-radius: 4px;
- padding: 5px 15px;
- font-size: 14px;
- line-height: 19px;
+ margin: 22px 24px;
+ position: relative;
+ flex: 1 0 auto;
+ color: $scorpion;
+ font-family: Roboto;
+ font-size: 16px;
&::placeholder {
- color: $silver;
+ color: $scorpion;
+ font-family: Roboto;
+ font-size: 16px;
+ line-height: 21px;
}
}
@@ -115,13 +202,14 @@
&__add-custom-form {
display: flex;
flex-flow: column nowrap;
- margin: 8px 0 51px;
+ margin: 40px 0 30px;
}
&__add-custom-field {
- width: 290px;
- margin: 0 auto;
position: relative;
+ display: flex;
+ flex-flow: column;
+ flex: 1 0 auto;
&--error {
.add-token__add-custom-input {
@@ -132,7 +220,8 @@
&__add-custom-error-message {
position: absolute;
- bottom: -21px;
+ bottom: 1px;
+ left: 22px;
font-size: 12px;
width: 100%;
text-overflow: ellipsis;
@@ -144,39 +233,50 @@
&__add-custom-label {
font-size: 16px;
line-height: 21px;
- margin-bottom: 8px;
+ margin-left: 22px;
+ color: $scorpion;
}
&__add-custom-input {
- width: 100%;
- border: 1px solid $silver;
- padding: 5px 15px;
- font-size: 14px;
- line-height: 19px;
+ margin-top: 6px;
+ font-size: 16px;
&::placeholder {
color: $silver;
+ font-size: 16px;
}
}
&__add-custom-field + &__add-custom-field {
- margin-top: 21px;
+ margin-top: 6px;
}
&__buttons {
display: flex;
flex-flow: row nowrap;
- margin: 30px 0 51px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
+ padding-bottom: 30px;
+ padding-top: 20px;
}
- &__button {
- flex: 1 0 141px;
+ &__confirm-button,
+ &__cancel-button {
margin: 0 12px;
- padding: 10px 22px;
+ padding: 10px 13px;
height: 54px;
+ width: 133px;
+ margin-right: 1.2rem;
+ }
+
+ &__token-icons-title {
+ color: #5B5D67;
+ font-family: Roboto;
+ font-size: 18px;
+ line-height: 24px;
+ margin-left: 24px;
+ margin-top: 8px;
}
&__token-icons-container {
@@ -191,7 +291,7 @@
flex: 0 0 42.5%;
align-items: center;
padding: 12px;
- margin: 2.5%;
+ margin: 0% 2.5% 1.5%;
box-sizing: border-box;
border-radius: 10px;
cursor: pointer;
@@ -305,13 +405,14 @@
top: 0;
width: 100%;
overflow: hidden;
- height: 100%;
+ flex: 1 0 auto;
&__wrapper {
box-shadow: none !important;
flex: 1 1 auto;
width: 100%;
- overflow-y: auto;
+ overflow-y: scroll;
+ height: 400px;
}
&__footers {
@@ -334,7 +435,7 @@
}
&__buttons {
- padding: 12px 0;
+ padding: 1rem;
margin: 0;
border-top: 1px solid $gallery;
width: 100%;
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 8df8829f2..04e1ed96e 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -2,6 +2,76 @@
Buttons
*/
+.btn-primary,
+.btn-primary--lg,
+.btn-secondary,
+.btn-secondary--lg {
+ background: $white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-sizing: border-box;
+ border-radius: 4px;
+ font-size: 14px;
+ font-weight: 500;
+ transition: border-color .3s ease;
+ padding: 0 20px;
+ min-width: 140px;
+ text-transform: uppercase;
+}
+
+.btn-primary,
+.btn-primary--lg {
+ color: $curious-blue;
+ border: 2px solid $spindle;
+
+ &:active {
+ background: $zumthor;
+ border-color: $curious-blue;
+ }
+
+ &:hover {
+ border-color: $curious-blue;
+ }
+
+ &--disabled,
+ &[disabled] {
+ cursor: auto;
+ opacity: .5;
+ pointer-events: none;
+ }
+}
+
+.btn-secondary,
+.btn-secondary--lg {
+ color: $scorpion;
+ border: 2px solid $dusty-gray;
+
+ &:active {
+ background: $gallery;
+ border-color: $dusty-gray;
+ }
+
+ &:hover {
+ border-color: $scorpion;
+ }
+
+ &--disabled,
+ &[disabled] {
+ cursor: auto;
+ opacity: .5;
+ pointer-events: none;
+ }
+}
+
+.btn-primary, .btn-secondary {
+ height: 44px;
+}
+
+.btn-primary--lg, .btn-secondary--lg {
+ height: 54px;
+}
+
.btn-green {
background-color: #02c9b1; // TODO: reusable color in colors.css
}
@@ -130,20 +200,6 @@ button.btn-thin {
font-size: 13px;
}
-.btn-secondary {
- border: 1px solid #979797;
- border-radius: 2px;
- background-color: $white;
- font-size: 16px;
- line-height: 24px;
- padding: 16px 42px;
-
- &[disabled] {
- background-color: $white !important;
- opacity: .5;
- }
-}
-
.btn-tertiary {
border: 1px solid transparent;
border-radius: 2px;
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index a3f051361..69cde8a0f 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -103,10 +103,11 @@
}
.hero-balance-button {
+ min-width: initial;
width: 6rem;
@media #{$sub-mid-size-breakpoint-range} {
- padding: 0.4rem;
+ padding: .4rem;
width: 4rem;
display: flex;
flex: 1;
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index a8d5e8dc2..9ae3ea7fa 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -261,7 +261,7 @@
.account-modal__button {
margin-top: 17px;
padding: 10px 22px;
- width: 235px;
+ width: 286px;
}
}
@@ -341,9 +341,8 @@
.export-private-key__button {
margin-top: 17px;
- padding: 10px 22px;
width: 141px;
- height: 54px;
+ min-width: initial;
}
.export-private-key__button--cancel {
@@ -765,15 +764,7 @@
}
&__deposit-button, .shapeshift-form__shapeshift-buy-btn {
- height: 54px;
width: 257px;
- border: 1px solid $curious-blue;
- border-radius: 4px;
- display: flex;
- justify-content: center;
- font-size: 16px;
- color: $curious-blue;
- background-color: $white;
}
.shapeshift-form-wrapper {
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index c2cefe4ad..aa7fed956 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -192,29 +192,8 @@
justify-content: space-between;
}
- &__button-cancel,
- &__button-create {
- height: 55px;
+ &__button {
width: 150px;
- border-radius: 2px;
- background-color: #FFFFFF;
- }
-
- &__button-cancel {
- border: 1px solid $dusty-gray;
- color: $dusty-gray;
- font-family: Roboto;
- font-size: 16px;
- line-height: 21px;
- text-align: center;
+ min-width: initial;
}
-
- &__button-create {
- border: 1px solid $curious-blue;
- color: $curious-blue;
- font-family: Roboto;
- font-size: 16px;
- line-height: 21px;
- text-align: center;
- }
-} \ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index d81099bfa..083481b8f 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -162,6 +162,7 @@
&__row {
display: flex;
flex-flow: column;
+ flex: 1 0 auto;
}
&__row-title {
@@ -190,41 +191,19 @@
width: 100%;
display: flex;
align-items: center;
- justify-content: space-evenly;
+ justify-content: center;
font-size: 22px;
position: relative;
flex: 0 0 auto;
border-top: 1px solid $geyser;
+ padding: 1.6rem;
- &__cancel-button,
- &__sign-button {
- display: flex;
- align-items: center;
- justify-content: center;
- flex: 1 0 auto;
- font-family: Roboto;
- font-size: 16px;
- font-weight: 300;
- height: 55px;
- line-height: 32px;
- cursor: pointer;
- border-radius: 2px;
- box-shadow: none;
- max-width: 162px;
- margin: 12px;
+ button {
+ width: 165px;
}
&__cancel-button {
- background: none;
- border: 1px solid $dusty-gray;
- margin-right: 6px;
- }
-
- &__sign-button {
- background-color: $caribbean-green;
- border-width: 0;
- color: $white;
- margin-left: 6px;
+ margin-right: 1.2rem;
}
}
-} \ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 263b362ca..89d2be891 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -782,7 +782,6 @@
&__buttons {
display: flex;
justify-content: space-between;
- width: 181.75px;
margin-right: 21.25px;
}
@@ -800,13 +799,8 @@
}
&__cancel, &__save, &__save__error {
- height: 34.64px;
width: 85.74px;
- border: 1px solid $dusty-gray;
- border-radius: 2px;
- font-family: 'DIN OT';
- font-size: 12px;
- color: $dusty-gray;
+ min-width: initial;
}
&__save__error {
diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss
index d60ebd934..dcc9b98d5 100644
--- a/ui/app/css/itcss/components/settings.scss
+++ b/ui/app/css/itcss/components/settings.scss
@@ -130,24 +130,32 @@
cursor: pointer;
}
-.settings__clear-button {
- font-size: 16px;
- border: 1px solid $curious-blue;
- color: $curious-blue;
- border-radius: 2px;
- padding: 18px;
- background-color: $white;
- text-transform: uppercase;
-}
-
-.settings__clear-button--red {
- border: 1px solid $monzo;
+.settings__button--red {
+ border-color: lighten($monzo, 10%);
color: $monzo;
+
+ &:active {
+ background: lighten($monzo, 55%);
+ border-color: $monzo;
+ }
+
+ &:hover {
+ border-color: $monzo;
+ }
}
-.settings__clear-button--orange {
- border: 1px solid rgba(247, 134, 28, 1);
- color: rgba(247, 134, 28, 1);
+.settings__button--orange {
+ border-color: lighten($ecstasy, 20%);
+ color: $ecstasy;
+
+ &:active {
+ background: lighten($ecstasy, 40%);
+ border-color: $ecstasy;
+ }
+
+ &:hover {
+ border-color: $ecstasy;
+ }
}
.settings__info-logo-wrapper {
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index 9dc4f1055..e8de317e3 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -10,9 +10,14 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
transition: linear 200ms;
background-color: rgba($wallet-balance-bg, 0);
position: relative;
+ flex: 1;
+ min-width: 0;
&__token-balance {
font-size: 1.5rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
@media #{$wallet-balance-breakpoint-range} {
font-size: 95%;
@@ -51,7 +56,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
&__balance-ellipsis {
display: flex;
align-items: center;
- width: 100%;
+ min-width: 0;
+ flex: 1;
}
&__ellipsis {
@@ -61,6 +67,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
&__balance-wrapper {
flex: 1 1 auto;
+ min-width: 0;
}
}
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 08e639d74..92321394b 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -132,7 +132,7 @@ input.large-input {
height: 55px;
font-size: 1rem;
text-transform: uppercase;
- margin-right: 1rem;
+ margin-right: 1.2rem;
border-radius: 2px;
&:last-of-type {
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 640fd95b8..51548306f 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -51,6 +51,9 @@ $java: #29b6af;
$wild-strawberry: #ff4a8d;
$cornflower-blue: #7057ff;
$saffron: #f6c343;
+$dodger-blue: #3099f2;
+$zumthor: #edf7ff;
+$ecstasy: #f7861c;
/*
Z-Indicies
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-08 00:27:42 +0800