From 803eaaf968161f16aaf72d59b979dfbb7fb9b352 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 13 Oct 2017 16:19:22 -0400 Subject: [NewUI] SendV2-#8: Send container handles tokens; gas info dynamic from state (#2364) * Adds memo field to send-v2. * Vertical align transaction with flexbox. * Customize Gas UI * Remove internal state from InputNumber and fix use in gastooltip. * Move customize-gas-modal to its own folder and minor cleanup * Create send container, get account info from state, and make currency display more reusable * Adjusts send-v2 and container for send-token. Dynamically getting suggested gas prices. --- ui/app/css/itcss/components/account-dropdown.scss | 25 ++- ui/app/css/itcss/components/currency-display.scss | 4 - ui/app/css/itcss/components/gas-slider.scss | 51 ++++++ ui/app/css/itcss/components/index.scss | 3 + ui/app/css/itcss/components/send.scss | 206 ++++++++++++++++++++-- 5 files changed, 270 insertions(+), 19 deletions(-) create mode 100644 ui/app/css/itcss/components/gas-slider.scss (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 9966c7f3f..4fc7c705a 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -23,6 +23,16 @@ margin-left: 8px; position: relative; } + + &__account-balances { + height: auto; + border: none; + background-color: transparent; + color: #9b9b9b; + margin-left: 34px; + margin-top: 4px; + position: relative; + } &__account-name { font-size: 16px; @@ -34,13 +44,22 @@ right: 12px; top: 1px; } + + &__account-primary-balance, + &__account-secondary-balance { + font-family: Roboto; + line-height: 16px; + font-size: 12px; + font-weight: 300; + } + &__account-primary-balance { - margin-left: 34px; - margin-top: 4px; + color: $scorpion; + border: none; + outline: 0 !important; } &__account-secondary-balance { - margin-left: 34px; color: $dusty-gray; } } diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index b2776bb47..f2cc6e700 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -15,10 +15,6 @@ display: flex; } - &__input-wrapper { - margin-top: -1px; - } - &__input { color: $scorpion; font-family: Roboto; diff --git a/ui/app/css/itcss/components/gas-slider.scss b/ui/app/css/itcss/components/gas-slider.scss new file mode 100644 index 000000000..c27a560bd --- /dev/null +++ b/ui/app/css/itcss/components/gas-slider.scss @@ -0,0 +1,51 @@ +.gas-slider { + position: relative; + width: 313px; + + &__input { + width: 317px; + margin-left: -2px; + z-index: 2; + } + + input[type=range] { + -webkit-appearance: none !important; + } + + input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none !important; + height: 26px; + width: 26px; + border: 2px solid #B8B8B8; + background-color: #FFFFFF; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + border-radius: 50%; + position: relative; + z-index: 10; + } + + &__bar { + height: 6px; + width: 313px; + background: $alto; + display: flex; + justify-content: space-between; + position: absolute; + top: 11px; + z-index: 0; + } + + &__low, &__high { + height: 6px; + width: 49px; + z-index: 1; + } + + &__low { + background-color: $crimson; + } + + &__high { + background-color: $caribbean-green; + } +} \ No newline at end of file diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index dee0959b7..fda002785 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -35,3 +35,6 @@ @import './account-menu.scss'; @import './menu.scss'; + +@import './gas-slider.scss'; + diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 80aacf1ab..ddabdee2e 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -264,7 +264,7 @@ .gas-tooltip-input-arrows { position: absolute; top: 0; - left: 178px; + right: 4px; width: 17px; height: 28px; border: 1px solid #dadada; @@ -420,7 +420,16 @@ } } - &__send-eth-icon { + &__send-header-icon-container { + z-index: 25; + + @media screen and (max-width: $break-small) { + position: relative; + top: 0; + } + } + + &__send-header-icon { border-radius: 50%; width: 48px; height: 48px; @@ -428,11 +437,6 @@ z-index: 25; padding: 4px; background-color: $white; - - @media screen and (max-width: $break-small) { - position: relative; - top: 0; - } } &__send-arrow-icon { @@ -472,7 +476,7 @@ position: absolute; transform: rotate(45deg); left: 178px; - top: 71px; + top: 65px; } &__title { @@ -512,7 +516,9 @@ font-family: Roboto; font-size: 16px; line-height: 22px; - margin-top: 16px; + display: flex; + flex-flow: column; + justify-content: center; } &__from-dropdown { @@ -550,7 +556,7 @@ } } - &__to-autocomplete { + &__to-autocomplete, &__memo-text-area { &__input { height: 54px; width: 240px; @@ -566,6 +572,32 @@ } } + &__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; + padding: 5px; + position: absolute; + right: 15px; + top: 14px; + cursor: pointer; + } + + &__sliders-icon { + color: $curious-blue; + } + + &__memo-text-area { + &__input { + padding: 6px 10px; + } + } + &__footer { height: 92px; width: 100%; @@ -573,8 +605,7 @@ justify-content: space-evenly; align-items: center; border-top: 1px solid $alto; - position: absolute; - bottom: 0; + margin-top: 29px; } &__next-btn, @@ -607,4 +638,155 @@ color: $dusty-gray; border-color: $dusty-gray; } + + &__customize-gas { + border: 1px solid #D8D8D8; + border-radius: 4px; + background-color: #FFFFFF; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14); + font-family: Roboto; + display: flex; + flex-flow: column; + + @media screen and (max-width: $break-small) { + width: 355px; + height: 598px; + } + + &__header { + height: 52px; + border-bottom: 1px solid $alto; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 22px; + } + + &__title { + margin-left: 19.25px; + } + + &__close::after { + content: '\00D7'; + font-size: 1.8em; + color: $dusty-gray; + font-family: sans-serif; + cursor: pointer; + margin-right: 19.25px; + } + + &__body { + height: 248px; + display: flex; + + @media screen and (max-width: $break-small) { + width: 355px; + height: 470px; + flex-flow: column; + } + } + + &__footer { + height: 75px; + border-top: 1px solid $alto; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 22px; + } + + &__buttons { + display: flex; + justify-content: space-between; + width: 181.75px; + margin-right: 21.25px; + } + + &__revert, &__cancel, &__save { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + } + + &__revert { + color: $silver-chalice; + font-size: 16px; + margin-left: 21.25px; + } + + &__cancel, &__save { + height: 34.64px; + width: 85.74px; + border: 1px solid $dusty-gray; + border-radius: 2px; + font-family: 'DIN OT'; + font-size: 12px; + color: $dusty-gray; + } + } + + &__gas-modal-card { + width: 360px; + display: flex; + flex-flow: column; + align-items: flex-start; + padding-left: 20px; + + &__title { + height: 26px; + width: 84px; + color: $tundora; + font-family: Roboto; + font-size: 20px; + font-weight: 300; + line-height: 26px; + margin-top: 17px; + } + + &__copy { + height: 38px; + width: 314px; + color: $tundora; + font-family: Roboto; + font-size: 14px; + line-height: 19px; + margin-top: 17px; + } + + .customize-gas-input-wrapper { + margin-top: 17px; + } + + .customize-gas-input { + height: 54px; + width: 315px; + border: 1px solid $geyser; + background-color: $white; + padding-left: 15px; + } + + .gas-tooltip-input-arrows { + width: 32px; + height: 54px; + border-left: 1px solid #dadada; + font-size: 18px; + color: $tundora; + right: 0px; + padding: 1px 4px; + display: flex; + justify-content: space-around; + align-items: center; + } + + input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + } + + input[type="number"]:hover::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; + } + } } -- cgit