From 7c97b2f37c0226daef734bae3392b6ade2b2956f Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 11 Jan 2018 13:51:41 -0330 Subject: Fix padding of a hovered tx-list-item (#2859) --- ui/app/css/itcss/components/transaction-list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 a5d508f11..fb09fd800 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -210,7 +210,7 @@ } @media screen and (min-width: $break-large) { - margin: 0 2.37em; + padding: 0 2.37em; } &:last-of-type { -- cgit v1.2.3 From 5c1dcf3e9bdb317dd8b42aadb18657eb4bfa2e0f Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 12 Jan 2018 16:18:18 -0330 Subject: [NewUI-flat] New deposit ether modal UI. (#2642) * New deposit ether modal. * New deposit modal full screen on mobile, and other style fixes. * Hide shapeshift option from deposit modal for now. * Add shapeshift form to new deposit modal. * Store recipient address for shapeshift tx in background. * Use Simpledropdown to achieve desired styling in coin selector. * Lint fix * Fix typos and remove dead code. * Remove storage of shapeshift receiving address from background. * Fix typos --- ui/app/css/itcss/components/modal.scss | 254 ++++++++++++++++++++++++++++++- ui/app/css/itcss/settings/variables.scss | 2 + 2 files changed, 255 insertions(+), 1 deletion(-) (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 9b64564d6..2431e2f63 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -598,4 +598,256 @@ justify-content: center; font-size: 17px; color: $nile-blue; -} \ No newline at end of file +} + +// Deposit Ether Modal +.deposit-ether-modal { + border-radius: 8px; + font-family: Roboto; + display: flex; + flex-flow: column; + height: 100%; + + &__header { + width: 100%; + border-radius: 8px 8px 0 0; + background-color: $mid-gray; + display: flex; + position: relative; + padding: 25px; + flex-flow: column; + align-items: flex-start; + + &__title { + color: $white; + font-size: 24px; + line-height: 32px; + } + + &__description { + color: $white; + font-size: 16px; + line-height: 22px; + margin-top: 10px; + } + + &__close::after { + content: '\00D7'; + font-size: 2em; + color: $white; + position: absolute; + top: 20.8px; + right: 28px; + cursor: pointer; + } + } + + &__buy-rows { + width: 100%; + padding: 33px; + padding-top: 0px; + display: flex; + flex-flow: column nowrap; + flex: 1; + overflow-y: auto; + + @media screen and (max-width: 575px) { + height: 0; + } + } + + &__buy-row { + border-bottom: 1px solid $alto; + display: flex; + justify-content: space-between; + align-items: center; + flex: 1; + padding-bottom: 25px; + padding-top: 25px; + + @media screen and (max-width: 575px) { + min-height: 360px; + flex-flow: column; + justify-content: center; + padding-top: 45px; + } + + &__back { + position: absolute; + top: 10px; + left: 0px; + } + + &__shapeshift-buy { + padding-top: 25px; + position: relative; + @media screen and (max-width: 575px) { + display: flex; + justify-content: space-between; + align-items: center; + flex: 1; + padding-bottom: 25px; + flex-flow: column; + justify-content: center; + padding-top: 20px; + min-height: 240px; + border: none; + } + } + + &__logo { + display: flex; + justify-content: center; + flex: 0.3 1 auto; + + @media screen and (min-width: 575px) { + min-width: 215px; + } + } + + &__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 { + display: flex; + } + + &__description { + color: $cape-cod; + flex: 0.5 1 auto; + + @media screen and (min-width: 575px) { + min-width: 315px; + } + + &__title { + font-size: 20px; + line-height: 30px; + } + + &__text { + font-size: 14px; + line-height: 22px; + margin-top: 7px; + } + } + + &__button { + display: flex; + justify-content: flex-end; + + @media screen and (min-width: 575px) { + min-width: 300px; + } + } + } + + &__buy-row:last-of-type { + border-bottom: 0px; + } + + &__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 { + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + margin-top: 28px; + flex: 1 0 auto; + + .shapeshift-form { + width: auto; + + &__caret { + width: auto; + flex: 1; + } + } + } + + .shapeshift-form__shapeshift-buy-btn { + margin-top: 10px; + } + + .simple-dropdown { + color: #5B5D67; + font-size: 16px; + font-weight: 300; + line-height: 21px; + border: 1px solid #D8D8D8; + background-color: #FFFFFF; + text-align: center; + width: 100%; + height: 45px; + line-height: 44px; + font-family: Montserrat Light; + } + + .simple-dropdown__selected { + text-align: center; + } +} + +//Notification Modal + +.notification-modal-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; + border: 1px solid $alto; + box-shadow: 0 0 2px 2px $alto; + font-family: Roboto; +} + +.notification-modal-header { + background: $wild-sand; + width: 100%; + display: flex; + justify-content: center; + padding: 30px; + font-size: 22px; + color: $nile-blue; + height: 79px; +} + +.notification-modal-message { + padding: 20px; +} + +.notification-modal-message { + width: 100%; + display: flex; + justify-content: center; + font-size: 17px; + color: $nile-blue; +} diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 387d14b5f..edc376c17 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -42,6 +42,8 @@ $malibu-blue: #7ac9fd; $athens-grey: #e9edf0; $jaffa: #f28930; $geyser: #d2d8dd; +$mid-gray: #5b5d67; +$cape-cod: #38393a; /* Z-Indicies -- cgit v1.2.3 From bdcee058dc278c46c828f376476f121417481385 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 9 Jan 2018 16:45:39 -0800 Subject: Fix styling in initialization --- ui/app/css/itcss/components/header.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss') diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index a6332f819..e27444084 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -17,7 +17,16 @@ @media screen and (min-width: 576px) { height: 75px; justify-content: center; + } + + .metafox-icon { + cursor: pointer; + } +} +.app-header--initialized { + + @media screen and (min-width: 576px) { &::after { content: ''; position: absolute; @@ -27,10 +36,6 @@ bottom: -32px; } } - - .metafox-icon { - cursor: pointer; - } } .app-header-contents { -- cgit v1.2.3