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/account-menu.scss3
-rw-r--r--ui/app/css/itcss/components/buttons.scss12
-rw-r--r--ui/app/css/itcss/components/confirm.scss48
-rw-r--r--ui/app/css/itcss/components/hero-balance.scss3
-rw-r--r--ui/app/css/itcss/components/index.scss4
-rw-r--r--ui/app/css/itcss/components/modal.scss58
-rw-r--r--ui/app/css/itcss/components/network.scss3
-rw-r--r--ui/app/css/itcss/components/new-account.scss3
-rw-r--r--ui/app/css/itcss/components/newui-sections.scss24
-rw-r--r--ui/app/css/itcss/components/send.scss27
-rw-r--r--ui/app/css/itcss/components/sender-to-recipient.scss58
-rw-r--r--ui/app/css/itcss/components/transaction-list.scss55
-rw-r--r--ui/app/css/itcss/components/welcome-screen.scss59
-rw-r--r--ui/app/css/itcss/generic/index.scss54
-rw-r--r--ui/app/css/itcss/generic/reset.scss4
-rw-r--r--ui/app/css/itcss/settings/variables.scss1
16 files changed, 335 insertions, 81 deletions
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 4752741aa..c4037d862 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -87,7 +87,6 @@
flex: 1 0 auto;
display: flex;
flex-flow: column nowrap;
- padding-top: 4px;
}
&__check-mark {
@@ -115,13 +114,11 @@
color: $white;
font-size: 18px;
font-weight: 300;
- line-height: 16px;
}
&__balance {
color: $dusty-gray;
font-size: 14px;
- line-height: 19px;
}
&__action {
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 1450b71cc..8df8829f2 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -45,6 +45,18 @@
}
}
+.btn-confirm {
+ background-color: $caribbean-green; // TODO: reusable color in colors.css
+ text-align: center;
+ padding: .8rem 1rem;
+ color: $white;
+ border: 2px solid $caribbean-green;
+ border-radius: 4px;
+ font-size: .85rem;
+ font-weight: 400;
+ transition: border-color .3s ease;
+}
+
// No longer used in flat design, remove when modal buttons done
// div.wallet-btn {
// border: 1px solid rgb(91, 93, 103);
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 878495290..abe138f54 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -202,7 +202,7 @@
}
.confirm-screen-label {
- font-size: 18px;
+ font-size: 16px;
line-height: 40px;
color: $scorpion;
text-align: left;
@@ -229,7 +229,6 @@ section .confirm-screen-account-number,
.confirm-screen-row {
display: flex;
flex-flow: row nowrap;
- border-bottom: 1px solid $alto;
width: 100%;
align-items: center;
padding: 12px;
@@ -237,6 +236,26 @@ section .confirm-screen-account-number,
font-size: 16px;
line-height: 22px;
font-weight: 300;
+
+ &:not(:last-of-type) {
+ border-bottom: 1px solid $alto;
+ }
+}
+
+@media screen and (max-width: 379px) {
+ .confirm-screen-row {
+ span.confirm-screen-section-column {
+ flex: 0.4;
+ }
+
+ div.confirm-screen-section-column {
+ flex: 0.6;
+ }
+
+ .currency-display__input {
+ font-size: 14px;
+ }
+ }
}
.confirm-screen-row-detail {
@@ -247,12 +266,9 @@ section .confirm-screen-account-number,
.confirm-screen-total-box {
background-color: $wild-sand;
- padding: 20px;
- padding-left: 35px;
- border-bottom: 1px solid $alto;
.confirm-screen-label {
- line-height: 18px;
+ line-height: 21px;
}
.confirm-screen-row-detail {
@@ -261,7 +277,7 @@ section .confirm-screen-account-number,
&__subtitle {
font-size: 12px;
- line-height: 22px;
+ line-height: 16px;
}
.confirm-screen-row-info {
@@ -304,21 +320,3 @@ section .confirm-screen-account-number,
font-weight: 300;
margin: 0 5px;
}
-
-#pending-tx-form {
- flex: 1 0 auto;
- position: relative;
- display: flex;
- flex-flow: row nowrap;
- background-color: $white;
- padding: 12px;
- border-bottom-left-radius: 8px;
- border-bottom-right-radius: 8px;
- width: 100%;
-
- @media screen and (max-width: $break-small) {
- border-top: 1px solid $alto;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
-}
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 4af0c2c55..a3f051361 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -5,9 +5,6 @@
flex-direction: column;
justify-content: flex-start;
align-items: center;
- margin: .3em .9em 0;
- // height: 80vh;
- // max-height: 225px;
flex: 0 0 auto;
}
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 0219f9fb2..ffd43ecbf 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -55,3 +55,7 @@
@import './new-account.scss';
@import './tooltip.scss';
+
+@import './welcome-screen.scss';
+
+@import './sender-to-recipient.scss';
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 53e3bff00..a8d5e8dc2 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -641,32 +641,40 @@
&__buy-rows {
width: 100%;
- padding: 33px;
- padding-top: 0px;
+ padding: 0 30px;
display: flex;
flex-flow: column nowrap;
flex: 1;
- overflow-y: auto;
@media screen and (max-width: 575px) {
height: 0;
}
}
+ &__logo {
+ height: 60px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
&__buy-row {
border-bottom: 1px solid $alto;
display: flex;
justify-content: space-between;
align-items: center;
- flex: 1;
- padding-bottom: 25px;
- padding-top: 25px;
+ flex: 1 0 auto;
+ padding: 30px 0 20px;
+ min-height: 170px;
@media screen and (max-width: 575px) {
- min-height: 360px;
+ min-height: 270px;
flex-flow: column;
- justify-content: center;
- padding-top: 45px;
+ justify-content: flex-start;
}
&__back {
@@ -692,34 +700,29 @@
}
}
- &__logo {
+ &__logo-container {
display: flex;
justify-content: center;
- flex: 0.3 1 auto;
+ flex: 0 0 auto;
+ padding: 0 20px;
- @media screen and (min-width: 575px) {
- min-width: 215px;
+ @media screen and (min-width: 576px) {
+ width: 12rem;
+ }
+
+ @media screen and (max-width: 575px) {
+ width: 100%;
+ max-height: 6rem;
+ padding-bottom: 20px;
}
}
&__coinbase-logo {
height: 40px;
- width: 180px;
}
&__shapeshift-logo {
height: 60px;
- width: 174px;
- }
-
- &__eth-logo {
- border-radius: 50%;
- width: 68px;
- height: 68px;
- border: 3px solid $tundora;
- z-index: 25;
- padding: 4px;
- background-color: #fff;
}
&__right {
@@ -728,10 +731,11 @@
&__description {
color: $cape-cod;
- flex: 0.5 1 auto;
+ padding-bottom: 20px;
+ align-self: flex-start;
@media screen and (min-width: 575px) {
- min-width: 315px;
+ width: 15rem;
}
&__title {
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index c32d1de5e..374cb71b6 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -10,8 +10,9 @@
.network-component.pointer {
border: 2px solid $silver;
border-radius: 82px;
- padding: 3px;
+ padding: 7px 3px;
flex: 0 0 auto;
+ display: flex;
&.ethereum-network .menu-icon-circle div {
background-color: rgba(3, 135, 137, .7) !important;
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 08cff867d..c2cefe4ad 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -161,15 +161,14 @@
display: flex;
flex-flow: column;
align-items: center;
+ padding: 30px 30px 0;
&__input-label {
color: $scorpion;
font-family: Roboto;
font-size: 16px;
line-height: 21px;
- margin-top: 29px;
align-self: flex-start;
- margin-left: 30px;
}
&__input {
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index ecf5e1036..777a82318 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -51,6 +51,7 @@ $wallet-view-bg: $alabaster;
cursor: pointer;
display: flex;
justify-content: center;
+ padding: 10px;
}
// wallet view and sidebar
@@ -264,7 +265,6 @@ $wallet-view-bg: $alabaster;
.account-name {
font-size: 24px;
font-weight: 300;
- line-height: 20px;
color: $black;
margin-top: 8px;
margin-bottom: .9rem;
@@ -291,7 +291,6 @@ $wallet-view-bg: $alabaster;
padding-right: 6px;
}
-
// first time
.first-view-main {
display: flex;
@@ -313,4 +312,23 @@ $wallet-view-bg: $alabaster;
@media screen and (min-width: 1281px) {
width: 62vw;
}
-} \ No newline at end of file
+}
+
+.unlock-screen-container {
+ z-index: $main-container-z-index;
+ font-family: Roboto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex: 1 0 auto;
+ background: #f7f7f7;
+ width: 100%;
+}
+
+.unlock-screen {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ flex: 1 0 auto;
+}
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index bb17e53cd..bdea1b008 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -660,6 +660,13 @@
&__gas-fee-display {
width: 100%;
+ position: relative;
+
+ .currency-display--message {
+ padding: 8px 38px 8px 10px;
+ display: flex;
+ align-items: center;
+ }
}
&__sliders-icon-container {
@@ -885,3 +892,23 @@
}
}
}
+
+.sliders-icon-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 24px;
+ width: 24px;
+ border: 1px solid $curious-blue;
+ border-radius: 4px;
+ background-color: $white;
+ position: absolute;
+ right: 15px;
+ top: 14px;
+ cursor: pointer;
+ font-size: 1em;
+}
+
+.sliders-icon {
+ color: $curious-blue;
+} \ No newline at end of file
diff --git a/ui/app/css/itcss/components/sender-to-recipient.scss b/ui/app/css/itcss/components/sender-to-recipient.scss
new file mode 100644
index 000000000..f16013cdf
--- /dev/null
+++ b/ui/app/css/itcss/components/sender-to-recipient.scss
@@ -0,0 +1,58 @@
+.sender-to-recipient {
+ &__container {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ border-bottom: 1px solid $geyser;
+ position: relative;
+ }
+
+ &__sender,
+ &__recipient {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex: 1;
+ padding: 10px 20px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__sender {
+ padding-right: 30px;
+ }
+
+ &__recipient {
+ border-left: 1px solid $geyser;
+ padding-left: 30px;
+ }
+
+ &__arrow-container {
+ position: absolute;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__arrow-circle {
+ background: $white;
+ padding: 5px;
+ border: 1px solid $geyser;
+ border-radius: 20px;
+ height: 30px;
+ width: 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ &__name {
+ padding-left: 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+}
diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss
index c3df493df..d03faf486 100644
--- a/ui/app/css/itcss/components/transaction-list.scss
+++ b/ui/app/css/itcss/components/transaction-list.scss
@@ -97,7 +97,7 @@
.tx-list-content-wrapper {
align-items: stretch;
- margin-bottom: 4px;
+ margin: 4px 0;
flex: 1 0 auto;
width: 100%;
display: flex;
@@ -126,6 +126,54 @@
}
}
+.tx-list-item-retry-container {
+ background: #d1edff;
+ width: 100%;
+ border-radius: 4px;
+ font-size: 0.8em;
+ display: flex;
+ justify-content: center;
+ margin-left: 44px;
+ width: calc(100% - 44px);
+
+ @media screen and (min-width: 576px) and (max-width: 679px) {
+ flex-flow: column;
+ align-items: center;
+ }
+
+ @media screen and (min-width: 380px) and (max-width: 575px) {
+ flex-flow: row;
+ }
+
+ @media screen and (max-width: 379px) {
+ flex-flow: column;
+ align-items: center;
+ }
+}
+
+.tx-list-item-retry-copy {
+ font-family: Roboto;
+}
+
+.tx-list-item-retry-link {
+ text-decoration: underline;
+ margin-left: 6px;
+ cursor: pointer;
+
+ @media screen and (min-width: 576px) and (max-width: 679px) {
+ margin-left: 0px;
+ }
+
+ @media screen and (min-width: 380px) and (max-width: 575px) {
+ margin-left: 6px;
+ }
+
+ @media screen and (max-width: 379px) {
+ margin-left: 0px;
+ text-align: center;
+ }
+}
+
.tx-list-date {
color: $dusty-gray;
font-size: 12px;
@@ -136,6 +184,7 @@
align-self: center;
flex: 0 0 auto;
margin-right: 16px;
+ display: flex;
}
.tx-list-account-and-status-wrapper {
@@ -189,6 +238,10 @@
.tx-list-status--failed {
color: $monzo;
}
+
+ .tx-list-status--dropped {
+ opacity: 0.5;
+ }
}
.tx-list-item {
diff --git a/ui/app/css/itcss/components/welcome-screen.scss b/ui/app/css/itcss/components/welcome-screen.scss
new file mode 100644
index 000000000..bfd174ad9
--- /dev/null
+++ b/ui/app/css/itcss/components/welcome-screen.scss
@@ -0,0 +1,59 @@
+.welcome-screen {
+ display: flex;
+ flex-flow: column;
+ justify-content: center;
+ align-items: center;
+ font-family: Roboto;
+ font-weight: 400;
+ width: 100%;
+ flex: 1 0 auto;
+ padding: 70px 0;
+ background: $white;
+
+ @media screen and (max-width: 575px) {
+ padding: 0;
+ }
+
+ &__info {
+ display: flex;
+ flex-flow: column;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+
+ &__header {
+ font-size: 1.65em;
+ margin-bottom: 14px;
+
+ @media screen and (max-width: 575px) {
+ font-size: 1.5em;
+ }
+ }
+
+ &__copy {
+ font-size: 1em;
+ width: 400px;
+ max-width: 90vw;
+ text-align: center;
+
+ @media screen and (max-width: 575px) {
+ font-size: 0.9em;
+ }
+ }
+ }
+
+ &__button {
+ height: 54px;
+ width: 198px;
+ box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
+ color: #FFFFFF;
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 26px;
+ text-align: center;
+ text-transform: uppercase;
+ margin: 35px 0 14px;
+ transition: 200ms ease-in-out;
+ background-color: rgba(247, 134, 28, 0.9);
+ }
+}
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 9b3d7475b..1e226b93e 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -13,7 +13,6 @@ body {
font-family: Roboto, Arial;
color: #4d4d4d;
font-weight: 300;
- line-height: 1.4em;
background: #f7f7f7;
width: 100%;
height: 100%;
@@ -70,6 +69,10 @@ input.large-input {
height: 36px;
}
+.allcaps {
+ text-transform: uppercase;
+}
+
.page-container {
width: 400px;
background-color: $white;
@@ -77,25 +80,30 @@ input.large-input {
z-index: 25;
display: flex;
flex-flow: column;
+ border-radius: 7px;
&__header {
display: flex;
flex-flow: column;
border-bottom: 1px solid $geyser;
- padding: 1.15rem 0.95rem;
+ padding: 20px;
flex: 0 0 auto;
- background: $alabaster;
position: relative;
}
- &__header-close::after {
- content: '\00D7';
- font-size: 40px;
+ &__header-close {
color: $tundora;
position: absolute;
- top: 21.5px;
- right: 28.5px;
+ top: 20px;
+ right: 20px;
cursor: pointer;
+ overflow: hidden;
+
+ &::after {
+ content: '\00D7';
+ font-size: 40px;
+ line-height: 20px;
+ }
}
&__footer {
@@ -107,14 +115,15 @@ input.large-input {
flex: 0 0 auto;
.btn-clear,
- .btn-cancel {
+ .btn-cancel,
+ .btn-confirm {
font-size: 1rem;
}
}
&__footer-button {
width: 165px;
- height: 60px;
+ height: 55px;
font-size: 1rem;
text-transform: uppercase;
margin-right: 1rem;
@@ -125,12 +134,19 @@ input.large-input {
}
}
+ &__back-button {
+ color: #2f9ae0;
+ font-size: 1rem;
+ cursor: pointer;
+ padding-bottom: 10px;
+ font-weight: 400;
+ }
+
&__title {
color: $black;
- font-family: Roboto;
font-size: 2rem;
font-weight: 500;
- line-height: initial;
+ line-height: 2rem;
}
&__subtitle {
@@ -174,6 +190,19 @@ input.large-input {
}
}
}
+
+ &--full-width {
+ width: initial;
+ }
+
+ &--full-height {
+ height: 100%;
+ }
+
+ &__content {
+ height: 100%;
+ overflow-y: auto;
+ }
}
@media screen and (max-width: 250px) {
@@ -200,5 +229,6 @@ input.large-input {
width: 100%;
overflow-y: auto;
background-color: $white;
+ border-radius: 0;
}
}
diff --git a/ui/app/css/itcss/generic/reset.scss b/ui/app/css/itcss/generic/reset.scss
index e054d533e..a417a0453 100644
--- a/ui/app/css/itcss/generic/reset.scss
+++ b/ui/app/css/itcss/generic/reset.scss
@@ -112,10 +112,6 @@ section {
display: block;
}
-body {
- line-height: 1;
-}
-
ol,
ul {
list-style: none;
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index d96c1ae43..640fd95b8 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -46,6 +46,7 @@ $manatee: #93949d;
$spindle: #c7ddec;
$mid-gray: #5b5d67;
$cape-cod: #38393a;
+$onahau: #d1edff;
$java: #29b6af;
$wild-strawberry: #ff4a8d;
$cornflower-blue: #7057ff;
generated by cgit (git 2.34.1) at 2024-10-20 06:28:57 +0800