aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/css/itcss/components
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/css/itcss/components')
-rw-r--r--ui/app/css/itcss/components/account-menu.scss13
-rw-r--r--ui/app/css/itcss/components/add-token.scss13
-rw-r--r--ui/app/css/itcss/components/confirm.scss6
-rw-r--r--ui/app/css/itcss/components/currency-display.scss10
-rw-r--r--ui/app/css/itcss/components/modal.scss1
-rw-r--r--ui/app/css/itcss/components/network.scss15
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss89
-rw-r--r--ui/app/css/itcss/components/send.scss23
-rw-r--r--ui/app/css/itcss/components/settings.scss7
-rw-r--r--ui/app/css/itcss/components/token-list.scss6
10 files changed, 161 insertions, 22 deletions
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 090710f7b..91884e658 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -65,6 +65,8 @@
.keyring-label {
margin-top: 5px;
+ background-color: $black;
+ color: $dusty-gray;
}
}
@@ -88,9 +90,20 @@
&__check-mark {
width: 14px;
+ margin-right: 12px;
flex: 0 0 auto;
}
+ &__check-mark-icon {
+ background-image: url("images/check-white.svg");
+ height: 18px;
+ width: 18px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: contain;
+ margin: 3px 0;
+ }
+
.identicon {
margin: 0 12px 0 0;
flex: 0 0 auto;
diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
index aa8221c9a..9bdda6a9b 100644
--- a/ui/app/css/itcss/components/add-token.scss
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -109,7 +109,18 @@
cursor: pointer;
&:hover {
- background-color: $gallery;
+ background-color: rgba(0, 0, 0, .05);
+ }
+
+ &:active {
+ background-color: rgba(0, 0, 0, .1);
+ }
+
+ .fa {
+ position: absolute;
+ right: 24px;
+ font-size: 24px;
+ line-height: 24px;
}
}
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index d4f0fe5ac..c498afba2 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -37,7 +37,7 @@
overflow-y: auto;
top: 0;
box-shadow: none;
- height: calc(100vh - 58px - 100px);
+ height: calc(100vh - 58px - 85px);
border-top-left-radius: 0;
border-top-right-radius: 0;
}
@@ -271,6 +271,7 @@ section .confirm-screen-account-number,
box-shadow: none;
flex: 1 0 auto;
font-weight: 300;
+ margin: 0 8px;
}
.btn-light.confirm-screen-cancel-button {
@@ -288,6 +289,7 @@ section .confirm-screen-account-number,
cursor: pointer;
flex: 1 0 auto;
font-weight: 300;
+ margin: 0 8px;
}
#pending-tx-form {
@@ -296,7 +298,7 @@ section .confirm-screen-account-number,
display: flex;
flex-flow: row nowrap;
background-color: $white;
- padding: 19px 18px;
+ padding: 12px 18px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
width: 100%;
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index eb1776c58..9459629b6 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -22,6 +22,7 @@
line-height: 22px;
border: none;
outline: 0 !important;
+ max-width: 100%;
}
&__primary-currency {
@@ -43,4 +44,13 @@
font-size: 12px;
line-height: 12px;
}
+
+ &__input-wrapper {
+ position: relative;
+ display: flex;
+ }
+
+ &__currency-symbol {
+ margin-top: 1px;
+ }
} \ No newline at end of file
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 1ffea58a9..139e5a8f2 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -372,6 +372,7 @@
resize: none;
padding: 9px 13px 8px;
text-transform: uppercase;
+ font-weight: 300;
}
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index bb8c4eea8..0bc66ea1a 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -1,3 +1,12 @@
+.network-component--disabled {
+ border-color: transparent !important;
+ cursor: default;
+
+ .fa-caret-down {
+ opacity: 0;
+ }
+}
+
.network-component.pointer {
border: 1px solid $shark;
border-radius: 82px;
@@ -40,7 +49,7 @@
.dropdown-menu-item {
.menu-icon-circle,
.menu-icon-circle--active {
- margin: 0 16px;
+ margin: 0 14px;
}
}
@@ -116,8 +125,8 @@
.menu-icon-circle div,
.menu-icon-circle--active div {
- height: 17px;
- width: 17px;
+ height: 12px;
+ width: 12px;
border-radius: 17px;
}
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 1ee8283ef..d975c56b7 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -45,6 +45,8 @@ $wallet-view-bg: $wild-sand;
flex-direction: column;
flex: 33.5 0 33.5%;
background: $wallet-view-bg;
+ z-index: 200;
+ position: relative;
@media screen and (min-width: 576px) {
overflow-y: scroll;
@@ -52,7 +54,77 @@ $wallet-view-bg: $wild-sand;
}
.wallet-view-account-details {
- flex: 0 0 150px;
+ flex: 0 0 auto;
+ }
+
+ &__name-container {
+ flex: 0 0 auto;
+ cursor: pointer;
+ }
+
+ &__keyring-label {
+ height: 40px;
+ color: $dusty-gray;
+ font-family: Roboto;
+ font-size: 10px;
+ line-height: 40px;
+ text-align: right;
+ padding: 0 20px;
+ }
+
+ &__details-button {
+ color: $curious-blue;
+ font-size: 10px;
+ line-height: 13px;
+ text-align: center;
+ border: 1px solid $curious-blue;
+ border-radius: 10.5px;
+ background-color: transparent;
+ margin: 0 auto;
+ padding: 4px 12px;
+ flex: 0 0 auto;
+ }
+
+ &__address {
+ border-radius: 3px;
+ background-color: $alto;
+ color: $scorpion;
+ font-size: 14px;
+ line-height: 12px;
+ padding: 4px 12px;
+ margin: 24px auto;
+ font-weight: 300;
+ cursor: pointer;
+ flex: 0 0 auto;
+ }
+
+ &__sidebar-close {
+
+ @media screen and (max-width: 575px) {
+ &::after {
+ content: '\00D7';
+ font-size: 40px;
+ color: $tundora;
+ position: absolute;
+ top: 12px;
+ left: 12px;
+ cursor: pointer;
+ }
+ }
+ }
+
+ &__add-token-button {
+ flex: 0 0 auto;
+ color: $dusty-gray;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+ margin: 36px auto;
+ border: 1px solid $dusty-gray;
+ border-radius: 2px;
+ font-weight: 300;
+ background: none;
+ padding: 9px 30px;
}
}
@@ -173,15 +245,12 @@ $wallet-view-bg: $wild-sand;
// wallet view
.account-name {
-
- @media screen and (max-width: 575px) {
- font-size: 102%;
- margin-left: 3%;
- }
-
- @media screen and (max-width: 575px) {
- text-align: center;
- }
+ font-size: 24px;
+ font-weight: 200;
+ line-height: 20px;
+ color: $scorpion;
+ margin-top: 8px;
+ margin-bottom: 24px;
}
// account options dropdown
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index c4efeccf0..bac5f4d05 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -657,15 +657,14 @@
width: 163px;
text-align: center;
height: 55px;
- width: 163px;
border-radius: 2px;
background-color: $white;
font-family: Roboto;
font-size: 16px;
font-weight: 300;
line-height: 21px;
- text-align: center;
border: 1px solid;
+ margin: 0 4px;
}
&__next-btn,
@@ -738,6 +737,7 @@
align-items: center;
justify-content: space-between;
font-size: 22px;
+ position: relative;
}
&__buttons {
@@ -747,7 +747,7 @@
margin-right: 21.25px;
}
- &__revert, &__cancel, &__save {
+ &__revert, &__cancel, &__save, &__save__error {
display: flex;
justify-content: center;
align-items: center;
@@ -760,7 +760,7 @@
margin-left: 21.25px;
}
- &__cancel, &__save {
+ &__cancel, &__save, &__save__error {
height: 34.64px;
width: 85.74px;
border: 1px solid $dusty-gray;
@@ -769,6 +769,21 @@
font-size: 12px;
color: $dusty-gray;
}
+
+ &__save__error {
+ opacity: 0.5;
+ cursor: auto;
+ }
+
+ &__error-message {
+ display: block;
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ font-size: 12px;
+ line-height: 12px;
+ color: $red;
+ }
}
&__gas-modal-card {
diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss
index d4bcdcc4b..d37a9d10d 100644
--- a/ui/app/css/itcss/components/settings.scss
+++ b/ui/app/css/itcss/components/settings.scss
@@ -38,6 +38,7 @@
@media screen and (max-width: 575px) {
flex-direction: column;
+ padding: 10px 0;
}
}
@@ -48,6 +49,11 @@
flex-direction: column;
padding: 0 5px;
height: 71px;
+
+ @media screen and (max-width: 575px) {
+ height: initial;
+ padding: 5px 0;
+ }
}
.settings__content-item-col {
@@ -71,6 +77,7 @@
padding-left: 10px;
font-size: 14px;
height: 40px;
+ border: 1px solid $alto;
}
.settings__input::-webkit-input-placeholder {
diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss
index bbc64c324..d4add71b1 100644
--- a/ui/app/css/itcss/components/token-list.scss
+++ b/ui/app/css/itcss/components/token-list.scss
@@ -67,19 +67,21 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (
position: fixed;
margin-top: 20px;
margin-left: 105px;
+ z-index: 2000;
&__close-area {
position: fixed;
top: 0;
left: 0;
- z-index: 1000;
+ z-index: 2100;
width: 100%;
height: 100%;
+ cursor: default;
}
&__container {
padding: 16px 34px 32px;
- z-index: 1050;
+ z-index: 2200;
position: relative;
}
generated by cgit (git 2.34.1) at 2024-10-20 08:24:08 +0800