From 8c4d58aa4508e3d54c3f69847347e78d09c63b97 Mon Sep 17 00:00:00 2001 From: Bruno Date: Sun, 10 Jun 2018 03:52:32 -0400 Subject: initial trezor support --- ui/app/css/itcss/components/new-account.scss | 105 +++++++++++++++++++++++++-- 1 file changed, 100 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 293579058..2ecc157f1 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -28,7 +28,6 @@ &__tab { height: 54px; - width: 75px; padding: 15px 10px; color: $dusty-gray; font-family: Roboto; @@ -38,10 +37,6 @@ cursor: pointer; } - &__tab:first-of-type { - margin-right: 20px; - } - &__tab:hover { color: $black; border-bottom: none; @@ -158,6 +153,106 @@ } } +.hw-account-list { + display: flex; + flex: 1; + flex-flow: column; + width: 100%; + + &__title_wrapper { + display: flex; + flex-direction: row; + flex: 1; + } + + &__title { + margin-bottom: 23px; + align-self: flex-start; + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + font-weight: bold; + display: flex; + flex: 1; + } + + &__device { + margin-bottom: 23px; + align-self: flex-end; + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + font-weight: normal; + display: flex; + } + + &__item { + font-size: 15px; + flex-direction: row; + display: flex; + padding: 10px; + } + + &__item:nth-of-type(even) { + background-color: #fbfbfb; + } + + &__item:nth-of-type(odd) { + background: rgba(0, 0, 0, 0.03); + } + + &__item:hover { + background-color: rgba(0, 0, 0, 0.06); + } + + &__item__index { + display: flex; + margin-right: 20px; + } + + &__item__radio { + display: flex; + flex: 1; + } + + &__item__label { + margin-left: 10px; + display: flex; + flex: 1; + } + + &__item__balance { + display: flex; + flex: 1; + justify-content: center; + } + + &__item__link { + display: flex; + } + + &__item__link img { + width: 15px; + height: 15px; + } +} + +.hw-list-pagination { + display: flex; + align-self: flex-end; + margin-top: 10px; + + &__button { + height: 25px; + flex: initial; + min-width: 90px; + font-size: 12px; + } +} + + .new-account-create-form { display: flex; flex-flow: column; -- cgit From bbd1b8360ae652da49d583e15b65ad34f27ce039 Mon Sep 17 00:00:00 2001 From: trejgun Date: Wed, 20 Jun 2018 12:51:21 +0800 Subject: fix white spaces in signature --- ui/app/css/itcss/components/request-signature.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index 4707ff60e..b607aded3 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -181,6 +181,7 @@ overflow-wrap: break-word; border-bottom: 1px solid #d2d8dd; padding: 6px 18px 15px; + white-space: pre-line; } &__help-link { -- cgit From 1f6f4977deb19543e4a4bd22d3f5126db931c4a2 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Mon, 18 Jun 2018 21:00:44 -0230 Subject: Handle large token balances in tx list hero --- ui/app/css/itcss/components/hero-balance.scss | 15 ++++++++++++++- ui/app/css/itcss/components/newui-sections.scss | 8 +++++--- 2 files changed, 19 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 09d66aedd..eba93ecb4 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -27,25 +27,37 @@ @media screen and (max-width: $break-small) { flex-direction: column; flex: 0 0 auto; + max-width: 100%; } @media screen and (min-width: $break-large) { flex-direction: row; flex-grow: 3; + min-width: 0; } } .balance-display { .token-amount { color: $black; + max-width: 100%; + + .token-balance { + display: flex; + } } @media screen and (max-width: $break-small) { + max-width: 100%; text-align: center; .token-amount { font-size: 1.75rem; margin-top: 1rem; + + .token-balance { + flex-direction: column; + } } .fiat-amount { @@ -56,9 +68,10 @@ } @media screen and (min-width: $break-large) { - margin-left: .8em; + margin: 0 .8em; justify-content: flex-start; align-items: flex-start; + min-width: 0; .token-amount { font-size: 1.5rem; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index bbe0ee661..667e45ba2 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -26,14 +26,16 @@ $wallet-view-bg: $alabaster; //Account and transaction details .account-and-transaction-details { display: flex; - flex: 1 0 auto; + flex: 1 1 auto; + min-width: 0; } // tx view .tx-view { - flex: 63.5 0 66.5%; + flex: 1 1 66.5%; background: $tx-view-bg; + min-width: 0; // No title on mobile @media screen and (max-width: 575px) { @@ -286,7 +288,7 @@ $wallet-view-bg: $alabaster; } .token-balance__amount { - padding-right: 6px; + padding: 0 6px; } // first time -- cgit From 312307365981d032091e909b3194c4e20cd55e17 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Mon, 18 Jun 2018 22:08:17 -0230 Subject: Scroll large amounts in the send component --- ui/app/css/itcss/components/currency-display.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index 3560b0b0c..3614aa868 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -1,6 +1,5 @@ .currency-display { height: 54px; - width: 100%ß; border: 1px solid $alto; border-radius: 4px; background-color: $white; @@ -21,7 +20,7 @@ line-height: 22px; border: none; outline: 0 !important; - max-width: 100%; + max-width: 22ch; } &__primary-currency { @@ -47,6 +46,9 @@ &__input-wrapper { position: relative; display: flex; + flex: 1; + max-width: 100%; + overflow-x: scroll; input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; @@ -75,4 +77,4 @@ display: none; } } -} \ No newline at end of file +} -- cgit From e8fa18779d72a74fa1c003415c73f715177a64d8 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 21 Jun 2018 15:04:24 -0230 Subject: Fix style of shapeshift screen in deposit modal. --- ui/app/css/itcss/components/modal.scss | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 74658f656..42ef7ae0a 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -642,10 +642,31 @@ display: flex; flex-flow: column nowrap; flex: 1; + align-items: center; @media screen and (max-width: 575px) { height: 0; } + + .shapeshift-form-wrapper { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + flex: 1 0 auto; + + .shapeshift-form, .modal-shapeshift-form { + border-radius: 8px; + background-color: rgba(0, 0, 0, .05); + padding: 17px 15px; + margin-bottom: 10px; + + &__caret { + width: auto; + flex: 1; + } + } + } } &__logo { @@ -773,17 +794,15 @@ margin-top: 28px; flex: 1 0 auto; - .shapeshift-form { - width: auto; + .shapeshift-form, .modal-shapeshift-form { + border-radius: 8px; + background-color: rgba(0, 0, 0, .05); + padding: 17px 15px; &__caret { width: auto; flex: 1; } - - @media screen and (max-width: 575px) { - width: auto; - } } } -- cgit From d5133fb429c313f7bed24e3740eddb1350810b16 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 22 Jun 2018 13:43:39 -0230 Subject: Fix issues with scrollbar in currency display. --- ui/app/css/itcss/components/currency-display.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index 3614aa868..5f380475a 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -48,7 +48,6 @@ display: flex; flex: 1; max-width: 100%; - overflow-x: scroll; input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; -- cgit From d2845afd898acf6224113832f819d2fe9b3061c6 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 25 Jun 2018 09:54:49 -0230 Subject: Remove input arrows for send screen amount row on firefox. --- ui/app/css/itcss/components/currency-display.scss | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index 5f380475a..b1a74dce2 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -49,13 +49,19 @@ flex: 1; max-width: 100%; + input[type="number"] { + -moz-appearance: textfield; + } + input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; + -moz-appearance: none; display: none; } input[type="number"]:hover::-webkit-inner-spin-button { -webkit-appearance: none; + -moz-appearance: none; display: none; } } @@ -68,11 +74,13 @@ .react-numeric-input { input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; + -moz-appearance: none; display: none; } input[type="number"]:hover::-webkit-inner-spin-button { -webkit-appearance: none; + -moz-appearance: none; display: none; } } -- cgit From f262f0ea64e1e803d8dcd9a31f92cffe81d27b3d Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 22 Jun 2018 14:41:18 -0230 Subject: Update import from seed screen on new ui. --- ui/app/css/itcss/components/newui-sections.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 667e45ba2..bbfd85c90 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -332,3 +332,12 @@ $wallet-view-bg: $alabaster; align-items: center; flex: 1 0 auto; } + +.first-view-main-wrapper { + display: flex; + width: 100%; + height: 100%; + justify-content: center; + padding: 0 10px; + background: white; +} -- cgit From 5d721665d3f482c85604f84029c1e6d381b38c17 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 28 Jun 2018 14:45:57 -0230 Subject: Ensures token list amount is in its own row. --- ui/app/css/itcss/components/token-list.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index 4b706abce..49d0c290e 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -34,6 +34,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( &__fiat-amount { margin-top: .25%; font-size: 105%; + width: 100%; text-transform: uppercase; @media #{$wallet-balance-breakpoint-range} { -- cgit From 313090efcc5200c56373cf312052217f1a1340ef Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Thu, 5 Jul 2018 16:11:41 -0400 Subject: added message for non-chrome browsers --- ui/app/css/itcss/components/new-account.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 2ecc157f1..551025df3 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -153,6 +153,19 @@ } } +.hw-unsupported-browser { + &__title { + padding-top: 10px; + } + + &__msg { + font-size: 14px; + color: #9b9b9b; + margin-top: 15px; + margin-bottom: 15px; + } +} + .hw-account-list { display: flex; flex: 1; -- cgit From ea9d51e427b8e607e612a01629bebf153e516ad9 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 22 Jun 2018 23:52:45 -0700 Subject: Refactor and redesign confirm transaction views --- ui/app/css/itcss/components/buttons.scss | 25 ++- ui/app/css/itcss/components/index.scss | 2 - ui/app/css/itcss/components/network.scss | 12 -- .../css/itcss/components/sender-to-recipient.scss | 58 ------- ui/app/css/itcss/generic/index.scss | 189 --------------------- ui/app/css/itcss/settings/variables.scss | 1 + ui/app/css/itcss/tools/utilities.scss | 2 +- 7 files changed, 12 insertions(+), 277 deletions(-) delete mode 100644 ui/app/css/itcss/components/sender-to-recipient.scss (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index f93daec04..34565767f 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -4,7 +4,8 @@ .btn-default, .btn-primary, -.btn-secondary { +.btn-secondary, +.btn-confirm { height: 44px; background: $white; display: flex; @@ -13,13 +14,14 @@ box-sizing: border-box; border-radius: 4px; font-size: 14px; - font-weight: 500; + font-weight: 400; transition: border-color .3s ease; padding: 0 16px; min-width: 140px; width: 100%; text-transform: uppercase; outline: none; + font-family: Roboto; &--disabled, &[disabled] { @@ -71,6 +73,12 @@ } } +.btn-confirm { + color: $white; + border: 2px solid $curious-blue; + background-color: $curious-blue; +} + .btn--large { height: 54px; } @@ -119,19 +127,6 @@ } } -.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; - width: 100%; -} - // 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/index.scss b/ui/app/css/itcss/components/index.scss index 1d87b8004..5be040906 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -58,6 +58,4 @@ @import './welcome-screen.scss'; -@import './sender-to-recipient.scss'; - @import '../../../components/index'; diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 6c8be0b6d..545a2a940 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -159,15 +159,3 @@ .network-caret { margin: 0 8px 2px; } - -.network-display { - &__container { - display: flex; - align-items: center; - justify-content: flex-start; - - @media screen and (min-width: 576px) { - display: none; - } - } -} diff --git a/ui/app/css/itcss/components/sender-to-recipient.scss b/ui/app/css/itcss/components/sender-to-recipient.scss deleted file mode 100644 index f16013cdf..000000000 --- a/ui/app/css/itcss/components/sender-to-recipient.scss +++ /dev/null @@ -1,58 +0,0 @@ -.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/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 3525d2003..d1c65afed 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -73,195 +73,6 @@ input.large-input { text-transform: uppercase; } -.page-container { - width: 408px; - background-color: $white; - box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); - z-index: 25; - display: flex; - flex-flow: column; - border-radius: 8px; - - &__header { - display: flex; - flex-flow: column; - border-bottom: 1px solid $geyser; - padding: 16px; - flex: 0 0 auto; - position: relative; - - &--no-padding-bottom { - padding-bottom: 0; - } - } - - &__header-close { - color: $tundora; - position: absolute; - top: 16px; - right: 16px; - cursor: pointer; - overflow: hidden; - - &::after { - content: '\00D7'; - font-size: 40px; - line-height: 20px; - } - } - - &__header-row { - padding-bottom: 10px; - display: flex; - justify-content: space-between; - } - - &__footer { - display: flex; - flex-flow: row; - justify-content: center; - border-top: 1px solid $geyser; - padding: 16px; - flex: 0 0 auto; - - .btn-clear, - .btn-cancel, - .btn-confirm { - font-size: 1rem; - } - } - - &__footer-button { - height: 55px; - font-size: 1rem; - text-transform: uppercase; - margin-right: 16px; - border-radius: 2px; - - &:last-of-type { - margin-right: 0; - } - } - - &__back-button { - color: #2f9ae0; - font-size: 1rem; - cursor: pointer; - font-weight: 400; - } - - &__title { - color: $black; - font-size: 2rem; - font-weight: 500; - line-height: 2rem; - } - - &__subtitle { - padding-top: .5rem; - line-height: initial; - font-size: .9rem; - color: $gray; - } - - &__tabs { - display: flex; - margin-top: 16px; - } - - &__tab { - min-width: 5rem; - padding: 8px; - color: $dusty-gray; - font-family: Roboto; - font-size: 1rem; - text-align: center; - cursor: pointer; - border-bottom: none; - margin-right: 16px; - - &:last-of-type { - margin-right: 0; - } - - &--selected { - color: $curious-blue; - border-bottom: 3px solid $curious-blue; - } - } - - &--full-width { - width: 100% !important; - } - - &--full-height { - height: 100% !important; - max-height: initial !important; - min-height: initial !important; - } - - &__content { - overflow-y: auto; - flex: 1; - } - - &__warning-container { - background: $linen; - padding: 20px; - display: flex; - align-items: start; - } - - &__warning-message { - padding-left: 15px; - } - - &__warning-title { - font-weight: 500; - } - - &__warning-icon { - padding-top: 5px; - } -} - -@media screen and (max-width: 250px) { - .page-container { - &__footer { - flex-flow: column-reverse; - } - - &__footer-button { - width: 100%; - margin-bottom: 1rem; - margin-right: 0; - - &:first-of-type { - margin-bottom: 0; - } - } - } -} - -@media screen and (max-width: 575px) { - .page-container { - height: 100%; - width: 100%; - overflow-y: auto; - background-color: $white; - border-radius: 0; - flex: 1; - } -} - -@media screen and (min-width: 576px) { - .page-container { - max-height: 82vh; - min-height: 570px; - flex: 0 0 auto; - } -} - .input-label { padding-bottom: 10px; font-weight: 400; diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 814d7a382..f90c8edc3 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -55,6 +55,7 @@ $dodger-blue: #3099f2; $zumthor: #edf7ff; $ecstasy: #f7861c; $linen: #fdf4f4; +$oslo-gray: #8C8E94; /* Z-Indicies diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss index ee867640d..209614c6b 100644 --- a/ui/app/css/itcss/tools/utilities.scss +++ b/ui/app/css/itcss/tools/utilities.scss @@ -165,7 +165,7 @@ } .bold { - font-weight: 700; + font-weight: 500; } .text-transform-uppercase { -- cgit From dddbb4250b30b7263eb97ddc2e23791166bcc98e Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Fri, 6 Jul 2018 20:04:20 -0400 Subject: update connect harwdware screen --- ui/app/css/itcss/components/new-account.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 551025df3..3d59081d8 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -153,7 +153,7 @@ } } -.hw-unsupported-browser { +.hw-connect { &__title { padding-top: 10px; } @@ -164,6 +164,10 @@ margin-top: 15px; margin-bottom: 15px; } + + &__info-link { + color: #2f9ae0; + } } .hw-account-list { -- cgit From 512760154528c47213cc8ff75475c21e3e674a23 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Fri, 6 Jul 2018 20:37:08 -0400 Subject: copy updated --- ui/app/css/itcss/components/new-account.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 3d59081d8..7dfa839ab 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -165,7 +165,7 @@ margin-bottom: 15px; } - &__info-link { + &__link { color: #2f9ae0; } } -- cgit From 9b81180ab10cf8ca59666104e862c0331e953591 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 10 Jul 2018 00:20:00 -0400 Subject: added ui to remove accounts --- ui/app/css/itcss/components/account-menu.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 96fba890c..20fc68424 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -72,6 +72,7 @@ background-color: $dusty-gray; color: $black; font-weight: normal; + letter-spacing: .5px; } } @@ -84,6 +85,22 @@ @media screen and (max-width: 575px) { padding: 12px 14px; } + + .forget-account-icon { + width: 25px; + margin-left: 10px; + } + + &:hover { + .forget-account-icon::after { + content: '\00D7'; + font-size: 25px; + color: $white; + cursor: pointer; + position: absolute; + margin-top: -5px; + } + } } &__account-info { -- cgit From b9c2994d24e688305d63aaefd7fac88d88773ad9 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 10 Jul 2018 19:19:29 -0400 Subject: finish warning modal UI --- ui/app/css/itcss/components/account-menu.scss | 3 ++- ui/app/css/itcss/components/new-account.scss | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 20fc68424..ba5d176ef 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -88,7 +88,8 @@ .forget-account-icon { width: 25px; - margin-left: 10px; + padding-left: 10px; + height: 25px; } &:hover { diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 7dfa839ab..66eb47378 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -156,6 +156,7 @@ .hw-connect { &__title { padding-top: 10px; + font-weight: 500; } &__msg { -- cgit From 5a2a34591f8ab2aec3a056d5bb9e38ba5236cd07 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Wed, 11 Jul 2018 01:35:37 -0400 Subject: clean up --- ui/app/css/itcss/components/account-menu.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index ba5d176ef..9bce812e6 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -86,14 +86,14 @@ padding: 12px 14px; } - .forget-account-icon { + .remove-account-icon { width: 25px; padding-left: 10px; height: 25px; } &:hover { - .forget-account-icon::after { + .remove-account-icon::after { content: '\00D7'; font-size: 25px; color: $white; -- cgit From 80e875308b4447ed38d7e0f677570d73956dd9de Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Wed, 11 Jul 2018 21:21:36 -0400 Subject: forget device and autiload account features added --- ui/app/css/itcss/components/new-account.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 66eb47378..e11c10dfe 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -270,6 +270,17 @@ } } +.hw-forget-device-container { + display: flex; + flex-flow: column; + align-items: center; + padding: 30px 30px 0; + + a { + color: #2f9ae0; + cursor: pointer; + } +} .new-account-create-form { display: flex; -- cgit From 2a0a7853249284cb27831890f3b62847ea27eb83 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Thu, 12 Jul 2018 00:23:08 -0400 Subject: added tooltip --- ui/app/css/itcss/components/account-menu.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 9bce812e6..b14753e23 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -87,9 +87,9 @@ } .remove-account-icon { - width: 25px; - padding-left: 10px; - height: 25px; + width: 15px; + margin-left: 10px; + height: 15px; } &:hover { -- cgit From 53995463883c062157a3d725e7cb8fe54486badb Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Fri, 13 Jul 2018 13:49:20 -0400 Subject: added affiliate link to trezor --- ui/app/css/itcss/components/new-account.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index e11c10dfe..4552f0bf2 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -169,6 +169,21 @@ &__link { color: #2f9ae0; } + + &__get-trezor { + display: flex; + flex-flow: column; + align-items: center; + padding: 30px 30px 0; + width: 305px; + + a { + font-size: 14px; + text-align: center; + color: #2f9ae0; + cursor: pointer; + } + } } .hw-account-list { @@ -278,6 +293,7 @@ a { color: #2f9ae0; + font-size: 14px; cursor: pointer; } } -- cgit From 55382e9842c4f4136c88e441298193cc7abd8ba9 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Fri, 13 Jul 2018 15:19:21 -0400 Subject: fix account selection --- ui/app/css/itcss/components/new-account.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 4552f0bf2..a44fab3be 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -242,7 +242,7 @@ &__item__index { display: flex; - margin-right: 20px; + width: 28px; } &__item__radio { @@ -337,4 +337,8 @@ width: 150px; min-width: initial; } + + &__button.btn-primary--disabled { + cursor: 'not-allowed'; + } } -- cgit From 4737ea49c72b24a712b7c3215bed93383ce3ad81 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 16 Jul 2018 17:09:57 -0700 Subject: Increase clickable area and padding of Retry Transaction bar --- ui/app/css/itcss/components/transaction-list.scss | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index d03faf486..1d45ff13b 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -129,12 +129,14 @@ .tx-list-item-retry-container { background: #d1edff; width: 100%; - border-radius: 4px; - font-size: 0.8em; + border-radius: 12px; + font-size: .75rem; display: flex; justify-content: center; margin-left: 44px; width: calc(100% - 44px); + padding: 4px; + cursor: pointer; @media screen and (min-width: 576px) and (max-width: 679px) { flex-flow: column; @@ -151,10 +153,6 @@ } } -.tx-list-item-retry-copy { - font-family: Roboto; -} - .tx-list-item-retry-link { text-decoration: underline; margin-left: 6px; -- cgit From cb97517b26a7732cbb7c4a9f30f85b5fa596e608 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 17 Jul 2018 18:53:37 -0400 Subject: updated account list based on new designs --- ui/app/css/itcss/components/new-account.scss | 68 +++++++++++++++++++++++----- 1 file changed, 57 insertions(+), 11 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index a44fab3be..0eacf4615 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -157,13 +157,14 @@ &__title { padding-top: 10px; font-weight: 500; + font-size: 18px; } &__msg { font-size: 14px; color: #9b9b9b; - margin-top: 15px; - margin-bottom: 15px; + margin-top: 10px; + margin-bottom: 20px; } &__link { @@ -242,12 +243,16 @@ &__item__index { display: flex; - width: 28px; + width: 24px; } &__item__radio { display: flex; flex: 1; + + input { + margin-right: 9px; + } } &__item__label { @@ -264,6 +269,7 @@ &__item__link { display: flex; + margin-top: 3px; } &__item__link img { @@ -278,11 +284,55 @@ margin-top: 10px; &__button { - height: 25px; - flex: initial; - min-width: 90px; - font-size: 12px; + height: 19px; + display: flex; + width: 47px; + color: #33a4e7; + font-size: 14px; + line-height: 19px; + border: none; + min-width: 46px; + margin-right: 0px; + margin-left: 16px; + padding: 0px; + } +} + +.new-account-connect-form { + display: flex; + flex-flow: column; + align-items: center; + padding: 15px 30px 0; + + &__buttons { + margin-top: 39px; + display: flex; + width: 100%; + justify-content: space-between; + } + + &__button { + width: 150px; + min-width: initial; + } + + &__button.btn-primary { + background-color: #259DE5; + } + + &__button.btn-primary { + background-color: #259DE5; + color: #FFFFFF; } + + &__button.btn-primary--disabled { + cursor: not-allowed; + opacity: .5; + } + + + + } .hw-forget-device-container { @@ -337,8 +387,4 @@ width: 150px; min-width: initial; } - - &__button.btn-primary--disabled { - cursor: 'not-allowed'; - } } -- cgit From 3f9c3d76b6edb70f91363c1e0787707ed1440c41 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Mon, 16 Jul 2018 18:21:02 -0230 Subject: Add hex data row to send screen --- ui/app/css/itcss/components/send.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index c168242cf..e9c872ea7 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -628,7 +628,7 @@ } } - &__to-autocomplete, &__memo-text-area { + &__to-autocomplete, &__memo-text-area, &__hex-data { &__input { height: 54px; width: 100%; @@ -899,4 +899,4 @@ .sliders-icon { color: $curious-blue; -} \ No newline at end of file +} -- cgit From 49d1bdea8a47139cc814d3c49aa97bf2d542d3d5 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Wed, 18 Jul 2018 22:57:47 -0400 Subject: design done --- ui/app/css/itcss/components/new-account.scss | 111 ++++++++++++++++++++++----- 1 file changed, 91 insertions(+), 20 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 0eacf4615..5af743a2e 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -1,9 +1,8 @@ .new-account { - width: 376px; + width: 375px; background-color: #FFFFFF; box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); z-index: 25; - padding-bottom: 31px; &__header { display: flex; @@ -153,10 +152,51 @@ } } +.hw-tutorial { + width: 375px; + border-top: 1px solid #D2D8DD; + border-bottom: 1px solid #D2D8DD; + overflow: visible; + display: block; + padding: 15px 30px; +} + .hw-connect { + &__header { + &__title { + margin-top: 5px; + margin-bottom: 15px; + font-size: 22px; + text-align: center; + } + + &__msg { + font-size: 14px; + color: #9b9b9b; + margin-top: 10px; + margin-bottom: 0px; + } + } + + &__learn-more { + margin-top: 15px; + font-size: 14px; + color: #5B5D67; + line-height: 19px; + text-align: center; + + &__arrow { + transform: rotate(90deg); + display: block; + text-align: center; + height: 30px; + margin: 0px auto 10px; + } + } + &__title { padding-top: 10px; - font-weight: 500; + font-weight: 400; font-size: 18px; } @@ -164,27 +204,59 @@ font-size: 14px; color: #9b9b9b; margin-top: 10px; - margin-bottom: 20px; + margin-bottom: 15px; } &__link { color: #2f9ae0; } + &__footer { + width: 100%; + + &__title { + padding-top: 15px; + padding-bottom: 12px; + font-weight: 400; + font-size: 18px; + text-align: center; + } + + &__msg { + font-size: 14px; + color: #9b9b9b; + margin-top: 12px; + margin-bottom: 27px; + } + + &__link { + color: #2f9ae0; + margin-left: 5px; + } + } + &__get-trezor { - display: flex; - flex-flow: column; - align-items: center; - padding: 30px 30px 0; - width: 305px; + width: 100%; + padding-bottom: 20px; + padding-top: 20px; + + &__msg { + font-size: 14px; + color: #9b9b9b; + } - a { + &__link { font-size: 14px; text-align: center; color: #2f9ae0; cursor: pointer; } } + + &__step-asset { + margin: 0px auto 20px; + display: flex; + } } .hw-account-list { @@ -303,6 +375,8 @@ flex-flow: column; align-items: center; padding: 15px 30px 0; + height: 710px; + overflow: auto; &__buttons { margin-top: 39px; @@ -316,23 +390,20 @@ min-width: initial; } - &__button.btn-primary { - background-color: #259DE5; - } - - &__button.btn-primary { + .btn-primary { background-color: #259DE5; color: #FFFFFF; + border: none; + width: 100%; + min-height: 54px; + font-weight: 300; + font-size: 14px; } &__button.btn-primary--disabled { cursor: not-allowed; opacity: .5; } - - - - } .hw-forget-device-container { @@ -352,7 +423,7 @@ display: flex; flex-flow: column; align-items: center; - padding: 30px 30px 0; + padding: 30px; &__input-label { color: $scorpion; -- cgit From 2bfddc288e64f130d1677afca4448202181523ea Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Wed, 18 Jul 2018 23:12:49 -0400 Subject: scroll smooth --- ui/app/css/itcss/components/new-account.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 5af743a2e..8743d540f 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -184,6 +184,7 @@ color: #5B5D67; line-height: 19px; text-align: center; + cursor: pointer; &__arrow { transform: rotate(90deg); -- cgit From a6e0eef8f4280041380a7c462069b2c205999130 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Thu, 19 Jul 2018 00:14:13 -0400 Subject: fix unsupported browser view --- ui/app/css/itcss/components/new-account.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 8743d540f..29faacc1b 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -63,7 +63,7 @@ display: flex; flex-flow: column; align-items: center; - padding: 0 30px; + padding: 0 30px 30px; &__select-section { display: flex; @@ -379,6 +379,10 @@ height: 710px; overflow: auto; + &.unsupported-browser { + height: 210px; + } + &__buttons { margin-top: 39px; display: flex; -- cgit From 76981c2ad9b0f8f13fa61ba3b60c07203a81eb57 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Thu, 19 Jul 2018 02:31:02 -0400 Subject: added new global alert --- ui/app/css/itcss/components/alert.scss | 57 ++++++++++++++++++++++++++++++++++ ui/app/css/itcss/components/index.scss | 2 ++ 2 files changed, 59 insertions(+) create mode 100644 ui/app/css/itcss/components/alert.scss (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/alert.scss b/ui/app/css/itcss/components/alert.scss new file mode 100644 index 000000000..930fc3f54 --- /dev/null +++ b/ui/app/css/itcss/components/alert.scss @@ -0,0 +1,57 @@ +.global-alert { + position: relative; + width: 100%; + background-color: #33A4E7; + + .msg { + width: 100%; + display: block; + color: white; + font-size: 12px; + text-align: center; + } +} + +.global-alert.hidden { + animation: alertHidden .5s ease forwards; +} + +.global-alert.visible { + animation: alert .5s ease forwards; +} + +/* Animation */ +@keyframes alert { + 0% { + opacity: 0; + top: -50px; + padding: 0px; + line-height: 12px; + } + + 50% { + opacity: 1; + } + + 100% { + top: 0; + padding: 8px; + line-height: 12px; + } +} + +@keyframes alertHidden { + 0% { + top: 0; + opacity: 1; + padding: 8px; + line-height: 12px; + } + + 100% { + opacity: 0; + top: -50px; + padding: 0px; + line-height: 0px; + } +} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 5be040906..96ad5fe64 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -8,6 +8,8 @@ @import './modal.scss'; +@import './alert.scss'; + @import './newui-sections.scss'; @import './account-dropdown.scss'; -- cgit From df19163bf9611d75aaf8ea6da52651dbba9a5e00 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Thu, 19 Jul 2018 02:31:13 -0400 Subject: last css fixes --- ui/app/css/itcss/components/new-account.scss | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 29faacc1b..b12afb124 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -299,7 +299,8 @@ font-size: 15px; flex-direction: row; display: flex; - padding: 10px; + padding-left: 10px; + padding-right: 10px; } &__item:nth-of-type(even) { @@ -324,14 +325,17 @@ flex: 1; input { - margin-right: 9px; + padding: 10px; + margin-top: 13px; } } &__item__label { - margin-left: 10px; display: flex; flex: 1; + padding-left: 10px; + padding-top: 10px; + padding-bottom: 10px; } &__item__balance { @@ -342,7 +346,7 @@ &__item__link { display: flex; - margin-top: 3px; + margin-top: 13px; } &__item__link img { @@ -359,7 +363,6 @@ &__button { height: 19px; display: flex; - width: 47px; color: #33a4e7; font-size: 14px; line-height: 19px; @@ -368,6 +371,8 @@ margin-right: 0px; margin-left: 16px; padding: 0px; + text-transform: uppercase; + font-family: Roboto; } } @@ -383,6 +388,10 @@ height: 210px; } + &.account-list { + height: auto; + } + &__buttons { margin-top: 39px; display: flex; @@ -405,6 +414,10 @@ font-size: 14px; } + &__button.unlock { + width: 50%; + } + &__button.btn-primary--disabled { cursor: not-allowed; opacity: .5; @@ -415,7 +428,7 @@ display: flex; flex-flow: column; align-items: center; - padding: 30px 30px 0; + padding: 22px; a { color: #2f9ae0; -- cgit