From f0a219294d0a3e26a6755bbbf608b96490a397c2 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 12:45:21 -0700 Subject: Add inverted triangle css (itcss) folder structure --- ui/app/css/itcss/components/index.scss | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 ui/app/css/itcss/components/index.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss new file mode 100644 index 000000000..e69de29bb -- cgit From a0a956d646d23891082801e560fac2149b14dca7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 13:02:31 -0700 Subject: Move generic button components and body styles to components and generic, respectively --- ui/app/css/itcss/components/buttons.scss | 83 ++++++++++++++++++++++++++++++++ ui/app/css/itcss/components/index.scss | 1 + 2 files changed, 84 insertions(+) create mode 100644 ui/app/css/itcss/components/buttons.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss new file mode 100644 index 000000000..114a2f892 --- /dev/null +++ b/ui/app/css/itcss/components/buttons.scss @@ -0,0 +1,83 @@ +/* + Buttons + */ + +.btn-green { + background-color: #02C9B1; // TODO: reusable color in colors.css +} + +button.btn-clear { + background: white; + border: 1px solid; +} + +// No longer used in flat design, remove when modal buttons done +// div.wallet-btn { +// border: 1px solid rgb(91, 93, 103); +// border-radius: 2px; +// height: 30px; +// width: 75px; +// font-size: 0.8em; +// text-align: center; +// line-height: 25px; +// } + +// .btn-red { +// background: rgba(254, 35, 17, 1); +// box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); +// } + +// button[disabled], input[type="submit"][disabled] { +// cursor: not-allowed; +// background: rgba(197, 197, 197, 1); +// box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); +// } + +// button.spaced { +// margin: 2px; +// } + +// button:not([disabled]):hover, input[type="submit"]:not([disabled]):hover { +// transform: scale(1.1); +// } +// button:not([disabled]):active, input[type="submit"]:not([disabled]):active { +// transform: scale(0.95); +// } + +button.primary { + padding: 8px 12px; + background: #F7861C; + box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); + color: white; + font-size: 1.1em; + font-family: 'Montserrat Regular'; + text-transform: uppercase; +} + +.btn-light { + padding: 8px 12px; + // background: #FFFFFF; // $bg-white + box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); + color: #585D67; // TODO: make reusable light button color + font-size: 1.1em; + font-family: 'Montserrat Regular'; + text-transform: uppercase; + text-align: center; + line-height: 20px; + border-radius: 2px; + border: 1px solid #979797; // #TODO: make reusable light border color + opacity: 0.5; +} + +// TODO: cleanup: not used anywhere +button.btn-thin { + border: 1px solid; + border-color: #4D4D4D; + color: #4D4D4D; + background: rgb(255, 174, 41); + border-radius: 4px; + min-width: 200px; + margin: 12px 0; + padding: 6px; + font-size: 13px; +} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index e69de29bb..948f19251 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -0,0 +1 @@ +@import './buttons.scss' \ No newline at end of file -- cgit From b65dc85b0a87d4646a2671656d18166f208228d4 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 13:06:18 -0700 Subject: Organize app components --- ui/app/css/itcss/components/index.scss | 68 +++++++++++++++++++++++++++++++++- 1 file changed, 67 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 948f19251..a93b629f6 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -1 +1,67 @@ -@import './buttons.scss' \ No newline at end of file +@import './buttons.scss' + +/* +app +*/ + +.app-header { + padding: 6px 8px; + // background: #EFEFEF; // $gallery +} + +.app-header h1 { + font-family: 'Montserrat Regular'; + text-transform: uppercase; + color: #22232C; // $shark +} + +h2.page-subtitle { + font-family: 'Montserrat Regular'; + text-transform: uppercase; + color: #AEAEAE; + font-size: 1em; + margin: 12px; +} + +.app-footer { + padding-bottom: 10px; + align-items: center; +} + +.identicon { + height: 46px; + width: 46px; + background-size: cover; + border-radius: 100%; + border: 3px solid gray; +} + +textarea.twelve-word-phrase { + padding: 12px; + width: 300px; + height: 140px; + font-size: 16px; + background: white; + resize: none; +} + +.network-indicator { + display: flex; + align-items: center; + font-size: 0.6em; + +} + +.network-name { + width: 5.2em; + line-height: 9px; + text-rendering: geometricPrecision; +} + +.check { + margin-left: 7px; + color: #F7861C; + flex: 1 0 auto; + display: flex; + justify-content: flex-end; +} \ No newline at end of file -- cgit From d46a79df25afa0973f19210048b929fa5ba76117 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 13:24:06 -0700 Subject: Organize app components scss --- ui/app/css/itcss/components/footer.scss | 4 + ui/app/css/itcss/components/header.scss | 18 + ui/app/css/itcss/components/identicon.scss | 7 + ui/app/css/itcss/components/index.scss | 74 +--- ui/app/css/itcss/components/network.scss | 12 + ui/app/css/itcss/components/newui-sections.scss | 109 ++++++ ui/app/css/itcss/components/sections.scss | 488 ++++++++++++++++++++++++ 7 files changed, 645 insertions(+), 67 deletions(-) create mode 100644 ui/app/css/itcss/components/footer.scss create mode 100644 ui/app/css/itcss/components/header.scss create mode 100644 ui/app/css/itcss/components/identicon.scss create mode 100644 ui/app/css/itcss/components/network.scss create mode 100644 ui/app/css/itcss/components/newui-sections.scss create mode 100644 ui/app/css/itcss/components/sections.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/footer.scss b/ui/app/css/itcss/components/footer.scss new file mode 100644 index 000000000..000a53eed --- /dev/null +++ b/ui/app/css/itcss/components/footer.scss @@ -0,0 +1,4 @@ +.app-footer { + padding-bottom: 10px; + align-items: center; +} diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss new file mode 100644 index 000000000..0525d00fc --- /dev/null +++ b/ui/app/css/itcss/components/header.scss @@ -0,0 +1,18 @@ +.app-header { + padding: 6px 8px; + // background: #EFEFEF; // $gallery +} + +.app-header h1 { + font-family: 'Montserrat Regular'; + text-transform: uppercase; + color: #22232C; // $shark +} + +h2.page-subtitle { + font-family: 'Montserrat Regular'; + text-transform: uppercase; + color: #AEAEAE; + font-size: 1em; + margin: 12px; +} diff --git a/ui/app/css/itcss/components/identicon.scss b/ui/app/css/itcss/components/identicon.scss new file mode 100644 index 000000000..2f2de6ed8 --- /dev/null +++ b/ui/app/css/itcss/components/identicon.scss @@ -0,0 +1,7 @@ +.identicon { + height: 46px; + width: 46px; + background-size: cover; + border-radius: 100%; + border: 3px solid gray; +} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index a93b629f6..03a974877 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -1,67 +1,7 @@ -@import './buttons.scss' - -/* -app -*/ - -.app-header { - padding: 6px 8px; - // background: #EFEFEF; // $gallery -} - -.app-header h1 { - font-family: 'Montserrat Regular'; - text-transform: uppercase; - color: #22232C; // $shark -} - -h2.page-subtitle { - font-family: 'Montserrat Regular'; - text-transform: uppercase; - color: #AEAEAE; - font-size: 1em; - margin: 12px; -} - -.app-footer { - padding-bottom: 10px; - align-items: center; -} - -.identicon { - height: 46px; - width: 46px; - background-size: cover; - border-radius: 100%; - border: 3px solid gray; -} - -textarea.twelve-word-phrase { - padding: 12px; - width: 300px; - height: 140px; - font-size: 16px; - background: white; - resize: none; -} - -.network-indicator { - display: flex; - align-items: center; - font-size: 0.6em; - -} - -.network-name { - width: 5.2em; - line-height: 9px; - text-rendering: geometricPrecision; -} - -.check { - margin-left: 7px; - color: #F7861C; - flex: 1 0 auto; - display: flex; - justify-content: flex-end; -} \ No newline at end of file +@import './buttons.scss'; +@import './header.scss'; +@import './footer.scss'; +@import './identicon.scss'; +@import './network.scss'; +@import './sections.scss'; +@import './newui-sections.scss'; diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss new file mode 100644 index 000000000..fb135d190 --- /dev/null +++ b/ui/app/css/itcss/components/network.scss @@ -0,0 +1,12 @@ +.network-indicator { + display: flex; + align-items: center; + font-size: 0.6em; + +} + +.network-name { + width: 5.2em; + line-height: 9px; + text-rendering: geometricPrecision; +} diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss new file mode 100644 index 000000000..23cf4a39a --- /dev/null +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -0,0 +1,109 @@ +/* + NewUI Container Elements + */ + +.main-container { + position: absolute; + z-index: 18; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); + font-family: DIN OT; + display: flex; + flex-wrap: wrap; + align-items: stretch; + overflow-y: scroll; +} + +.sidebar { + flex: 1 0 230px; + background: rgb(250, 250, 250); + z-index: 26; + position: fixed; + top: 35px; + left: 0px; + right: 0px; + bottom: 0px; + opacity: 1; + visibility: visible; + will-change: transform; + overflow-y: auto; + box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px; + width: 85%; + height: 100%; +} + +.sidebar-overlay { + z-index: 25; + position: fixed; + top: 35px; + left: 0px; + right: 0px; + bottom: 0px; + opacity: 1; + visibility: visible; + background-color: rgba(0, 0, 0, 0.3); +} + +@media screen and (min-width: 576px) { + .lap-visible { + display: flex; + } + + .phone-visible { + display: none; + } + + .main-container { + margin-top: 35px; + width: 85%; + height: 90vh; + } + + button.btn-clear { + width: 75px; + height: 32px; + font-size: .6em; + background: white; + border: 1px solid; + } +} + +@media screen and (min-width: 769px) { + .main-container { + margin-top: 35px; + width: 80%; + height: 82vh; + } +} + +@media screen and (min-width: 1281px) { + .main-container { + margin-top: 35px; + width: 65%; + height: 82vh; + } +} + +@media screen and (max-width: 575px) { + .lap-visible { + display: none; + } + + .phone-visible { + display: flex; + } + + .main-container { + margin-top: 35px; + // position: relative; + width: 100%; + height: 100%; + } + + button.btn-clear { + width: 100px; + height: 50px; + font-size: .7em; + background: red; + border: 1px solid; + } +} diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss new file mode 100644 index 000000000..7c6a8c1ce --- /dev/null +++ b/ui/app/css/itcss/components/sections.scss @@ -0,0 +1,488 @@ +/* +App Sections + TODO: Move into separate files. +*/ + +/* initialize */ + +textarea.twelve-word-phrase { + padding: 12px; + width: 300px; + height: 140px; + font-size: 16px; + background: white; + resize: none; +} + +.initialize-screen hr { + width: 60px; + margin: 12px; + border-color: #F7861C; + border-style: solid; +} + +.initialize-screen label { + margin-top: 20px; +} + +.initialize-screen button.create-vault { + margin-top: 40px; +} + +.initialize-screen .warning { + font-size: 14px; + margin: 0 16px; +} + +/* unlock */ +.error { + color: #E20202; +} + +.warning { + color: #FFAE00; +} + +.lock { + width: 50px; + height: 50px; +} + +.lock.locked { + transform: scale(1.5); + opacity: 0.0; + transition: opacity 400ms ease-in, transform 400ms ease-in; +} +.lock.unlocked { + transform: scale(1); + opacity: 1; + transition: opacity 500ms ease-out, transform 500ms ease-out, background 200ms ease-in; +} + +.lock.locked .lock-top { + transform: scaleX(1) translateX(0); + transition: transform 250ms ease-in; +} +.lock.unlocked .lock-top { + transform: scaleX(-1) translateX(-12px); + transition: transform 250ms ease-in; +} +.lock.unlocked:hover { + border-radius: 4px; + background: #e5e5e5; + border: 1px solid #b1b1b1; +} +.lock.unlocked:active { + background: #c3c3c3; +} + +.section-title .fa-arrow-left { + margin: -2px 8px 0px -8px; +} + +.unlock-screen #metamask-mascot-container { + margin-top: 24px; +} + +.unlock-screen h1 { + margin-top: -28px; + margin-bottom: 42px; +} + +.unlock-screen input[type=password] { + width: 260px; +} + +.sizing-input{ + font-size: 14px; + height: 30px; + padding-left: 5px; +} +.editable-label{ + display: flex; +} +/* Webkit */ +.unlock-screen input::-webkit-input-placeholder { + text-align: center; + font-size: 1.2em; +} +/* Firefox 18- */ +.unlock-screen input:-moz-placeholder { + text-align: center; + font-size: 1.2em; +} +/* Firefox 19+ */ +.unlock-screen input::-moz-placeholder { + text-align: center; + font-size: 1.2em; +} +/* IE */ +.unlock-screen input:-ms-input-placeholder { + text-align: center; + font-size: 1.2em; +} + + +/* accounts */ + +.accounts-section { + margin: 0 0px; +} + +.accounts-section .horizontal-line { + margin: 0px 18px; +} + +.accounts-list-option { + height: 120px; +} + +.accounts-list-option .identicon-wrapper { + width: 100px; +} + +.unconftx-link { + margin-top: 24px; + cursor: pointer; +} + +.unconftx-link .fa-arrow-right { + margin: 0px -8px 0px 8px; +} + +/* identity panel */ + +.identity-panel { + font-weight: 500; +} + +.identity-panel .identicon-wrapper { + margin: 4px; + margin-top: 8px; + display: flex; + align-items: center; +} + +.identity-panel .identicon-wrapper span { + margin: 0 auto; +} + +.identity-panel .identity-data { + margin: 8px 8px 8px 18px; +} + +.identity-panel i { + margin-top: 32px; + margin-right: 6px; + color: #B9B9B9; +} + +.identity-panel .arrow-right { + padding-left: 18px; + width: 42px; + min-width: 18px; + height: 100%; +} + +.identity-copy.flex-column { + flex: 0.25 0 auto; + justify-content: center; +} + +/* accounts screen */ + +.identity-section { + +} + +.identity-section .identity-panel { + background: #E9E9E9; + border-bottom: 1px solid #B1B1B1; + cursor: pointer; +} + +.identity-section .identity-panel.selected { + background: white; + color: #F3C83E; +} + +.identity-section .identity-panel.selected .identicon { + border-color: orange; +} + +.identity-section .accounts-list-option:hover, +.identity-section .accounts-list-option.selected { + background:white; +} + +/* account detail screen */ + +.account-detail-section { + display: flex; + flex-wrap: wrap; + overflow-y: auto; + flex-direction: inherit; +} + +.grow-tenx { + flex-grow: 10; +} + +.name-label{ + +} + +.unapproved-tx-icon { + height: 16px; + width: 16px; + background: rgb(47, 174, 244); + border-color: #AEAEAE; + border-radius: 13px; +} + +.edit-text { + height: 100%; + visibility: hidden; +} + +.editing-label { + display: flex; + justify-content: flex-start; + margin-left: 50px; + margin-bottom: 2px; + font-size: 11px; + text-rendering: geometricPrecision; + color: #F7861C; +} + +.name-label:hover .edit-text { + visibility: visible; +} +/* tx confirm */ + +.unconftx-section input[type=password] { + height: 22px; + padding: 2px; + margin: 12px; + margin-bottom: 24px; + border-radius: 4px; + border: 2px solid #F3C83E; + background: #FAF6F0; +} + +/* Send Screen */ + +.send-screen section { + margin: 4px 16px; +} + +.send-screen input { + width: 100%; + font-size: 12px; +} + +/* Ether Balance Widget */ + +.ether-balance-amount { + color: #F7861C; +} + +.ether-balance-label { + color: #ABA9AA; +} + +/* Info screen */ +.info-gray{ + font-family: 'Montserrat Regular'; + text-transform: uppercase; + color: #AEAEAE; +} + +.icon-size{ + width: 20px; +} + +.info{ + font-family: 'Montserrat Regular', Arial; + padding-bottom: 10px; + display: inline-block; + padding-left: 5px; +} + +/* buy eth warning screen */ +.custom-radios { + justify-content: space-around; + align-items: center; +} + + +.custom-radio-selected { + width: 17px; + height: 17px; + border: solid; + border-style: double; + border-radius: 15px; + border-width: 5px; + background: rgba(247, 134, 28, 1); + border-color: #F7F7F7; +} + +.custom-radio-inactive { + width: 14px; + height: 14px; + border: solid; + border-width: 1px; + border-radius: 24px; + border-color: #AEAEAE; +} + +.radio-titles { + color: rgba(247, 134, 28, 1); +} + +.radio-titles-subtext { + +} + +.selected-exchange { + +} + +.buy-radio { + +} + +.eth-warning{ + transition: opacity 400ms ease-in, transform 400ms ease-in; +} + +.buy-subview{ + transition: opacity 400ms ease-in, transform 400ms ease-in; +} + +.input-container:hover .edit-text{ + visibility: visible; +} + +.buy-inputs{ + font-family: 'Montserrat Light'; + font-size: 13px; + height: 20px; + background: transparent; + box-sizing: border-box; + border: solid; + border-color: transparent; + border-width: 0.5px; + border-radius: 2px; + +} +.input-container:hover .buy-inputs{ + box-sizing: inherit; + border: solid; + border-color: #F7861C; + border-width: 0.5px; + border-radius: 2px; +} + +.buy-inputs:focus{ + border: solid; + border-color: #F7861C; + border-width: 0.5px; + border-radius: 2px; +} + +.activeForm { + background: #F7F7F7; + border: none; + border-radius: 8px 8px 0px 0px; + width: 50%; + text-align: center; + padding-bottom: 4px; + +} + +.inactiveForm { + border: none; + border-radius: 8px 8px 0px 0px; + width: 50%; + text-align: center; + padding-bottom: 4px; +} + +.ex-coins { + font-family: 'Montserrat Regular'; + text-transform: uppercase; + text-align: center; + font-size: 33px; + width: 118px; + height: 42px; + padding: 1px; + color: #4D4D4D; +} + +.marketinfo{ + font-family: 'Montserrat light'; + color: #AEAEAE; + font-size: 15px; + line-height: 17px; +} + +#fromCoin::-webkit-calendar-picker-indicator { + display: none; +} + +#coinList { + width: 400px; + height: 500px; + overflow: scroll; +} + +.icon-control .fa-refresh{ + visibility: hidden; +} + +.icon-control:hover .fa-refresh{ + visibility: visible; +} + +.icon-control:hover .fa-chevron-right{ + visibility: hidden; +} + +.inactive { + color: #AEAEAE; +} + +.inactive button{ + background: #AEAEAE; + color: white; +} + +.ellip-address { + overflow: hidden; + text-overflow: ellipsis; + width: 5em; + font-size: 14px; + font-family: "Montserrat Light"; + margin-left: 5px; +} + +.qr-header { + font-size: 25px; + margin-top: 40px; +} + +.qr-message { + font-size: 12px; + color: #F7861C; +} + +div.message-container > div:first-child { + margin-top: 18px; + font-size: 15px; + color: #4D4D4D; +} + +.pop-hover:hover { + transform: scale(1.1); +} -- cgit From 2eddfec3423b5ca72f1619f4daf9567c757e4896 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 13:46:11 -0700 Subject: Remove output folder --- ui/app/css/itcss/components/newui-sections.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 23cf4a39a..b3ad30017 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -103,7 +103,7 @@ width: 100px; height: 50px; font-size: .7em; - background: red; + background: white; border: 1px solid; } } -- cgit From f73e4dd6041bb9edf2dfa06ed79249b5bdbe241e Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 13:53:22 -0700 Subject: Move debug and colors to itcss --- ui/app/css/itcss/components/sections.scss | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 7c6a8c1ce..279263acd 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -3,6 +3,28 @@ App Sections TODO: Move into separate files. */ +/* +debug / dev +*/ + +#app-content { + border: 2px solid green; +} + +#design-container { + position: absolute; + left: 360px; + top: -42px; + width: calc(100vw - 360px); + height: 100vh; + overflow: scroll; +} + +#design-container img { + width: 2000px; + margin-right: 600px; +} + /* initialize */ textarea.twelve-word-phrase { @@ -485,4 +507,4 @@ div.message-container > div:first-child { .pop-hover:hover { transform: scale(1.1); -} +} \ No newline at end of file -- cgit From 966b25573b04cc9562ba7eb5d345cf48789ddfd9 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 14:03:44 -0700 Subject: Move remaining debug, fonts, reset, and transitions into inverted triangle --- ui/app/css/itcss/components/index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 03a974877..acd3dc108 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -3,5 +3,5 @@ @import './footer.scss'; @import './identicon.scss'; @import './network.scss'; -@import './sections.scss'; @import './newui-sections.scss'; +@import './sections.scss'; -- cgit From c9b33da184cfc7262ce47095eae708bf9bcc5589 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 14:25:34 -0700 Subject: Disable debug styles --- ui/app/css/itcss/components/sections.scss | 34 +++++++++++++++---------------- 1 file changed, 17 insertions(+), 17 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 279263acd..4a256c65b 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -7,23 +7,23 @@ App Sections debug / dev */ -#app-content { - border: 2px solid green; -} - -#design-container { - position: absolute; - left: 360px; - top: -42px; - width: calc(100vw - 360px); - height: 100vh; - overflow: scroll; -} - -#design-container img { - width: 2000px; - margin-right: 600px; -} +// #app-content { +// border: 2px solid green; +// } + +// #design-container { +// position: absolute; +// left: 360px; +// top: -42px; +// width: calc(100vw - 360px); +// height: 100vh; +// overflow: scroll; +// } + +// #design-container img { +// width: 2000px; +// margin-right: 600px; +// } /* initialize */ -- cgit From 802c29c98642043cf679eb2658934e0420f8ecc7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 15:46:55 -0700 Subject: Implement hero balance UI, mobile --- ui/app/css/itcss/components/hero-balance.scss | 53 +++++++++++++++++++++++++++ ui/app/css/itcss/components/index.scss | 1 + 2 files changed, 54 insertions(+) create mode 100644 ui/app/css/itcss/components/hero-balance.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss new file mode 100644 index 000000000..8c4d886cb --- /dev/null +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -0,0 +1,53 @@ +$break-small: 575px; +$break-large: 576px; + +.hero-balance { + @media screen and (max-width: $break-small) { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + margin: 0.3em 0.9em 0.8em; + } + + @media screen and (min-width: $break-large) { + } + + .hero-balance-display { + @media screen and (max-width: $break-small) { + text-align: center; + } + + @media screen and (min-width: $break-large) { + } + + .token-amount { + font-size: 1.8em; + margin-top: 1em; + } + + .fiat-amount { + font-size: 1.1em; + margin-top: 0.8em; + color: #A0A0A0; + // TODO: colors + } + } + + .hero-balance-icon { + border-radius: 30px; + // TODO: colors + border: 1px solid #DEDEDE; + } + + .hero-balance-buttons { + @media screen and (max-width: $break-small) { + width: 100%; + margin-top: 1.3em; + } + + @media screen and (min-width: $break-large) { + } + + } +} \ 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 acd3dc108..8b6698eed 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -4,4 +4,5 @@ @import './identicon.scss'; @import './network.scss'; @import './newui-sections.scss'; +@import './hero-balance.scss'; @import './sections.scss'; -- cgit From c1b85179590e824e9af93da5c1c67ef3a5eb1d06 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 16:37:41 -0700 Subject: Normalize sidebar dimensions and adjust hero button responsiveness --- ui/app/css/itcss/components/hero-balance.scss | 65 ++++++++++++++++++++----- ui/app/css/itcss/components/newui-sections.scss | 10 +--- 2 files changed, 55 insertions(+), 20 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 8c4d886cb..f5de139b1 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -7,31 +7,50 @@ $break-large: 576px; flex-direction: column; justify-content: flex-start; align-items: center; - margin: 0.3em 0.9em 0.8em; + margin: 0.3em 0.9em 0.8em 0.9em; } @media screen and (min-width: $break-large) { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + margin: 1.5em 0.9em 0.8em 0.9em; } .hero-balance-display { + .fiat-amount { + color: #A0A0A0; + // TODO: colors + } @media screen and (max-width: $break-small) { text-align: center; + + .token-amount { + font-size: 1.8em; + margin-top: 1em; + } + + .fiat-amount { + font-size: 1.1em; + margin-top: 0.8em; + } } @media screen and (min-width: $break-large) { - } + flex-grow: 3; + margin-left: 1.2vw; - .token-amount { - font-size: 1.8em; - margin-top: 1em; - } + .token-amount { + font-size: 2.2vw; + } - .fiat-amount { - font-size: 1.1em; - margin-top: 0.8em; - color: #A0A0A0; - // TODO: colors + .fiat-amount { + font-size: 1.7vw; + margin-top: 0.3em; + } } + } .hero-balance-icon { @@ -41,12 +60,36 @@ $break-large: 576px; } .hero-balance-buttons { + button.btn-clear { + width: 81px; + height: 32px; + font-size: .7em; + background: white; + border: 1px solid; + + @media screen and (max-width: $break-small) { + width: 100%; + margin-top: 1.3em; + } + + @media screen and (min-width: $break-large) { + flex-grow: 2; + width: 5.8vw; + min-width: 75px; + height: 4.2vh; + min-height: 28px; + font-size: .7em; + } + + } + @media screen and (max-width: $break-small) { width: 100%; margin-top: 1.3em; } @media screen and (min-width: $break-large) { + flex-grow: 2; } } diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index b3ad30017..f087d2651 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -57,14 +57,6 @@ width: 85%; height: 90vh; } - - button.btn-clear { - width: 75px; - height: 32px; - font-size: .6em; - background: white; - border: 1px solid; - } } @media screen and (min-width: 769px) { @@ -100,7 +92,7 @@ } button.btn-clear { - width: 100px; + width: 93px; height: 50px; font-size: .7em; background: white; -- cgit From dc0f78c1b986a57313d465fd352235eb36bbe828 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 16:58:45 -0700 Subject: Fix font size of eth display for 576-780px vw --- ui/app/css/itcss/components/hero-balance.scss | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index f5de139b1..5bae3160d 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -1,4 +1,5 @@ $break-small: 575px; +$break-medium: 780px; $break-large: 576px; .hero-balance { @@ -42,13 +43,25 @@ $break-large: 576px; margin-left: 1.2vw; .token-amount { - font-size: 2.2vw; + font-size: 2.1vw; + + @media screen and (max-width: $break-medium) { + font-size: 3vw; + } + } .fiat-amount { font-size: 1.7vw; margin-top: 0.3em; + + @media screen and (max-width: $break-medium) { + font-size: 2.5vw; + margin-top: 0em; + } + } + } } @@ -57,6 +70,12 @@ $break-large: 576px; border-radius: 30px; // TODO: colors border: 1px solid #DEDEDE; + width: 5vw; + height: 5vw; + min-width: 45px; + min-height: 45px; + max-width: 65px; + max-height: 65px; } .hero-balance-buttons { -- cgit From ebf39831c416dab12367175d48f494ebae5c7114 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 17:13:31 -0700 Subject: Adjust size of buttons for 576-780+px range --- ui/app/css/itcss/components/hero-balance.scss | 24 +++++------------------- 1 file changed, 5 insertions(+), 19 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 5bae3160d..be5b69e0a 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -40,26 +40,14 @@ $break-large: 576px; @media screen and (min-width: $break-large) { flex-grow: 3; - margin-left: 1.2vw; + margin-left: 3%; .token-amount { - font-size: 2.1vw; - - @media screen and (max-width: $break-medium) { - font-size: 3vw; - } - + font-size: 125%; } .fiat-amount { - font-size: 1.7vw; - margin-top: 0.3em; - - @media screen and (max-width: $break-medium) { - font-size: 2.5vw; - margin-top: 0em; - } - + font-size: 105%; } } @@ -67,7 +55,7 @@ $break-large: 576px; } .hero-balance-icon { - border-radius: 30px; + border-radius: 10vw; // TODO: colors border: 1px solid #DEDEDE; width: 5vw; @@ -80,7 +68,7 @@ $break-large: 576px; .hero-balance-buttons { button.btn-clear { - width: 81px; + width: 5%; height: 32px; font-size: .7em; background: white; @@ -93,8 +81,6 @@ $break-large: 576px; @media screen and (min-width: $break-large) { flex-grow: 2; - width: 5.8vw; - min-width: 75px; height: 4.2vh; min-height: 28px; font-size: .7em; -- cgit From f06a18a09c1ed018b23776faa7da84a421d1a3ed Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 17:46:18 -0700 Subject: Adjust hero balance on mobile --- ui/app/css/itcss/components/hero-balance.scss | 57 +++++++++++++++------------ 1 file changed, 31 insertions(+), 26 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index be5b69e0a..b0766bead 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -28,13 +28,13 @@ $break-large: 576px; text-align: center; .token-amount { - font-size: 1.8em; - margin-top: 1em; + font-size: 175%; + margin-top: 15%; } .fiat-amount { - font-size: 1.1em; - margin-top: 0.8em; + font-size: 115%; + margin-top: 8.5%; } } @@ -55,46 +55,51 @@ $break-large: 576px; } .hero-balance-icon { - border-radius: 10vw; + border-radius: 30px; + width: 60px; + height: 60px; // TODO: colors border: 1px solid #DEDEDE; - width: 5vw; - height: 5vw; - min-width: 45px; - min-height: 45px; - max-width: 65px; - max-height: 65px; + + @media screen and (min-width: $break-large) { + border-radius: 10vw; + width: 5vw; + height: 5vw; + min-width: 45px; + min-height: 45px; + max-width: 65px; + max-height: 65px; + } + } .hero-balance-buttons { + @media screen and (max-width: $break-small) { + width: 100%; + height: 100px; // needed a round number to set the heights of the buttons inside + } + + @media screen and (min-width: $break-large) { + flex-grow: 2; + } + button.btn-clear { - width: 5%; - height: 32px; - font-size: .7em; + font-size: 75%; background: white; border: 1px solid; @media screen and (max-width: $break-small) { - width: 100%; - margin-top: 1.3em; + width: 22%; + height: 55%; } @media screen and (min-width: $break-large) { + width: 5%; flex-grow: 2; height: 4.2vh; min-height: 28px; font-size: .7em; } - - } - - @media screen and (max-width: $break-small) { - width: 100%; - margin-top: 1.3em; - } - - @media screen and (min-width: $break-large) { - flex-grow: 2; } } -- cgit From 403d9c52b506e31fa31b385b61fd167f81b5ff88 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 18:06:23 -0700 Subject: Add fine css tweaks to hero balance - laptop --- ui/app/css/itcss/components/hero-balance.scss | 30 +++++++++------------------ 1 file changed, 10 insertions(+), 20 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index b0766bead..61d7f7c92 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -16,14 +16,11 @@ $break-large: 576px; flex-direction: row; justify-content: flex-start; align-items: center; - margin: 1.5em 0.9em 0.8em 0.9em; + margin: 2.8em 0.9em 0.8em 0.9em; } .hero-balance-display { - .fiat-amount { - color: #A0A0A0; - // TODO: colors - } + @media screen and (max-width: $break-small) { text-align: center; @@ -35,18 +32,22 @@ $break-large: 576px; .fiat-amount { font-size: 115%; margin-top: 8.5%; + color: #A0A0A0; } } @media screen and (min-width: $break-large) { flex-grow: 3; margin-left: 3%; + justify-content: flex-start; + align-items: flex-start; .token-amount { - font-size: 125%; + font-size: 135%; } .fiat-amount { + margin-top: 0.25%; font-size: 105%; } @@ -55,22 +56,11 @@ $break-large: 576px; } .hero-balance-icon { - border-radius: 30px; - width: 60px; - height: 60px; + border-radius: 25px; + width: 45px; + height: 45px; // TODO: colors border: 1px solid #DEDEDE; - - @media screen and (min-width: $break-large) { - border-radius: 10vw; - width: 5vw; - height: 5vw; - min-width: 45px; - min-height: 45px; - max-width: 65px; - max-height: 65px; - } - } .hero-balance-buttons { -- cgit From a7017b824d108bbf81b8dbc994d451829c2413db Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 18:50:23 -0700 Subject: Refactor app-header css, including box shadow and z-index --- ui/app/css/itcss/components/header.scss | 36 +++++++++++++++++++++++++ ui/app/css/itcss/components/newui-sections.scss | 6 +++-- 2 files changed, 40 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 0525d00fc..405c45f7f 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -1,6 +1,22 @@ .app-header { + align-items: center; + visibility: visible; + background: rgb(239, 239, 239); + padding-top: 1.5vh; + height: 12vh; + max-height: 60px; + position: relative; + z-index: 12; padding: 6px 8px; // background: #EFEFEF; // $gallery + + @media screen and (max-width: 575px) { + position: fixed; + height: 34px; + width: 100%; + box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.08); + z-index: 30; + } } .app-header h1 { @@ -16,3 +32,23 @@ h2.page-subtitle { font-size: 1em; margin: 12px; } + +.network-component-wrapper { + display: flex; + flex-direction: row; + align-items: center; + + @media screen and (min-width: 576px) { + margin-bottom: 1.8em; + } +} + +.left-menu-wrapper { + display: flex; + flex-direction: row; + align-items: center; + + @media screen and (min-width: 576px) { + margin-bottom: 1.8em; + } +} \ No newline at end of file diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index f087d2651..39cdc507a 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -2,10 +2,10 @@ NewUI Container Elements */ +// Main container .main-container { position: absolute; z-index: 18; - box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); font-family: DIN OT; display: flex; flex-wrap: wrap; @@ -56,6 +56,7 @@ margin-top: 35px; width: 85%; height: 90vh; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); } } @@ -64,6 +65,7 @@ margin-top: 35px; width: 80%; height: 82vh; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); } } @@ -72,6 +74,7 @@ margin-top: 35px; width: 65%; height: 82vh; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); } } @@ -86,7 +89,6 @@ .main-container { margin-top: 35px; - // position: relative; width: 100%; height: 100%; } -- cgit From 850d2124c81ee81b98f23be1f49db13ca5e8aa27 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 19:26:52 -0700 Subject: Refactor account name css - mobile views --- ui/app/css/itcss/components/hero-balance.scss | 4 ++-- ui/app/css/itcss/components/newui-sections.scss | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 61d7f7c92..fabba9ed8 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -26,7 +26,7 @@ $break-large: 576px; .token-amount { font-size: 175%; - margin-top: 15%; + margin-top: 12.5%; } .fiat-amount { @@ -79,7 +79,7 @@ $break-large: 576px; border: 1px solid; @media screen and (max-width: $break-small) { - width: 22%; + width: 28%; height: 55%; } diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 39cdc507a..761e74561 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -101,3 +101,9 @@ border: 1px solid; } } + +// wallet view +.account-name { + font-size: 102%; + margin-left: 3%; +} -- cgit From 29662ff7b48c9cc8fc68cae6ba1e5a1f81ddf1c0 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 20:47:59 -0700 Subject: Move tx and wallet view styles to component classes --- ui/app/css/itcss/components/newui-sections.scss | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 761e74561..02acfca47 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -13,7 +13,21 @@ overflow-y: scroll; } -.sidebar { + +// tx view +.tx-view { + flex: 63.5 0 66.5%; + background: '#FFFFFF'; // TODO: add to resuable colors +} + +.wallet-view { + flex: 33.5 0 33.5%; + background: #FAFAFA, // TODO: add to reusable colors +} + +// wallet view + +.wallet-view.sidebar { flex: 1 0 230px; background: rgb(250, 250, 250); z-index: 26; -- cgit From ba50411bb2247d783667142cc5e7efff1bf839de Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 21:54:42 -0700 Subject: Position account icon, name, and caret --- ui/app/css/itcss/components/newui-sections.scss | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 02acfca47..684e998d5 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -15,17 +15,27 @@ // tx view + .tx-view { flex: 63.5 0 66.5%; - background: '#FFFFFF'; // TODO: add to resuable colors + background: #FFFFFF; // TODO: add to resuable colors } + +// wallet view + .wallet-view { flex: 33.5 0 33.5%; background: #FAFAFA, // TODO: add to reusable colors } -// wallet view +.account-options-menu { + align-items: center; + justify-content: flex-start; + margin: 5% 7%; +} + + .wallet-view.sidebar { flex: 1 0 230px; @@ -118,6 +128,13 @@ // wallet view .account-name { - font-size: 102%; - margin-left: 3%; + @media screen and (max-width: 575px) { + font-size: 102%; + margin-left: 3%; + } + + @media screen and (max-width: 575px) { + text-align: center; + } + } -- cgit From 0f140c5db59e72836ec437063314b39f33bae100 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 22:30:27 -0700 Subject: Improve positioning of caret and add reusable color for wallet view --- ui/app/css/itcss/components/newui-sections.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 684e998d5..d5ea8be1b 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -18,7 +18,7 @@ .tx-view { flex: 63.5 0 66.5%; - background: #FFFFFF; // TODO: add to resuable colors + background: $white; // TODO: add to resuable colors } @@ -26,7 +26,7 @@ .wallet-view { flex: 33.5 0 33.5%; - background: #FAFAFA, // TODO: add to reusable colors + background: $wild-sand, } .account-options-menu { -- cgit From d8fff0fc8c25d1bd0a287502ca633a44a7844911 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Sun, 6 Aug 2017 23:12:40 -0700 Subject: Opt for calculated values in absolutely positioned caret --- ui/app/css/itcss/components/hero-balance.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index fabba9ed8..f7ecf0cdf 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -3,6 +3,7 @@ $break-medium: 780px; $break-large: 576px; .hero-balance { + @media screen and (max-width: $break-small) { display: flex; flex-direction: column; @@ -90,7 +91,9 @@ $break-large: 576px; min-height: 28px; font-size: .7em; } + } } + } \ No newline at end of file -- cgit From e8ade42f2aa3af6e0091e939beef3fdf769a2606 Mon Sep 17 00:00:00 2001 From: Simon Liang Date: Tue, 8 Aug 2017 16:49:45 +0800 Subject: extracted balance component and renders to the format, also wired in the account name --- ui/app/css/itcss/components/hero-balance.scss | 23 ++++++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index f7ecf0cdf..f657e4f2c 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -20,7 +20,25 @@ $break-large: 576px; margin: 2.8em 0.9em 0.8em 0.9em; } - .hero-balance-display { + .balance-container { + + display: flex; + margin: 0; + justify-content: flex-start; + align-items: center; + + @media screen and (max-width: $break-small) { + flex-direction: column; + } + + @media screen and (min-width: $break-large) { + flex-direction: row; + flex-grow: 3; + } + + } + + .balance-display { @media screen and (max-width: $break-small) { text-align: center; @@ -38,7 +56,6 @@ $break-large: 576px; } @media screen and (min-width: $break-large) { - flex-grow: 3; margin-left: 3%; justify-content: flex-start; align-items: flex-start; @@ -56,7 +73,7 @@ $break-large: 576px; } - .hero-balance-icon { + .balance-icon { border-radius: 25px; width: 45px; height: 45px; -- cgit From 922a272e811ad104c2d7b7d4c0912a4d629ec2e7 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 14:05:19 -0700 Subject: Add note for responsive modal styles --- ui/app/css/itcss/components/modal.scss | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 ui/app/css/itcss/components/modal.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss new file mode 100644 index 000000000..74e551ab7 --- /dev/null +++ b/ui/app/css/itcss/components/modal.scss @@ -0,0 +1,5 @@ +.modal { + // first child - component + // second child - background + // boron should provide them, but we need breakpoints +} \ No newline at end of file -- cgit From 928adae1042addb8cf123879dd8ec50928ac456f Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 17:11:25 -0700 Subject: Implement modal content for buy flow - mobile view --- ui/app/css/itcss/components/index.scss | 1 + ui/app/css/itcss/components/modal.scss | 67 +++++++++++++++++++++++++++++++--- 2 files changed, 63 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 8b6698eed..2385866c1 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -3,6 +3,7 @@ @import './footer.scss'; @import './identicon.scss'; @import './network.scss'; +@import './modal.scss'; @import './newui-sections.scss'; @import './hero-balance.scss'; @import './sections.scss'; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 74e551ab7..37d866983 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -1,5 +1,62 @@ -.modal { - // first child - component - // second child - background - // boron should provide them, but we need breakpoints -} \ No newline at end of file +.modal-contents { + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + font-family: 'DIN OT'; +} + +@media screen and (max-width: 575px) { + .buy-options { + flex-direction: column; + padding: 5% 33%; + } + + div.buy-option { + display: flex; + flex-direction: column; + width: 80vw; + height: 15vh; + margin: 10px; + text-align: center; + border-radius: 6px; + border: 1px solid black; + padding: 0% 7%; + justify-content: space-around; + + div.buy-option-title { + font-size: 20px; + } + + div.buy-option-subtitle { + font-size: 16px; + } + } +} + +@media screen and (min-width: 576px) { + .buy-options { + flex-direction: row; + } + + div.buy-option { + display: flex; + flex-direction: column; + width: 150px; + height: 135px; + text-align: center; + border-radius: 6px; + border: 1px solid black; + padding: 0% 7%; + + div.buy-option-title { + font-size: 1.55em; + margin-top: 22%; + } + + div.buy-option-subtitle { + font-size: 0.95em; + margin-top: 15%; + } + } +} -- cgit From b97dcf09ac56a2dba30c62c01244100de453a1e2 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 17:51:06 -0700 Subject: Move inline styles out into explicitly named BEM classes --- ui/app/css/itcss/components/modal.scss | 66 +++++++++++++++++++++++++--------- 1 file changed, 50 insertions(+), 16 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 37d866983..4db560b21 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -1,4 +1,4 @@ -.modal-contents { +.modal-content { flex-direction: column; align-items: center; justify-content: center; @@ -7,12 +7,29 @@ } @media screen and (max-width: 575px) { - .buy-options { + .modal-content-title-wrapper { + justify-content: space-around; + width: 100%; + height: 100px; + } + + .modal-content.title { + font-size: 26px; + margin-top: 15px; + } + + .modal-content-options { flex-direction: column; padding: 5% 33%; } - div.buy-option { + .modal-content-footer { + text-transform: uppercase; + width: 100%; + height: 50px; + } + + div.modal-content-option { display: flex; flex-direction: column; width: 80vw; @@ -24,39 +41,56 @@ padding: 0% 7%; justify-content: space-around; - div.buy-option-title { + div.modal-content-option-title { font-size: 20px; } - div.buy-option-subtitle { + div.modal-content-option-subtitle { font-size: 16px; } } } @media screen and (min-width: 576px) { - .buy-options { + .modal-content-title-wrapper { + justify-content: space-around; + width: 100%; + height: 100px; + } + + .modal-content.title { + font-size: 26px; + margin-top: 15px; + } + + .modal-content-footer { + text-transform: uppercase; + width: 100%; + height: 50px; + } + + .modal-content-options { flex-direction: row; } - div.buy-option { + div.modal-content-option { display: flex; flex-direction: column; - width: 150px; - height: 135px; + width: 20vw; + height: 18vw; text-align: center; border-radius: 6px; border: 1px solid black; - padding: 0% 7%; + margin: 0px .5vw; + justify-content: space-around; - div.buy-option-title { - font-size: 1.55em; - margin-top: 22%; + div.modal-content-option-title { + font-size: 20px; } - div.buy-option-subtitle { - font-size: 0.95em; - margin-top: 15%; + div.modal-content-option-subtitle { + font-size: 16px; + padding: 0px 20px; } } } -- cgit From 3072d2d178e959dbf82cb9e86614c867f1885272 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 17:57:47 -0700 Subject: Add minor positioning tweaks for buy modal, laptop view --- ui/app/css/itcss/components/modal.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 4db560b21..7fc7a6ca6 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -13,7 +13,7 @@ height: 100px; } - .modal-content.title { + .modal-content-title { font-size: 26px; margin-top: 15px; } @@ -55,10 +55,10 @@ .modal-content-title-wrapper { justify-content: space-around; width: 100%; - height: 100px; + height: 110px; } - .modal-content.title { + .modal-content-title { font-size: 26px; margin-top: 15px; } @@ -71,6 +71,7 @@ .modal-content-options { flex-direction: row; + margin: 20px 0px } div.modal-content-option { @@ -92,5 +93,9 @@ font-size: 16px; padding: 0px 20px; } + + div.modal-content-footer { + margin-top: 8vh; + } } } -- cgit From eab5718a40e121c6b8597df6968c25733e794c6f Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 8 Aug 2017 18:12:50 -0700 Subject: Add an additional font-size breakpoint for buy modal on the largest screens --- ui/app/css/itcss/components/modal.scss | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 7fc7a6ca6..7f36d1d2b 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -87,11 +87,29 @@ div.modal-content-option-title { font-size: 20px; + + @media screen and (max-width: 679px) { + font-size: 14px; + } + + @media screen and (min-width: 1281px) { + font-size: 26px; + } } div.modal-content-option-subtitle { font-size: 16px; - padding: 0px 20px; + padding: 0px 10px; + height: 25%; + + @media screen and (max-width: 679px) { + font-size: 10px; + } + + @media screen and (min-width: 1281px) { + font-size: 20px; + } + } div.modal-content-footer { -- cgit From cba50818c2209de95e75a225e418df79fb727045 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Wed, 9 Aug 2017 15:48:12 -0700 Subject: Improve layout of buy buttons by tweaking text styles --- ui/app/css/itcss/components/modal.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 7f36d1d2b..cfe1cb366 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -104,12 +104,21 @@ @media screen and (max-width: 679px) { font-size: 10px; + padding: 0px 10px; + margin-bottom: 5px; + line-height: 15px; + } + + @media screen and (min-width: 680px) { + font-size: 14px; + padding: 0px 4px; + margin-bottom: 2px; } @media screen and (min-width: 1281px) { font-size: 20px; + padding: 0px 0px; } - } div.modal-content-footer { -- cgit From f9432c59826d95dbdaf70a3da4a8a453137efb11 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 19:55:01 -0700 Subject: Move Txs list item styles into classes --- ui/app/css/itcss/components/transaction-list.scss | 44 +++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 ui/app/css/itcss/components/transaction-list.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss new file mode 100644 index 000000000..ff482fd4a --- /dev/null +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -0,0 +1,44 @@ +.tx-list-item-wrapper { + align-items: stretch; + justify-content: 'flex-start', + margin: '0.6em 1.3em 0.6em 1.3em', + overflow: 'scroll', +} + +.tx-list-date-wrapper { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 'auto'; + margin-top: '0.3em'; +} + +.tx-list-content-wrapper { + alignItems: 'stretch'; +} + +.tx-list-date { + color: $dusty-gray; + font-size: 8px; +} + +.tx-list-identicon-wrapper { + flex: 1 1 auto; +} + +.tx-list-account-wrapper { + flex: 3 3 auto; + font-size: 12px; +} + +.tx-list-status-wrapper { + flex: 5 5 auto; +} + +.tx-list-status { + color: $dusty-gray; + font-size: 12px; +} + +.tx-list-details-wrapper { + flex: 2 2 auto; +} \ No newline at end of file -- cgit From e31c2982888fcfef5383124db4ca606644a29044 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 20:52:22 -0700 Subject: Implement widescreen layout for tx list --- ui/app/css/itcss/components/index.scss | 1 + ui/app/css/itcss/components/transaction-list.scss | 51 +++++++++++++++++++---- 2 files changed, 43 insertions(+), 9 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 2385866c1..e5ba0babf 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -6,4 +6,5 @@ @import './modal.scss'; @import './newui-sections.scss'; @import './hero-balance.scss'; +@import './transaction-list.scss'; @import './sections.scss'; diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index ff482fd4a..700214e30 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -1,44 +1,77 @@ +.tx-list-header { + margin: 1.8em 1.3em 1.8em 1.3em; +} + +.tx-list-content-divider { + margin: 0.1em 1.3em 0.1em 1.3em; + height: 1px; + background: rgb(231, 231, 231); + flex: 0 0 1px; +} + +.tx-list-container { + height: 87.5%; + overflow-y: scroll; +} + .tx-list-item-wrapper { + flex: 0 0 70px; align-items: stretch; - justify-content: 'flex-start', - margin: '0.6em 1.3em 0.6em 1.3em', - overflow: 'scroll', + justify-content: flex-start; + margin: 0em 1.3em 0em 1.3em; } .tx-list-date-wrapper { flex-grow: 1; flex-shrink: 1; - flex-basis: 'auto'; - margin-top: '0.3em'; + flex-basis: auto; + margin-top: 6px; } .tx-list-content-wrapper { - alignItems: 'stretch'; + align-items: stretch; + margin-bottom: 8px; } .tx-list-date { color: $dusty-gray; - font-size: 8px; + font-size: 14px; } .tx-list-identicon-wrapper { + align-self: center; flex: 1 1 auto; + margin-left: 3px; } .tx-list-account-wrapper { flex: 3 3 auto; - font-size: 12px; + align-self: center; +} + +.tx-list-account { + font-size: 16px; } .tx-list-status-wrapper { + align-self: center; flex: 5 5 auto; } .tx-list-status { color: $dusty-gray; - font-size: 12px; + font-size: 16px; } .tx-list-details-wrapper { + align-self: center; flex: 2 2 auto; +} + +.tx-list-value { + font-size: 16px; +} + +.tx-list-fiat-value { + font-size: 12px; } \ No newline at end of file -- cgit From 7a664a7f720f43679dad6f8857790af84b8b7da6 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 22:16:42 -0700 Subject: Improve text positioning on mobile view --- ui/app/css/itcss/components/hero-balance.scss | 4 -- ui/app/css/itcss/components/transaction-list.scss | 72 ++++++++++++++++------- 2 files changed, 50 insertions(+), 26 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index f657e4f2c..2dd9bf973 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -1,7 +1,3 @@ -$break-small: 575px; -$break-medium: 780px; -$break-large: 576px; - .hero-balance { @media screen and (max-width: $break-small) { diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 700214e30..41543c347 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -18,14 +18,26 @@ flex: 0 0 70px; align-items: stretch; justify-content: flex-start; - margin: 0em 1.3em 0em 1.3em; + @media screen and (max-width: $break-small) { + margin: 0em 1.3em 0.95em 1.3em; + } + + @media screen and (min-width: $break-large) { + margin: 0em 1.3em 0em 1.3em; + } } .tx-list-date-wrapper { flex-grow: 1; flex-shrink: 1; flex-basis: auto; - margin-top: 6px; + @media screen and (max-width: $break-small) { + margin-top: 6px; + margin-bottom: 20px; + } + @media screen and (min-width: $break-large) { + margin-top: 6px; + } } .tx-list-content-wrapper { @@ -44,34 +56,50 @@ margin-left: 3px; } -.tx-list-account-wrapper { - flex: 3 3 auto; - align-self: center; -} +.tx-list-account-and-status-wrapper { + display: flex; + flex: 8 8 auto; -.tx-list-account { - font-size: 16px; -} + @media screen and (max-width: $break-small) { + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + align-self: center; + } -.tx-list-status-wrapper { - align-self: center; - flex: 5 5 auto; -} + @media screen and (min-width: $break-large) { + flex-direction: row; + justify-content: flex-start; + align-items: center; -.tx-list-status { - color: $dusty-gray; - font-size: 16px; + .tx-list-account-wrapper { + flex: 2 2 auto; + } + + .tx-list-status-wrapper { + flex: 6 6 auto; + } + } + + .tx-list-account { + font-size: 16px; + } + + .tx-list-status { + color: $dusty-gray; + font-size: 16px; + } } .tx-list-details-wrapper { align-self: center; flex: 2 2 auto; -} -.tx-list-value { - font-size: 16px; -} + .tx-list-value { + font-size: 16px; + } -.tx-list-fiat-value { - font-size: 12px; + .tx-list-fiat-value { + font-size: 12px; + } } \ No newline at end of file -- cgit From 58b61eb1fc2d4add59f6225ddf4df09fdfa5b92b Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 22:47:56 -0700 Subject: Add UI tweaks, including separation of overflow logic for mobile (full-height) vs laptop (tx-view-only) --- ui/app/css/itcss/components/hero-balance.scss | 4 +- ui/app/css/itcss/components/transaction-list.scss | 46 +++++++++++++++++++---- 2 files changed, 42 insertions(+), 8 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 2dd9bf973..463a124fb 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -5,7 +5,9 @@ flex-direction: column; justify-content: flex-start; align-items: center; - margin: 0.3em 0.9em 0.8em 0.9em; + margin: 0.3em 0.9em 0em 0.9em; + height: 80vh; + max-height: 225px; } @media screen and (min-width: $break-large) { diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 41543c347..02409fb3e 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -1,23 +1,54 @@ -.tx-list-header { - margin: 1.8em 1.3em 1.8em 1.3em; +.tx-list-container { + height: 87.5%; + @media screen and (min-width: $break-large) { + overflow-y: scroll; + } +} + +@media screen and (max-width: $break-small) { + .tx-list-header-wrapper { + margin-top: 1em; + margin-bottom: 1.4em; + justify-content: center; + } + + .tx-list-header { + align-self: center; + font-size: 12px; + color: $dusty-gray; + } +} + +@media screen and (min-width: $break-large) { + .tx-list-header-wrapper { + flex: 0 0 55px; + } + + .tx-list-header { + font-size: 16px; + margin: 1.8em 1.3em 1.8em 1.3em; + } } .tx-list-content-divider { - margin: 0.1em 1.3em 0.1em 1.3em; height: 1px; background: rgb(231, 231, 231); flex: 0 0 1px; -} -.tx-list-container { - height: 87.5%; - overflow-y: scroll; + @media screen and (max-width: $break-small) { + margin: 0.1em 0em 0.1em 0em; + } + + @media screen and (min-width: $break-large) { + margin: 0.1em 1.3em 0.1em 1.3em; + } } .tx-list-item-wrapper { flex: 0 0 70px; align-items: stretch; justify-content: flex-start; + @media screen and (max-width: $break-small) { margin: 0em 1.3em 0.95em 1.3em; } @@ -31,6 +62,7 @@ flex-grow: 1; flex-shrink: 1; flex-basis: auto; + @media screen and (max-width: $break-small) { margin-top: 6px; margin-bottom: 20px; -- cgit From 8a39941d9a4c5b6fd4a3715394fec10c400c0f34 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Thu, 10 Aug 2017 23:21:39 -0700 Subject: Cleanup SCSS and improve organization of color vars --- ui/app/css/itcss/components/hero-balance.scss | 12 ++-------- ui/app/css/itcss/components/identicon.scss | 7 ------ ui/app/css/itcss/components/index.scss | 1 - ui/app/css/itcss/components/newui-sections.scss | 13 +++++------ ui/app/css/itcss/components/sections.scss | 31 +++++++++++-------------- 5 files changed, 21 insertions(+), 43 deletions(-) delete mode 100644 ui/app/css/itcss/components/identicon.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 463a124fb..72333fb47 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -19,7 +19,6 @@ } .balance-container { - display: flex; margin: 0; justify-content: flex-start; @@ -33,7 +32,6 @@ flex-direction: row; flex-grow: 3; } - } .balance-display { @@ -66,17 +64,14 @@ margin-top: 0.25%; font-size: 105%; } - } - } .balance-icon { border-radius: 25px; width: 45px; height: 45px; - // TODO: colors - border: 1px solid #DEDEDE; + border: 1px solid $alto; } .hero-balance-buttons { @@ -106,9 +101,6 @@ min-height: 28px; font-size: .7em; } - } - } - -} \ No newline at end of file +} diff --git a/ui/app/css/itcss/components/identicon.scss b/ui/app/css/itcss/components/identicon.scss deleted file mode 100644 index 2f2de6ed8..000000000 --- a/ui/app/css/itcss/components/identicon.scss +++ /dev/null @@ -1,7 +0,0 @@ -.identicon { - height: 46px; - width: 46px; - background-size: cover; - border-radius: 100%; - border: 3px solid gray; -} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index e5ba0babf..de248de79 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -1,7 +1,6 @@ @import './buttons.scss'; @import './header.scss'; @import './footer.scss'; -@import './identicon.scss'; @import './network.scss'; @import './modal.scss'; @import './newui-sections.scss'; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index d5ea8be1b..a9167dfb8 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -2,6 +2,10 @@ NewUI Container Elements */ +// Component Colors +$tx-view-bg: $white; +$wallet-view-bg: $wild-sand; + // Main container .main-container { position: absolute; @@ -13,20 +17,18 @@ overflow-y: scroll; } - // tx view .tx-view { flex: 63.5 0 66.5%; - background: $white; // TODO: add to resuable colors + background: $tx-view-bg; } - // wallet view .wallet-view { flex: 33.5 0 33.5%; - background: $wild-sand, + background: $wallet-view-bg, } .account-options-menu { @@ -35,8 +37,6 @@ margin: 5% 7%; } - - .wallet-view.sidebar { flex: 1 0 230px; background: rgb(250, 250, 250); @@ -136,5 +136,4 @@ @media screen and (max-width: 575px) { text-align: center; } - } diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 965abbe28..68f81d143 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -3,12 +3,7 @@ App Sections TODO: Move into separate files. */ -/* -debug / dev -*/ - /* initialize */ - textarea.twelve-word-phrase { padding: 12px; width: 300px; @@ -57,6 +52,7 @@ textarea.twelve-word-phrase { opacity: 0.0; transition: opacity 400ms ease-in, transform 400ms ease-in; } + .lock.unlocked { transform: scale(1); opacity: 1; @@ -67,15 +63,18 @@ textarea.twelve-word-phrase { transform: scaleX(1) translateX(0); transition: transform 250ms ease-in; } + .lock.unlocked .lock-top { transform: scaleX(-1) translateX(-12px); transition: transform 250ms ease-in; } + .lock.unlocked:hover { border-radius: 4px; background: #e5e5e5; border: 1px solid #b1b1b1; } + .lock.unlocked:active { background: #c3c3c3; } @@ -105,28 +104,35 @@ textarea.twelve-word-phrase { .editable-label{ display: flex; } + /* Webkit */ + .unlock-screen input::-webkit-input-placeholder { text-align: center; font-size: 1.2em; } + /* Firefox 18- */ + .unlock-screen input:-moz-placeholder { text-align: center; font-size: 1.2em; } + /* Firefox 19+ */ + .unlock-screen input::-moz-placeholder { text-align: center; font-size: 1.2em; } + /* IE */ + .unlock-screen input:-ms-input-placeholder { text-align: center; font-size: 1.2em; } - /* accounts */ .accounts-section { @@ -344,18 +350,6 @@ textarea.twelve-word-phrase { color: rgba(247, 134, 28, 1); } -.radio-titles-subtext { - -} - -.selected-exchange { - -} - -.buy-radio { - -} - .eth-warning{ transition: opacity 400ms ease-in, transform 400ms ease-in; } @@ -380,6 +374,7 @@ textarea.twelve-word-phrase { border-radius: 2px; } + .input-container:hover .buy-inputs{ box-sizing: inherit; border: solid; -- cgit From 0fab1b54820aec01d3b4e7c2c351da57769647ee Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 11 Aug 2017 00:31:06 -0700 Subject: Implement responsive wallet balances --- ui/app/css/itcss/components/index.scss | 4 ++ ui/app/css/itcss/components/newui-sections.scss | 17 ++++++- ui/app/css/itcss/components/wallet-balance.scss | 63 +++++++++++++++++++++++++ 3 files changed, 83 insertions(+), 1 deletion(-) create mode 100644 ui/app/css/itcss/components/wallet-balance.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index de248de79..1b0a41714 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -4,6 +4,10 @@ @import './network.scss'; @import './modal.scss'; @import './newui-sections.scss'; + +// Balances @import './hero-balance.scss'; +@import './wallet-balance.scss'; + @import './transaction-list.scss'; @import './sections.scss'; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index a9167dfb8..01c69f818 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -28,7 +28,22 @@ $wallet-view-bg: $wild-sand; .wallet-view { flex: 33.5 0 33.5%; - background: $wallet-view-bg, + background: $wallet-view-bg; + overflow-y: scroll; +} + +.wallet-view-title-wrapper { + height: 25px; +} + +.wallet-view-title { + margin-left: 15px; + font-size: 16px; + + // No title on mobile + @media screen and (max-width: 575px) { + display: none; + } } .account-options-menu { diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss new file mode 100644 index 000000000..03cc38a03 --- /dev/null +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -0,0 +1,63 @@ +$wallet-balance-bg: $gallery; +$wallet-balance-breakpoint: 890px; +$wallet-balance-breakpoint-range: + "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; + +.wallet-balance { + background: inherit; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + .balance-container { + display: flex; + justify-content: flex-start; + align-items: center; + margin: 20px 24px; + flex-direction: row; + flex-grow: 3; + + @media #{$wallet-balance-breakpoint-range} { + margin: 10% 4%; + } + } + + .balance-display { + margin-left: 15px; + justify-content: flex-start; + align-items: flex-start; + + .token-amount { + font-size: 135%; + } + + .fiat-amount { + margin-top: 0.25%; + font-size: 105%; + } + + @media #{$wallet-balance-breakpoint-range} { + margin-left: 4%; + + .token-amount { + font-size: 105%; + } + + .fiat-amount { + font-size: 95%; + } + } + } + + .balance-icon { + border-radius: 25px; + width: 45px; + height: 45px; + border: 1px solid $alto; + } +} + +.wallet-balance-wrapper-active { + background: $wallet-balance-bg; +} \ No newline at end of file -- cgit From f23d8c7393732ba2ed3c98f7eead9beb02cd0e92 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 11 Aug 2017 00:42:09 -0700 Subject: Allow fullscreen scrolling on mobile view, while retaining in-window scroll for laptop --- ui/app/css/itcss/components/newui-sections.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 01c69f818..edf5d0966 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -29,7 +29,10 @@ $wallet-view-bg: $wild-sand; .wallet-view { flex: 33.5 0 33.5%; background: $wallet-view-bg; - overflow-y: scroll; + + @media screen and (min-width: 576px) { + overflow-y: scroll; + } } .wallet-view-title-wrapper { @@ -129,7 +132,6 @@ $wallet-view-bg: $wild-sand; .main-container { margin-top: 35px; width: 100%; - height: 100%; } button.btn-clear { -- cgit From 9954c95b4a582d13c3b184b4e18f240865bc45f9 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 11 Aug 2017 00:42:44 -0700 Subject: [WIP] Begin fixing responsive layout with many wallets --- ui/app/css/itcss/components/transaction-list.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 02409fb3e..ca32508b8 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -7,8 +7,12 @@ @media screen and (max-width: $break-small) { .tx-list-header-wrapper { - margin-top: 1em; - margin-bottom: 1.4em; + margin-top: 0.2em; + margin-bottom: 0.6em; + // TODO: Resolve Layout Conflicst in Wallet View + // - This fixes txlist "transactions" title dispay + // margin-top: 0.2em; + // margin-bottom: 0.6em; justify-content: center; } -- cgit From 9b48e0aa53ff73fe526c4788c929b0ffe5a2d499 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Fri, 11 Aug 2017 09:17:14 -0700 Subject: Implement infinite scrolls (no lazy loading) for wallet view --- ui/app/css/itcss/components/newui-sections.scss | 25 +++++++++++++++++-------- ui/app/css/itcss/components/wallet-balance.scss | 4 ++++ 2 files changed, 21 insertions(+), 8 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index edf5d0966..afda29cd5 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -24,19 +24,25 @@ $wallet-view-bg: $wild-sand; background: $tx-view-bg; } -// wallet view +// wallet view and sidebar .wallet-view { + display: flex; + flex-direction: column; flex: 33.5 0 33.5%; background: $wallet-view-bg; @media screen and (min-width: 576px) { overflow-y: scroll; } + + .wallet-view-account-details { + flex: 0 0 150px; + } } .wallet-view-title-wrapper { - height: 25px; + flex: 0 0 25px; } .wallet-view-title { @@ -49,12 +55,6 @@ $wallet-view-bg: $wild-sand; } } -.account-options-menu { - align-items: center; - justify-content: flex-start; - margin: 5% 7%; -} - .wallet-view.sidebar { flex: 1 0 230px; background: rgb(250, 250, 250); @@ -85,6 +85,8 @@ $wallet-view-bg: $wild-sand; background-color: rgba(0, 0, 0, 0.3); } +// main-container media queries + @media screen and (min-width: 576px) { .lap-visible { display: flex; @@ -154,3 +156,10 @@ $wallet-view-bg: $wild-sand; text-align: center; } } + +// account options dropdown +.account-options-menu { + align-items: center; + justify-content: flex-start; + margin: 5% 7%; +} \ No newline at end of file diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index 03cc38a03..e1b37cb1f 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -3,6 +3,10 @@ $wallet-balance-breakpoint: 890px; $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; +.wallet-balance-wrapper { + flex: 0 0 80px +} + .wallet-balance { background: inherit; display: flex; -- cgit From 2eadf72fb772b5b6bd32f04c9d439cc0f1ab0453 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 14 Aug 2017 10:31:27 +0200 Subject: Lint and cleanup all scss --- ui/app/css/itcss/components/buttons.scss | 20 ++-- ui/app/css/itcss/components/header.scss | 14 ++- ui/app/css/itcss/components/hero-balance.scss | 11 +- ui/app/css/itcss/components/index.scss | 8 ++ ui/app/css/itcss/components/modal.scss | 16 +-- ui/app/css/itcss/components/network.scss | 2 +- ui/app/css/itcss/components/newui-sections.scss | 29 ++--- ui/app/css/itcss/components/sections.scss | 124 +++++++++++----------- ui/app/css/itcss/components/transaction-list.scss | 22 ++-- ui/app/css/itcss/components/wallet-balance.scss | 9 +- 10 files changed, 132 insertions(+), 123 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 114a2f892..9916db488 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -3,11 +3,11 @@ */ .btn-green { - background-color: #02C9B1; // TODO: reusable color in colors.css + background-color: #02c9b1; // TODO: reusable color in colors.css } button.btn-clear { - background: white; + background: $white; border: 1px solid; } @@ -46,9 +46,9 @@ button.btn-clear { button.primary { padding: 8px 12px; - background: #F7861C; - box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); - color: white; + background: #f7861c; + box-shadow: 0 3px 6px rgba(247, 134, 28, .36); + color: $white; font-size: 1.1em; font-family: 'Montserrat Regular'; text-transform: uppercase; @@ -57,8 +57,8 @@ button.primary { .btn-light { padding: 8px 12px; // background: #FFFFFF; // $bg-white - box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); - color: #585D67; // TODO: make reusable light button color + box-shadow: 0 3px 6px rgba(247, 134, 28, .36); + color: #585d67; // TODO: make reusable light button color font-size: 1.1em; font-family: 'Montserrat Regular'; text-transform: uppercase; @@ -66,14 +66,14 @@ button.primary { line-height: 20px; border-radius: 2px; border: 1px solid #979797; // #TODO: make reusable light border color - opacity: 0.5; + opacity: .5; } // TODO: cleanup: not used anywhere button.btn-thin { border: 1px solid; - border-color: #4D4D4D; - color: #4D4D4D; + border-color: #4d4d4d; + color: #4d4d4d; background: rgb(255, 174, 41); border-radius: 4px; min-width: 200px; diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 405c45f7f..9434d0386 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -1,20 +1,18 @@ .app-header { align-items: center; visibility: visible; - background: rgb(239, 239, 239); - padding-top: 1.5vh; + background: $gallery; + padding: 6px 8px; height: 12vh; max-height: 60px; position: relative; z-index: 12; - padding: 6px 8px; - // background: #EFEFEF; // $gallery @media screen and (max-width: 575px) { position: fixed; height: 34px; width: 100%; - box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.08); + box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08); z-index: 30; } } @@ -22,13 +20,13 @@ .app-header h1 { font-family: 'Montserrat Regular'; text-transform: uppercase; - color: #22232C; // $shark + color: #22232c; // $shark } h2.page-subtitle { font-family: 'Montserrat Regular'; text-transform: uppercase; - color: #AEAEAE; + color: #aeaeae; font-size: 1em; margin: 12px; } @@ -51,4 +49,4 @@ h2.page-subtitle { @media screen and (min-width: 576px) { margin-bottom: 1.8em; } -} \ No newline at end of file +} diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 72333fb47..ad7f5952f 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -5,7 +5,7 @@ flex-direction: column; justify-content: flex-start; align-items: center; - margin: 0.3em 0.9em 0em 0.9em; + margin: .3em .9em 0; height: 80vh; max-height: 225px; } @@ -15,7 +15,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - margin: 2.8em 0.9em 0.8em 0.9em; + margin: 2.8em .9em .8em; } .balance-container { @@ -47,7 +47,7 @@ .fiat-amount { font-size: 115%; margin-top: 8.5%; - color: #A0A0A0; + color: #a0a0a0; } } @@ -61,7 +61,7 @@ } .fiat-amount { - margin-top: 0.25%; + margin-top: .25%; font-size: 105%; } } @@ -75,6 +75,7 @@ } .hero-balance-buttons { + @media screen and (max-width: $break-small) { width: 100%; height: 100px; // needed a round number to set the heights of the buttons inside @@ -86,7 +87,7 @@ button.btn-clear { font-size: 75%; - background: white; + background: $white; border: 1px solid; @media screen and (max-width: $break-small) { diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 1b0a41714..291e09007 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -1,13 +1,21 @@ @import './buttons.scss'; + @import './header.scss'; + @import './footer.scss'; + @import './network.scss'; + @import './modal.scss'; + @import './newui-sections.scss'; // Balances @import './hero-balance.scss'; + @import './wallet-balance.scss'; +// Tx List and Sections @import './transaction-list.scss'; + @import './sections.scss'; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index cfe1cb366..8bf7cd44f 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -37,7 +37,7 @@ margin: 10px; text-align: center; border-radius: 6px; - border: 1px solid black; + border: 1px solid $black; padding: 0% 7%; justify-content: space-around; @@ -71,7 +71,7 @@ .modal-content-options { flex-direction: row; - margin: 20px 0px + margin: 20px 0; } div.modal-content-option { @@ -81,8 +81,8 @@ height: 18vw; text-align: center; border-radius: 6px; - border: 1px solid black; - margin: 0px .5vw; + border: 1px solid $black; + margin: 0 .5vw; justify-content: space-around; div.modal-content-option-title { @@ -99,25 +99,25 @@ div.modal-content-option-subtitle { font-size: 16px; - padding: 0px 10px; + padding: 0 10px; height: 25%; @media screen and (max-width: 679px) { font-size: 10px; - padding: 0px 10px; + padding: 0 10px; margin-bottom: 5px; line-height: 15px; } @media screen and (min-width: 680px) { font-size: 14px; - padding: 0px 4px; + padding: 0 4px; margin-bottom: 2px; } @media screen and (min-width: 1281px) { font-size: 20px; - padding: 0px 0px; + padding: 0; } } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 75c3a68d8..aea5063f0 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -1,7 +1,7 @@ .network-indicator { display: flex; align-items: center; - font-size: 0.6em; + font-size: .6em; } .network-name { diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index afda29cd5..7daf72bf2 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -10,7 +10,7 @@ $wallet-view-bg: $wild-sand; .main-container { position: absolute; z-index: 18; - font-family: DIN OT; + font-family: "DIN OT"; display: flex; flex-wrap: wrap; align-items: stretch; @@ -61,14 +61,14 @@ $wallet-view-bg: $wild-sand; z-index: 26; position: fixed; top: 35px; - left: 0px; - right: 0px; - bottom: 0px; + left: 0; + right: 0; + bottom: 0; opacity: 1; visibility: visible; will-change: transform; overflow-y: auto; - box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 4px; + box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px; width: 85%; height: 100%; } @@ -77,12 +77,12 @@ $wallet-view-bg: $wild-sand; z-index: 25; position: fixed; top: 35px; - left: 0px; - right: 0px; - bottom: 0px; + left: 0; + right: 0; + bottom: 0; opacity: 1; visibility: visible; - background-color: rgba(0, 0, 0, 0.3); + background-color: rgba(0, 0, 0, .3); } // main-container media queries @@ -100,7 +100,7 @@ $wallet-view-bg: $wild-sand; margin-top: 35px; width: 85%; height: 90vh; - box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); + box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } } @@ -109,7 +109,7 @@ $wallet-view-bg: $wild-sand; margin-top: 35px; width: 80%; height: 82vh; - box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); + box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } } @@ -118,7 +118,7 @@ $wallet-view-bg: $wild-sand; margin-top: 35px; width: 65%; height: 82vh; - box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); + box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } } @@ -140,13 +140,14 @@ $wallet-view-bg: $wild-sand; width: 93px; height: 50px; font-size: .7em; - background: white; + background: $white; border: 1px solid; } } // wallet view .account-name { + @media screen and (max-width: 575px) { font-size: 102%; margin-left: 3%; @@ -162,4 +163,4 @@ $wallet-view-bg: $wild-sand; align-items: center; justify-content: flex-start; margin: 5% 7%; -} \ No newline at end of file +} diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 68f81d143..5f0a034d8 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -1,3 +1,7 @@ +// Old scss, do not lint - clean up later +/* stylelint-disable */ + + /* App Sections TODO: Move into separate files. @@ -9,14 +13,14 @@ textarea.twelve-word-phrase { width: 300px; height: 140px; font-size: 16px; - background: white; + background: $white; resize: none; } .initialize-screen hr { width: 60px; margin: 12px; - border-color: #F7861C; + border-color: #f7861c; border-style: solid; } @@ -35,11 +39,11 @@ textarea.twelve-word-phrase { /* unlock */ .error { - color: #E20202; + color: #e20202; } .warning { - color: #FFAE00; + color: #ffae00; } .lock { @@ -49,7 +53,7 @@ textarea.twelve-word-phrase { .lock.locked { transform: scale(1.5); - opacity: 0.0; + opacity: 0; transition: opacity 400ms ease-in, transform 400ms ease-in; } @@ -96,12 +100,13 @@ textarea.twelve-word-phrase { width: 260px; } -.sizing-input{ +.sizing-input { font-size: 14px; height: 30px; padding-left: 5px; } -.editable-label{ + +.editable-label { display: flex; } @@ -140,7 +145,7 @@ textarea.twelve-word-phrase { } .accounts-section .horizontal-line { - margin: 0px 18px; + margin: 0 18px; } .accounts-list-option { @@ -157,7 +162,7 @@ textarea.twelve-word-phrase { } .unconftx-link .fa-arrow-right { - margin: 0px -8px 0px 8px; + margin: 0 -8px 0px 8px; } /* identity panel */ @@ -184,7 +189,7 @@ textarea.twelve-word-phrase { .identity-panel i { margin-top: 32px; margin-right: 6px; - color: #B9B9B9; + color: #b9b9b9; } .identity-panel .arrow-right { @@ -195,34 +200,33 @@ textarea.twelve-word-phrase { } .identity-copy.flex-column { - flex: 0.25 0 auto; + flex: .25 0 auto; justify-content: center; } /* accounts screen */ .identity-section { - } .identity-section .identity-panel { - background: #E9E9E9; - border-bottom: 1px solid #B1B1B1; + background: #e9e9e9; + border-bottom: 1px solid #b1b1b1; cursor: pointer; } .identity-section .identity-panel.selected { - background: white; - color: #F3C83E; + background: $white; + color: #f3c83e; } .identity-section .identity-panel.selected .identicon { - border-color: orange; + border-color: $orange; } .identity-section .accounts-list-option:hover, .identity-section .accounts-list-option.selected { - background:white; + background: $white; } /* account detail screen */ @@ -238,15 +242,14 @@ textarea.twelve-word-phrase { flex-grow: 10; } -.name-label{ - +.name-label { } .unapproved-tx-icon { height: 16px; width: 16px; background: rgb(47, 174, 244); - border-color: #AEAEAE; + border-color: $silver-chalice; border-radius: 13px; } @@ -262,7 +265,7 @@ textarea.twelve-word-phrase { margin-bottom: 2px; font-size: 11px; text-rendering: geometricPrecision; - color: #F7861C; + color: #f7861c; } .name-label:hover .edit-text { @@ -276,8 +279,8 @@ textarea.twelve-word-phrase { margin: 12px; margin-bottom: 24px; border-radius: 4px; - border: 2px solid #F3C83E; - background: #FAF6F0; + border: 2px solid #f3c83e; + background: #faf6f0; } /* Send Screen */ @@ -294,25 +297,25 @@ textarea.twelve-word-phrase { /* Ether Balance Widget */ .ether-balance-amount { - color: #F7861C; + color: #f7861c; } .ether-balance-label { - color: #ABA9AA; + color: #aba9aa; } /* Info screen */ -.info-gray{ +.info-gray { font-family: 'Montserrat Regular'; text-transform: uppercase; - color: #AEAEAE; + color: $silver-chalice; } -.icon-size{ +.icon-size { width: 20px; } -.info{ +.info { font-family: 'Montserrat Regular', Arial; padding-bottom: 10px; display: inline-block; @@ -325,7 +328,6 @@ textarea.twelve-word-phrase { align-items: center; } - .custom-radio-selected { width: 17px; height: 17px; @@ -334,7 +336,7 @@ textarea.twelve-word-phrase { border-radius: 15px; border-width: 5px; background: rgba(247, 134, 28, 1); - border-color: #F7F7F7; + border-color: #f7f7f7; } .custom-radio-inactive { @@ -343,26 +345,26 @@ textarea.twelve-word-phrase { border: solid; border-width: 1px; border-radius: 24px; - border-color: #AEAEAE; + border-color: $silver-chalice; } .radio-titles { color: rgba(247, 134, 28, 1); } -.eth-warning{ +.eth-warning { transition: opacity 400ms ease-in, transform 400ms ease-in; } -.buy-subview{ +.buy-subview { transition: opacity 400ms ease-in, transform 400ms ease-in; } -.input-container:hover .edit-text{ +.input-container:hover .edit-text { visibility: visible; } -.buy-inputs{ +.buy-inputs { font-family: 'Montserrat Light'; font-size: 13px; height: 20px; @@ -370,34 +372,32 @@ textarea.twelve-word-phrase { box-sizing: border-box; border: solid; border-color: transparent; - border-width: 0.5px; + border-width: .5px; border-radius: 2px; - } -.input-container:hover .buy-inputs{ +.input-container:hover .buy-inputs { box-sizing: inherit; border: solid; - border-color: #F7861C; - border-width: 0.5px; + border-color: #f7861c; + border-width: .5px; border-radius: 2px; } -.buy-inputs:focus{ +.buy-inputs:focus { border: solid; - border-color: #F7861C; - border-width: 0.5px; + border-color: #f7861c; + border-width: .5px; border-radius: 2px; } .activeForm { - background: #F7F7F7; + background: #f7f7f7; border: none; border-radius: 8px 8px 0px 0px; width: 50%; text-align: center; padding-bottom: 4px; - } .inactiveForm { @@ -416,12 +416,12 @@ textarea.twelve-word-phrase { width: 118px; height: 42px; padding: 1px; - color: #4D4D4D; + color: #4d4d4d; } -.marketinfo{ +.marketinfo { font-family: 'Montserrat light'; - color: #AEAEAE; + color: $silver-chalice; font-size: 15px; line-height: 17px; } @@ -436,25 +436,25 @@ textarea.twelve-word-phrase { overflow: scroll; } -.icon-control .fa-refresh{ +.icon-control .fa-refresh { visibility: hidden; } -.icon-control:hover .fa-refresh{ +.icon-control:hover .fa-refresh { visibility: visible; } -.icon-control:hover .fa-chevron-right{ +.icon-control:hover .fa-chevron-right { visibility: hidden; } .inactive { - color: #AEAEAE; + color: $silver-chalice; } -.inactive button{ - background: #AEAEAE; - color: white; +.inactive button { + background: $silver-chalice; + color: $white; } .ellip-address { @@ -467,21 +467,23 @@ textarea.twelve-word-phrase { } .qr-header { - font-size: 25px; - margin-top: 40px; + font-size: 25px; + margin-top: 40px; } .qr-message { font-size: 12px; - color: #F7861C; + color: #f7861c; } div.message-container > div:first-child { margin-top: 18px; font-size: 15px; - color: #4D4D4D; + color: #4d4d4d; } .pop-hover:hover { transform: scale(1.1); } + +/* stylelint-enable */ diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index ca32508b8..a6e68df42 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -1,5 +1,6 @@ .tx-list-container { height: 87.5%; + @media screen and (min-width: $break-large) { overflow-y: scroll; } @@ -7,8 +8,8 @@ @media screen and (max-width: $break-small) { .tx-list-header-wrapper { - margin-top: 0.2em; - margin-bottom: 0.6em; + margin-top: .2em; + margin-bottom: .6em; // TODO: Resolve Layout Conflicst in Wallet View // - This fixes txlist "transactions" title dispay // margin-top: 0.2em; @@ -30,7 +31,7 @@ .tx-list-header { font-size: 16px; - margin: 1.8em 1.3em 1.8em 1.3em; + margin: 1.8em 1.3em; } } @@ -40,11 +41,11 @@ flex: 0 0 1px; @media screen and (max-width: $break-small) { - margin: 0.1em 0em 0.1em 0em; + margin: .1em 0; } @media screen and (min-width: $break-large) { - margin: 0.1em 1.3em 0.1em 1.3em; + margin: .1em 1.3em; } } @@ -54,23 +55,22 @@ justify-content: flex-start; @media screen and (max-width: $break-small) { - margin: 0em 1.3em 0.95em 1.3em; + margin: 0 1.3em .95em; } @media screen and (min-width: $break-large) { - margin: 0em 1.3em 0em 1.3em; + margin: 0 1.3em; } } .tx-list-date-wrapper { - flex-grow: 1; - flex-shrink: 1; - flex-basis: auto; + flex: 1 1 auto; @media screen and (max-width: $break-small) { margin-top: 6px; margin-bottom: 20px; } + @media screen and (min-width: $break-large) { margin-top: 6px; } @@ -138,4 +138,4 @@ .tx-list-fiat-value { font-size: 12px; } -} \ No newline at end of file +} diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index e1b37cb1f..36f0e1025 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -1,10 +1,9 @@ $wallet-balance-bg: $gallery; $wallet-balance-breakpoint: 890px; -$wallet-balance-breakpoint-range: - "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; +$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; .wallet-balance-wrapper { - flex: 0 0 80px + flex: 0 0 80px; } .wallet-balance { @@ -37,7 +36,7 @@ $wallet-balance-breakpoint-range: } .fiat-amount { - margin-top: 0.25%; + margin-top: .25%; font-size: 105%; } @@ -64,4 +63,4 @@ $wallet-balance-breakpoint-range: .wallet-balance-wrapper-active { background: $wallet-balance-bg; -} \ No newline at end of file +} -- cgit From 66829b7a05322320855b077c04f885908bd95efa Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 03:27:11 -0700 Subject: Implement new dropdown design, integrate account balances --- ui/app/css/itcss/components/account-dropdown.scss | 14 ++++++++++++++ ui/app/css/itcss/components/index.scss | 2 ++ 2 files changed, 16 insertions(+) create mode 100644 ui/app/css/itcss/components/account-dropdown.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss new file mode 100644 index 000000000..ff3295650 --- /dev/null +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -0,0 +1,14 @@ +.account-dropdown-name { + +} + +.account-dropdown-balance { + color: $dusty-gray; +} + +.account-dropdown-edit-button { + color: $dusty-gray; + &:hover { + color: $white; + } +} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 291e09007..ebcd0dba6 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -10,6 +10,8 @@ @import './newui-sections.scss'; +@import './account-dropdown.scss'; + // Balances @import './hero-balance.scss'; -- cgit From d82233b95c5c3c4297a2d18b981ec6188de003c1 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 04:46:38 -0700 Subject: Hook up actions to EditAccountNameModal --- ui/app/css/itcss/components/buttons.scss | 10 ++--- ui/app/css/itcss/components/modal.scss | 70 ++++++++++++++++++++++++-------- 2 files changed, 59 insertions(+), 21 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 9916db488..c304e07ab 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -27,11 +27,11 @@ button.btn-clear { // box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); // } -// button[disabled], input[type="submit"][disabled] { -// cursor: not-allowed; -// background: rgba(197, 197, 197, 1); -// box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); -// } +button[disabled], input[type="submit"][disabled] { + cursor: not-allowed; + background: rgba(197, 197, 197, 1); + box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); +} // button.spaced { // margin: 2px; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 8bf7cd44f..c8bd1fb85 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -1,4 +1,5 @@ -.modal-content { +// Buy Modal +.buy-modal-content { flex-direction: column; align-items: center; justify-content: center; @@ -7,29 +8,29 @@ } @media screen and (max-width: 575px) { - .modal-content-title-wrapper { + .buy-modal-content-title-wrapper { justify-content: space-around; width: 100%; height: 100px; } - .modal-content-title { + .buy-modal-content-title { font-size: 26px; margin-top: 15px; } - .modal-content-options { + .buy-modal-content-options { flex-direction: column; padding: 5% 33%; } - .modal-content-footer { + .buy-modal-content-footer { text-transform: uppercase; width: 100%; height: 50px; } - div.modal-content-option { + div.buy-modal-content-option { display: flex; flex-direction: column; width: 80vw; @@ -41,40 +42,40 @@ padding: 0% 7%; justify-content: space-around; - div.modal-content-option-title { + div.buy-modal-content-option-title { font-size: 20px; } - div.modal-content-option-subtitle { + div.buy-modal-content-option-subtitle { font-size: 16px; } } } @media screen and (min-width: 576px) { - .modal-content-title-wrapper { + .buy-modal-content-title-wrapper { justify-content: space-around; width: 100%; height: 110px; } - .modal-content-title { + .buy-modal-content-title { font-size: 26px; margin-top: 15px; } - .modal-content-footer { + .buy-modal-content-footer { text-transform: uppercase; width: 100%; height: 50px; } - .modal-content-options { + .buy-modal-content-options { flex-direction: row; margin: 20px 0; } - div.modal-content-option { + div.buy-modal-content-option { display: flex; flex-direction: column; width: 20vw; @@ -85,7 +86,7 @@ margin: 0 .5vw; justify-content: space-around; - div.modal-content-option-title { + div.buy-modal-content-option-title { font-size: 20px; @media screen and (max-width: 679px) { @@ -97,7 +98,7 @@ } } - div.modal-content-option-subtitle { + div.buy-modal-content-option-subtitle { font-size: 16px; padding: 0 10px; height: 25%; @@ -121,8 +122,45 @@ } } - div.modal-content-footer { + div.buy-modal-content-footer { margin-top: 8vh; } } } + +// Edit Account Name Modal +.edit-account-name-modal-content { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; +} + +.edit-account-name-modal-cancel { + position: absolute; + top: 12px; + right: 20px; + font-size: 25px; +} + +.edit-account-name-modal-title { + margin: 15px; +} + +.edit-account-name-modal-save-button { + width: 33%; + height: 45px; + margin: 15px; + font-weight: bold; + margin-top: 25px; +} + +.edit-account-name-modal-input { + width: 90%; + height: 50px; + text-align: left; + margin: 10px; + padding: 10px; + font-size: 18px; +} -- cgit From 35508a28984afeccac31eb7c6789e26681f02b22 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 05:58:30 -0700 Subject: Add wrapper CSS for AccountDetailsModal --- ui/app/css/itcss/components/modal.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index c8bd1fb85..9872f7669 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -164,3 +164,12 @@ padding: 10px; font-size: 18px; } + +// Account Details Modal + +.account-details-modal-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} \ No newline at end of file -- cgit From 86b71f014a4bda433532cf7cbe7d76b243d3fb70 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 06:14:28 -0700 Subject: Add wrapper CSS for NewAccountModal --- ui/app/css/itcss/components/modal.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 9872f7669..fa073b84a 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -166,10 +166,19 @@ } // Account Details Modal - .account-details-modal-wrapper { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; + position: relative; +} + +// New Account Modal +.new-account-modal-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + position: relative; } \ No newline at end of file -- cgit From 877faaf09608fbb5f1ba9dd853959e7399893068 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 10:27:56 -0700 Subject: Integrate old QR component with new modal layout --- ui/app/css/itcss/components/modal.scss | 1 + ui/app/css/itcss/components/sections.scss | 10 +++++----- 2 files changed, 6 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index fa073b84a..119714506 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -181,4 +181,5 @@ justify-content: flex-start; align-items: center; position: relative; + border: 1px solid #d8d8d8; } \ No newline at end of file diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 5f0a034d8..16580b9f3 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -457,13 +457,13 @@ textarea.twelve-word-phrase { color: $white; } -.ellip-address { +.qr-ellip-address { overflow: hidden; text-overflow: ellipsis; - width: 5em; - font-size: 14px; - font-family: "Montserrat Light"; - margin-left: 5px; + // width: 5em; + // font-size: 14px; + // font-family: "Montserrat Light"; + // margin-left: 5px; } .qr-header { -- cgit From 27b75b67b42c232051660c33da976d64a63ff407 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 12:26:36 -0700 Subject: Hook up identicon and buttons to AccountDetailsModal, clean up colors --- ui/app/css/itcss/components/modal.scss | 9 ++++++++- ui/app/css/itcss/components/sections.scss | 4 ---- 2 files changed, 8 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 119714506..c23d6bc21 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -174,6 +174,13 @@ position: relative; } +.account-details-modal-divider { + width: 100%; + height: 1px; + margin: 10px 0px; + background-color: $alto; +} + // New Account Modal .new-account-modal-wrapper { display: flex; @@ -182,4 +189,4 @@ align-items: center; position: relative; border: 1px solid #d8d8d8; -} \ No newline at end of file +} diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 16580b9f3..c49fc617e 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -460,10 +460,6 @@ textarea.twelve-word-phrase { .qr-ellip-address { overflow: hidden; text-overflow: ellipsis; - // width: 5em; - // font-size: 14px; - // font-family: "Montserrat Light"; - // margin-left: 5px; } .qr-header { -- cgit From d6116aaf57e4d27694c2c5a21b6fabb24f072508 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 16:59:00 -0700 Subject: [WIP] Tweak Send Screen Styles --- ui/app/css/itcss/components/index.scss | 3 +++ ui/app/css/itcss/components/sections.scss | 11 ----------- ui/app/css/itcss/components/send.scss | 30 ++++++++++++++++++++++++++++++ 3 files changed, 33 insertions(+), 11 deletions(-) create mode 100644 ui/app/css/itcss/components/send.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index ebcd0dba6..0733c47a1 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -12,6 +12,9 @@ @import './account-dropdown.scss'; +@import './send.scss'; + + // Balances @import './hero-balance.scss'; diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index c49fc617e..44ec3e862 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -283,17 +283,6 @@ textarea.twelve-word-phrase { background: #faf6f0; } -/* Send Screen */ - -.send-screen section { - margin: 4px 16px; -} - -.send-screen input { - width: 100%; - font-size: 12px; -} - /* Ether Balance Widget */ .ether-balance-amount { diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss new file mode 100644 index 000000000..91cbfc7dd --- /dev/null +++ b/ui/app/css/itcss/components/send.scss @@ -0,0 +1,30 @@ +.send-screen-wrapper { + display: flex; + flex-direction: column; + min-width: 355px; + // width: 50%; + z-index: 50; //TODO + position: absolute; + top: 40px; + // height: 65%; +} + +.send-screen-card { + display: flex; + flex-direction: column; + margin-left: 3.5%; + margin-right: 3.5%; + background: $white; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); +} + +/* Send Screen */ + +.send-screen section { + margin: 4px 16px; +} + +.send-screen input { + width: 100%; + font-size: 12px; +} -- cgit From d193778958875001fa392131763f68aa9b20bfd3 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Mon, 21 Aug 2017 17:59:08 -0700 Subject: Adjust zIndex and width for send screen --- ui/app/css/itcss/components/header.scss | 4 ++-- ui/app/css/itcss/components/send.scss | 15 ++++++++++----- 2 files changed, 12 insertions(+), 7 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 9434d0386..337a8b351 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -6,14 +6,14 @@ height: 12vh; max-height: 60px; position: relative; - z-index: 12; + z-index: $header-z-index; @media screen and (max-width: 575px) { position: fixed; height: 34px; width: 100%; box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08); - z-index: 30; + z-index: $mobile-header-z-index; } } diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 91cbfc7dd..87ded35d6 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -1,14 +1,19 @@ .send-screen-wrapper { display: flex; flex-direction: column; - min-width: 355px; - // width: 50%; - z-index: 50; //TODO + min-width: 320px; + min-height: 500px; + z-index: $send-card-z-index; position: absolute; - top: 40px; - // height: 65%; + top: 5%; + + @media screen and (max-width: $break-small) { + top: 33px; + } + } + .send-screen-card { display: flex; flex-direction: column; -- cgit From 5900cc8522176edf5263b5bc0cda520f8d311db0 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 08:37:15 -0700 Subject: Tweak z-indicies --- ui/app/css/itcss/components/newui-sections.scss | 6 +++--- ui/app/css/itcss/components/send.scss | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 7daf72bf2..33fbc83e6 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -9,7 +9,7 @@ $wallet-view-bg: $wild-sand; // Main container .main-container { position: absolute; - z-index: 18; + z-index: $main-container-z-index; font-family: "DIN OT"; display: flex; flex-wrap: wrap; @@ -58,7 +58,7 @@ $wallet-view-bg: $wild-sand; .wallet-view.sidebar { flex: 1 0 230px; background: rgb(250, 250, 250); - z-index: 26; + z-index: $sidebar-z-index; position: fixed; top: 35px; left: 0; @@ -74,7 +74,7 @@ $wallet-view-bg: $wild-sand; } .sidebar-overlay { - z-index: 25; + z-index: $sidebar-overlay-z-index; position: fixed; top: 35px; left: 0; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 87ded35d6..d96e95845 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -13,7 +13,6 @@ } - .send-screen-card { display: flex; flex-direction: column; -- cgit From d1bc7111b52e86b7081ccbb3f2021de28e11d476 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 09:03:42 -0700 Subject: [WIP] - Styling Send Screen - Need to bring in data contract for signTx --- ui/app/css/itcss/components/send.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index d96e95845..d1987390d 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -16,6 +16,8 @@ .send-screen-card { display: flex; flex-direction: column; + align-items: center; + justify-content: flex-start; margin-left: 3.5%; margin-right: 3.5%; background: $white; @@ -32,3 +34,11 @@ width: 100%; font-size: 12px; } + +.send-eth-icon { + border-radius: 25px; + width: 45px; + height: 45px; + border: 1px solid $alto; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); +} \ No newline at end of file -- cgit From 97a6a8e4f6ea41373061e9dccdd1ad0b002cdcac Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 12:47:48 -0700 Subject: Add layout and props for send screen inputs --- ui/app/css/itcss/components/send.scss | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index d1987390d..6f124f053 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -41,4 +41,24 @@ height: 45px; border: 1px solid $alto; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); -} \ No newline at end of file +} + +.send-screen-input-wrapper { + width: 95%; +} + +.send-screen-input { + width: 100%; +} + +.send-screen-amount-labels { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.send-screen-gas-labels { + display: flex; + flex-direction: row; + justify-content: space-between; +} -- cgit From c1fd19393f90968bc5a60a77812eac3f8785e3a3 Mon Sep 17 00:00:00 2001 From: sdtsui Date: Tue, 22 Aug 2017 13:09:27 -0700 Subject: Remove border and apply background color to gas input --- ui/app/css/itcss/components/send.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 6f124f053..7c84d3b9f 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -51,6 +51,13 @@ width: 100%; } +.send-screen-gas-input { + width: 100%; + background-color: $concrete; + border-width: 0px; + border-style: none; +} + .send-screen-amount-labels { display: flex; flex-direction: row; @@ -62,3 +69,5 @@ flex-direction: row; justify-content: space-between; } + +.send-screen-bolt-icon {} \ No newline at end of file -- cgit From 5b62f10a5f0fc87a731c9c353e99770f0f66d085 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 22 Aug 2017 21:12:17 -0230 Subject: Modify buy and send buttons color, border-radius and various size properties. (#1956) --- ui/app/css/itcss/components/hero-balance.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index ad7f5952f..a04af0649 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -89,18 +89,23 @@ font-size: 75%; background: $white; border: 1px solid; + border-radius: 2px; @media screen and (max-width: $break-small) { - width: 28%; + width: 23%; height: 55%; + border-color: $black; } @media screen and (min-width: $break-large) { width: 5%; - flex-grow: 2; - height: 4.2vh; + flex-grow: 1; + height: 4.6vh; min-height: 28px; - font-size: .7em; + font-size: .6em; + border-color: $curious-blue; + color: $curious-blue; + padding: 0px; } } } -- cgit From 744b78e9c8c032cdd13acf121f891c28f319ed4d Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 24 Aug 2017 21:55:27 -0230 Subject: Patch 2 account details modal (#1957) * Account details modal styling changes. * Tweaking styles. --- ui/app/css/itcss/components/modal.scss | 44 ++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index c23d6bc21..be6d2a640 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -172,6 +172,37 @@ justify-content: flex-start; align-items: center; position: relative; + padding: 5px 0px; + border-radius: 4px; +} + +.account-details-modal-wrapper .qr-header { + margin-top: 15px; +} + +.account-details-modal-wrapper .qr-wrapper { + margin-top: 15px; +} + +.account-details-modal-wrapper .ellip-address-wrapper { + display: flex; + justify-content: center; + border: 1px solid $alto; + padding: 5px 10px 5px 10px; +} + +.account-details-modal-wrapper .btn-clear { + min-height: 28px; + font-size: 1em; + border-color: #2f9ae0; + color: #2f9ae0; + padding: 0px; + border-radius: 2px; + flex-basis: 100%; + width: 75%; + margin-top: 10px; + margin-bottom: 10px; + padding: 10px; } .account-details-modal-divider { @@ -181,6 +212,19 @@ background-color: $alto; } +.account-details-modal-wrapper .identicon { + margin-top: -55.5%; +} + +.account-details-modal-close:after { + content: '\00D7'; + font-size: 1.5em; + color: grey; + position: absolute; + top: 5px; + right: 10px; +} + // New Account Modal .new-account-modal-wrapper { display: flex; -- cgit From 4076496c8ea8c5a771db421b6c6a037c6ad48df1 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 24 Aug 2017 22:01:01 -0230 Subject: Patch 3 new account modal (#1962) * Account details modal styling changes. * Tweaking styles. * New account modal re-styling. * Tweaks to paddings, margins, font sizes, colors and modal dimensions. * Replace colour codes with variables. --- ui/app/css/itcss/components/modal.scss | 90 ++++++++++++++++++++++++++++++++-- 1 file changed, 87 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index be6d2a640..231a87d52 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -194,8 +194,8 @@ .account-details-modal-wrapper .btn-clear { min-height: 28px; font-size: 1em; - border-color: #2f9ae0; - color: #2f9ae0; + border-color: $curious-blue; + color: $curious-blue; padding: 0px; border-radius: 2px; flex-basis: 100%; @@ -232,5 +232,89 @@ justify-content: flex-start; align-items: center; position: relative; - border: 1px solid #d8d8d8; + border: 1px solid $alto; + box-shadow: 0 0 2px 2px $alto; +} + +.new-account-modal-header { + background: $wild-sand; + width: 100%; + display: flex; + justify-content: center; + padding: 30px; + font-size: 22px; + color: $nile-blue; +} + +.modal-close-x:after { + content: '\00D7'; + font-size: 2em; + color: $dusty-gray; + position: absolute; + top: 25px; + right: 17.5px; + font-family: sans-serif; +} + +.new-account-modal-content { + width: 100%; + display: flex; + justify-content: center; + padding: 13px; + font-size: 18px; + color: $nile-blue; +} + +.new-account-modal-content.import { + padding-top: 2px; +} + +.new-account-input-wrapper { + display: flex; + width: 100%; + justify-content: center; + padding-bottom: 2px; +} + +.new-account-input { + padding: 15px; + padding-bottom: 20px; + border-radius: 8px; + border: 1px solid $alto; + width: 70%; + font-size: 1em; + font-color: $alto; +} + +// For reference on below placeholder selectors: https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css +.new-account-input::-webkit-input-placeholder { + color: $dusty-gray; +} +.new-account-input:-moz-placeholder { + color: $dusty-gray; + opacity: 1; +} +.new-account-input::-moz-placeholder { + color: $dusty-gray; + opacity: 1; +} +.new-account-input:-ms-input-placeholder { + color: $dusty-gray; +} +.new-account-input::-ms-input-placeholder { + color: $dusty-gray; +} + +.new-account-modal-content.button { + padding-top: 9px; +} + +.new-account-modal-wrapper .btn-clear { + font-size: 14px; + font-weight: bold; + background: $white; + border: 1px solid; + border-radius: 2px; + width: 30%; + color: $tundora; } -- cgit From d990a8eb86a231170194e8c4497deac5aa199c1d Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 24 Aug 2017 13:54:48 -0230 Subject: Add 'customize' text to gas input. --- ui/app/css/itcss/components/send.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 7c84d3b9f..838e00b00 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -45,6 +45,7 @@ .send-screen-input-wrapper { width: 95%; + position: relative; } .send-screen-input { @@ -70,4 +71,13 @@ justify-content: space-between; } -.send-screen-bolt-icon {} \ No newline at end of file +.send-screen-bolt-icon {} + +.send-screen-gas-input-customize { + position: absolute; + top: 30px; + right: 18px; + color: #3098DC; + font-size: 12px; + cursor: pointer; +} \ No newline at end of file -- cgit From 5677fdaf68ff28b9d9b4b27be1737101489f3861 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 24 Aug 2017 17:25:03 -0230 Subject: Toggling tooltip. --- ui/app/css/itcss/components/send.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 838e00b00..e1ea73de5 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -80,4 +80,15 @@ color: #3098DC; font-size: 12px; cursor: pointer; +} + +div.__react_component_tooltip.send-tooltip { + left: 177px; + top: 50px; + width: 237px; + height: 307px; + background-color: white; + opacity: 1; + box-shadow: grey 0px 0px 5px; + z-index: 1050; } \ No newline at end of file -- cgit From e56b8c5055a19ccfb88ef71f4cef13fb6d05a54a Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 Aug 2017 13:48:52 -0230 Subject: Refactor tooltip to remove external lib; tooltip now updating gas fee in parent. --- ui/app/css/itcss/components/send.scss | 93 +++++++++++++++++++++++++++++++++-- 1 file changed, 90 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index e1ea73de5..f5b4af299 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -82,13 +82,100 @@ cursor: pointer; } -div.__react_component_tooltip.send-tooltip { - left: 177px; - top: 50px; +.customize-gas-tooltip-container { + position: absolute; + left: 76px; + bottom: 50px; width: 237px; height: 307px; background-color: white; opacity: 1; box-shadow: grey 0px 0px 5px; z-index: 1050; + padding: 13px 19px; + font-size: 16px; + border-radius: 4px; + font-family: 'Montserrat Regular'; +} + +.gas-tooltip-arrow { + height: 25px; + width: 25px; + z-index: 1200; + background: white; + position: absolute; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + left: 107px; + top: 294px; + -webkit-box-shadow: 0 0 5px grey; + box-shadow: 2px 2px 2px $alto; +} + +.customize-gas-tooltip-container input[type=number]::-webkit-inner-spin-button { + -webkit-appearance: none; + display:none; +} + +.customize-gas-tooltip-container input[type=number]:hover::-webkit-inner-spin-button { + -webkit-appearance: none; + display:none; +} + +.customize-gas-tooltip { + position: relative; +} + +.gas-tooltip-label { + font-size: 16px; + color: $tundora; +} + +.gas-tooltip-header { + padding-bottom: 12px; +} + +.gas-tooltip-input-label { + margin-bottom: 5px; +} + +.gas-tooltip-input-label i { + color: $silver-chalice; + margin-left: 6px; +} + +.customize-gas-input { + width: 178px; + height: 28px; + border: 1px solid $alto; + font-size: 16px; + color: $nile-blue; + padding-left: 8px; +} + +.customize-gas-input-wrapper { + position: relative; +} + +.gas-tooltip-input-detail { + position: absolute; + top: 4px; + right: 26px; + font-size: 12px; + color: $silver-chalice; +} + +.gas-tooltip-input-arrows { + position: absolute; + top: 0px; + left: 178px; + width: 17px; + height: 28px; + border: 1px solid #dadada; + border-left: 0px; + display: flex; + flex-direction: column; + color: #9b9b9b; + font-size: 0.8em; + padding: 1px 4px; } \ No newline at end of file -- cgit From 05e6eaf171a16c96760cc899ef527a8f6d83434d Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 Aug 2017 17:31:56 -0230 Subject: Updating current currency from send form. --- ui/app/css/itcss/components/send.scss | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index f5b4af299..6f696eab7 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -73,6 +73,14 @@ .send-screen-bolt-icon {} +.selected-currency { + color: $curious-blue; +} + +.unselected-currency { + cursor: pointer; +} + .send-screen-gas-input-customize { position: absolute; top: 30px; -- cgit From b785beb54665acc47d0b5e65cf4e742bd1853110 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 Aug 2017 20:55:03 -0230 Subject: Final styling improvements for tooltip; plus a few for send form. --- ui/app/css/itcss/components/send.scss | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 6f696eab7..a1bab3e1b 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -6,6 +6,7 @@ z-index: $send-card-z-index; position: absolute; top: 5%; + font-family: 'DIN OT'; @media screen and (max-width: $break-small) { top: 33px; @@ -54,9 +55,16 @@ .send-screen-gas-input { width: 100%; - background-color: $concrete; + height: 41px; + border-radius: 3px; + background-color: #f3f3f3; border-width: 0px; border-style: none; + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 10px; + padding-right: 12px; } .send-screen-amount-labels { @@ -82,10 +90,7 @@ } .send-screen-gas-input-customize { - position: absolute; - top: 30px; - right: 18px; - color: #3098DC; + color: $curious-blue; font-size: 12px; cursor: pointer; } @@ -103,7 +108,8 @@ padding: 13px 19px; font-size: 16px; border-radius: 4px; - font-family: 'Montserrat Regular'; + font-family: 'Avenir Next'; + font-weigth: 500; } .gas-tooltip-arrow { -- cgit From 0a44c824586f74a770c1e6c618e62279b5dc773b Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 28 Aug 2017 14:44:01 -0230 Subject: Styles and behaviour correct --- ui/app/css/itcss/components/send.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index a1bab3e1b..4844fa869 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -65,6 +65,8 @@ align-items: center; padding-left: 10px; padding-right: 12px; + font-size: 16px; + color: $scorpion; } .send-screen-amount-labels { @@ -79,8 +81,6 @@ justify-content: space-between; } -.send-screen-bolt-icon {} - .selected-currency { color: $curious-blue; } -- cgit From 43ceeacf0f0cc46a60a01fff9d94672fad5383b5 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 28 Aug 2017 15:09:05 -0230 Subject: Refactor for clean handling of tooltip close. --- ui/app/css/itcss/components/send.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 4844fa869..edee40821 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -95,6 +95,15 @@ cursor: pointer; } +.gas-tooltip-close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; +} + .customize-gas-tooltip-container { position: absolute; left: 76px; -- cgit From b251d0f675b77b56adfab12cc512f985ada79c49 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 13:43:43 -0230 Subject: Center tooltip on small screen size by using flexbox --- ui/app/css/itcss/components/send.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index edee40821..10b81debe 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -106,7 +106,6 @@ .customize-gas-tooltip-container { position: absolute; - left: 76px; bottom: 50px; width: 237px; height: 307px; -- cgit From 5facba89ca8a106e7ae964f351ab532d9029e0f5 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 14:11:11 -0230 Subject: Replace Avenir Next with alternative. --- ui/app/css/itcss/components/send.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 10b81debe..8609fb399 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -116,7 +116,7 @@ padding: 13px 19px; font-size: 16px; border-radius: 4px; - font-family: 'Avenir Next'; + font-family: 'Lato'; font-weigth: 500; } -- cgit From c605c9897d40f8fc2568b63d33cfc018635bcf25 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 16:09:56 -0230 Subject: Minor clean up. --- ui/app/css/itcss/components/send.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 8609fb399..507351cd1 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -148,6 +148,11 @@ position: relative; } +.gas-tooltip { + display: flex; + justify-content: center; +} + .gas-tooltip-label { font-size: 16px; color: $tundora; -- cgit From 5452a26b36a84f8fc5b19197d7b58eaed847ae31 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 13:09:47 -0230 Subject: Fixes lint errors and adds stylelint-config-standard to package.json --- ui/app/css/itcss/components/account-dropdown.scss | 5 +- ui/app/css/itcss/components/buttons.scss | 5 +- ui/app/css/itcss/components/hero-balance.scss | 2 +- ui/app/css/itcss/components/index.scss | 1 - ui/app/css/itcss/components/modal.scss | 61 ++++++++++++----------- ui/app/css/itcss/components/send.scss | 39 +++++++-------- 6 files changed, 55 insertions(+), 58 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index ff3295650..e409f759c 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -1,13 +1,10 @@ -.account-dropdown-name { - -} - .account-dropdown-balance { color: $dusty-gray; } .account-dropdown-edit-button { color: $dusty-gray; + &:hover { color: $white; } diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index c304e07ab..7fff5969c 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -27,10 +27,11 @@ button.btn-clear { // box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36); // } -button[disabled], input[type="submit"][disabled] { +button[disabled], +input[type="submit"][disabled] { cursor: not-allowed; background: rgba(197, 197, 197, 1); - box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36); + box-shadow: 0 3px 6px rgba(197, 197, 197, .36); } // button.spaced { diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index a04af0649..9861c6c30 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -105,7 +105,7 @@ font-size: .6em; border-color: $curious-blue; color: $curious-blue; - padding: 0px; + padding: 0; } } } diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 0733c47a1..19b8bbc95 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -14,7 +14,6 @@ @import './send.scss'; - // Balances @import './hero-balance.scss'; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 231a87d52..96df60b70 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -152,7 +152,7 @@ width: 33%; height: 45px; margin: 15px; - font-weight: bold; + font-weight: 700; margin-top: 25px; } @@ -172,7 +172,7 @@ justify-content: flex-start; align-items: center; position: relative; - padding: 5px 0px; + padding: 5px 0; border-radius: 4px; } @@ -188,7 +188,7 @@ display: flex; justify-content: center; border: 1px solid $alto; - padding: 5px 10px 5px 10px; + padding: 5px 10px; } .account-details-modal-wrapper .btn-clear { @@ -196,7 +196,6 @@ font-size: 1em; border-color: $curious-blue; color: $curious-blue; - padding: 0px; border-radius: 2px; flex-basis: 100%; width: 75%; @@ -208,7 +207,7 @@ .account-details-modal-divider { width: 100%; height: 1px; - margin: 10px 0px; + margin: 10px 0; background-color: $alto; } @@ -216,13 +215,13 @@ margin-top: -55.5%; } -.account-details-modal-close:after { - content: '\00D7'; - font-size: 1.5em; - color: grey; - position: absolute; - top: 5px; - right: 10px; +.account-details-modal-close::after { + content: '\00D7'; + font-size: 1.5em; + color: $alto; + position: absolute; + top: 5px; + right: 10px; } // New Account Modal @@ -246,14 +245,14 @@ color: $nile-blue; } -.modal-close-x:after { - content: '\00D7'; - font-size: 2em; - color: $dusty-gray; - position: absolute; - top: 25px; - right: 17.5px; - font-family: sans-serif; +.modal-close-x::after { + content: '\00D7'; + font-size: 2em; + color: $dusty-gray; + position: absolute; + top: 25px; + right: 17.5px; + font-family: sans-serif; } .new-account-modal-content { @@ -283,26 +282,30 @@ border: 1px solid $alto; width: 70%; font-size: 1em; - font-color: $alto; + color: $alto; } // For reference on below placeholder selectors: https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css .new-account-input::-webkit-input-placeholder { - color: $dusty-gray; + color: $dusty-gray; } + .new-account-input:-moz-placeholder { - color: $dusty-gray; - opacity: 1; + color: $dusty-gray; + opacity: 1; } + .new-account-input::-moz-placeholder { - color: $dusty-gray; - opacity: 1; + color: $dusty-gray; + opacity: 1; } + .new-account-input:-ms-input-placeholder { - color: $dusty-gray; + color: $dusty-gray; } + .new-account-input::-ms-input-placeholder { - color: $dusty-gray; + color: $dusty-gray; } .new-account-modal-content.button { @@ -311,7 +314,7 @@ .new-account-modal-wrapper .btn-clear { font-size: 14px; - font-weight: bold; + font-weight: 700; background: $white; border: 1px solid; border-radius: 2px; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 507351cd1..016833db9 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -11,7 +11,6 @@ @media screen and (max-width: $break-small) { top: 33px; } - } .send-screen-card { @@ -22,7 +21,7 @@ margin-left: 3.5%; margin-right: 3.5%; background: $white; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); } /* Send Screen */ @@ -41,7 +40,7 @@ width: 45px; height: 45px; border: 1px solid $alto; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); } .send-screen-input-wrapper { @@ -58,7 +57,7 @@ height: 41px; border-radius: 3px; background-color: #f3f3f3; - border-width: 0px; + border-width: 0; border-style: none; display: flex; justify-content: space-between; @@ -109,40 +108,38 @@ bottom: 50px; width: 237px; height: 307px; - background-color: white; + background-color: $white; opacity: 1; - box-shadow: grey 0px 0px 5px; + box-shadow: $alto 0 0 5px; z-index: 1050; padding: 13px 19px; font-size: 16px; border-radius: 4px; font-family: 'Lato'; - font-weigth: 500; + font-weight: 500; } .gas-tooltip-arrow { height: 25px; width: 25px; z-index: 1200; - background: white; + background: $white; position: absolute; - -webkit-transform: rotate(45deg); transform: rotate(45deg); left: 107px; top: 294px; - -webkit-box-shadow: 0 0 5px grey; box-shadow: 2px 2px 2px $alto; } -.customize-gas-tooltip-container input[type=number]::-webkit-inner-spin-button { - -webkit-appearance: none; - display:none; +.customize-gas-tooltip-container input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; } -.customize-gas-tooltip-container input[type=number]:hover::-webkit-inner-spin-button { - -webkit-appearance: none; - display:none; -} +.customize-gas-tooltip-container input[type="number"]:hover::-webkit-inner-spin-button { + -webkit-appearance: none; + display: none; +} .customize-gas-tooltip { position: relative; @@ -194,15 +191,15 @@ .gas-tooltip-input-arrows { position: absolute; - top: 0px; + top: 0; left: 178px; width: 17px; height: 28px; border: 1px solid #dadada; - border-left: 0px; + border-left: 0; display: flex; flex-direction: column; color: #9b9b9b; - font-size: 0.8em; + font-size: .8em; padding: 1px 4px; -} \ No newline at end of file +} -- cgit From d5998d3b0782872e6070c6feca559353ed536541 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 20:25:39 -0230 Subject: Fixed network font --- ui/app/css/itcss/components/network.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index aea5063f0..0cb3d0111 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -8,4 +8,6 @@ width: 5.2em; line-height: 9px; text-rendering: geometricPrecision; + font-family: 'DIN OT'; + font-size: 10px; } -- cgit From 799627189d62296cdec8f9604169d661123dec38 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 21:32:13 -0230 Subject: Fix margin, padding, height for header. --- ui/app/css/itcss/components/header.scss | 16 ++++++++++++++-- ui/app/css/itcss/components/newui-sections.scss | 6 +++--- 2 files changed, 17 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 337a8b351..bfa94134d 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -3,8 +3,8 @@ visibility: visible; background: $gallery; padding: 6px 8px; - height: 12vh; - max-height: 60px; + height: 14.4vh; + max-height: 97px; position: relative; z-index: $header-z-index; @@ -17,6 +17,18 @@ } } +.app-header-contents { + display: flex; + justify-content: inherit; + width: 100%; + + @media screen and (min-width: 576px) { + width: 80vw; + margin-left: 10vw; + margin-bottom: 15px; + } +} + .app-header h1 { font-family: 'Montserrat Regular'; text-transform: uppercase; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 33fbc83e6..288a3650d 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -106,7 +106,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 769px) { .main-container { - margin-top: 35px; + margin-top: 6.9vh; width: 80%; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); @@ -115,7 +115,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 1281px) { .main-container { - margin-top: 35px; + margin-top: 6.9vh; width: 65%; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); @@ -162,5 +162,5 @@ $wallet-view-bg: $wild-sand; .account-options-menu { align-items: center; justify-content: flex-start; - margin: 5% 7%; + margin: 5% 7% 0%; } -- cgit From 0d6e64bfbedf88c6ac1472c0c730262804a4b90b Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 31 Aug 2017 20:39:39 -0230 Subject: Use flex to ensure network name does not wrap. --- ui/app/css/itcss/components/network.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 0cb3d0111..a067cecd5 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -10,4 +10,5 @@ text-rendering: geometricPrecision; font-family: 'DIN OT'; font-size: 10px; + flex: 1 0 auto; } -- cgit From b1fc290bed26ae0ea8d182340854c82cc1f3d12d Mon Sep 17 00:00:00 2001 From: Jacky Chan Date: Thu, 31 Aug 2017 04:08:11 -0700 Subject: Fix menu style --- ui/app/css/itcss/components/account-dropdown.scss | 8 +++++++- ui/app/css/itcss/components/network.scss | 16 ++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index e409f759c..715f41dc9 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -1,10 +1,16 @@ +.account-dropdown-name { + font-family: 'DIN OT'; +} + .account-dropdown-balance { color: $dusty-gray; + line-height: 19px; } .account-dropdown-edit-button { color: $dusty-gray; - + font-family: "DIN OT"; + font-weight: 500; &:hover { color: $white; } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index a067cecd5..f242102af 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -12,3 +12,19 @@ font-size: 10px; flex: 1 0 auto; } + +.network-name { + font-weight: 100; + flex: 1 0 auto; + color: $dusty-gray; +} + +.network-check, +.network-check__transparent { + color: $white; + margin-left: 7px; +} + +.network-check__transparent { + opacity: 0; +} -- cgit From 75c3009f839f94a19830673673f4b9ac25342633 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 4 Sep 2017 15:55:14 -0700 Subject: Fix header style; Address comments --- ui/app/css/itcss/components/account-dropdown.scss | 2 +- ui/app/css/itcss/components/header.scss | 26 ++++++++++++----------- ui/app/css/itcss/components/network.scss | 23 ++++++++++++++++---- ui/app/css/itcss/components/newui-sections.scss | 2 +- 4 files changed, 35 insertions(+), 18 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 715f41dc9..1c4620e40 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -10,7 +10,7 @@ .account-dropdown-edit-button { color: $dusty-gray; font-family: "DIN OT"; - font-weight: 500; + &:hover { color: $white; } diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index bfa94134d..160476d58 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -2,11 +2,12 @@ align-items: center; visibility: visible; background: $gallery; - padding: 6px 8px; height: 14.4vh; max-height: 97px; position: relative; z-index: $header-z-index; + display: flex; + flex-flow: column nowrap; @media screen and (max-width: 575px) { position: fixed; @@ -19,13 +20,22 @@ .app-header-contents { display: flex; - justify-content: inherit; + justify-content: space-between; + flex-flow: row nowrap; width: 100%; + height: 6.9vh; @media screen and (min-width: 576px) { + width: 85vw; + } + + @media screen and (min-width: 769px) { width: 80vw; - margin-left: 10vw; - margin-bottom: 15px; + height: 6.9vh; + } + + @media screen and (min-width: 1281px) { + width: 65vw; } } @@ -47,18 +57,10 @@ h2.page-subtitle { display: flex; flex-direction: row; align-items: center; - - @media screen and (min-width: 576px) { - margin-bottom: 1.8em; - } } .left-menu-wrapper { display: flex; flex-direction: row; align-items: center; - - @media screen and (min-width: 576px) { - margin-bottom: 1.8em; - } } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index f242102af..8beef5e72 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -5,15 +5,30 @@ } .network-name { - width: 5.2em; - line-height: 9px; - text-rendering: geometricPrecision; + line-height: 12px; + padding: 0 4px; font-family: 'DIN OT'; font-size: 10px; flex: 1 0 auto; } -.network-name { +.network-droppo { + right: 2px; + + @media screen and (min-width: 576px) { + right: calc(((100% - 85vw) / 2) + 2px); + } + + @media screen and (min-width: 769px) { + right: calc(((100% - 80vw) / 2) + 2px); + } + + @media screen and (min-width: 1281px) { + right: calc(((100% - 65vw) / 2) + 2px); + } +} + +.network-name-item { font-weight: 100; flex: 1 0 auto; color: $dusty-gray; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 288a3650d..5c5d16ef3 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -97,7 +97,7 @@ $wallet-view-bg: $wild-sand; } .main-container { - margin-top: 35px; + margin-top: 6.9vh; width: 85%; height: 90vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); -- cgit From 5d8bf6c86ad9cee9aec5e14ca9d57719e6e8e254 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 22:27:08 -0230 Subject: Adjust left margin in main container. --- ui/app/css/itcss/components/hero-balance.scss | 2 +- ui/app/css/itcss/components/newui-sections.scss | 2 +- ui/app/css/itcss/components/transaction-list.scss | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 9861c6c30..f3535cd18 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -15,7 +15,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - margin: 2.8em .9em .8em; + margin: 2.8em 1.8em .8em; } .balance-container { diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 5c5d16ef3..a140eb0f6 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -10,7 +10,7 @@ $wallet-view-bg: $wild-sand; .main-container { position: absolute; z-index: $main-container-z-index; - font-family: "DIN OT"; + font-family: "DIN OT Light"; display: flex; flex-wrap: wrap; align-items: stretch; diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index a6e68df42..8589a3aa2 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -31,7 +31,7 @@ .tx-list-header { font-size: 16px; - margin: 1.8em 1.3em; + margin: 1.8em 1.8em; } } @@ -45,7 +45,7 @@ } @media screen and (min-width: $break-large) { - margin: .1em 1.3em; + margin: .1em 1.8em; } } @@ -59,7 +59,7 @@ } @media screen and (min-width: $break-large) { - margin: 0 1.3em; + margin: 0 1.8em; } } -- cgit From 3cb51e32c9706aebd47859018aff4e1917065b16 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 22:33:32 -0230 Subject: Capitalizations via text-transform for main screen transactions. --- ui/app/css/itcss/components/transaction-list.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 8589a3aa2..69a7e6718 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -6,6 +6,10 @@ } } +.tx-list-header { + text-transform: capitalize; +} + @media screen and (max-width: $break-small) { .tx-list-header-wrapper { margin-top: .2em; @@ -124,6 +128,7 @@ .tx-list-status { color: $dusty-gray; font-size: 16px; + text-transform: capitalize; } } -- cgit From 57b3cdf9487e3858c3eecf49dad578b7dfcb3081 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 22:43:29 -0230 Subject: Fix styling of buy and send buttons on main screen. --- ui/app/css/itcss/components/hero-balance.scss | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index f3535cd18..9ac506714 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -83,6 +83,7 @@ @media screen and (min-width: $break-large) { flex-grow: 2; + justify-content: flex-end; } button.btn-clear { @@ -98,14 +99,12 @@ } @media screen and (min-width: $break-large) { - width: 5%; - flex-grow: 1; - height: 4.6vh; - min-height: 28px; font-size: .6em; border-color: $curious-blue; color: $curious-blue; - padding: 0; + padding: 0px; + width: 85px; + height: 34px; } } } -- cgit From 7d6ad48f15aa65d28de724f550f911234ad2c58e Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 31 Aug 2017 04:58:45 -0230 Subject: Touch up transaction list item styles, remove main-content scroll bars, align buttons with main-content.. --- ui/app/css/itcss/components/hero-balance.scss | 2 +- ui/app/css/itcss/components/newui-sections.scss | 5 ++++- ui/app/css/itcss/components/transaction-list.scss | 26 +++++++++++++++-------- 3 files changed, 22 insertions(+), 11 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 9ac506714..f7b3cc3e5 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -15,7 +15,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - margin: 2.8em 1.8em .8em; + margin: 2.8em 2.37em .8em; } .balance-container { diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index a140eb0f6..aa874caf5 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -14,7 +14,10 @@ $wallet-view-bg: $wild-sand; display: flex; flex-wrap: wrap; align-items: stretch; - overflow-y: scroll; +} + +.main-container::-webkit-scrollbar { + display: none; } // tx view diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 69a7e6718..8dca35a17 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -35,7 +35,11 @@ .tx-list-header { font-size: 16px; - margin: 1.8em 1.8em; + margin: 1.5em 2.37em; + } + + .tx-list-container::-webkit-scrollbar { + display: none; } } @@ -49,7 +53,7 @@ } @media screen and (min-width: $break-large) { - margin: .1em 1.8em; + margin: .1em 2.37em; } } @@ -63,7 +67,7 @@ } @media screen and (min-width: $break-large) { - margin: 0 1.8em; + margin: 0 2.37em; } } @@ -76,24 +80,24 @@ } @media screen and (min-width: $break-large) { - margin-top: 6px; + margin-top: 13px; } } .tx-list-content-wrapper { align-items: stretch; - margin-bottom: 8px; + margin-bottom: 4px; + margin-top: 2px; } .tx-list-date { color: $dusty-gray; - font-size: 14px; + font-size: 12px; } .tx-list-identicon-wrapper { align-self: center; - flex: 1 1 auto; - margin-left: 3px; + flex: 0.5 1 auto; } .tx-list-account-and-status-wrapper { @@ -113,7 +117,7 @@ align-items: center; .tx-list-account-wrapper { - flex: 2 2 auto; + flex: 1.3 2 auto; } .tx-list-status-wrapper { @@ -123,6 +127,7 @@ .tx-list-account { font-size: 16px; + color: $scorpion; } .tx-list-status { @@ -135,12 +140,15 @@ .tx-list-details-wrapper { align-self: center; flex: 2 2 auto; + color: $dusty-gray; .tx-list-value { font-size: 16px; + text-align: right; } .tx-list-fiat-value { font-size: 12px; + text-align: right; } } -- cgit From 6ef483be4a564cfc368a732b89c01b74ff1c4913 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 31 Aug 2017 05:07:42 -0230 Subject: Remove wallet-view scrollbars. --- ui/app/css/itcss/components/newui-sections.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index aa874caf5..f5accca8a 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -44,6 +44,12 @@ $wallet-view-bg: $wild-sand; } } +@media screen and (min-width: 576px) { + .wallet-view::-webkit-scrollbar { + display: none; + } +} + .wallet-view-title-wrapper { flex: 0 0 25px; } -- cgit From 06b2a04a4259a0bc7dff4004328441d353c296de Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 5 Sep 2017 01:48:52 -0700 Subject: Implement tokens list UI --- ui/app/css/itcss/components/index.scss | 2 ++ ui/app/css/itcss/components/newui-sections.scss | 13 ++++++++++++- ui/app/css/itcss/components/token-list.scss | 21 +++++++++++++++++++++ ui/app/css/itcss/components/wallet-balance.scss | 4 +++- 4 files changed, 38 insertions(+), 2 deletions(-) create mode 100644 ui/app/css/itcss/components/token-list.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 19b8bbc95..952d11ce4 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -23,3 +23,5 @@ @import './transaction-list.scss'; @import './sections.scss'; + +@import './token-list.scss'; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index f5accca8a..53c0023c3 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -6,6 +6,13 @@ $tx-view-bg: $white; $wallet-view-bg: $wild-sand; +html { + + @media screen and (max-width: 575px) { + height: 500px; + } +} + // Main container .main-container { position: absolute; @@ -17,7 +24,7 @@ $wallet-view-bg: $wild-sand; } .main-container::-webkit-scrollbar { - display: none; + display: none; } // tx view @@ -37,6 +44,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 576px) { overflow-y: scroll; + overflow-x: hidden; } .wallet-view-account-details { @@ -142,7 +150,10 @@ $wallet-view-bg: $wild-sand; .main-container { margin-top: 35px; + height: calc(100% - 34px); width: 100%; + overflow-y: auto; + background-color: $white; } button.btn-clear { diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss new file mode 100644 index 000000000..dd1d533c7 --- /dev/null +++ b/ui/app/css/itcss/components/token-list.scss @@ -0,0 +1,21 @@ +.token-list-item { + display: flex; + flex-flow: row nowrap; + align-items: center; + padding: 20px 24px; + cursor: pointer; + + &__identicon { + margin-right: 15px; + border: '1px solid #dedede'; + } + + &__token-balance { + font-size: 130%; + } + + &__fiat-amount { + margin-top: .25%; + font-size: 105%; + } +} diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index 36f0e1025..113380769 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -3,7 +3,7 @@ $wallet-balance-breakpoint: 890px; $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; .wallet-balance-wrapper { - flex: 0 0 80px; + flex: 0 0 auto; } .wallet-balance { @@ -12,6 +12,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( flex-direction: row; justify-content: flex-start; align-items: center; + flex: 0 0 auto; + cursor: pointer; .balance-container { display: flex; -- cgit From f1fb9e10a06d1811d97f61b6369684979b7ecf70 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 6 Sep 2017 03:17:49 -0700 Subject: Adding Token transaction detail screen --- ui/app/css/itcss/components/token-list.scss | 13 +++++++++++++ ui/app/css/itcss/components/wallet-balance.scss | 10 ++++++---- 2 files changed, 19 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index dd1d533c7..2195dc1b8 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -1,9 +1,22 @@ +$wallet-balance-breakpoint: 890px; +$wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; + .token-list-item { display: flex; flex-flow: row nowrap; align-items: center; padding: 20px 24px; cursor: pointer; + transition: linear 200ms; + background-color: rgba($wallet-balance-bg, 0); + + @media #{$wallet-balance-breakpoint-range} { + padding: 10% 4%; + } + + &--active { + background-color: rgba($wallet-balance-bg, 1); + } &__identicon { margin-right: 15px; diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index 113380769..cd44f89bb 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -4,6 +4,12 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( .wallet-balance-wrapper { flex: 0 0 auto; + transition: linear 200ms; + background: rgba($wallet-balance-bg, 0); + + &--active { + background: rgba($wallet-balance-bg, 1); + } } .wallet-balance { @@ -62,7 +68,3 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( border: 1px solid $alto; } } - -.wallet-balance-wrapper-active { - background: $wallet-balance-bg; -} -- cgit From 983fa2a11721aa7d1307ef76d516e25a50d0eedf Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 7 Sep 2017 03:14:53 -0700 Subject: Add Contract Tx List Item; Update Token Tx on select --- ui/app/css/itcss/components/newui-sections.scss | 7 --- ui/app/css/itcss/components/token-list.scss | 28 ++++++++---- ui/app/css/itcss/components/transaction-list.scss | 56 +++++++++++++++-------- 3 files changed, 57 insertions(+), 34 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 53c0023c3..b576e5ca5 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -6,13 +6,6 @@ $tx-view-bg: $white; $wallet-view-bg: $wild-sand; -html { - - @media screen and (max-width: 575px) { - height: 500px; - } -} - // Main container .main-container { position: absolute; diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index 2195dc1b8..9a772f666 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -10,6 +10,23 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( transition: linear 200ms; background-color: rgba($wallet-balance-bg, 0); + &__token-balance { + font-size: 130%; + + @media #{$wallet-balance-breakpoint-range} { + font-size: 105%; + } + } + + &__fiat-amount { + margin-top: .25%; + font-size: 105%; + + @media #{$wallet-balance-breakpoint-range} { + font-size: 95%; + } + } + @media #{$wallet-balance-breakpoint-range} { padding: 10% 4%; } @@ -21,14 +38,9 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( &__identicon { margin-right: 15px; border: '1px solid #dedede'; - } - &__token-balance { - font-size: 130%; - } - - &__fiat-amount { - margin-top: .25%; - font-size: 105%; + @media #{$wallet-balance-breakpoint-range} { + margin-right: 4%; + } } } diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 8dca35a17..bdf84b919 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -61,14 +61,6 @@ flex: 0 0 70px; align-items: stretch; justify-content: flex-start; - - @media screen and (max-width: $break-small) { - margin: 0 1.3em .95em; - } - - @media screen and (min-width: $break-large) { - margin: 0 2.37em; - } } .tx-list-date-wrapper { @@ -93,11 +85,13 @@ .tx-list-date { color: $dusty-gray; font-size: 12px; + font-family: "Montserrat UltraLight"; } .tx-list-identicon-wrapper { align-self: center; - flex: 0.5 1 auto; + flex: 0 0 auto; + margin-right: 16px; } .tx-list-account-and-status-wrapper { @@ -118,6 +112,7 @@ .tx-list-account-wrapper { flex: 1.3 2 auto; + min-width: 153px; } .tx-list-status-wrapper { @@ -137,18 +132,41 @@ } } -.tx-list-details-wrapper { - align-self: center; - flex: 2 2 auto; - color: $dusty-gray; +.tx-list-item { + border-top: 1px solid rgb(231, 231, 231); - .tx-list-value { - font-size: 16px; - text-align: right; + @media screen and (max-width: $break-small) { + margin: 0 1.3em .95em; } - .tx-list-fiat-value { - font-size: 12px; - text-align: right; + @media screen and (min-width: $break-large) { + margin: 0 2.37em; + } + + &:last-of-type { + border-bottom: 1px solid rgb(231, 231, 231); + margin-bottom: 32px; + } + + &__wrapper { + align-self: center; + flex: 2 2 auto; + color: $dusty-gray; + + .tx-list-value { + font-size: 16px; + text-align: right; + } + + .tx-list-fiat-value { + font-size: 12px; + text-align: right; + } + } + + &--empty { + text-align: center; + border-bottom: none !important; + padding: 16px; } } -- cgit From 8b919758e51e16536b6edaf33d4978d551363249 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 7 Sep 2017 04:24:03 -0700 Subject: Send Token screen partial UI --- ui/app/css/itcss/components/send.scss | 41 +++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 016833db9..87c4c0a1b 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -203,3 +203,44 @@ font-size: .8em; padding: 1px 4px; } + +.send-token { + width: 498px; + height: 605px; + background-color: #fff; + display: flex; + flex-flow: column nowrap; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + padding: 46px 40.5px 26px; + position: relative; + top: -26px; + z-index: 25; + align-items: center; + font-family: "Montserrat Light"; + + .identicon { + position: absolute; + top: -35px; + z-index: 25; + } + + &__title { + color: $scorpion; + font-size: 20px; + line-height: 29px; + } + + &__description, + &__balance-text, + &__token-symbol { + margin-top: 10px; + font-size: 16px; + line-height: 24px; + } + + &__token-balance { + font-size: 43px; + line-height: 40px; + margin-top: 13px; + } +} -- cgit From b670c8074e8d1ae1c1dad49ad4c411277f82105d Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 7 Sep 2017 04:26:29 -0700 Subject: Fix font sizes on Send Token --- ui/app/css/itcss/components/send.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 87c4c0a1b..86170890c 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -226,7 +226,7 @@ &__title { color: $scorpion; - font-size: 20px; + font-size: 18px; line-height: 29px; } @@ -234,12 +234,12 @@ &__balance-text, &__token-symbol { margin-top: 10px; - font-size: 16px; + font-size: 14px; line-height: 24px; } &__token-balance { - font-size: 43px; + font-size: 40px; line-height: 40px; margin-top: 13px; } -- cgit From 17b5afb8deb50bf117a888ab24856661f67d3547 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 30 Aug 2017 08:03:00 -0230 Subject: Create tx-list-item component. --- ui/app/css/itcss/components/transaction-list.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index bdf84b919..87e8e693e 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -61,6 +61,22 @@ flex: 0 0 70px; align-items: stretch; justify-content: flex-start; + + @media screen and (max-width: $break-small) { + padding: 0 1.3em .95em; + } + + @media screen and (min-width: $break-large) { + margin: 0 2.37em; + } +} + +.tx-list-pending-item-container { + cursor: pointer; +} + +.tx-list-pending-item-container:hover { + background: $alto; } .tx-list-date-wrapper { -- cgit From 64f8a4d22b2f967087e02b5c80e1b7036a38bc61 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 09:39:04 -0230 Subject: Improve tx-list item hover scss. --- ui/app/css/itcss/components/transaction-list.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 87e8e693e..ba2f631ae 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -73,10 +73,10 @@ .tx-list-pending-item-container { cursor: pointer; -} -.tx-list-pending-item-container:hover { - background: $alto; + &:hover { + background: rgba($alto, .2); + } } .tx-list-date-wrapper { -- cgit From eabbfb83197ce948f59e0762a30d1d30266ad11c Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 7 Sep 2017 13:48:13 -0230 Subject: Link user from transaction list to etherscan if they have a transaction hash. --- ui/app/css/itcss/components/transaction-list.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index ba2f631ae..f3bba574e 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -71,7 +71,7 @@ } } -.tx-list-pending-item-container { +.tx-list-clickable { cursor: pointer; &:hover { @@ -79,6 +79,11 @@ } } +.tx-list-pending-item-container { + cursor: pointer; + opacity: 0.5; +} + .tx-list-date-wrapper { flex: 1 1 auto; -- cgit From 61b965fe14ccc44332d4e3a90ce531142da65a71 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 07:13:32 -0230 Subject: Touch up style of account-details-modal. --- ui/app/css/itcss/components/modal.scss | 36 ++++++++++++++++++++++------------ 1 file changed, 24 insertions(+), 12 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 96df60b70..7267d19ea 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -172,16 +172,19 @@ justify-content: flex-start; align-items: center; position: relative; - padding: 5px 0; + padding: 5px 0 31px 0; + border: 1px solid $silver; border-radius: 4px; + font-family: 'Montserrat UltraLight'; } .account-details-modal-wrapper .qr-header { - margin-top: 15px; + margin-top: 9px; + font-size: 20px; } .account-details-modal-wrapper .qr-wrapper { - margin-top: 15px; + margin-top: 5px; } .account-details-modal-wrapper .ellip-address-wrapper { @@ -189,25 +192,34 @@ justify-content: center; border: 1px solid $alto; padding: 5px 10px; + font-family: 'Montserrat Light'; + margin-top: 7px; + width: 286px; +} + +.account-details-modal-wrapper .qr-ellip-address { + width: 254px; } .account-details-modal-wrapper .btn-clear { min-height: 28px; - font-size: 1em; + font-size: 14px; border-color: $curious-blue; color: $curious-blue; border-radius: 2px; flex-basis: 100%; width: 75%; - margin-top: 10px; - margin-bottom: 10px; - padding: 10px; + margin-top: 17px; + padding: 10px 22px; + height: 44px; + width: 235px; + font-family: 'Montserrat Light'; } .account-details-modal-divider { width: 100%; height: 1px; - margin: 10px 0; + margin: 19px 0 8px 0; background-color: $alto; } @@ -217,11 +229,11 @@ .account-details-modal-close::after { content: '\00D7'; - font-size: 1.5em; - color: $alto; + font-size: 40px; + color: $dusty-gray; position: absolute; - top: 5px; - right: 10px; + top: 10px; + right: 12px; } // New Account Modal -- cgit From b8b0c8c62a138351277b1db0dadb7ede512da2bc Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 08:58:47 -0230 Subject: Remove highlight on modal --- ui/app/css/itcss/components/modal.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 7267d19ea..6c2cc7293 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -1,3 +1,7 @@ +.modal > div:focus { + outline: none !important; +} + // Buy Modal .buy-modal-content { flex-direction: column; -- cgit From c4eb2fb3ea1c1f0753a6bed736503528f4e539cf Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 10:54:27 -0230 Subject: Account-detail address is a readonly input. --- ui/app/css/itcss/components/modal.scss | 3 +++ 1 file changed, 3 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 6c2cc7293..7117159dc 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -203,6 +203,9 @@ .account-details-modal-wrapper .qr-ellip-address { width: 254px; + border: none; + font-family: 'Montserrat Light'; + font-size: 14px; } .account-details-modal-wrapper .btn-clear { -- cgit From 687d2f755d4fe9129d785603e5332c8af71a3481 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 7 Sep 2017 11:25:31 -0700 Subject: Fix css merge conflicts --- ui/app/css/itcss/components/transaction-list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index f3bba574e..298cacec0 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -67,7 +67,7 @@ } @media screen and (min-width: $break-large) { - margin: 0 2.37em; + // margin: 0 2.37em; } } -- cgit From ab4005cab85755d9f260b9e304ff2eeda81a10a5 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 14:38:05 -0230 Subject: Tweak styles in new-account-modal. --- ui/app/css/itcss/components/modal.scss | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 7117159dc..adc83bdcc 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -252,6 +252,7 @@ position: relative; border: 1px solid $alto; box-shadow: 0 0 2px 2px $alto; + font-family: 'Montserrat Light'; } .new-account-modal-header { @@ -262,6 +263,7 @@ padding: 30px; font-size: 22px; color: $nile-blue; + height: 79px; } .modal-close-x::after { @@ -278,13 +280,14 @@ width: 100%; display: flex; justify-content: center; - padding: 13px; - font-size: 18px; + margin-top: 15px; + font-size: 17px; color: $nile-blue; } -.new-account-modal-content.import { - padding-top: 2px; +.new-account-modal-content.after-input { + margin-top: 15px; + line-height: 25px; } .new-account-input-wrapper { @@ -292,6 +295,7 @@ width: 100%; justify-content: center; padding-bottom: 2px; + margin-top: 13px; } .new-account-input { @@ -299,9 +303,11 @@ padding-bottom: 20px; border-radius: 8px; border: 1px solid $alto; - width: 70%; + width: 73%; font-size: 1em; color: $alto; + font-family: Montserrat Light; + font-size: 17px; } // For reference on below placeholder selectors: https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css @@ -328,7 +334,10 @@ } .new-account-modal-content.button { - padding-top: 9px; + margin-top: 22px; + margin-bottom: 30px; + width: 113px; + height: 44px; } .new-account-modal-wrapper .btn-clear { @@ -337,6 +346,6 @@ background: $white; border: 1px solid; border-radius: 2px; - width: 30%; color: $tundora; + flex: 1; } -- cgit From 395e8bfce05d385eed233b82d6fc5771253c6509 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 7 Sep 2017 20:15:28 -0230 Subject: Use width 100 and margin for the new modal input. --- ui/app/css/itcss/components/modal.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index adc83bdcc..46f8b9d84 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -303,11 +303,12 @@ padding-bottom: 20px; border-radius: 8px; border: 1px solid $alto; - width: 73%; + width: 100%; font-size: 1em; color: $alto; font-family: Montserrat Light; font-size: 17px; + margin: 0 60px; } // For reference on below placeholder selectors: https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css -- cgit From 663cb758b345d7138b9e9c68489e1859dbfaa78e Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 00:45:06 -0700 Subject: Style send token screen --- ui/app/css/itcss/components/modal.scss | 12 +++++++++++- ui/app/css/itcss/components/send.scss | 19 +++++++++++++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 46f8b9d84..6d2205164 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -180,6 +180,10 @@ border: 1px solid $silver; border-radius: 4px; font-family: 'Montserrat UltraLight'; + + button { + cursor: pointer; + } } .account-details-modal-wrapper .qr-header { @@ -231,7 +235,12 @@ } .account-details-modal-wrapper .identicon { - margin-top: -55.5%; + position: relative; + left: 0; + right: 0; + margin: 0 auto; + top: -32px; + margin-bottom: -32px; } .account-details-modal-close::after { @@ -241,6 +250,7 @@ position: absolute; top: 10px; right: 12px; + cursor: pointer; } // New Account Modal diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 86170890c..a2a77f763 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -243,4 +243,23 @@ line-height: 40px; margin-top: 13px; } + + .send-screen-input-wrapper { + .fa-bolt { + padding-right: 4px; + } + + .large-input { + border: 1px solid $dusty-gray; + border-radius: 4px; + margin: 4px 0 20px; + font-size: 16px; + line-height: 22.4px; + font-family: "DIN OT"; + } + + .send-screen-gas-input { + border: 1px solid transparent; + } + } } -- cgit From 6a3c59e409cf4467ca2c59a0303f2df85ffde73f Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 20:07:48 -0230 Subject: Highlighted circle icons for the network menu. --- ui/app/css/itcss/components/network.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 8beef5e72..adc8e4662 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -43,3 +43,20 @@ .network-check__transparent { opacity: 0; } + +.menu-icon-circle { + height: 17px; + width: 17px; + border-radius: 17px; +} + +.menu-icon-circle-select { + height: 23px; + width: 23px; + margin: 9px; + background: none; + border-radius: 22px; + display: flex; + justify-content: center; + align-items: center; +} -- cgit From 99047e3ef4650ee982d6c7ed606cdaacd4965d64 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 6 Sep 2017 20:26:54 -0230 Subject: Adds title, divider and descriptive text to network dropdown. --- ui/app/css/itcss/components/network.scss | 34 ++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index adc8e4662..6661bf9b2 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -60,3 +60,37 @@ justify-content: center; align-items: center; } + +.network-dropdown-header { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; +} + +.network-dropdown-divider { + width: 100%; + height: 1px; + margin: 10px 0; + background-color: $scorpion; +} + +.network-dropdown-title { + height: 25px; + width: 75px; + color: $white; + font-family: 'DIN OT'; + font-size: 18px; + line-height: 25px; + text-align: center; +} + +.network-dropdown-content { + height: 36px; + width: 265px; + color: $dusty-gray; + font-family: 'DIN OT'; + font-size: 14px; + line-height: 18px; +} + -- cgit From 8342c20b58a0b90806a592992b6212ee6fa6f0ad Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 7 Sep 2017 21:17:07 -0230 Subject: Cleaner css for circle icon. --- ui/app/css/itcss/components/network.scss | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 6661bf9b2..5b9e8bfb1 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -44,13 +44,7 @@ opacity: 0; } -.menu-icon-circle { - height: 17px; - width: 17px; - border-radius: 17px; -} - -.menu-icon-circle-select { +.menu-icon-circle, .menu-icon-circle--active { height: 23px; width: 23px; margin: 9px; @@ -59,6 +53,24 @@ display: flex; justify-content: center; align-items: center; + border: none; + background: none; +} + +.menu-icon-circle--active { + border: 1px solid white; + background: rgba(100, 100, 100, 0.4); +} + +.menu-icon-circle div, .menu-icon-circle--active div { + height: 17px; + width: 17px; + border-radius: 17px; + opacity: 0.7; +} + +.menu-icon-circle--active div { + opacity: 1; } .network-dropdown-header { -- cgit From 392d0d020c4a6efea7e0207dd0a6a70d13766241 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 11 Sep 2017 22:40:14 -0230 Subject: Use transparent border for consistent size with and without border. --- ui/app/css/itcss/components/network.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 5b9e8bfb1..3f75beb85 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -53,7 +53,7 @@ display: flex; justify-content: center; align-items: center; - border: none; + border: 1px solid transparent; background: none; } -- cgit From 062e67bff83fd79647231be6e2448d35b5f312f9 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 22:14:09 -0700 Subject: Add buttons; handle back; add yarn.lock --- ui/app/css/itcss/components/buttons.scss | 18 ++++++++++++ ui/app/css/itcss/components/send.scss | 49 ++++++++++++++++++++++---------- 2 files changed, 52 insertions(+), 15 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 7fff5969c..0946cdbbb 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -82,3 +82,21 @@ button.btn-thin { padding: 6px; font-size: 13px; } + +.btn-secondary { + border: 1px solid #979797; + border-radius: 2px; + background-color: $white; + font-size: 16px; + line-height: 24px; + padding: 16px 42px; +} + +.btn-tertiary { + border: 1px solid transparent; + border-radius: 2px; + background-color: transparent; + font-size: 16px; + line-height: 24px; + padding: 16px 42px; +} diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index a2a77f763..091816e7d 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -80,12 +80,16 @@ justify-content: space-between; } -.selected-currency { - color: $curious-blue; -} - -.unselected-currency { - cursor: pointer; +.currency-toggle { + &__item { + color: $curious-blue; + cursor: pointer; + + &--selected { + color: $black; + cursor: default; + } + } } .send-screen-gas-input-customize { @@ -115,7 +119,7 @@ padding: 13px 19px; font-size: 16px; border-radius: 4px; - font-family: 'Lato'; + font-family: "Lato"; font-weight: 500; } @@ -205,19 +209,24 @@ } .send-token { - width: 498px; - height: 605px; - background-color: #fff; display: flex; flex-flow: column nowrap; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); - padding: 46px 40.5px 26px; - position: relative; - top: -26px; z-index: 25; - align-items: center; font-family: "Montserrat Light"; + &__content { + width: 498px; + height: 605px; + background-color: #fff; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + padding: 46px 40.5px 26px; + position: relative; + top: -26px; + align-items: center; + display: flex; + flex-flow: column nowrap; + } + .identicon { position: absolute; top: -35px; @@ -244,6 +253,16 @@ margin-top: 13px; } + &__button-group { + display: flex; + flex-flow: column nowrap; + align-items: center; + + button { + width: 163px; + } + } + .send-screen-input-wrapper { .fa-bolt { padding-right: 4px; -- cgit From 1e83835ba8cce0fdf794092a8c55b6c68664204a Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 12 Sep 2017 02:49:05 -0230 Subject: [New-UI] Confirm Screen restyle and connect to state (#2042) * Adds utility for converting currencies (WIP) * Implements confirm screen * Style tweaks. * Confirm screen total ammount now uses real data. * Confirm screen total ammount now uses real data. * Replace content divider with sibling css. * Replace section divider with scss. --- ui/app/css/itcss/components/confirm.scss | 223 +++++++++++++++++++++++++++++++ ui/app/css/itcss/components/index.scss | 2 + 2 files changed, 225 insertions(+) create mode 100644 ui/app/css/itcss/components/confirm.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss new file mode 100644 index 000000000..da1d00777 --- /dev/null +++ b/ui/app/css/itcss/components/confirm.scss @@ -0,0 +1,223 @@ +.confirm-screen-container { + position: absolute; + + @media screen and (max-width: 575px) { + margin-top: 35px; + } + + @media screen and (min-width: 576px) { + margin-top: 6.9vh; + } +} + +.confirm-screen-wrapper { + display: flex; + flex-direction: column; + min-width: 320px; + min-height: 753px; + z-index: 100; + top: 5%; + font-family: 'DIN NEXT'; + margin-left: 3.5%; + margin-right: 3.5%; + background: $white; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + padding-top: 20px; + padding-bottom: 31px; + + @media screen and (min-width: $break-large) { + width: 498px; + } +} + +.confirm-screen-wrapper > h3, +.confirm-screen-wrapper > div, +.confirm-screen-wrapper > section { + margin-left: 23px; + margin-right: 23px; +} + +.confirm-screen-wrapper > .confirm-screen-total-box { + margin-left: 10px; + margin-right: 10px; +} + +.confirm-screen-wrapper > .confirm-memo-wrapper { + margin: 0; +} + +.confirm-screen-wrapper > .confirm-screen-header { + @media screen and (max-width: $break-small) { + margin-left: 8px; + } +} + +.confirm-screen-header { + font-size: 26px; + position: relative; + + @media screen and (max-width: $break-small) { + font-size: 22px; + } +} + +.confirm-screen-title { + @media screen and (max-width: $break-small) { + margin-left: 22px; + margin-right: 8px; + } +} + +.confirm-screen-back-button { + background: $white; + border: 1px solid $dusty-gray; + left: 0; + position: absolute; + text-align: center; + color: $black; + padding: 6px 13px 7px 12px; + border-radius: 2px; + height: 30px; + width: 54px; + + @media screen and (max-width: $break-small) { + margin-right: 12px; + } +} + +.confirm-screen-account-wrapper { + display: flex; + flex-direction: column; +} + +.confirm-screen-account-name, .confirm-screen-row-info { + font-size: 16px; + line-height: 24px; + color: $scorpion; + text-align: center; +} + +.confirm-screen-account-number { + font-size: 10px; + line-height: 16px; + color: $dusty-gray; + text-align: center; +} + +.confirm-screen-identicons { + margin-top: 48px; + + i { + align-self: start; + margin: 20px 14px 0 14px; + } +} + +.confirm-screen-sending-to-message { + text-align: center; + font-size: 16px; + margin-top: 30px; +} + +.confirm-screen-send-amount { + font-size: 64px; + color: $scorpion; + margin-top: 12px; + line-height: 60px; + text-align: center; + font-family: 'DIN NEXT Light'; +} + +.confirm-screen-send-amount-currency { + font-size: 20px; + line-height: 20px; + text-align: center; +} + +.confirm-memo-wrapper { + width: 100%; + border-bottom: 1px solid $gallery; +} + +.confirm-screen-send-memo { + color: $dusty-gray; + font-size: 16px; + line-height: 24px; + text-align: center; + margin-top: 21px; + margin-bottom: 18px; +} + +.confirm-screen-label { + font-size: 18px; + line-height: 25px; + color: $scorpion; + text-align: left; +} + +section .confirm-screen-account-name, +section .confirm-screen-account-number, +.confirm-screen-row-info, +.confirm-screen-row-detail { + text-align: left; +} + +.confirm-screen-row { + margin-top: 15px; + margin-bottom: 11.5px; +} + +.confirm-screen-row-detail { + font-size: 12px; + line-height: 16px; + color: $dusty-gray; +} + +.confirm-screen-total-box { + background-color: $wild-sand; + border-radius: 8px; + margin-left: 10px; + margin-right: 10px; + padding: 22px 14px 22px; + margin-bottom: 10px; + margin-top: 13px; +} + +.confirm-screen-confirm-button { + height: 62px; + width: 216.88px; + border-radius: 2px; + background-color: #02C9B1; + font-size: 16px; + color: $white; + text-align: center; + font-family: 'DIN NEXT'; + padding-top: 15px; + padding-bottom: 15px; + margin-top: 23px; + border-width: 0; + box-shadow: none; +} + +.btn-light.confirm-screen-cancel-button { + height: 62px; + width: 216.88px; + background: none; + border: none; + opacity: 1; + width: 8em; + font-family: 'DIN NEXT'; + border-width: 0; + padding-top: 15px; + padding-bottom: 15px; + font-size: 16px; + box-shadow: none; +} + +#pending-tx-form { + flex: 1 0 auto; +} + +.confirm-screen-row + .confirm-screen-row { + border-top: 1px solid $gallery; +} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 952d11ce4..63ac8bd47 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -14,6 +14,8 @@ @import './send.scss'; +@import './confirm.scss'; + // Balances @import './hero-balance.scss'; -- cgit From 836bf2e1a38bb6917f1b7fe9db0604c8143c7adf Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 23:18:54 -0700 Subject: Add frontend validation to send-token --- ui/app/css/itcss/components/confirm.scss | 1 + ui/app/css/itcss/components/hero-balance.scss | 5 ++--- ui/app/css/itcss/components/network.scss | 2 ++ ui/app/css/itcss/components/send.scss | 21 +++++++++++++++++++++ 4 files changed, 26 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index da1d00777..865915c30 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -1,5 +1,6 @@ .confirm-screen-container { position: absolute; + align-items: center; @media screen and (max-width: 575px) { margin-top: 35px; diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index f7b3cc3e5..8f6731358 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -87,10 +87,10 @@ } button.btn-clear { - font-size: 75%; background: $white; border: 1px solid; border-radius: 2px; + font-size: 12px; @media screen and (max-width: $break-small) { width: 23%; @@ -99,10 +99,9 @@ } @media screen and (min-width: $break-large) { - font-size: .6em; border-color: $curious-blue; color: $curious-blue; - padding: 0px; + padding: 0; width: 85px; height: 34px; } diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 3f75beb85..012b1faf6 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -42,6 +42,8 @@ .network-check__transparent { opacity: 0; + width: 16px; + margin: 0; } .menu-icon-circle, .menu-icon-circle--active { diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 091816e7d..847b893ab 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -46,6 +46,27 @@ .send-screen-input-wrapper { width: 95%; position: relative; + + &__error-message { + display: none; + } + + &--error { + input, + .send-screen-gas-input { + border-color: $red !important; + } + + .send-screen-input-wrapper__error-message { + display: block; + position: absolute; + bottom: 4px; + font-size: 12px; + line-height: 12px; + left: 8px; + color: $red; + } + } } .send-screen-input { -- cgit From 492507aa94cb5713d5eaa700cfd7e88b2a16ca7a Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 12 Sep 2017 19:29:33 -0230 Subject: [NewUI] Color tx-list-item text depending on transaction status. (#2050) * Color tx-list-item text depending on transaction status. * Handle css change of text colour with scss instead on inline styles, add classnames package and helper function. * Refactored to use classnames with component property className. --- ui/app/css/itcss/components/transaction-list.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 298cacec0..50bdb3cd5 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -151,6 +151,10 @@ font-size: 16px; text-transform: capitalize; } + + .tx-list-status--rejected { + color: $monzo; + } } .tx-list-item { @@ -179,6 +183,10 @@ text-align: right; } + .tx-list-value--confirmed { + color: $caribbean-green; + } + .tx-list-fiat-value { font-size: 12px; text-align: right; @@ -191,3 +199,12 @@ padding: 16px; } } + +.tx-list-value { + font-size: 16px; + text-align: right; +} + +.tx-list-value--confirmed { + color: $caribbean-green; +} -- cgit From 8b5f2a95df45c24061c13c51ca874e933e743381 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 12 Sep 2017 23:02:51 -0700 Subject: Improve styling in Confirmation Screen; Show decoded send token data --- ui/app/css/itcss/components/confirm.scss | 104 ++++++++++++++++++++----------- 1 file changed, 68 insertions(+), 36 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 865915c30..12322462e 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -4,6 +4,7 @@ @media screen and (max-width: 575px) { margin-top: 35px; + width: 100%; } @media screen and (min-width: 576px) { @@ -14,30 +15,21 @@ .confirm-screen-wrapper { display: flex; flex-direction: column; - min-width: 320px; - min-height: 753px; + align-items: center; z-index: 100; top: 5%; font-family: 'DIN NEXT'; - margin-left: 3.5%; - margin-right: 3.5%; background: $white; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); - padding-top: 20px; - padding-bottom: 31px; + // padding: 20px 24px 32px; + color: $scorpion; + width: 100%; @media screen and (min-width: $break-large) { width: 498px; } } -.confirm-screen-wrapper > h3, -.confirm-screen-wrapper > div, -.confirm-screen-wrapper > section { - margin-left: 23px; - margin-right: 23px; -} - .confirm-screen-wrapper > .confirm-screen-total-box { margin-left: 10px; margin-right: 10px; @@ -48,6 +40,7 @@ } .confirm-screen-wrapper > .confirm-screen-header { + @media screen and (max-width: $break-small) { margin-left: 8px; } @@ -56,23 +49,30 @@ .confirm-screen-header { font-size: 26px; position: relative; + display: flex; + flex-flow: row nowrap; + align-items: center; + width: 100%; + padding: 20px 24px 0; @media screen and (max-width: $break-small) { - font-size: 22px; + font-size: 22px; } } .confirm-screen-title { + line-height: 27px; + @media screen and (max-width: $break-small) { - margin-left: 22px; - margin-right: 8px; + margin-left: 22px; + margin-right: 8px; } } .confirm-screen-back-button { background: $white; border: 1px solid $dusty-gray; - left: 0; + left: 24px; position: absolute; text-align: center; color: $black; @@ -82,7 +82,7 @@ width: 54px; @media screen and (max-width: $break-small) { - margin-right: 12px; + margin-right: 12px; } } @@ -91,7 +91,12 @@ flex-direction: column; } -.confirm-screen-account-name, .confirm-screen-row-info { +.confirm-screen-account-name { + margin-top: 12px; +} + +.confirm-screen-account-name, +.confirm-screen-row-info { font-size: 16px; line-height: 24px; color: $scorpion; @@ -106,11 +111,11 @@ } .confirm-screen-identicons { - margin-top: 48px; + margin-top: 24px; i { align-self: start; - margin: 20px 14px 0 14px; + margin: 42px 14px 0; } } @@ -118,13 +123,14 @@ text-align: center; font-size: 16px; margin-top: 30px; + font-family: 'DIN NEXT Light'; } .confirm-screen-send-amount { font-size: 64px; color: $scorpion; margin-top: 12px; - line-height: 60px; + line-height: 60px; text-align: center; font-family: 'DIN NEXT Light'; } @@ -136,8 +142,9 @@ } .confirm-memo-wrapper { + min-height: 24px; width: 100%; - border-bottom: 1px solid $gallery; + border-bottom: 1px solid $alto; } .confirm-screen-send-memo { @@ -147,11 +154,12 @@ text-align: center; margin-top: 21px; margin-bottom: 18px; + font-family: 'DIN NEXT Light'; } .confirm-screen-label { - font-size: 18px; - line-height: 25px; + font-size: 18px; + line-height: 40px; color: $scorpion; text-align: left; } @@ -163,32 +171,60 @@ section .confirm-screen-account-number, text-align: left; } +.confirm-screen-rows { + display: flex; + flex-flow: column nowrap; + width: 100%; + padding: 0 24px 32px; +} + +.confirm-screen-section-column { + flex: .5; +} + .confirm-screen-row { - margin-top: 15px; - margin-bottom: 11.5px; + display: flex; + flex-flow: row nowrap; + border-bottom: 1px solid $alto; + width: calc(100% - 24px); + align-items: center; + padding: 12px 0; + margin: 0 12px; } .confirm-screen-row-detail { font-size: 12px; line-height: 16px; color: $dusty-gray; + font-family: 'DIN NEXT Light'; } .confirm-screen-total-box { background-color: $wild-sand; border-radius: 8px; - margin-left: 10px; - margin-right: 10px; - padding: 22px 14px 22px; - margin-bottom: 10px; + padding: 22px 14px; margin-top: 13px; + + .confirm-screen-label { + line-height: 18px; + } + + .confirm-screen-row-detail { + color: $scorpion; + } + + &__subtitle { + font-size: 14px; + line-height: 20px; + font-family: 'DIN NEXT Light'; + } } .confirm-screen-confirm-button { height: 62px; width: 216.88px; border-radius: 2px; - background-color: #02C9B1; + background-color: #02c9b1; font-size: 16px; color: $white; text-align: center; @@ -218,7 +254,3 @@ section .confirm-screen-account-number, #pending-tx-form { flex: 1 0 auto; } - -.confirm-screen-row + .confirm-screen-row { - border-top: 1px solid $gallery; -} -- cgit From 8f31b05ac5b7d8383c720b8b0c9f7f3cecc937f5 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 13 Sep 2017 01:25:39 -0700 Subject: Add token exchange rates --- ui/app/css/itcss/components/send.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 847b893ab..55eb90047 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -229,6 +229,17 @@ padding: 1px 4px; } +.token-gas { + &__amount { + display: inline-block; + margin-right: 4px; + } + + &__symbol { + display: inline-block; + } +} + .send-token { display: flex; flex-flow: column nowrap; -- cgit From a5ab91e572eec05450a760d4a65e3a28df67c0d1 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 13 Sep 2017 12:41:03 -0230 Subject: Enables Cancel button in confirmation screen. --- ui/app/css/itcss/components/confirm.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 12322462e..e8169ffea 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -249,6 +249,7 @@ section .confirm-screen-account-number, padding-bottom: 15px; font-size: 16px; box-shadow: none; + cursor: pointer; } #pending-tx-form { -- cgit From d722c1045f70954cb1a97de52cae5084a6f14815 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 13 Sep 2017 19:57:33 -0700 Subject: Update yarn.lock; Fix tx-list-item overflow; Fix gas exchange rate --- ui/app/css/itcss/components/transaction-list.scss | 59 +++++++++++++++++++++-- 1 file changed, 55 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 50bdb3cd5..589d18b72 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -39,7 +39,7 @@ } .tx-list-container::-webkit-scrollbar { - display: none; + display: none; } } @@ -58,9 +58,12 @@ } .tx-list-item-wrapper { - flex: 0 0 70px; + flex: 1 1 auto; + width: 0; align-items: stretch; justify-content: flex-start; + display: flex; + flex-flow: column nowrap; @media screen and (max-width: $break-small) { padding: 0 1.3em .95em; @@ -76,6 +79,10 @@ &:hover { background: rgba($alto, .2); + + .tx-list-details-wrapper { + background: transparent; + } } } @@ -101,6 +108,30 @@ align-items: stretch; margin-bottom: 4px; margin-top: 2px; + flex: 1 0 auto; + width: 100%; + display: flex; + flex-flow: row nowrap; + + @media screen and (max-width: $break-small) { + font-size: 12px; + + .tx-list-status { + font-size: 12px !important; + } + + .tx-list-account { + font-size: 14px !important; + } + + .tx-list-value { + font-size: 14px; + } + + .tx-list-fiat-value { + font-size: 12px; + } + } } .tx-list-date { @@ -117,7 +148,8 @@ .tx-list-account-and-status-wrapper { display: flex; - flex: 8 8 auto; + flex: 1 1 auto; + width: 0; @media screen and (max-width: $break-small) { flex-direction: column; @@ -159,9 +191,12 @@ .tx-list-item { border-top: 1px solid rgb(231, 231, 231); + flex: 0 0 auto; + display: flex; + flex-flow: row nowrap; @media screen and (max-width: $break-small) { - margin: 0 1.3em .95em; + // margin: 0 1.3em .95em; !important } @media screen and (min-width: $break-large) { @@ -200,9 +235,25 @@ } } +.tx-list-details-wrapper { + overflow: hidden; + flex: 0 0 35%; + background: rgba($white, .8); +} + .tx-list-value { font-size: 16px; text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.tx-list-fiat-value { + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .tx-list-value--confirmed { -- cgit From 93a1089e085cb70ddbd58721a140ab8d3b6b79eb Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 14 Sep 2017 01:09:57 -0700 Subject: Show token tx properly --- ui/app/css/itcss/components/transaction-list.scss | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 589d18b72..e3fe1a8b3 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -66,11 +66,11 @@ flex-flow: column nowrap; @media screen and (max-width: $break-small) { - padding: 0 1.3em .95em; + padding: 0 1.3em; } @media screen and (min-width: $break-large) { - // margin: 0 2.37em; + padding-bottom: 12px; } } @@ -79,16 +79,12 @@ &:hover { background: rgba($alto, .2); - - .tx-list-details-wrapper { - background: transparent; - } } } .tx-list-pending-item-container { cursor: pointer; - opacity: 0.5; + opacity: .5; } .tx-list-date-wrapper { @@ -96,11 +92,10 @@ @media screen and (max-width: $break-small) { margin-top: 6px; - margin-bottom: 20px; } @media screen and (min-width: $break-large) { - margin-top: 13px; + margin-top: 12px; } } @@ -149,6 +144,7 @@ .tx-list-account-and-status-wrapper { display: flex; flex: 1 1 auto; + flex-flow: row wrap; width: 0; @media screen and (max-width: $break-small) { @@ -184,7 +180,8 @@ text-transform: capitalize; } - .tx-list-status--rejected { + .tx-list-status--rejected, + .tx-list-status--failed { color: $monzo; } } @@ -238,7 +235,6 @@ .tx-list-details-wrapper { overflow: hidden; flex: 0 0 35%; - background: rgba($white, .8); } .tx-list-value { -- cgit From 4bcc62500f6f77131a21be823e3169b91d1dbf80 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 14 Sep 2017 01:32:24 -0700 Subject: Style send ether screen --- ui/app/css/itcss/components/send.scss | 92 +++++++++++++++++++++-------------- 1 file changed, 56 insertions(+), 36 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 55eb90047..d4b77fae1 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -1,11 +1,7 @@ .send-screen-wrapper { display: flex; - flex-direction: column; - min-width: 320px; - min-height: 500px; - z-index: $send-card-z-index; - position: absolute; - top: 5%; + flex-flow: column nowrap; + z-index: 25; font-family: 'DIN OT'; @media screen and (max-width: $break-small) { @@ -14,14 +10,15 @@ } .send-screen-card { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - margin-left: 3.5%; - margin-right: 3.5%; - background: $white; + background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + padding: 46px 40.5px 26px; + position: relative; + top: -26px; + align-items: center; + display: flex; + flex-flow: column nowrap; + width: 498px; } /* Send Screen */ @@ -36,17 +33,39 @@ } .send-eth-icon { - border-radius: 25px; - width: 45px; - height: 45px; + border-radius: 50%; + width: 70px; + height: 70px; border: 1px solid $alto; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); + box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2); + position: absolute; + top: -35px; + z-index: 25; + padding: 4px; + background-color: $white; } .send-screen-input-wrapper { width: 95%; position: relative; + .fa-bolt { + padding-right: 4px; + } + + .large-input { + border: 1px solid $dusty-gray; + border-radius: 4px; + margin: 4px 0 20px; + font-size: 16px; + line-height: 22.4px; + font-family: "DIN OT"; + } + + .send-screen-gas-input { + border: 1px solid transparent; + } + &__error-message { display: none; } @@ -240,6 +259,26 @@ } } +.send-screen { + &__title { + color: $scorpion; + font-size: 18px; + line-height: 29px; + } + + &__subtitle { + margin: 10px 0 20px; + font-size: 14px; + line-height: 24px; + } + + &__send-button, + &__cancel-button { + width: 163px; + text-align: center; + } +} + .send-token { display: flex; flex-flow: column nowrap; @@ -294,23 +333,4 @@ width: 163px; } } - - .send-screen-input-wrapper { - .fa-bolt { - padding-right: 4px; - } - - .large-input { - border: 1px solid $dusty-gray; - border-radius: 4px; - margin: 4px 0 20px; - font-size: 16px; - line-height: 22.4px; - font-family: "DIN OT"; - } - - .send-screen-gas-input { - border: 1px solid transparent; - } - } } -- cgit From 35d8671843ff15822488ae39310c8c12818fb1a3 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 14 Sep 2017 09:56:40 -0700 Subject: Add responsive UI to send ether modal --- ui/app/css/itcss/components/header.scss | 15 ++++++++++----- ui/app/css/itcss/components/newui-sections.scss | 8 ++++---- ui/app/css/itcss/components/send.scss | 20 +++++++++++++++++++- 3 files changed, 33 insertions(+), 10 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 160476d58..ed569cb08 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -2,20 +2,22 @@ align-items: center; visibility: visible; background: $gallery; - height: 14.4vh; - max-height: 97px; position: relative; z-index: $header-z-index; display: flex; flex-flow: column nowrap; @media screen and (max-width: 575px) { - position: fixed; - height: 34px; + padding: 0 12px; width: 100%; box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08); z-index: $mobile-header-z-index; } + + @media screen and (min-width: 576px) { + height: 14.4vh; + max-height: 97px; + } } .app-header-contents { @@ -25,13 +27,16 @@ width: 100%; height: 6.9vh; + @media screen and (max-width: 575px) { + height: 100%; + } + @media screen and (min-width: 576px) { width: 85vw; } @media screen and (min-width: 769px) { width: 80vw; - height: 6.9vh; } @media screen and (min-width: 1281px) { diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index b576e5ca5..ae6ee6311 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -70,7 +70,7 @@ $wallet-view-bg: $wild-sand; background: rgb(250, 250, 250); z-index: $sidebar-z-index; position: fixed; - top: 35px; + top: 41px; left: 0; right: 0; bottom: 0; @@ -86,7 +86,7 @@ $wallet-view-bg: $wild-sand; .sidebar-overlay { z-index: $sidebar-overlay-z-index; position: fixed; - top: 35px; + top: 41px; left: 0; right: 0; bottom: 0; @@ -142,8 +142,8 @@ $wallet-view-bg: $wild-sand; } .main-container { - margin-top: 35px; - height: calc(100% - 34px); + margin-top: 41px; + height: calc(100% - 41px); width: 100%; overflow-y: auto; background-color: $white; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index d4b77fae1..3c30c3b2a 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -5,7 +5,12 @@ font-family: 'DIN OT'; @media screen and (max-width: $break-small) { - top: 33px; + width: 100%; + overflow-y: auto; + + section { + flex: 0 0 auto; + } } } @@ -19,6 +24,14 @@ display: flex; flex-flow: column nowrap; width: 498px; + + @media screen and (max-width: $break-small) { + top: 0; + width: 100%; + box-shadow: none; + padding: 12px; + flex: 1 0 auto; + } } /* Send Screen */ @@ -43,6 +56,11 @@ z-index: 25; padding: 4px; background-color: $white; + + @media screen and (max-width: $break-small) { + position: relative; + top: 0; + } } .send-screen-input-wrapper { -- cgit From 7d76e404f2992fcf932ece22fddeabfe230afe0d Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 14 Sep 2017 11:45:59 -0700 Subject: Make send token responsive; fix desktop send modal height --- ui/app/css/itcss/components/send.scss | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 3c30c3b2a..2d6374aa2 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -7,10 +7,10 @@ @media screen and (max-width: $break-small) { width: 100%; overflow-y: auto; + } - section { - flex: 0 0 auto; - } + section { + flex: 0 0 auto; } } @@ -24,13 +24,13 @@ display: flex; flex-flow: column nowrap; width: 498px; + flex: 1 0 auto; @media screen and (max-width: $break-small) { top: 0; width: 100%; box-shadow: none; padding: 12px; - flex: 1 0 auto; } } @@ -314,12 +314,26 @@ align-items: center; display: flex; flex-flow: column nowrap; + flex: 1 0 auto; + + @media screen and (max-width: $break-small) { + top: 0; + width: 100%; + box-shadow: none; + padding: 12px; + } } .identicon { position: absolute; top: -35px; z-index: 25; + + @media screen and (max-width: $break-small) { + position: relative; + top: 0; + flex: 0 0 auto; + } } &__title { @@ -334,6 +348,7 @@ margin-top: 10px; font-size: 14px; line-height: 24px; + text-align: center; } &__token-balance { @@ -346,6 +361,11 @@ display: flex; flex-flow: column nowrap; align-items: center; + flex: 0 0 auto; + + @media screen and (max-width: $break-small) { + margin-top: 24px; + } button { width: 163px; -- cgit From b0f1fba2e5fbde573b46a284285985e63f1a3618 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 15 Sep 2017 12:39:34 -0230 Subject: Ensures that new accounts are only created from the modal, and not when clicking 'Create New Account' --- ui/app/css/itcss/components/modal.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 6d2205164..e9698ce5b 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -284,6 +284,7 @@ top: 25px; right: 17.5px; font-family: sans-serif; + cursor: pointer; } .new-account-modal-content { -- cgit From e7f1fc44361829f05a713218f8b1837a8574c2f2 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 19 Sep 2017 18:49:35 -0700 Subject: Buy Modal Styling --- ui/app/css/itcss/components/modal.scss | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index e9698ce5b..c85e61ae2 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -9,6 +9,12 @@ justify-content: center; text-align: center; font-family: 'DIN OT'; + padding: 0 16px; +} + +.buy-modal-content-option { + cursor: pointer; + color: #5B5D67; } @media screen and (max-width: 575px) { @@ -44,7 +50,6 @@ border-radius: 6px; border: 1px solid $black; padding: 0% 7%; - justify-content: space-around; div.buy-modal-content-option-title { font-size: 20px; @@ -76,29 +81,30 @@ .buy-modal-content-options { flex-direction: row; - margin: 20px 0; + margin: 20px 0 60px; } div.buy-modal-content-option { display: flex; flex-direction: column; width: 20vw; - height: 18vw; + height: 120px; text-align: center; border-radius: 6px; border: 1px solid $black; - margin: 0 .5vw; - justify-content: space-around; + margin: 0 8px; + padding: 18px 0; div.buy-modal-content-option-title { font-size: 20px; + margin-bottom: 12px; @media screen and (max-width: 679px) { font-size: 14px; } @media screen and (min-width: 1281px) { - font-size: 26px; + font-size: 20px; } } @@ -121,7 +127,7 @@ } @media screen and (min-width: 1281px) { - font-size: 20px; + font-size: 16px; padding: 0; } } -- cgit From 0204aa2001af25da01ba61aed32f36eac47079a1 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 19 Sep 2017 21:18:36 -0700 Subject: Add Add Token UI; Add Fuzzy search for tokens --- ui/app/css/itcss/components/add-token.scss | 173 +++++++++++++++++++++++++++++ ui/app/css/itcss/components/index.scss | 2 + 2 files changed, 175 insertions(+) create mode 100644 ui/app/css/itcss/components/add-token.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss new file mode 100644 index 000000000..db1d0dc18 --- /dev/null +++ b/ui/app/css/itcss/components/add-token.scss @@ -0,0 +1,173 @@ +.add-token { + width: 498px; + display: flex; + flex-flow: column nowrap; + align-items: center; + position: relative; + top: -36px; + z-index: 12; + font-family: 'DIN Next Light'; + + @media screen and (max-width: $break-small) { + top: 0; + width: 100%; + + &__wrapper { + box-shadow: none !important; + } + + &__footers { + border-bottom: 1px solid $gallery; + } + } + + &__wrapper { + background-color: $white; + box-shadow: 0 2px 4px 0 rgba($black, .08); + display: flex; + flex-flow: column nowrap; + align-items: center; + flex: 0 0 auto; + } + + &__title-container { + display: flex; + flex-flow: column nowrap; + align-items: center; + padding: 30px 60px 12px; + border-bottom: 1px solid $gallery; + flex: 0 0 auto; + } + + &__title { + color: $scorpion; + font-size: 20px; + line-height: 26px; + text-align: center; + font-weight: 600; + margin-bottom: 12px; + } + + &__description { + text-align: center; + } + + &__description + &__description { + margin-top: 24px; + } + + &__content-container { + width: 100%; + border-bottom: 1px solid $gallery; + } + + &__input-container { + padding: 11px 0; + width: 263px; + margin: 0 auto; + } + + &__input { + width: 100%; + border: 2px solid $gallery; + border-radius: 4px; + padding: 5px 15px; + font-size: 14px; + line-height: 19px; + + &::placeholder { + color: $silver; + } + } + + &__footers { + width: 100%; + } + + &__add-custom { + color: $scorpion; + font-size: 18px; + line-height: 24px; + text-align: center; + padding: 11px 0 19px; + font-weight: 600; + cursor: pointer; + } + + &__add-custom-form { + display: flex; + flex-flow: column nowrap; + margin: 8px 0 51px; + } + + &__add-custom-field { + width: 290px; + margin: 0 auto; + } + + &__add-custom-label { + font-size: 16px; + line-height: 21px; + margin-bottom: 8px; + } + + &__add-custom-input { + width: 100%; + border: 1px solid $silver; + padding: 5px 15px; + font-size: 14px; + line-height: 19px; + + &::placeholder { + color: $silver; + } + } + + &__add-custom-field + &__add-custom-field { + margin-top: 21px; + } + + &__buttons { + display: flex; + flex-flow: column nowrap; + margin: 30px 0 51px; + flex: 0 0 auto; + } + + &__token-icons-container { + display: flex; + flex-flow: row wrap; + } + + &__token-wrapper { + display: flex; + flex-flow: row nowrap; + flex: 0 0 50%; + align-items: center; + padding: 24px 0 24px 24px; + } + + &__token-name { + font-size: 14px; + line-height: 19px; + } + + &__token-symbol { + font-size: 22px; + line-height: 29px; + font-weight: 600; + } + + &__token-icon { + width: 60px; + height: 60px; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + border-radius: 50%; + background-color: $white; + box-shadow: 0 2px 4px 0 rgba($black, .24); + margin-right: 12px; + flex: 0 0 auto; + } +} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 63ac8bd47..9b3690099 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -27,3 +27,5 @@ @import './sections.scss'; @import './token-list.scss'; + +@import './add-token.scss'; -- cgit From 04da22db0863a9a361a0f414d9cc37bf3bb3a392 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 20 Sep 2017 22:57:36 -0700 Subject: Add Token UI - hover/select state; fetch token address --- ui/app/css/itcss/components/add-token.scss | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index db1d0dc18..ebfdf7b11 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -140,11 +140,22 @@ } &__token-wrapper { + transition: 200ms ease-in-out; display: flex; flex-flow: row nowrap; - flex: 0 0 50%; + flex: 0 0 45%; align-items: center; - padding: 24px 0 24px 24px; + padding: 12px; + margin: 2.5%; + box-sizing: border-box; + border-radius: 10px; + cursor: pointer; + border: 2px solid transparent; + + &:hover, + &--selected { + border: 2px solid $malibu-blue; + } } &__token-name { -- cgit From 24fd16b1bee31352ef7f364804eb5f06c08c3bf6 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 19 Sep 2017 22:26:10 -0230 Subject: Abstract account modal. --- ui/app/css/itcss/components/modal.scss | 57 ++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 27 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index c85e61ae2..9f6ce54f5 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -175,8 +175,8 @@ font-size: 18px; } -// Account Details Modal -.account-details-modal-wrapper { +// Account Modal Container +.account-modal-container { display: flex; flex-direction: column; justify-content: flex-start; @@ -192,16 +192,38 @@ } } -.account-details-modal-wrapper .qr-header { +.account-modal-close::after { + content: '\00D7'; + font-size: 40px; + color: $dusty-gray; + position: absolute; + top: 10px; + right: 12px; + cursor: pointer; +} + +.account-modal-container .identicon { + position: relative; + left: 0; + right: 0; + margin: 0 auto; + top: -32px; + margin-bottom: -32px; +} + + +// Account Details Modal + +.account-modal-container .qr-header { margin-top: 9px; font-size: 20px; } -.account-details-modal-wrapper .qr-wrapper { +.account-modal-container .qr-wrapper { margin-top: 5px; } -.account-details-modal-wrapper .ellip-address-wrapper { +.account-modal-container .ellip-address-wrapper { display: flex; justify-content: center; border: 1px solid $alto; @@ -211,14 +233,14 @@ width: 286px; } -.account-details-modal-wrapper .qr-ellip-address { +.account-modal-container .qr-ellip-address { width: 254px; border: none; font-family: 'Montserrat Light'; font-size: 14px; } -.account-details-modal-wrapper .btn-clear { +.account-modal-container .btn-clear { min-height: 28px; font-size: 14px; border-color: $curious-blue; @@ -233,32 +255,13 @@ font-family: 'Montserrat Light'; } -.account-details-modal-divider { +.account-modal-divider { width: 100%; height: 1px; margin: 19px 0 8px 0; background-color: $alto; } -.account-details-modal-wrapper .identicon { - position: relative; - left: 0; - right: 0; - margin: 0 auto; - top: -32px; - margin-bottom: -32px; -} - -.account-details-modal-close::after { - content: '\00D7'; - font-size: 40px; - color: $dusty-gray; - position: absolute; - top: 10px; - right: 12px; - cursor: pointer; -} - // New Account Modal .new-account-modal-wrapper { display: flex; -- cgit From 3ec2f534632426876c28b22c58cbbf14b4904d97 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 21 Sep 2017 18:44:52 -0700 Subject: Integrate Add Token --- ui/app/css/itcss/components/add-token.scss | 95 +++++++++++++++++++++++++++++- ui/app/css/itcss/components/buttons.scss | 10 +++- 2 files changed, 100 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index ebfdf7b11..d5d1aab71 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -56,6 +56,10 @@ margin-top: 24px; } + &__confirmation-description { + margin: 12px 0; + } + &__content-container { width: 100%; border-bottom: 1px solid $gallery; @@ -65,6 +69,18 @@ padding: 11px 0; width: 263px; margin: 0 auto; + position: relative; + } + + &__search-input-error-message { + position: absolute; + bottom: -10px; + font-size: 12px; + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + color: $red; } &__input { @@ -89,9 +105,13 @@ font-size: 18px; line-height: 24px; text-align: center; - padding: 11px 0 19px; + padding: 12px 0; font-weight: 600; cursor: pointer; + + &:hover { + background-color: $gallery; + } } &__add-custom-form { @@ -103,6 +123,24 @@ &__add-custom-field { width: 290px; margin: 0 auto; + position: relative; + + &--error { + .add-token__add-custom-input { + border-color: $red; + } + } + } + + &__add-custom-error-message { + position: absolute; + bottom: -21px; + font-size: 12px; + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + color: $red; } &__add-custom-label { @@ -152,9 +190,12 @@ cursor: pointer; border: 2px solid transparent; - &:hover, + &:hover { + border: 2px solid rgba($malibu-blue, .5); + } + &--selected { - border: 2px solid $malibu-blue; + border: 2px solid $malibu-blue !important; } } @@ -181,4 +222,52 @@ margin-right: 12px; flex: 0 0 auto; } + + &__confirmation-token-list { + display: flex; + flex-flow: column nowrap; + + .token-balance { + display: flex; + flex-flow: row nowrap; + align-items: flex-start; + + &__amount { + color: $scorpion; + font-size: 43px; + font-weight: 300; + line-height: 43px; + margin-right: 8px; + } + + &__symbol { + color: $scorpion; + font-size: 16px; + line-height: 24px; + } + } + } + + &__confirmation-title { + padding: 30px 120px 12px; + } + + &__confirmation-content { + padding-bottom: 60px; + } + + &__confirmation-token-list-item { + display: flex; + flex-flow: row nowrap; + padding: 0 120px; + align-items: center; + } + + &__confirmation-token-list-item + &__confirmation-token-list-item { + margin-top: 30px; + } + + &__confirmation-token-icon { + margin-right: 18px; + } } diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 0946cdbbb..2c5e6cf57 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -30,8 +30,9 @@ button.btn-clear { button[disabled], input[type="submit"][disabled] { cursor: not-allowed; - background: rgba(197, 197, 197, 1); - box-shadow: 0 3px 6px rgba(197, 197, 197, .36); + opacity: .5; + // background: rgba(197, 197, 197, 1); + // box-shadow: 0 3px 6px rgba(197, 197, 197, .36); } // button.spaced { @@ -90,6 +91,11 @@ button.btn-thin { font-size: 16px; line-height: 24px; padding: 16px 42px; + + &[disabled] { + background-color: $white !important; + opacity: .5; + } } .btn-tertiary { -- cgit From 14bdc5a78c8529742754d69b8e45693b06b380fe Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Sep 2017 15:07:12 -0230 Subject: Client side error handling for from, to and amount fields in send.js --- ui/app/css/itcss/components/send.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 2d6374aa2..84f678130 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -104,6 +104,16 @@ color: $red; } } + + .send-screen-input-wrapper__error-message { + display: block; + position: absolute; + bottom: 4px; + font-size: 12px; + line-height: 12px; + left: 8px; + color: $red; + } } .send-screen-input { @@ -295,6 +305,11 @@ width: 163px; text-align: center; } + + &__send-button__disabled { + opacity: 0.5; + cursor: auto; + } } .send-token { -- cgit From 48867d95fe1a064683f96ad60fd36c893500f62c Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 19 Sep 2017 22:46:51 -0230 Subject: ReadOnlyInput component. --- ui/app/css/itcss/components/modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 9f6ce54f5..5e3f9cc08 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -234,7 +234,7 @@ } .account-modal-container .qr-ellip-address { - width: 254px; + width: 247px; border: none; font-family: 'Montserrat Light'; font-size: 14px; -- cgit From a1d72a59fe5b03363820d6e1ac2c383ec15ccbcb Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 22 Sep 2017 04:29:27 -0230 Subject: New account modal now allows for addition of account name. --- ui/app/css/itcss/components/modal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 5e3f9cc08..c0a5aa1ef 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -325,7 +325,7 @@ border: 1px solid $alto; width: 100%; font-size: 1em; - color: $alto; + color: $dusty-gray; font-family: Montserrat Light; font-size: 17px; margin: 0 60px; -- cgit From e1077836ce916e2bd788451e3f365324024a1c0c Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Fri, 22 Sep 2017 14:34:56 -0700 Subject: Add Confirm Send token screen --- ui/app/css/itcss/components/send.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 84f678130..5691baebe 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -387,3 +387,9 @@ } } } + +.confirm-send-token { + &__hero-amount-wrapper { + width: 100%; + } +} -- cgit From 0eeba3771c2396c12de3f254dbfaae957344411d Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Sep 2017 05:35:27 -0230 Subject: Exports private key modal opens from dropdown. --- ui/app/css/itcss/components/modal.scss | 73 ++++++++++++++++++---------------- 1 file changed, 38 insertions(+), 35 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index c0a5aa1ef..0afd778e9 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -214,45 +214,48 @@ // Account Details Modal -.account-modal-container .qr-header { - margin-top: 9px; - font-size: 20px; -} +.account-modal-container { -.account-modal-container .qr-wrapper { - margin-top: 5px; -} + .qr-header { + margin-top: 9px; + font-size: 20px; + } -.account-modal-container .ellip-address-wrapper { - display: flex; - justify-content: center; - border: 1px solid $alto; - padding: 5px 10px; - font-family: 'Montserrat Light'; - margin-top: 7px; - width: 286px; -} + .qr-wrapper { + margin-top: 5px; + } -.account-modal-container .qr-ellip-address { - width: 247px; - border: none; - font-family: 'Montserrat Light'; - font-size: 14px; -} + .ellip-address-wrapper { + display: flex; + justify-content: center; + border: 1px solid $alto; + padding: 5px 10px; + font-family: 'Montserrat Light'; + margin-top: 7px; + width: 286px; + } -.account-modal-container .btn-clear { - min-height: 28px; - font-size: 14px; - border-color: $curious-blue; - color: $curious-blue; - border-radius: 2px; - flex-basis: 100%; - width: 75%; - margin-top: 17px; - padding: 10px 22px; - height: 44px; - width: 235px; - font-family: 'Montserrat Light'; + .qr-ellip-address, .ellip-address { + width: 247px; + border: none; + font-family: 'Montserrat Light'; + font-size: 14px; + } + + .btn-clear { + min-height: 28px; + font-size: 14px; + border-color: $curious-blue; + color: $curious-blue; + border-radius: 2px; + flex-basis: 100%; + width: 75%; + margin-top: 17px; + padding: 10px 22px; + height: 44px; + width: 235px; + font-family: 'Montserrat Light'; + } } .account-modal-divider { -- cgit From 2c474b0d6e487652cf16e224e19deb0bf68abedb Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Sep 2017 05:36:31 -0230 Subject: Export private key modal body ui. --- ui/app/css/itcss/components/modal.scss | 69 +++++++++++++++++++++++++++++++ ui/app/css/itcss/components/sections.scss | 2 +- 2 files changed, 70 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 0afd778e9..9cdfdec8f 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -265,6 +265,75 @@ background-color: $alto; } +// Export Private Key Modal + +.account-modal-container .account-name { + margin-top: 9px; + font-size: 20px; +} + +.account-modal-container .modal-body-title { + margin-top: 16px; + margin-bottom: 16px; + font-size: 18px; +} + +.private-key-password { + display: flex; + flex-direction: column; +} + +.private-key-password-label { + color: $scorpion; + font-size: 14px; + line-height: 18px; + margin-bottom: 10px; +} + +.private-key-password-input { + padding: 10px 0 13px 17px; + font-size: 16px; + line-height: 21px; + width: 291px; + height: 44px; +} + +.private-key-password::-webkit-input-placeholder { + color: $dusty-gray; + font-family: 'Montserrat UltraLight'; +} + +.private-key-password-warning { + border-radius: 8px; + background-color: #FFF6F6; + font-size: 12px; + font-weight: 500; + line-height: 15px; + color: $crimson; + width: 292px; + padding: 9px 15px; + margin-top: 18px; + font-family: 'Montserrat Regular'; +} + +.export-private-key-buttons { + display: flex; + flex-direction: row; + justify-content: center; + + .btn-clear { + width: 141px; + height: 54px; + } + + .btn-cancel { + margin-right: 15px; + border-color: $dusty-gray; + color: $scorpion; + } +} + + // New Account Modal .new-account-modal-wrapper { display: flex; diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 44ec3e862..5c32976a7 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -446,7 +446,7 @@ textarea.twelve-word-phrase { color: $white; } -.qr-ellip-address { +.qr-ellip-address, .ellip-address { overflow: hidden; text-overflow: ellipsis; } -- cgit From 7102772c3a4a73d594ccc20e760defa2999f2d3f Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Sep 2017 10:02:18 -0230 Subject: Connect export key modal to state and enable actions. --- ui/app/css/itcss/components/modal.scss | 28 +++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 9cdfdec8f..00b6111f7 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -283,13 +283,18 @@ flex-direction: column; } -.private-key-password-label { +.private-key-password-label, .private-key-password-error { color: $scorpion; font-size: 14px; line-height: 18px; margin-bottom: 10px; } +.private-key-password-error { + color: $crimson; + margin-bottom: 0; +} + .private-key-password-input { padding: 10px 0 13px 17px; font-size: 16px; @@ -333,6 +338,27 @@ } } +.private-key-password-display-wrapper { + height: 80px; + width: 291px; + border: 1px solid $silver; + border-radius: 2px; +} + +.private-key-password-display-textarea { + color: $crimson; + font-family: "DIN OT"; + font-size: 16px; + line-height: 21px; + border: none; + height: 75px; + width: 253px; + overflow: hidden; + resize: none; + padding: 9px 13px 8px; + text-transform: uppercase; +} + // New Account Modal .new-account-modal-wrapper { -- cgit From c77029ea90560b4210f9204e99314d30f9b59989 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 26 Sep 2017 19:21:04 -0700 Subject: Implement Confirm Deploy Contract screen --- ui/app/css/itcss/components/confirm.scss | 7 ++++++- ui/app/css/itcss/components/send.scss | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index e8169ffea..36d1bdd9a 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -108,15 +108,20 @@ line-height: 16px; color: $dusty-gray; text-align: center; + height: 16px; } .confirm-screen-identicons { margin-top: 24px; - i { + i.fa-arrow-right { align-self: start; margin: 42px 14px 0; } + + i.fa-file-text-o { + font-size: 100px; + } } .confirm-screen-sending-to-message { diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 5691baebe..03e0fac1d 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -307,7 +307,7 @@ } &__send-button__disabled { - opacity: 0.5; + opacity: .5; cursor: auto; } } -- cgit From 01816e1b2216e0cf849ec3d67f01b1e571d69fa4 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 22 Sep 2017 17:27:18 -0230 Subject: Adds a back button to export private key modal; connects account details to same modal. --- ui/app/css/itcss/components/modal.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 00b6111f7..fd61ad4f4 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -192,6 +192,21 @@ } } +.account-modal-back { + color: $dusty-gray; + position: absolute; + top: 13px; + left: 17px; + cursor: pointer; + + &__text { + margin-top: 2px; + font-family: 'DIN OT'; + font-size: 14px; + line-height: 18px; + } +} + .account-modal-close::after { content: '\00D7'; font-size: 40px; -- cgit From 06292107d756f0b25805f819cd276e4b6303ccb0 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 28 Sep 2017 16:13:53 -0700 Subject: Always set currency to USD on app mount --- ui/app/css/itcss/components/newui-sections.scss | 8 ++++++++ ui/app/css/itcss/components/send.scss | 4 ++++ ui/app/css/itcss/components/token-list.scss | 1 + 3 files changed, 13 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index ae6ee6311..5ce4f281c 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -177,3 +177,11 @@ $wallet-view-bg: $wild-sand; justify-content: flex-start; margin: 5% 7% 0%; } + +.fiat-amount { + text-transform: uppercase; +} + +.token-balance__amount { + padding-right: 6px; +} diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 03e0fac1d..dee8157ef 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -370,6 +370,10 @@ font-size: 40px; line-height: 40px; margin-top: 13px; + + .token-balance__amount { + padding-right: 12px; + } } &__button-group { diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index 9a772f666..e4d6d975b 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -21,6 +21,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( &__fiat-amount { margin-top: .25%; font-size: 105%; + text-transform: uppercase; @media #{$wallet-balance-breakpoint-range} { font-size: 95%; -- cgit From ff64fe98dde7746775396cbf94d63a1a0e91d069 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 29 Sep 2017 13:10:57 -0230 Subject: Shapeshift deposit tx modal. --- ui/app/css/itcss/components/modal.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index fd61ad4f4..ccfaa7db5 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -17,6 +17,13 @@ color: #5B5D67; } +.qr-ellip-address, .ellip-address { + width: 247px; + border: none; + font-family: 'Montserrat Light'; + font-size: 14px; +} + @media screen and (max-width: 575px) { .buy-modal-content-title-wrapper { justify-content: space-around; @@ -250,13 +257,6 @@ width: 286px; } - .qr-ellip-address, .ellip-address { - width: 247px; - border: none; - font-family: 'Montserrat Light'; - font-size: 14px; - } - .btn-clear { min-height: 28px; font-size: 14px; -- cgit From 47ebcbb2ed09a4cd4b062c5fa4cb6d259369149f Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 29 Sep 2017 07:40:50 -0230 Subject: Token menu ui. --- ui/app/css/itcss/components/token-list.scss | 47 +++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index e4d6d975b..8ae0eec66 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -9,6 +9,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( cursor: pointer; transition: linear 200ms; background-color: rgba($wallet-balance-bg, 0); + position: relative; &__token-balance { font-size: 130%; @@ -44,4 +45,50 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( margin-right: 4%; } } + + &__ellipsis { + position: absolute; + top: 20px; + right: 24px; + } } + +.token-menu-dropdown { + height: 55px; + width: 191px; + border-radius: 4px; + background-color: rgba(0,0,0,0.82); + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5); + position: fixed; + margin-top: 20px; + margin-left: 105px; + + &__close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; + } + + &__container { + padding: 16px 34px 32px; + z-index: 1050; + position: relative; + } + + &__options { + display: flex; + flex-direction: column; + justify-content: center; + } + + &__option { + color: $white; + font-family: "DIN OT"; + font-size: 16px; + line-height: 21px; + text-align: center; + } +} \ No newline at end of file -- cgit From d206f183f5a07787535acd196c506145f00a199e Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 29 Sep 2017 16:33:29 -0230 Subject: Hide token confirmation modal ui --- ui/app/css/itcss/components/modal.scss | 73 ++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index ccfaa7db5..aa18ed37d 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -483,3 +483,76 @@ color: $tundora; flex: 1; } + +// Hide token confirmation + +.hide-token-confirmation { + min-height: 250.72px; + width: 374.49px; + border-radius: 4px; + background-color: #FFFFFF; + box-shadow: 0 1px 7px 0 rgba(0,0,0,0.5); + + &__container { + padding: 24px 27px 21px; + display: flex; + flex-direction: column; + align-items: center; + } + + &__identicon { + margin-bottom: 10px + } + + &__symbol { + color: $tundora; + font-family: 'DIN OT'; + font-size: 16px; + line-height: 24px; + text-align: center; + margin-bottom: 7.5px; + } + + &__title { + height: 30px; + width: 271.28px; + color: $tundora; + font-family: 'DIN OT'; + font-size: 22px; + line-height: 30px; + text-align: center; + margin-bottom: 10.5px; + } + + &__copy { + height: 41px; + width: 318px; + color: $scorpion; + font-family: 'DIN OT'; + font-size: 14px; + line-height: 18px; + text-align: center; + } + + &__buttons { + display: flex; + flex-direction: row; + justify-content: center; + margin-top: 15px; + width: 100%; + + button { + height: 44px; + width: 113px; + border: 1px solid $scorpion; + border-radius: 2px; + color: $tundora; + font-family: 'DIN OT'; + font-size: 14px; + line-height: 20px; + text-align: center; + margin-left: 4px; + margin-right: 4px; + } + } +} -- cgit From bbe893a0d8d759ba750ba78ff8aed0f0876a43ff Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 5 Oct 2017 13:14:45 -0230 Subject: UI for send screen container without form rows. --- ui/app/css/itcss/components/send.scss | 140 ++++++++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index dee8157ef..72a01dc89 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -397,3 +397,143 @@ width: 100%; } } + +.send-v2 { + &__container { + height: 701px; + width: 380px; + border-radius: 8px; + background-color: $white; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + display: flex; + flex-flow: column nowrap; + z-index: 25; + align-items: center; + font-family: Roboto; + position: relative; + top: -26px; + + @media screen and (max-width: $break-small) { + width: 100%; + overflow-y: auto; + top: 0; + width: 100%; + box-shadow: none; + } + } + + &__send-eth-icon { + border-radius: 50%; + width: 48px; + height: 48px; + border: 1px solid $alto; + z-index: 25; + padding: 4px; + background-color: $white; + + @media screen and (max-width: $break-small) { + position: relative; + top: 0; + } + } + + &__send-arrow-icon { + color: #f28930; + transform: rotate(-45deg); + position: absolute; + top: -2px; + left: 0; + font-size: 1.12em; + } + + &__arrow-background { + background-color: $white; + height: 14px; + width: 14px; + position: absolute; + top: 52px; + left: 199px; + border-radius: 50%; + z-index: 100; + } + + &__header { + height: 88px; + width: 380px; + background-color: $athens-grey; + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + + &__header-tip { + height: 25px; + width: 25px; + background: $athens-grey; + position: absolute; + transform: rotate(45deg); + left: 178px; + top: 71px; + } + + &__title { + color: $scorpion; + font-size: 22px; + line-height: 29px; + text-align: center; + margin-top: 25px; + } + + &__copy { + color: $gray; + font-size: 14px; + font-weight: 300; + line-height: 19px; + text-align: center; + margin-top: 10px; + width: 287px; + } + + &__footer { + height: 92px; + width: 100%; + display: flex; + justify-content: space-evenly; + align-items: center; + border-top: 1px solid $alto; + position: absolute; + bottom: 0; + } + + &__next-btn, + &__cancel-btn { + 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; + } + + &__next-btn__disabled { + opacity: .5; + cursor: auto; + } + + &__next-btn { + color: $curious-blue; + border-color: $curious-blue; + } + + &__cancel-btn { + color: $dusty-gray; + border-color: $dusty-gray; + } +} -- cgit From 80463072b5c0c9e826582e066fbc962b667ee355 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 6 Oct 2017 02:04:00 -0230 Subject: UI for readonly from component. From dropdown opening and closing. Mockdata. --- ui/app/css/itcss/components/send.scss | 94 +++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 72a01dc89..ddd22f9fd 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -495,6 +495,100 @@ width: 287px; } + &__form { + display: flex; + flex-direction: column; + margin-top: 13px; + width: 100%; + } + + &__form-row { + margin: 14.5px 18px 0px; + display: flex; + position: relative; + justify-content: space-between; + } + + &__form-label { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + margin-top: 16px; + } + + &__from-dropdown { + height: 73px; + width: 240px; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + font-family: Roboto; + line-height: 16px; + font-size: 12px; + color: $tundora; + + &__top-row { + display: flex; + margin-top: 10px; + margin-left: 8px; + position: relative; + } + + &__account-name { + font-size: 16px; + margin-left: 8px; + } + + &__caret-down, + &__check { + position: absolute; + right: 12px; + top: 1px; + } + + &__caret-down { + color: $alto; + } + + &__check { + color: $caribbean-green; + } + + &__account-primary-balance { + margin-left: 34px; + margin-top: 4px; + } + + &__account-secondary-balance { + margin-left: 34px; + color: $dusty-gray; + } + + &__close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; + } + + &__list { + z-index: 1050; + position: absolute; + height: 220px; + width: 240px; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); + margin-top: 11px; + margin-left: -1px; + overflow-y: scroll; + } + } + &__footer { height: 92px; width: 100%; -- cgit From 71d6463984f040b2aa495a13429f6ea3505defaf Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 9 Oct 2017 20:47:52 -0230 Subject: Refactor 'rendersingleidentity' to a stand alone account-list-item component. --- ui/app/css/itcss/components/account-dropdown.scss | 29 ++++++++++++++++++ ui/app/css/itcss/components/send.scss | 37 ----------------------- 2 files changed, 29 insertions(+), 37 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 1c4620e40..42f02d84d 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -15,3 +15,32 @@ color: $white; } } + +.account-list-item { + &__top-row { + display: flex; + margin-top: 10px; + margin-left: 8px; + position: relative; + } + + &__account-name { + font-size: 16px; + margin-left: 8px; + } + + &__icon { + position: absolute; + right: 12px; + top: 1px; + } + &__account-primary-balance { + margin-left: 34px; + margin-top: 4px; + } + + &__account-secondary-balance { + margin-left: 34px; + color: $dusty-gray; + } +} diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index ddd22f9fd..dfeb83a0a 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -528,43 +528,6 @@ font-size: 12px; color: $tundora; - &__top-row { - display: flex; - margin-top: 10px; - margin-left: 8px; - position: relative; - } - - &__account-name { - font-size: 16px; - margin-left: 8px; - } - - &__caret-down, - &__check { - position: absolute; - right: 12px; - top: 1px; - } - - &__caret-down { - color: $alto; - } - - &__check { - color: $caribbean-green; - } - - &__account-primary-balance { - margin-left: 34px; - margin-top: 4px; - } - - &__account-secondary-balance { - margin-left: 34px; - color: $dusty-gray; - } - &__close-area { position: fixed; top: 0; -- cgit From 119c2b24238b84d5a9e3beabe572da42f8e2ffcb Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 10 Oct 2017 14:16:57 -0700 Subject: Confirm eth v2 --- ui/app/css/itcss/components/confirm.scss | 154 +++++++++++++++++++------------ 1 file changed, 97 insertions(+), 57 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 36d1bdd9a..dc642c2bc 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -1,32 +1,43 @@ .confirm-screen-container { - position: absolute; + position: relative; align-items: center; + font-family: Roboto; + flex: 0 0 auto; + flex-flow: column nowrap; + box-shadow: 0 2px 4px 0 rgba($black, .08); + border-radius: 8px; @media screen and (max-width: 575px) { - margin-top: 35px; width: 100%; } @media screen and (min-width: 576px) { - margin-top: 6.9vh; + top: -26px; } } .confirm-screen-wrapper { + height: 100%; + width: 380px; + background-color: $white; display: flex; - flex-direction: column; + flex-flow: column nowrap; + z-index: 25; align-items: center; - z-index: 100; - top: 5%; - font-family: 'DIN NEXT'; - background: $white; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); - // padding: 20px 24px 32px; - color: $scorpion; - width: 100%; + font-family: Roboto; + position: relative; + overflow-y: auto; + overflow-x: hidden; + border-top-left-radius: 8px; + border-top-right-radius: 8px; - @media screen and (min-width: $break-large) { - width: 498px; + @media screen and (max-width: $break-small) { + width: 100%; + overflow-x: hidden; + overflow-y: auto; + top: 0; + box-shadow: none; + height: calc(100vh - 41px - 100px); } } @@ -39,27 +50,34 @@ margin: 0; } -.confirm-screen-wrapper > .confirm-screen-header { - - @media screen and (max-width: $break-small) { - margin-left: 8px; - } -} - .confirm-screen-header { - font-size: 26px; + height: 88px; + background-color: $athens-grey; position: relative; display: flex; - flex-flow: row nowrap; + justify-content: center; align-items: center; + font-size: 22px; + line-height: 29px; width: 100%; - padding: 20px 24px 0; + padding: 25px 0; + flex: 0 0 auto; @media screen and (max-width: $break-small) { font-size: 22px; } } +.confirm-screen-header-tip { + height: 25px; + width: 25px; + background: $athens-grey; + position: absolute; + transform: rotate(45deg); + left: 178px; + top: 71px; +} + .confirm-screen-title { line-height: 27px; @@ -70,12 +88,12 @@ } .confirm-screen-back-button { - background: $white; - border: 1px solid $dusty-gray; + background: transparent; + border: 1px solid $curious-blue; left: 24px; position: absolute; text-align: center; - color: $black; + color: $curious-blue; padding: 6px 13px 7px 12px; border-radius: 2px; height: 30px; @@ -93,14 +111,15 @@ .confirm-screen-account-name { margin-top: 12px; + font-size: 14px; + line-height: 19px; + color: $scorpion; + text-align: center; } -.confirm-screen-account-name, .confirm-screen-row-info { font-size: 16px; - line-height: 24px; - color: $scorpion; - text-align: center; + line-height: 21px; } .confirm-screen-account-number { @@ -113,6 +132,7 @@ .confirm-screen-identicons { margin-top: 24px; + flex: 0 0 auto; i.fa-arrow-right { align-self: start; @@ -132,34 +152,34 @@ } .confirm-screen-send-amount { - font-size: 64px; color: $scorpion; margin-top: 12px; - line-height: 60px; text-align: center; - font-family: 'DIN NEXT Light'; + font-size: 40px; + font-weight: 300; + line-height: 53px; + flex: 0 0 auto; } .confirm-screen-send-amount-currency { font-size: 20px; line-height: 20px; text-align: center; + flex: 0 0 auto; } .confirm-memo-wrapper { min-height: 24px; width: 100%; border-bottom: 1px solid $alto; + flex: 0 0 auto; } .confirm-screen-send-memo { - color: $dusty-gray; + color: $scorpion; font-size: 16px; - line-height: 24px; - text-align: center; - margin-top: 21px; - margin-bottom: 18px; - font-family: 'DIN NEXT Light'; + line-height: 19px; + font-weight: 400; } .confirm-screen-label { @@ -180,7 +200,7 @@ section .confirm-screen-account-number, display: flex; flex-flow: column nowrap; width: 100%; - padding: 0 24px 32px; + flex: 0 0 auto; } .confirm-screen-section-column { @@ -191,24 +211,26 @@ section .confirm-screen-account-number, display: flex; flex-flow: row nowrap; border-bottom: 1px solid $alto; - width: calc(100% - 24px); + width: 100%; align-items: center; - padding: 12px 0; - margin: 0 12px; + padding: 12px; + padding-left: 35px; + font-size: 16px; + line-height: 22px; + font-weight: 300; } .confirm-screen-row-detail { font-size: 12px; line-height: 16px; color: $dusty-gray; - font-family: 'DIN NEXT Light'; } .confirm-screen-total-box { background-color: $wild-sand; - border-radius: 8px; - padding: 22px 14px; - margin-top: 13px; + padding: 20px; + padding-left: 35px; + border-bottom: 1px solid $alto; .confirm-screen-label { line-height: 18px; @@ -219,44 +241,62 @@ section .confirm-screen-account-number, } &__subtitle { - font-size: 14px; - line-height: 20px; - font-family: 'DIN NEXT Light'; + font-size: 12px; + line-height: 22px; + } + + .confirm-screen-row-info { + font-size: 16px; + font-weight: 500; + line-height: 21px; } } .confirm-screen-confirm-button { height: 62px; - width: 216.88px; border-radius: 2px; background-color: #02c9b1; font-size: 16px; color: $white; text-align: center; - font-family: 'DIN NEXT'; + font-family: Roboto; padding-top: 15px; padding-bottom: 15px; - margin-top: 23px; border-width: 0; box-shadow: none; + flex: 1 0 auto; + font-weight: 300; } .btn-light.confirm-screen-cancel-button { height: 62px; - width: 216.88px; background: none; border: none; opacity: 1; - width: 8em; - font-family: 'DIN NEXT'; + font-family: Roboto; border-width: 0; padding-top: 15px; padding-bottom: 15px; font-size: 16px; + line-height: 32px; box-shadow: none; cursor: pointer; + flex: 1 0 auto; + font-weight: 300; } #pending-tx-form { flex: 1 0 auto; + position: relative; + display: flex; + flex-flow: row nowrap; + background-color: $white; + padding: 19px 18px; + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; + + + @media screen and (max-width: $break-small) { + border-top: 1px solid $alto; + } } -- cgit From c221f5ce79a1e24df4672e16bda8e85c434e11ba Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 10 Oct 2017 14:30:20 -0700 Subject: Confirm Token and Confirm Contract v2 --- ui/app/css/itcss/components/confirm.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index dc642c2bc..643747e36 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -140,7 +140,9 @@ } i.fa-file-text-o { - font-size: 100px; + font-size: 60px; + margin: 16px 8px 0 8px; + text-align: center; } } @@ -294,7 +296,7 @@ section .confirm-screen-account-number, padding: 19px 18px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; - + width: 100%; @media screen and (max-width: $break-small) { border-top: 1px solid $alto; -- cgit From d4343fe7e57de1652d1401f70bf4c0c823d53820 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 10 Oct 2017 14:36:13 -0700 Subject: Fix recipient on send token --- ui/app/css/itcss/components/confirm.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 643747e36..5b89c3eaf 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -107,6 +107,7 @@ .confirm-screen-account-wrapper { display: flex; flex-direction: column; + align-items: center; } .confirm-screen-account-name { -- cgit From b7e2bcf80616c9fb4e15cdf16041751d96b0459d Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 10 Oct 2017 14:40:00 -0700 Subject: Reduce header shadow on mobile --- ui/app/css/itcss/components/confirm.scss | 4 ++++ ui/app/css/itcss/components/header.scss | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 5b89c3eaf..3576da377 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -38,6 +38,8 @@ top: 0; box-shadow: none; height: calc(100vh - 41px - 100px); + border-top-left-radius: 0; + border-top-right-radius: 0; } } @@ -301,5 +303,7 @@ section .confirm-screen-account-number, @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/header.scss b/ui/app/css/itcss/components/header.scss index ed569cb08..f750ec014 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -10,7 +10,7 @@ @media screen and (max-width: 575px) { padding: 0 12px; width: 100%; - box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .08); + box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); z-index: $mobile-header-z-index; } -- cgit From e20ec3b3898db2a129e7af7510e5f0d7db8a27ae Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 10 Oct 2017 14:43:06 -0700 Subject: Token menu ellipsis alignment --- ui/app/css/itcss/components/token-list.scss | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index 8ae0eec66..d04f3a9b1 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -47,9 +47,14 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } &__ellipsis { - position: absolute; - top: 20px; - right: 24px; + // position: absolute; + // top: 20px; + // right: 24px; + line-height: 45px; + } + + &__balance-wrapper { + flex: 1 1 auto; } } -- cgit From fbab0f3a1f1bf78fdaf6b5639fb6a23d996f3645 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 6 Oct 2017 08:00:45 -0230 Subject: Send v2 to autocomplete. --- ui/app/css/itcss/components/send.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index dfeb83a0a..752d6ffea 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -552,6 +552,22 @@ } } + &__to-autocomplete { + &__input { + height: 54px; + width: 240px; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + color: $dusty-gray; + padding: 10px; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + font-weight: 300; + } + } + &__footer { height: 92px; width: 100%; -- cgit From ea7926c211965e2e529e5795a4e1655e97e32144 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 9 Oct 2017 13:55:23 -0230 Subject: Adds amount and gas field to sendV2. --- ui/app/css/itcss/components/currency-display.scss | 50 +++++++++++++++++++++++ ui/app/css/itcss/components/index.scss | 2 + 2 files changed, 52 insertions(+) create mode 100644 ui/app/css/itcss/components/currency-display.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss new file mode 100644 index 000000000..b2776bb47 --- /dev/null +++ b/ui/app/css/itcss/components/currency-display.scss @@ -0,0 +1,50 @@ +.currency-display { + height: 54px; + width: 240px; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + color: $dusty-gray; + font-family: Roboto; + font-size: 16px; + font-weight: 300; + padding: 8px 10px; + position: relative; + + &__primary-row { + display: flex; + } + + &__input-wrapper { + margin-top: -1px; + } + + &__input { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + border: none; + outline: 0 !important; + } + + &__primary-currency { + color: $scorpion; + font-weight: 400; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + } + + &__converted-row { + display: flex; + } + + &__converted-value, + &__converted-currency { + color: $dusty-gray; + font-family: Roboto; + font-size: 12px; + line-height: 12px; + } +} \ 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 9b3690099..f24a9caa8 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -29,3 +29,5 @@ @import './token-list.scss'; @import './add-token.scss'; + +@import './currency-display.scss'; -- cgit From 57179d2b05a4efae06c2375e01e9a01a5519543b Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 12 Oct 2017 18:46:09 -0400 Subject: Various styling fixes --- ui/app/css/itcss/components/account-dropdown.scss | 4 +- ui/app/css/itcss/components/buttons.scss | 4 +- ui/app/css/itcss/components/confirm.scss | 2 +- ui/app/css/itcss/components/header.scss | 26 ++++++-- ui/app/css/itcss/components/modal.scss | 30 ++++----- ui/app/css/itcss/components/network.scss | 77 ++++++++++++++++++----- ui/app/css/itcss/components/newui-sections.scss | 20 +++--- ui/app/css/itcss/components/sections.scss | 10 +-- ui/app/css/itcss/components/send.scss | 14 ++--- ui/app/css/itcss/components/token-list.scss | 2 +- ui/app/css/itcss/components/transaction-list.scss | 2 +- 11 files changed, 128 insertions(+), 63 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 42f02d84d..9966c7f3f 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -1,5 +1,5 @@ .account-dropdown-name { - font-family: 'DIN OT'; + font-family: Roboto; } .account-dropdown-balance { @@ -9,7 +9,7 @@ .account-dropdown-edit-button { color: $dusty-gray; - font-family: "DIN OT"; + font-family: Roboto; &:hover { color: $white; diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 2c5e6cf57..8ba084b4a 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -52,7 +52,7 @@ button.primary { box-shadow: 0 3px 6px rgba(247, 134, 28, .36); color: $white; font-size: 1.1em; - font-family: 'Montserrat Regular'; + font-family: Roboto; text-transform: uppercase; } @@ -62,7 +62,7 @@ button.primary { box-shadow: 0 3px 6px rgba(247, 134, 28, .36); color: #585d67; // TODO: make reusable light button color font-size: 1.1em; - font-family: 'Montserrat Regular'; + font-family: Roboto; text-transform: uppercase; text-align: center; line-height: 20px; diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 3576da377..15c752923 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -12,7 +12,7 @@ } @media screen and (min-width: 576px) { - top: -26px; + // top: -26px; } } diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index f750ec014..4fa80f047 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -8,15 +8,24 @@ flex-flow: column nowrap; @media screen and (max-width: 575px) { - padding: 0 12px; + padding: 12px; width: 100%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); z-index: $mobile-header-z-index; } @media screen and (min-width: 576px) { - height: 14.4vh; - max-height: 97px; + height: 75px; + justify-content: center; + + &::after { + content: ''; + position: absolute; + width: 100%; + height: 32px; + background: $gallery; + bottom: -32px; + } } } @@ -45,13 +54,13 @@ } .app-header h1 { - font-family: 'Montserrat Regular'; + font-family: Roboto; text-transform: uppercase; + font-weight: 400; color: #22232c; // $shark } h2.page-subtitle { - font-family: 'Montserrat Regular'; text-transform: uppercase; color: #aeaeae; font-size: 1em; @@ -62,6 +71,7 @@ h2.page-subtitle { display: flex; flex-direction: row; align-items: center; + margin-right: 20px; } .left-menu-wrapper { @@ -69,3 +79,9 @@ h2.page-subtitle { flex-direction: row; align-items: center; } + +.header__right-actions { + display: flex; + flex-flow: row nowrap; + align-items: center; +} diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index aa18ed37d..556f14389 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -8,7 +8,7 @@ align-items: center; justify-content: center; text-align: center; - font-family: 'DIN OT'; + font-family: Roboto; padding: 0 16px; } @@ -20,7 +20,7 @@ .qr-ellip-address, .ellip-address { width: 247px; border: none; - font-family: 'Montserrat Light'; + font-family: Roboto; font-size: 14px; } @@ -192,7 +192,7 @@ padding: 5px 0 31px 0; border: 1px solid $silver; border-radius: 4px; - font-family: 'Montserrat UltraLight'; + font-family: Roboto; button { cursor: pointer; @@ -208,7 +208,7 @@ &__text { margin-top: 2px; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 14px; line-height: 18px; } @@ -252,7 +252,7 @@ justify-content: center; border: 1px solid $alto; padding: 5px 10px; - font-family: 'Montserrat Light'; + font-family: Roboto; margin-top: 7px; width: 286px; } @@ -269,7 +269,7 @@ padding: 10px 22px; height: 44px; width: 235px; - font-family: 'Montserrat Light'; + font-family: Roboto; } } @@ -320,7 +320,7 @@ .private-key-password::-webkit-input-placeholder { color: $dusty-gray; - font-family: 'Montserrat UltraLight'; + font-family: Roboto; } .private-key-password-warning { @@ -333,7 +333,7 @@ width: 292px; padding: 9px 15px; margin-top: 18px; - font-family: 'Montserrat Regular'; + font-family: Roboto; } .export-private-key-buttons { @@ -362,7 +362,7 @@ .private-key-password-display-textarea { color: $crimson; - font-family: "DIN OT"; + font-family: Roboto; font-size: 16px; line-height: 21px; border: none; @@ -384,7 +384,7 @@ position: relative; border: 1px solid $alto; box-shadow: 0 0 2px 2px $alto; - font-family: 'Montserrat Light'; + font-family: Roboto; } .new-account-modal-header { @@ -439,7 +439,7 @@ width: 100%; font-size: 1em; color: $dusty-gray; - font-family: Montserrat Light; + font-family: Roboto; font-size: 17px; margin: 0 60px; } @@ -506,7 +506,7 @@ &__symbol { color: $tundora; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 16px; line-height: 24px; text-align: center; @@ -517,7 +517,7 @@ height: 30px; width: 271.28px; color: $tundora; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 22px; line-height: 30px; text-align: center; @@ -528,7 +528,7 @@ height: 41px; width: 318px; color: $scorpion; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 14px; line-height: 18px; text-align: center; @@ -547,7 +547,7 @@ border: 1px solid $scorpion; border-radius: 2px; color: $tundora; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 14px; line-height: 20px; text-align: center; diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 012b1faf6..bf699ac57 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -1,14 +1,65 @@ +.network-component.pointer { + border: 1px solid $shark; + border-radius: 82px; + padding: 6px; + + &.ethereum-network { + border-color: rgb(3, 135, 137); + + .menu-icon-circle div { + background-color: rgba(3, 135, 137, .7) !important; + } + } + + &.ropsten-test-network { + border-color: rgb(233, 21, 80); + + .menu-icon-circle div { + background-color: rgba(233, 21, 80, .7) !important; + } + } + + &.kovan-test-network { + border-color: rgb(105, 4, 150); + + .menu-icon-circle div { + background-color: rgba(105, 4, 150, .7) !important; + } + } + + &.rinkeby-test-network { + border-color: rgb(235, 179, 63); + + .menu-icon-circle div { + background-color: rgba(235, 179, 63, .7) !important; + } + } +} + +.dropdown-menu-item { + .menu-icon-circle, + .menu-icon-circle--active { + margin: 0 16px; + } +} + .network-indicator { display: flex; align-items: center; font-size: .6em; + + .fa-caret-down { + line-height: 15px; + font-size: 12px; + padding: 0 4px; + } } .network-name { - line-height: 12px; + line-height: 15px; padding: 0 4px; - font-family: 'DIN OT'; - font-size: 10px; + font-family: Roboto; + font-size: 12px; flex: 1 0 auto; } @@ -46,29 +97,27 @@ margin: 0; } -.menu-icon-circle, .menu-icon-circle--active { - height: 23px; - width: 23px; - margin: 9px; +.menu-icon-circle, +.menu-icon-circle--active { background: none; border-radius: 22px; display: flex; justify-content: center; align-items: center; border: 1px solid transparent; - background: none; + margin: 0 4px; } .menu-icon-circle--active { - border: 1px solid white; - background: rgba(100, 100, 100, 0.4); + border: 1px solid $white; + background: rgba(100, 100, 100, .4); } -.menu-icon-circle div, .menu-icon-circle--active div { +.menu-icon-circle div, +.menu-icon-circle--active div { height: 17px; width: 17px; border-radius: 17px; - opacity: 0.7; } .menu-icon-circle--active div { @@ -93,7 +142,7 @@ height: 25px; width: 75px; color: $white; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 18px; line-height: 25px; text-align: center; @@ -103,7 +152,7 @@ height: 36px; width: 265px; color: $dusty-gray; - font-family: 'DIN OT'; + font-family: Roboto; font-size: 14px; line-height: 18px; } diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 5ce4f281c..fc1dba87c 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -8,9 +8,9 @@ $wallet-view-bg: $wild-sand; // Main container .main-container { - position: absolute; + // position: absolute; z-index: $main-container-z-index; - font-family: "DIN OT Light"; + font-family: Roboto; display: flex; flex-wrap: wrap; align-items: stretch; @@ -70,7 +70,7 @@ $wallet-view-bg: $wild-sand; background: rgb(250, 250, 250); z-index: $sidebar-z-index; position: fixed; - top: 41px; + // top: 41px; left: 0; right: 0; bottom: 0; @@ -86,7 +86,9 @@ $wallet-view-bg: $wild-sand; .sidebar-overlay { z-index: $sidebar-overlay-z-index; position: fixed; - top: 41px; + // top: 41px; + height: 100%; + width: 100%; left: 0; right: 0; bottom: 0; @@ -107,7 +109,7 @@ $wallet-view-bg: $wild-sand; } .main-container { - margin-top: 6.9vh; + // margin-top: 6.9vh; width: 85%; height: 90vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); @@ -116,7 +118,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 769px) { .main-container { - margin-top: 6.9vh; + // margin-top: 6.9vh; width: 80%; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); @@ -125,7 +127,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 1281px) { .main-container { - margin-top: 6.9vh; + // margin-top: 6.9vh; width: 65%; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); @@ -142,8 +144,8 @@ $wallet-view-bg: $wild-sand; } .main-container { - margin-top: 41px; - height: calc(100% - 41px); + // margin-top: 41px; + height: 100%; width: 100%; overflow-y: auto; background-color: $white; diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 5c32976a7..bc89fdccc 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -295,7 +295,7 @@ textarea.twelve-word-phrase { /* Info screen */ .info-gray { - font-family: 'Montserrat Regular'; + font-family: Roboto; text-transform: uppercase; color: $silver-chalice; } @@ -305,7 +305,7 @@ textarea.twelve-word-phrase { } .info { - font-family: 'Montserrat Regular', Arial; + font-family: Roboto, Arial; padding-bottom: 10px; display: inline-block; padding-left: 5px; @@ -354,7 +354,7 @@ textarea.twelve-word-phrase { } .buy-inputs { - font-family: 'Montserrat Light'; + font-family: Roboto; font-size: 13px; height: 20px; background: transparent; @@ -398,7 +398,7 @@ textarea.twelve-word-phrase { } .ex-coins { - font-family: 'Montserrat Regular'; + font-family: Roboto; text-transform: uppercase; text-align: center; font-size: 33px; @@ -409,7 +409,7 @@ textarea.twelve-word-phrase { } .marketinfo { - font-family: 'Montserrat light'; + font-family: Roboto; color: $silver-chalice; font-size: 15px; line-height: 17px; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 752d6ffea..80aacf1ab 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -2,7 +2,7 @@ display: flex; flex-flow: column nowrap; z-index: 25; - font-family: 'DIN OT'; + font-family: Roboto; @media screen and (max-width: $break-small) { width: 100%; @@ -19,7 +19,7 @@ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); padding: 46px 40.5px 26px; position: relative; - top: -26px; + // top: -26px; align-items: center; display: flex; flex-flow: column nowrap; @@ -77,7 +77,7 @@ margin: 4px 0 20px; font-size: 16px; line-height: 22.4px; - font-family: "DIN OT"; + font-family: Roboto; } .send-screen-gas-input { @@ -316,7 +316,7 @@ display: flex; flex-flow: column nowrap; z-index: 25; - font-family: "Montserrat Light"; + font-family: Roboto; &__content { width: 498px; @@ -325,7 +325,7 @@ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); padding: 46px 40.5px 26px; position: relative; - top: -26px; + // top: -26px; align-items: center; display: flex; flex-flow: column nowrap; @@ -404,20 +404,18 @@ width: 380px; border-radius: 8px; background-color: $white; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08); display: flex; flex-flow: column nowrap; z-index: 25; align-items: center; font-family: Roboto; position: relative; - top: -26px; @media screen and (max-width: $break-small) { width: 100%; overflow-y: auto; top: 0; - width: 100%; box-shadow: none; } } diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index d04f3a9b1..bbc64c324 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -91,7 +91,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( &__option { color: $white; - font-family: "DIN OT"; + font-family: Roboto; font-size: 16px; line-height: 21px; text-align: center; diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index e3fe1a8b3..76fac09e2 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -132,7 +132,7 @@ .tx-list-date { color: $dusty-gray; font-size: 12px; - font-family: "Montserrat UltraLight"; + font-family: Roboto; } .tx-list-identicon-wrapper { -- cgit From 81f62a7443d47461b5f9b20f442392562458c79a Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Fri, 13 Oct 2017 02:10:58 -0400 Subject: Adding Account Dropdown V2 --- ui/app/css/itcss/components/account-menu.scss | 44 +++++++++++++++++++++++++++ ui/app/css/itcss/components/header.scss | 4 +++ ui/app/css/itcss/components/index.scss | 4 +++ ui/app/css/itcss/components/menu.scss | 43 ++++++++++++++++++++++++++ 4 files changed, 95 insertions(+) create mode 100644 ui/app/css/itcss/components/account-menu.scss create mode 100644 ui/app/css/itcss/components/menu.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss new file mode 100644 index 000000000..8b08c02fd --- /dev/null +++ b/ui/app/css/itcss/components/account-menu.scss @@ -0,0 +1,44 @@ +.account-menu { + position: fixed; + z-index: 100; + top: 58px; + width: 310px; + + @media screen and (max-width: 575px) { + right: calc((100vw - 100%) / 2); + } + + @media screen and (min-width: 576px) { + right: calc((100vw - 85vw) / 2); + } + + @media screen and (min-width: 769px) { + right: calc((100vw - 80vw) / 2); + } + + @media screen and (min-width: 1281px) { + right: calc((100vw - 65vw) / 2); + } + + &__header { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + align-items: center; + } + + &__logout-button { + border: 1px solid $dusty-gray; + background-color: transparent; + color: $white; + border-radius: 4px; + font-size: 12px; + line-height: 23px; + padding: 0 24px; + } + + img { + width: 16px; + height: 16px; + } +} diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 4fa80f047..512cbd995 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -84,4 +84,8 @@ h2.page-subtitle { display: flex; flex-flow: row nowrap; align-items: center; + + .identicon { + cursor: pointer; + } } diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index f24a9caa8..dee0959b7 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -31,3 +31,7 @@ @import './add-token.scss'; @import './currency-display.scss'; + +@import './account-menu.scss'; + +@import './menu.scss'; diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss new file mode 100644 index 000000000..d01c24a70 --- /dev/null +++ b/ui/app/css/itcss/components/menu.scss @@ -0,0 +1,43 @@ +.menu { + border-radius: 4px; + background: rgba($black, .8); + box-shadow: rgba($black, .15) 0 2px 2px 2px; + min-width: 150px; + color: $white; + + &__item { + padding: 18px; + display: flex; + flex-flow: row nowrap; + align-items: center; + + &--clickable { + cursor: pointer; + + &:hover { + background-color: rgba($white, .05); + } + + &:active { + background-color: rgba($white, .1); + } + } + + &__icon { + height: 16px; + width: 16px; + margin-right: 14px; + } + + &__text { + font-size: 16px; + line-height: 21px; + } + } + + &__divider { + background-color: $scorpion; + width: 100%; + height: 1px; + } +} -- cgit 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/components') 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 From 222a203353dd977f497d44bf6581c16200b5de4f Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 13 Oct 2017 16:23:10 -0400 Subject: Fix click to copy for private key not working (#2360) --- ui/app/css/itcss/components/modal.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 556f14389..1ffea58a9 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -356,18 +356,18 @@ .private-key-password-display-wrapper { height: 80px; width: 291px; - border: 1px solid $silver; + border: 1px solid $silver; border-radius: 2px; } .private-key-password-display-textarea { color: $crimson; - font-family: Roboto; - font-size: 16px; + font-family: Roboto; + font-size: 16px; line-height: 21px; border: none; height: 75px; - width: 253px; + width: 100%; overflow: hidden; resize: none; padding: 9px 13px 8px; -- cgit From a59972dcabc56c3d92f09ba1b88a2ded70ce8c34 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 13 Oct 2017 17:14:48 -0400 Subject: Prevent adding already added tokens (#2362) --- ui/app/css/itcss/components/add-token.scss | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index d5d1aab71..aa8221c9a 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -4,7 +4,6 @@ flex-flow: column nowrap; align-items: center; position: relative; - top: -36px; z-index: 12; font-family: 'DIN Next Light'; @@ -189,6 +188,7 @@ border-radius: 10px; cursor: pointer; border: 2px solid transparent; + position: relative; &:hover { border: 2px solid rgba($malibu-blue, .5); @@ -197,6 +197,11 @@ &--selected { border: 2px solid $malibu-blue !important; } + + &--disabled { + opacity: .4; + pointer-events: none; + } } &__token-name { @@ -223,6 +228,14 @@ flex: 0 0 auto; } + &__token-message { + position: absolute; + color: $caribbean-green; + font-size: 11px; + bottom: 0; + left: 85px; + } + &__confirmation-token-list { display: flex; flex-flow: column nowrap; -- cgit From 5ee6e4d3b3d61d804340c22b73a608fb6b44a9b2 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 16 Oct 2017 01:28:25 -0400 Subject: wip --- ui/app/css/itcss/components/account-menu.scss | 13 +++++++++++++ ui/app/css/itcss/components/menu.scss | 11 +++++++++++ 2 files changed, 24 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 8b08c02fd..5ed42f627 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -20,6 +20,10 @@ right: calc((100vw - 65vw) / 2); } + &__icon { + cursor: pointer; + } + &__header { display: flex; flex-flow: row nowrap; @@ -41,4 +45,13 @@ width: 16px; height: 16px; } + + &__accounts { + display: flex; + flex-flow: column nowrap; + overflow-y: auto; + height: 272px; + position: relative; + z-index: 200; + } } diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index d01c24a70..0f83146a8 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -10,6 +10,8 @@ display: flex; flex-flow: row nowrap; align-items: center; + position: relative; + z-index: 200; &--clickable { cursor: pointer; @@ -40,4 +42,13 @@ width: 100%; height: 1px; } + + &__close-area { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 100; + } } -- cgit From 085551b7e6b7dab21c21b99a40c4f79c413799d5 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 17 Oct 2017 22:36:53 -0700 Subject: New Account modal --- ui/app/css/itcss/components/account-menu.scss | 63 ++++++++++++++++++++++++++- ui/app/css/itcss/components/confirm.scss | 2 +- ui/app/css/itcss/components/header.scss | 4 ++ ui/app/css/itcss/components/menu.scss | 4 ++ ui/app/css/itcss/components/network.scss | 1 + 5 files changed, 72 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 5ed42f627..857903ce1 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -39,6 +39,7 @@ font-size: 12px; line-height: 23px; padding: 0 24px; + font-weight: 200; } img { @@ -50,8 +51,68 @@ display: flex; flex-flow: column nowrap; overflow-y: auto; - height: 272px; + max-height: 240px; position: relative; z-index: 200; + + &::-webkit-scrollbar { + display: none; + } + + @media screen and (max-width: 575px) { + max-height: 215px; + } + + .keyring-label { + margin-top: 5px; + } + } + + &__account { + display: flex; + flex-flow: row nowrap; + padding: 16px 14px; + flex: 0 0 auto; + + @media screen and (max-width: 575px) { + padding: 12px 14px; + } + } + + &__account-info { + flex: 1 0 auto; + display: flex; + flex-flow: column nowrap; + padding-top: 4px; + } + + &__check-mark { + width: 14px; + flex: 0 0 auto; + } + + .identicon { + margin: 0 12px 0 0; + flex: 0 0 auto; + } + + &__name { + color: $white; + font-size: 18px; + font-weight: 200; + line-height: 16px; + } + + &__balance { + color: $dusty-gray; + font-size: 14px; + line-height: 19px; + } + + &__action { + font-size: 16px; + line-height: 18px; + font-weight: 200; + cursor: pointer; } } diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 15c752923..d4f0fe5ac 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 - 41px - 100px); + height: calc(100vh - 58px - 100px); border-top-left-radius: 0; border-top-right-radius: 0; } diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index 512cbd995..ef84dc3f4 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -58,6 +58,10 @@ text-transform: uppercase; font-weight: 400; color: #22232c; // $shark + + @media screen and (max-width: 575px) { + display: none; + } } h2.page-subtitle { diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index 0f83146a8..c98ee70d9 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -13,6 +13,10 @@ position: relative; z-index: 200; + @media screen and (max-width: 575px) { + padding: 14px; + } + &--clickable { cursor: pointer; diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index bf699ac57..bb8c4eea8 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -2,6 +2,7 @@ border: 1px solid $shark; border-radius: 82px; padding: 6px; + flex: 0 0 auto; &.ethereum-network { border-color: rgb(3, 135, 137); -- cgit From 60eda592b5979ac1fdbfb6d5b3418a4924abc14d Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 17 Oct 2017 17:43:20 -0230 Subject: Handling to and amount errors. --- ui/app/css/itcss/components/send.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index ddabdee2e..7e72e8399 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -497,6 +497,17 @@ width: 287px; } + &__error { + font-size: 12px; + line-height: 12px; + left: 8px; + color: $red; + } + + &__error-border { + color: $red; + } + &__form { display: flex; flex-direction: column; -- cgit From f01d119cc1a6237b88e543be821d91778bcbb128 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 19 Oct 2017 15:23:56 -0230 Subject: Fixes mobile styling. --- ui/app/css/itcss/components/currency-display.scss | 2 +- ui/app/css/itcss/components/send.scss | 50 ++++++++++++++++++----- 2 files changed, 41 insertions(+), 11 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss index f2cc6e700..eb1776c58 100644 --- a/ui/app/css/itcss/components/currency-display.scss +++ b/ui/app/css/itcss/components/currency-display.scss @@ -1,6 +1,6 @@ .currency-display { height: 54px; - width: 240px; + width: 100%ß; border: 1px solid $alto; border-radius: 4px; background-color: $white; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 7e72e8399..6a5b2b869 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -414,7 +414,6 @@ @media screen and (max-width: $break-small) { width: 100%; - overflow-y: auto; top: 0; box-shadow: none; } @@ -457,6 +456,10 @@ left: 199px; border-radius: 50%; z-index: 100; + + @media screen and (max-width: $break-small) { + top: 36px; + } } &__header { @@ -467,6 +470,10 @@ display: flex; justify-content: center; align-items: center; + + @media screen and (max-width: $break-small) { + height: 59px; + } } &__header-tip { @@ -477,6 +484,10 @@ transform: rotate(45deg); left: 178px; top: 65px; + + @media screen and (max-width: $break-small) { + top: 46px; + } } &__title { @@ -509,32 +520,47 @@ } &__form { - display: flex; - flex-direction: column; margin-top: 13px; width: 100%; + + @media screen and (max-width: $break-small) { + margin-top: 0px; + height: 407px; + overflow-y: auto; + } + } + + &__form-header, &__form-header-copy { + width: 100%; + display: flex; + flex-flow: column; + align-items: center; } &__form-row { margin: 14.5px 18px 0px; - display: flex; position: relative; + display: flex; + flex-flow: row; + flex: 1 0 auto; justify-content: space-between; } + &__form-field { + flex: 1 1 auto; + } + &__form-label { color: $scorpion; font-family: Roboto; font-size: 16px; line-height: 22px; - display: flex; - flex-flow: column; - justify-content: center; + width: 88px; } &__from-dropdown { height: 73px; - width: 240px; + width: 100%; border: 1px solid $alto; border-radius: 4px; background-color: $white; @@ -570,7 +596,7 @@ &__to-autocomplete, &__memo-text-area { &__input { height: 54px; - width: 240px; + width: 100%; border: 1px solid $alto; border-radius: 4px; background-color: $white; @@ -583,6 +609,10 @@ } } + &__gas-fee-display { + width: 100%; + } + &__sliders-icon-container { display: flex; align-items: center; @@ -616,7 +646,7 @@ justify-content: space-evenly; align-items: center; border-top: 1px solid $alto; - margin-top: 29px; + background: $white; } &__next-btn, -- cgit From 0458643f104d7b328e24c4403e4e3d91b4d5de92 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 19 Oct 2017 14:08:52 -0700 Subject: various styling fix on mobile --- ui/app/css/itcss/components/account-menu.scss | 2 +- ui/app/css/itcss/components/hero-balance.scss | 16 ++++++++++------ ui/app/css/itcss/components/menu.scss | 1 + ui/app/css/itcss/components/newui-sections.scss | 15 +++++++++++++-- ui/app/css/itcss/components/send.scss | 4 +++- ui/app/css/itcss/components/transaction-list.scss | 17 +++++++++++++++-- 6 files changed, 43 insertions(+), 12 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 857903ce1..090710f7b 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -5,7 +5,7 @@ width: 310px; @media screen and (max-width: 575px) { - right: calc((100vw - 100%) / 2); + right: calc(((100vw - 100%) / 2) + 8px); } @media screen and (min-width: 576px) { diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 8f6731358..bdbdd2645 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -6,8 +6,9 @@ justify-content: flex-start; align-items: center; margin: .3em .9em 0; - height: 80vh; - max-height: 225px; + // height: 80vh; + // max-height: 225px; + flex: 0 0 auto; } @media screen and (min-width: $break-large) { @@ -26,6 +27,7 @@ @media screen and (max-width: $break-small) { flex-direction: column; + flex: 0 0 auto; } @media screen and (min-width: $break-large) { @@ -78,7 +80,9 @@ @media screen and (max-width: $break-small) { width: 100%; - height: 100px; // needed a round number to set the heights of the buttons inside + // height: 100px; // needed a round number to set the heights of the buttons inside + flex: 0 0 auto; + padding: 16px 0; } @media screen and (min-width: $break-large) { @@ -93,9 +97,9 @@ font-size: 12px; @media screen and (max-width: $break-small) { - width: 23%; - height: 55%; - border-color: $black; + border-color: $curious-blue; + color: $curious-blue; + height: 36px; } @media screen and (min-width: $break-large) { diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index c98ee70d9..17e24de98 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -12,6 +12,7 @@ align-items: center; position: relative; z-index: 200; + font-weight: 200; @media screen and (max-width: 575px) { padding: 14px; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index fc1dba87c..1ee8283ef 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -25,6 +25,17 @@ $wallet-view-bg: $wild-sand; .tx-view { flex: 63.5 0 66.5%; background: $tx-view-bg; + + // No title on mobile + @media screen and (max-width: 575px) { + .identicon-wrapper { + display: none; + } + + .account-name { + display: none; + } + } } // wallet view and sidebar @@ -70,7 +81,7 @@ $wallet-view-bg: $wild-sand; background: rgb(250, 250, 250); z-index: $sidebar-z-index; position: fixed; - // top: 41px; + top: 57px; left: 0; right: 0; bottom: 0; @@ -80,7 +91,7 @@ $wallet-view-bg: $wild-sand; overflow-y: auto; box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px; width: 85%; - height: 100%; + height: calc(100% - 57px); } .sidebar-overlay { diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 6a5b2b869..9a076551e 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -525,8 +525,9 @@ @media screen and (max-width: $break-small) { margin-top: 0px; - height: 407px; + height: 0; overflow-y: auto; + flex: 1 1 auto; } } @@ -647,6 +648,7 @@ align-items: center; border-top: 1px solid $alto; background: $white; + padding: 0 12px; } &__next-btn, diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 76fac09e2..a5d508f11 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -19,12 +19,15 @@ // margin-top: 0.2em; // margin-bottom: 0.6em; justify-content: center; + flex: 0 0 auto; } .tx-list-header { align-self: center; font-size: 12px; color: $dusty-gray; + font-family: Roboto; + text-transform: uppercase; } } @@ -66,7 +69,7 @@ flex-flow: column nowrap; @media screen and (max-width: $break-small) { - padding: 0 1.3em; + padding: 0 1.3em .8em; } @media screen and (min-width: $break-large) { @@ -112,7 +115,7 @@ font-size: 12px; .tx-list-status { - font-size: 12px !important; + font-size: 14px !important; } .tx-list-account { @@ -121,10 +124,12 @@ .tx-list-value { font-size: 14px; + line-height: 18px; } .tx-list-fiat-value { font-size: 12px; + line-height: 16px; } } } @@ -152,6 +157,14 @@ justify-content: flex-start; align-items: flex-start; align-self: center; + + .tx-list-account-wrapper { + height: 18px; + + .tx-list-account { + line-height: 14px; + } + } } @media screen and (min-width: $break-large) { -- cgit From 2c032e0df44a2d589aae62d3fc532df82441580b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sun, 22 Oct 2017 22:40:03 -0700 Subject: Update settings screen to new UI --- ui/app/css/itcss/components/index.scss | 5 + ui/app/css/itcss/components/settings.scss | 135 +++++++++++++++++++++++ ui/app/css/itcss/components/simple-dropdown.scss | 65 +++++++++++ ui/app/css/itcss/components/tab-bar.scss | 23 ++++ 4 files changed, 228 insertions(+) create mode 100644 ui/app/css/itcss/components/settings.scss create mode 100644 ui/app/css/itcss/components/simple-dropdown.scss create mode 100644 ui/app/css/itcss/components/tab-bar.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index fda002785..8ad014f62 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -38,3 +38,8 @@ @import './gas-slider.scss'; +@import './settings.scss'; + +@import './tab-bar.scss'; + +@import './simple-dropdown.scss'; diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss new file mode 100644 index 000000000..d4bcdcc4b --- /dev/null +++ b/ui/app/css/itcss/components/settings.scss @@ -0,0 +1,135 @@ +.settings { + position: relative; + background: $white; + display: flex; + flex-flow: column nowrap; + height: auto; + overflow: auto; +} + +.settings__header { + padding: 25px; +} + +.settings__close-button::after { + content: '\00D7'; + font-size: 40px; + color: $dusty-gray; + position: absolute; + top: 25px; + right: 30px; + cursor: pointer; +} + +.settings__error { + padding-bottom: 20px; + text-align: center; + color: $crimson; +} + +.settings__content { + padding: 0 25px; +} + +.settings__content-row { + display: flex; + flex-direction: row; + padding: 10px 0 20px; + + @media screen and (max-width: 575px) { + flex-direction: column; + } +} + +.settings__content-item { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + padding: 0 5px; + height: 71px; +} + +.settings__content-item-col { + max-width: 300px; + display: flex; + flex-direction: column; + + @media screen and (max-width: 575px) { + max-width: 100%; + width: 100%; + } +} + +.settings__content-description { + font-size: 14px; + color: $dusty-gray; + padding-top: 5px; +} + +.settings__input { + padding-left: 10px; + font-size: 14px; + height: 40px; +} + +.settings__input::-webkit-input-placeholder { + font-weight: 100; + color: $dusty-gray; +} + +.settings__input::-moz-placeholder { + font-weight: 100; + color: $dusty-gray; +} + +.settings__input:-ms-input-placeholder { + font-weight: 100; + color: $dusty-gray; +} + +.settings__input:-moz-placeholder { + font-weight: 100; + color: $dusty-gray; +} + +.settings__provider-wrapper { + font-size: 16px; + border: 1px solid $alto; + border-radius: 2px; + padding: 15px; + background-color: $white; + display: flex; + align-items: center; + justify-content: flex-start; +} + +.settings__provider-icon { + height: 10px; + width: 10px; + margin-right: 10px; + border-radius: 10px; +} + +.settings__rpc-save-button { + align-self: flex-end; + padding: 5px; + text-transform: uppercase; + color: $dusty-gray; + cursor: pointer; +} + +.settings__clear-button { + font-size: 16px; + border: 1px solid $curious-blue; + color: $curious-blue; + border-radius: 2px; + padding: 18px; + background-color: $white; + text-transform: uppercase; +} + +.settings__clear-button--red { + border: 1px solid $monzo; + color: $monzo; +} diff --git a/ui/app/css/itcss/components/simple-dropdown.scss b/ui/app/css/itcss/components/simple-dropdown.scss new file mode 100644 index 000000000..a21095a3e --- /dev/null +++ b/ui/app/css/itcss/components/simple-dropdown.scss @@ -0,0 +1,65 @@ +.simple-dropdown { + height: 56px; + display: flex; + justify-content: flex-start; + align-items: center; + border: 1px solid $alto; + border-radius: 4px; + background-color: $white; + font-size: 16px; + color: #4d4d4d; + cursor: pointer; + position: relative; +} + +.simple-dropdown__caret { + color: $silver; + padding: 0 10px; +} + +.simple-dropdown__selected { + flex-grow: 1; + padding: 0 15px; +} + +.simple-dropdown__options { + z-index: 1050; + position: absolute; + height: 220px; + width: 100%; + border: 1px solid #d2d8dd; + border-radius: 4px; + background-color: #fff; + -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .11); + margin-top: 10px; + overflow-y: scroll; + left: 0; + top: 100%; +} + +.simple-dropdown__option { + padding: 10px; + + &:hover { + background-color: $gallery; + } +} + +.simple-dropdown__option--selected { + background-color: $alto; + + &:hover { + background-color: $alto; + cursor: default; + } +} + +.simple-dropdown__close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; +} diff --git a/ui/app/css/itcss/components/tab-bar.scss b/ui/app/css/itcss/components/tab-bar.scss new file mode 100644 index 000000000..4f3077974 --- /dev/null +++ b/ui/app/css/itcss/components/tab-bar.scss @@ -0,0 +1,23 @@ +.tab-bar { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-end; +} + +.tab-bar__tab { + min-width: 0; + flex: 0 0 auto; + padding: 15px 25px; + border-bottom: 1px solid $alto; + box-sizing: border-box; + font-size: 18px; +} + +.tab-bar__tab--active { + border-color: $black; +} + +.tab-bar__grow-tab { + flex-grow: 1; +} -- cgit From 66758b784a5ca4b6829a6d4c895739fcc0a5ad61 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 23 Oct 2017 15:57:14 -0700 Subject: Update token menu css --- ui/app/css/itcss/components/newui-sections.scss | 1 + ui/app/css/itcss/components/token-list.scss | 6 ++++-- 2 files changed, 5 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 1ee8283ef..5e0acb1ec 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -45,6 +45,7 @@ $wallet-view-bg: $wild-sand; flex-direction: column; flex: 33.5 0 33.5%; background: $wallet-view-bg; + z-index: 200; @media screen and (min-width: 576px) { overflow-y: scroll; 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; } -- cgit From 754d117d189d81839bad3b5715b2d049779b4882 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 23 Oct 2017 22:04:44 -0700 Subject: Fix settings styling on mobile view --- ui/app/css/itcss/components/settings.scss | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'ui/app/css/itcss/components') 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 { -- cgit From 09d659614ed8a3d7627002eb77f0953b7f495f7e Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 23 Oct 2017 09:35:53 -0230 Subject: Cleaner implementation of currency-display input. --- ui/app/css/itcss/components/currency-display.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'ui/app/css/itcss/components') 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 -- cgit From a7069acf2e93e9eae543bb84dfdda1f5e10b3e19 Mon Sep 17 00:00:00 2001 From: Dan Date: Sat, 21 Oct 2017 00:06:42 -0230 Subject: Disable send-v2 next button if in error --- ui/app/css/itcss/components/send.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 9a076551e..c4efeccf0 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -652,7 +652,8 @@ } &__next-btn, - &__cancel-btn { + &__cancel-btn, + &__next-btn__disabled { width: 163px; text-align: center; height: 55px; @@ -667,16 +668,17 @@ border: 1px solid; } + &__next-btn, &__next-btn__disabled { - opacity: .5; - cursor: auto; - } - - &__next-btn { color: $curious-blue; border-color: $curious-blue; } + &__next-btn__disabled { + opacity: .5; + cursor: auto; + } + &__cancel-btn { color: $dusty-gray; border-color: $dusty-gray; -- cgit From e737a9565a6b78639b74511d026339c1b54bca1a Mon Sep 17 00:00:00 2001 From: Dan Date: Sun, 22 Oct 2017 17:44:03 -0230 Subject: Improve customize gas modal error handling --- ui/app/css/itcss/components/send.scss | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index c4efeccf0..d2415f26c 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -738,6 +738,7 @@ align-items: center; justify-content: space-between; font-size: 22px; + position: relative; } &__buttons { @@ -747,7 +748,7 @@ margin-right: 21.25px; } - &__revert, &__cancel, &__save { + &__revert, &__cancel, &__save, &__save__error { display: flex; justify-content: center; align-items: center; @@ -760,7 +761,7 @@ margin-left: 21.25px; } - &__cancel, &__save { + &__cancel, &__save, &__save__error { height: 34.64px; width: 85.74px; border: 1px solid $dusty-gray; @@ -769,6 +770,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 { -- cgit From 6d3f261b2f923782279be5e2ce05e8d6cc558a9e Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 23 Oct 2017 23:11:47 -0700 Subject: Change LOOSE label to IMPORTED --- ui/app/css/itcss/components/account-menu.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 090710f7b..72cb29ce8 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; } } -- cgit From a63373401b9983b991d4b2a0e28eec8d66c18e78 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 23 Oct 2017 23:59:21 -0700 Subject: New Sidebar uplift --- ui/app/css/itcss/components/newui-sections.scss | 66 +++++++++++++++++++++---- 1 file changed, 57 insertions(+), 9 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 5e0acb1ec..396dacae6 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -46,6 +46,7 @@ $wallet-view-bg: $wild-sand; flex: 33.5 0 33.5%; background: $wallet-view-bg; z-index: 200; + position: relative; @media screen and (min-width: 576px) { overflow-y: scroll; @@ -55,6 +56,57 @@ $wallet-view-bg: $wild-sand; .wallet-view-account-details { flex: 0 0 150px; } + + &__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: 15px; + left: 15px; + cursor: pointer; + } + } + } } @media screen and (min-width: 576px) { @@ -174,15 +226,11 @@ $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; } // account options dropdown -- cgit From 4401800a42eccbd77f11b332e1052431328401bb Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 00:13:49 -0700 Subject: Account menu white check mark --- ui/app/css/itcss/components/account-menu.scss | 11 +++++++++++ ui/app/css/itcss/components/newui-sections.scss | 4 ++-- 2 files changed, 13 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 72cb29ce8..91884e658 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -90,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/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 396dacae6..f86decab3 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -101,8 +101,8 @@ $wallet-view-bg: $wild-sand; font-size: 40px; color: $tundora; position: absolute; - top: 15px; - left: 15px; + top: 12px; + left: 12px; cursor: pointer; } } -- cgit From 2871beebe61418ce148069c932301d89e85923fa Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 00:29:20 -0700 Subject: Add "Add Token" button to side bar --- ui/app/css/itcss/components/newui-sections.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index f86decab3..a78279084 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -107,6 +107,19 @@ $wallet-view-bg: $wild-sand; } } } + + &__add-token-button { + color: $dusty-gray; + font-size: 14px; + line-height: 19px; + text-align: center; + margin: 36px auto 0; + border: 1px solid $dusty-gray; + border-radius: 2px; + font-weight: 300; + background: none; + padding: 9px 30px; + } } @media screen and (min-width: 576px) { -- cgit From ba9cefb24e61e570407154c37b6cc30b22829667 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 00:38:39 -0700 Subject: Add caret to Add Token toggle --- ui/app/css/itcss/components/add-token.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') 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; } } -- cgit From 4336794355e819f798343e0de3cea6933c8121ee Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 00:43:12 -0700 Subject: Fix styling in private key modal --- ui/app/css/itcss/components/modal.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss/components') 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; } -- cgit From 966e4cfd1189f7c115cfc552796c1353060d2125 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 00:54:49 -0700 Subject: Change clickable area for account detail; change network dot size --- ui/app/css/itcss/components/network.scss | 6 +++--- ui/app/css/itcss/components/newui-sections.scss | 8 +++++++- 2 files changed, 10 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index bb8c4eea8..77a6a393d 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -40,7 +40,7 @@ .dropdown-menu-item { .menu-icon-circle, .menu-icon-circle--active { - margin: 0 16px; + margin: 0 14px; } } @@ -116,8 +116,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 a78279084..c65ceb2db 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -54,7 +54,12 @@ $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 { @@ -244,6 +249,7 @@ $wallet-view-bg: $wild-sand; line-height: 20px; color: $scorpion; margin-top: 8px; + margin-bottom: 24px; } // account options dropdown -- cgit From 6daa8343234cf2a0bc32ed434ee3acae6100fd38 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 01:07:51 -0700 Subject: Disable network dropdown on conf tx screen --- ui/app/css/itcss/components/network.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 77a6a393d..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; -- cgit From de3a48ec66f044d4116f8dbd25c358ab30d073a9 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 01:19:00 -0700 Subject: Fix mobile add token button --- ui/app/css/itcss/components/confirm.scss | 6 ++++-- ui/app/css/itcss/components/newui-sections.scss | 3 ++- ui/app/css/itcss/components/send.scss | 3 +-- 3 files changed, 7 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components') 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/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index c65ceb2db..d975c56b7 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -114,11 +114,12 @@ $wallet-view-bg: $wild-sand; } &__add-token-button { + flex: 0 0 auto; color: $dusty-gray; font-size: 14px; line-height: 19px; text-align: center; - margin: 36px auto 0; + margin: 36px auto; border: 1px solid $dusty-gray; border-radius: 2px; font-weight: 300; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index d2415f26c..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, -- cgit From 07c4c92db64ffaaefbb9eb661d24bbb4c8c5ddb6 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 23 Oct 2017 13:54:47 -0230 Subject: Style dropdown of to-autocomplete. --- ui/app/css/itcss/components/account-dropdown.scss | 7 +++++++ ui/app/css/itcss/components/send.scss | 10 ++++++++++ 2 files changed, 17 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index 4fc7c705a..c298c4019 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -62,4 +62,11 @@ &__account-secondary-balance { color: $dusty-gray; } + + &__account-address { + margin-left: 35px; + width: 80%; + overflow: hidden; + text-overflow: ellipsis; + } } diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index bac5f4d05..3013ee66b 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -594,6 +594,16 @@ } } + &__to-autocomplete { + position: relative; + + &__down-caret { + position: absolute; + top: 18px; + right: 12px; + } + } + &__to-autocomplete, &__memo-text-area { &__input { height: 54px; -- cgit From 3f1ae92bb7d4ca4629995f32dc03f37e6460a864 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 16:55:02 -0700 Subject: Hide sidebar on add token --- ui/app/css/itcss/components/newui-sections.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index d975c56b7..5c73de79b 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -153,7 +153,7 @@ $wallet-view-bg: $wild-sand; background: rgb(250, 250, 250); z-index: $sidebar-z-index; position: fixed; - top: 57px; + top: 56px; left: 0; right: 0; bottom: 0; -- cgit From ad91fcd6628bb892b4c37da50b9e93e7d4605d5a Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 17:15:10 -0700 Subject: Add token list and buy modal alignment fix --- ui/app/css/itcss/components/add-token.scss | 48 +++++++++++++++++-------- ui/app/css/itcss/components/modal.scss | 1 + ui/app/css/itcss/components/newui-sections.scss | 2 +- 3 files changed, 36 insertions(+), 15 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index 9bdda6a9b..d2532eecc 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -7,19 +7,6 @@ z-index: 12; font-family: 'DIN Next Light'; - @media screen and (max-width: $break-small) { - top: 0; - width: 100%; - - &__wrapper { - box-shadow: none !important; - } - - &__footers { - border-bottom: 1px solid $gallery; - } - } - &__wrapper { background-color: $white; box-shadow: 0 2px 4px 0 rgba($black, .08); @@ -191,7 +178,7 @@ transition: 200ms ease-in-out; display: flex; flex-flow: row nowrap; - flex: 0 0 45%; + flex: 0 0 42.5%; align-items: center; padding: 12px; margin: 2.5%; @@ -215,6 +202,10 @@ } } + &__token-data { + align-self: flex-start; + } + &__token-name { font-size: 14px; line-height: 19px; @@ -294,4 +285,33 @@ &__confirmation-token-icon { margin-right: 18px; } + + @media screen and (max-width: $break-small) { + top: 0; + width: 100%; + overflow-y: auto; + + &__wrapper { + box-shadow: none !important; + } + + &__footers { + border-bottom: 1px solid $gallery; + } + + &__token-icon { + width: 50px; + height: 50px; + } + + &__token-symbol { + font-size: 18px; + line-height: 24px; + } + + &__token-name { + font-size: 12px; + line-height: 16px; + } + } } diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 139e5a8f2..cd1039d0a 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -57,6 +57,7 @@ border-radius: 6px; border: 1px solid $black; padding: 0% 7%; + justify-content: center; div.buy-modal-content-option-title { font-size: 20px; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 5c73de79b..3bb1840e2 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -163,7 +163,7 @@ $wallet-view-bg: $wild-sand; overflow-y: auto; box-shadow: rgba(0, 0, 0, .15) 2px 2px 4px; width: 85%; - height: calc(100% - 57px); + height: calc(100% - 56px); } .sidebar-overlay { -- cgit From 630ab79cc313fa280e6a3d6a2655dafacb6b9659 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 20:04:29 -0700 Subject: Styling and UX changes on sidebar --- ui/app/css/itcss/components/wallet-balance.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index cd44f89bb..64b291b89 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -1,4 +1,4 @@ -$wallet-balance-bg: $gallery; +$wallet-balance-bg: #e7e7e7; $wallet-balance-breakpoint: 890px; $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and (max-width: #{$wallet-balance-breakpoint})"; @@ -20,6 +20,7 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( align-items: center; flex: 0 0 auto; cursor: pointer; + border-top: 1px solid $wallet-balance-bg; .balance-container { display: flex; -- cgit From ebb2d38480f6fe4755a487a0b62ef6055e1e8d56 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 22:43:49 -0700 Subject: Remove memo input --- ui/app/css/itcss/components/send.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 3013ee66b..458434de4 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -400,7 +400,7 @@ .send-v2 { &__container { - height: 701px; + // height: 701px; width: 380px; border-radius: 8px; background-color: $white; @@ -416,6 +416,7 @@ width: 100%; top: 0; box-shadow: none; + flex: 1 1 auto; } } @@ -520,18 +521,20 @@ } &__form { - margin-top: 13px; + margin: 13px 0; width: 100%; @media screen and (max-width: $break-small) { - margin-top: 0px; + padding: 13px 0; + margin: 0; height: 0; overflow-y: auto; flex: 1 1 auto; } } - &__form-header, &__form-header-copy { + &__form-header, + &__form-header-copy { width: 100%; display: flex; flex-flow: column; -- cgit From 3e55caeffd6b7657067009ece9aa339922aee561 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 23:47:43 -0700 Subject: Add ellipsis to super long account name --- ui/app/css/itcss/components/newui-sections.scss | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 3bb1840e2..244de2ba0 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -43,7 +43,8 @@ $wallet-view-bg: $wild-sand; .wallet-view { display: flex; flex-direction: column; - flex: 33.5 0 33.5%; + flex: 33.5 1 33.5%; + width: 0; background: $wallet-view-bg; z-index: 200; position: relative; @@ -60,6 +61,7 @@ $wallet-view-bg: $wild-sand; &__name-container { flex: 0 0 auto; cursor: pointer; + width: 100%; } &__keyring-label { @@ -251,6 +253,12 @@ $wallet-view-bg: $wild-sand; color: $scorpion; margin-top: 8px; margin-bottom: 24px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + width: 100%; + padding: 0 8px; + text-align: center; } // account options dropdown -- cgit From 311ca1f3ca52ca4a4f45098ba3a0a5750ae9d3c6 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 00:10:09 -0700 Subject: Fix styling on notification view --- ui/app/css/itcss/components/confirm.scss | 9 +++++++++ ui/app/css/itcss/components/network.scss | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index c498afba2..130b8cbfd 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -16,6 +16,15 @@ } } +.notification { + .confirm-screen-wrapper { + + @media screen and (max-width: $break-small) { + height: calc(100vh - 85px); + } + } +} + .confirm-screen-wrapper { height: 100%; width: 380px; diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 0bc66ea1a..98dbdffb2 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -1,5 +1,5 @@ .network-component--disabled { - border-color: transparent !important; + // border-color: transparent !important; cursor: default; .fa-caret-down { -- cgit From 7c10cda8a4f8423a95f4c64024b07572d76dc266 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 00:24:26 -0700 Subject: Fix alignment on right arrow of confirm tx screens --- ui/app/css/itcss/components/account-menu.scss | 1 + ui/app/css/itcss/components/confirm.scss | 10 +++++++++- ui/app/css/itcss/components/header.scss | 1 - 3 files changed, 10 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 91884e658..e40e5a8c0 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -21,6 +21,7 @@ } &__icon { + margin-left: 20px; cursor: pointer; } diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 130b8cbfd..03da5acb6 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -75,7 +75,7 @@ flex: 0 0 auto; @media screen and (max-width: $break-small) { - font-size: 22px; + font-size: 20px; } } @@ -142,6 +142,14 @@ height: 16px; } +.confirm-send-ether, +.confirm-send-token { + i.fa-arrow-right { + align-self: start; + margin: 24px 14px 0 !important; + } +} + .confirm-screen-identicons { margin-top: 24px; flex: 0 0 auto; diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index ef84dc3f4..f722e8bf5 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -75,7 +75,6 @@ h2.page-subtitle { display: flex; flex-direction: row; align-items: center; - margin-right: 20px; } .left-menu-wrapper { -- cgit From 8d3a317b91fd440e2e405df780cb0f88e4683547 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 00:34:12 -0700 Subject: Show home page when metafox is clicked --- ui/app/css/itcss/components/header.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index f722e8bf5..a6332f819 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -27,6 +27,10 @@ bottom: -32px; } } + + .metafox-icon { + cursor: pointer; + } } .app-header-contents { @@ -58,6 +62,7 @@ text-transform: uppercase; font-weight: 400; color: #22232c; // $shark + line-height: 29px; @media screen and (max-width: 575px) { display: none; @@ -81,6 +86,7 @@ h2.page-subtitle { display: flex; flex-direction: row; align-items: center; + cursor: pointer; } .header__right-actions { -- cgit From 0d522139ba7c5372e0ef4219a69a4b8e8f83706a Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 01:08:14 -0700 Subject: Fix gas input styling on mobile view --- ui/app/css/itcss/components/confirm.scss | 4 +++- ui/app/css/itcss/components/send.scss | 30 ++++++++++++++++++++++++------ 2 files changed, 27 insertions(+), 7 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 03da5acb6..4a8232e39 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -85,8 +85,10 @@ background: $athens-grey; position: absolute; transform: rotate(45deg); - left: 178px; top: 71px; + left: 0; + right: 0; + margin: 0 auto; } .confirm-screen-title { diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 458434de4..a8d46067b 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -274,6 +274,7 @@ color: #9b9b9b; font-size: .8em; padding: 1px 4px; + cursor: pointer; } .token-gas { @@ -474,6 +475,7 @@ @media screen and (max-width: $break-small) { height: 59px; + width: 100vw; } } @@ -484,10 +486,13 @@ position: absolute; transform: rotate(45deg); left: 178px; - top: 65px; + top: 75px; @media screen and (max-width: $break-small) { top: 46px; + left: 0; + right: 0; + margin: 0 auto; } } @@ -706,8 +711,8 @@ flex-flow: column; @media screen and (max-width: $break-small) { - width: 355px; - height: 598px; + width: 100vw; + height: 100vh; } &__header { @@ -717,6 +722,10 @@ align-items: center; justify-content: space-between; font-size: 22px; + + @media screen and (max-width: $break-small) { + flex: 0 0 auto; + } } &__title { @@ -732,14 +741,19 @@ margin-right: 19.25px; } + &__content { + display: flex; + flex-flow: column nowrap; + height: 100%; + } + &__body { - height: 248px; display: flex; + margin-bottom: 24px; @media screen and (max-width: $break-small) { - width: 355px; - height: 470px; flex-flow: column; + flex: 1 1 auto; } } @@ -751,6 +765,10 @@ justify-content: space-between; font-size: 22px; position: relative; + + @media screen and (max-width: $break-small) { + flex: 0 0 auto; + } } &__buttons { -- cgit From 2b72b70647caaa81c0077e224a7dc8b9f823c872 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 01:17:17 -0700 Subject: Add GWEI to gas price unit --- ui/app/css/itcss/components/send.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index a8d46067b..282eef030 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -826,7 +826,6 @@ &__title { height: 26px; - width: 84px; color: $tundora; font-family: Roboto; font-size: 20px; -- cgit From 3d8182f5d54730d3908a210c3deb71b49dd08100 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 25 Oct 2017 09:26:05 -0700 Subject: Add Info section --- ui/app/css/itcss/components/settings.scss | 59 +++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss index d37a9d10d..2f29d8017 100644 --- a/ui/app/css/itcss/components/settings.scss +++ b/ui/app/css/itcss/components/settings.scss @@ -54,6 +54,10 @@ height: initial; padding: 5px 0; } + + &--without-height { + height: initial; + } } .settings__content-item-col { @@ -140,3 +144,58 @@ border: 1px solid $monzo; color: $monzo; } + +.settings__info-logo-wrapper { + height: 80px; + margin-bottom: 20px; +} + +.settings__info-logo { + max-height: 100%; + max-width: 100%; +} + +.settings__info-item { + padding: 10px 0; +} + +.settings__info-link-header { + padding-bottom: 15px; + + @media screen and (max-width: 575px) { + padding-bottom: 5px; + } +} + +.settings__info-link-item { + padding: 15px 0; + + @media screen and (max-width: 575px) { + padding: 5px 0; + } +} + +.settings__info-version-number { + padding-top: 5px; + font-size: 13px; + color: $dusty-gray; +} + +.settings__info-about { + color: $dusty-gray; + margin-bottom: 15px; +} + +.settings__info-link { + color: $curious-blue; +} + +.settings__info-separator { + margin: 15px 0; + width: 80px; + border-color: $alto; + border: none; + height: 1px; + background-color: $alto; + color: $alto; +} -- cgit From 78836b0ead0e1b2307a48868c109a5412effc78b Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 25 Oct 2017 13:31:58 -0230 Subject: Signature Request --- .../itcss/components/account-dropdown-mini.scss | 48 +++++ ui/app/css/itcss/components/index.scss | 4 + ui/app/css/itcss/components/request-signature.scss | 220 +++++++++++++++++++++ 3 files changed, 272 insertions(+) create mode 100644 ui/app/css/itcss/components/account-dropdown-mini.scss create mode 100644 ui/app/css/itcss/components/request-signature.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-dropdown-mini.scss b/ui/app/css/itcss/components/account-dropdown-mini.scss new file mode 100644 index 000000000..996993db7 --- /dev/null +++ b/ui/app/css/itcss/components/account-dropdown-mini.scss @@ -0,0 +1,48 @@ +.account-dropdown-mini { + height: 22px; + background-color: $white; + font-family: Roboto; + line-height: 16px; + font-size: 12px; + width: 124px; + + &__close-area { + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100%; + } + + &__list { + z-index: 1050; + position: absolute; + height: 180px; + width: 96pxpx; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + box-shadow: 0 3px 6px 0 rgba(0 ,0 ,0 ,.11); + overflow-y: scroll; + } + + .account-list-item { + margin-top: 6px; + } + + .account-list-item__account-name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 80px; + } + + .account-list-item__top-row { + margin: 0; + } + + .account-list-item__icon { + position: initial; + } +} \ 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 8ad014f62..03c59cacf 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -43,3 +43,7 @@ @import './tab-bar.scss'; @import './simple-dropdown.scss'; + +@import './request-signature.scss'; + +@import './account-dropdown-mini.scss'; diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss new file mode 100644 index 000000000..27882d83c --- /dev/null +++ b/ui/app/css/itcss/components/request-signature.scss @@ -0,0 +1,220 @@ +.request-signature { + &__container { + height: 619px; + width: 380px; + border-radius: 8px; + background-color: $white; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); + display: flex; + flex-flow: column nowrap; + z-index: 25; + align-items: center; + font-family: Roboto; + position: relative; + + @media screen and (max-width: $break-small) { + width: 100%; + top: 0; + box-shadow: none; + } + } + + &__header { + height: 64px; + width: 100%; + position: relative; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + } + + &__header-background { + position: absolute; + background-color: $athens-grey; + z-index: 2; + width: 100%; + height: 100%; + } + + &__header__text { + height: 29px; + width: 179px; + color: #5B5D67; + font-family: Roboto; + font-size: 22px; + font-weight: 300; + line-height: 29px; + z-index: 3; + } + + &__header__tip-container { + width: 100%; + display: flex; + justify-content: center; + } + + &__header__tip { + height: 25px; + width: 25px; + background: $athens-grey; + transform: rotate(45deg); + position: absolute; + bottom: -8px; + z-index: 1; + } + + &__account-info { + display: flex; + justify-content: space-between; + margin-top: 18px; + height: 69px; + } + + &__account { + color: $dusty-gray; + margin-left: 17px; + } + + &__account-text { + font-size: 14px; + } + + &__balance { + color: $dusty-gray; + margin-right: 17px; + width: 124px; + } + + &__balance-text { + text-align: right; + font-size: 14px; + } + + &__balance-value { + text-align: right; + margin-top: 2.5px; + } + + &__request-icon { + align-self: flex-end; + } + + &__body { + width: 100%; + } + + &__request-info { + display: flex; + justify-content: center; + } + + &__headline { + height: 48px; + width: 240px; + color: $tundora; + font-family: Roboto; + font-size: 18px; + font-weight: 300; + line-height: 24px; + text-align: center; + margin-top: 20px; + } + + &__notice { + height: 19px; + width: 105px; + color: #9B9B9B; + font-family: "Avenir Next"; + font-size: 14px; + line-height: 19px; + text-align: center; + margin-top: 21px; + margin-bottom: 11px; + width: 100%; + } + + &__rows { + height: 262px; + overflow-y: scroll; + overflow-x: hidden; + border-top: 1px solid $geyser; + + @media screen and (max-width: $break-small) { + height: 208px; + } + } + + // &__rows::-webkit-scrollbar { + // display: none; + // } + + &__row { + height: 74px; + display: flex; + flex-flow: column; + border-bottom: 1px solid $geyser; + } + + &__row-title { + height: 22px; + width: 80px; + color: $dusty-gray; + font-family: Roboto; + font-size: 16px; + line-height: 22px; + margin-top: 12px; + margin-left: 18px; + width: 100%; + } + + &__row-value { + height: 19px; + color: $scorpion; + font-family: Roboto; + font-size: 14px; + line-height: 19px; + margin-top: 6px; + margin-bottom: 15px; + margin-left: 18px; + width: 95%; + } + + &__footer { + height: 108px; + width: 100%; + display: flex; + align-items: center; + justify-content: space-evenly; + font-size: 22px; + position: relative; + + &__cancel-button, + &__sign-button { + display: flex; + align-items: center; + justify-content: center; + flex: 1 0 auto; + font-family: Roboto; + font-size: 16px; + font-weight: 300; + height: 55px; + line-height: 32px; + cursor: pointer; + border-radius: 2px; + box-shadow: none; + max-width: 162px; + } + + &__cancel-button { + background: none; + border: 1px solid $dusty-gray; + } + + &__sign-button { + background-color: $caribbean-green; + border-width: 0; + color: $white; + } + } +} \ No newline at end of file -- cgit From ddf11011c9467209e6b9810dff2df84ea9e4a040 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 25 Oct 2017 21:58:56 -0230 Subject: Signature request fixes. --- ui/app/css/itcss/components/request-signature.scss | 30 +++++++++------------- 1 file changed, 12 insertions(+), 18 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index 27882d83c..e9ba7dbfd 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -1,6 +1,5 @@ .request-signature { &__container { - height: 619px; width: 380px; border-radius: 8px; background-color: $white; @@ -11,6 +10,7 @@ align-items: center; font-family: Roboto; position: relative; + height: 100%; @media screen and (max-width: $break-small) { width: 100%; @@ -68,7 +68,7 @@ display: flex; justify-content: space-between; margin-top: 18px; - height: 69px; + margin-bottom: 20px; } &__account { @@ -97,11 +97,14 @@ } &__request-icon { - align-self: flex-end; + margin-top: 25px; } &__body { width: 100%; + height: 100%; + display: flex; + flex-flow: column; } &__request-info { @@ -122,42 +125,33 @@ } &__notice { - height: 19px; - width: 105px; color: #9B9B9B; font-family: "Avenir Next"; font-size: 14px; line-height: 19px; text-align: center; - margin-top: 21px; + margin-top: 41px; margin-bottom: 11px; width: 100%; } &__rows { - height: 262px; + height: 100%; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid $geyser; - - @media screen and (max-width: $break-small) { - height: 208px; - } + display: flex; + flex-flow: column; + padding-right: 4px; } - // &__rows::-webkit-scrollbar { - // display: none; - // } - &__row { - height: 74px; display: flex; flex-flow: column; border-bottom: 1px solid $geyser; } &__row-title { - height: 22px; width: 80px; color: $dusty-gray; font-family: Roboto; @@ -169,7 +163,6 @@ } &__row-value { - height: 19px; color: $scorpion; font-family: Roboto; font-size: 14px; @@ -178,6 +171,7 @@ margin-bottom: 15px; margin-left: 18px; width: 95%; + overflow-wrap: break-word; } &__footer { -- cgit From fa95303e1efef03db6c44878b89ccca680639598 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 18:05:52 -0700 Subject: Sign Typed Request styling fixes --- ui/app/css/itcss/components/request-signature.scss | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index e9ba7dbfd..ee54235d0 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -17,6 +17,10 @@ top: 0; box-shadow: none; } + + @media screen and (min-width: $break-large) { + max-height: 620px; + } } &__header { @@ -27,6 +31,7 @@ flex-flow: column; justify-content: center; align-items: center; + flex: 0 0 auto; } &__header-background { @@ -105,6 +110,8 @@ height: 100%; display: flex; flex-flow: column; + flex: 1 1 auto; + height: 0; } &__request-info { @@ -142,13 +149,11 @@ border-top: 1px solid $geyser; display: flex; flex-flow: column; - padding-right: 4px; } &__row { display: flex; flex-flow: column; - border-bottom: 1px solid $geyser; } &__row-title { @@ -167,21 +172,21 @@ font-family: Roboto; font-size: 14px; line-height: 19px; - margin-top: 6px; - margin-bottom: 15px; - margin-left: 18px; - width: 95%; + width: 100%; overflow-wrap: break-word; + border-bottom: 1px solid #d2d8dd; + padding: 6px 18px 15px; } &__footer { - height: 108px; width: 100%; display: flex; align-items: center; justify-content: space-evenly; font-size: 22px; position: relative; + flex: 0 0 auto; + border-top: 1px solid $geyser; &__cancel-button, &__sign-button { @@ -198,17 +203,20 @@ border-radius: 2px; box-shadow: none; max-width: 162px; + margin: 12px; } &__cancel-button { background: none; border: 1px solid $dusty-gray; + margin-right: 6px; } &__sign-button { background-color: $caribbean-green; border-width: 0; color: $white; + margin-left: 6px; } } } \ No newline at end of file -- cgit From 22d9e3a7e6dfd21b3ea52007030d71f53e29b851 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 25 Oct 2017 18:23:46 -0700 Subject: Allow editing account name in account details modal --- ui/app/css/itcss/components/editable-label.scss | 34 +++++++++++++++++++++++++ ui/app/css/itcss/components/index.scss | 2 ++ ui/app/css/itcss/components/modal.scss | 5 ++++ 3 files changed, 41 insertions(+) create mode 100644 ui/app/css/itcss/components/editable-label.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/editable-label.scss b/ui/app/css/itcss/components/editable-label.scss new file mode 100644 index 000000000..13570610c --- /dev/null +++ b/ui/app/css/itcss/components/editable-label.scss @@ -0,0 +1,34 @@ +.editable-label { + display: flex; + align-items: center; + justify-content: center; + position: relative; + + &__value { + max-width: 250px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + &__input { + width: 250px; + font-size: 14px; + text-align: center; + + &--error { + border: 1px solid $monzo; + } + } + + &__icon-wrapper { + position: absolute; + margin-left: 10px; + left: 100%; + } + + &__icon { + cursor: pointer; + color: $dusty-gray; + } +} diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 03c59cacf..4ba02be67 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -47,3 +47,5 @@ @import './request-signature.scss'; @import './account-dropdown-mini.scss'; + +@import './editable-label.scss'; diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index cd1039d0a..b69bd5c7e 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -294,6 +294,11 @@ font-size: 18px; } +.account-modal__name { + margin-top: 9px; + font-size: 20px; +} + .private-key-password { display: flex; flex-direction: column; -- cgit From b2e440e4ffba6db29cf8a928a41534c1f204d485 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 18:47:28 -0700 Subject: Add Token styling fix --- ui/app/css/itcss/components/add-token.scss | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index d2532eecc..5f6d0fcff 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -265,6 +265,11 @@ &__confirmation-title { padding: 30px 120px 12px; + + @media screen and (max-width: $break-small) { + padding: 20px 0; + width: 100%; + } } &__confirmation-content { @@ -274,7 +279,7 @@ &__confirmation-token-list-item { display: flex; flex-flow: row nowrap; - padding: 0 120px; + margin: 0 auto; align-items: center; } @@ -289,10 +294,14 @@ @media screen and (max-width: $break-small) { top: 0; width: 100%; - overflow-y: auto; + overflow: hidden; + height: 100%; &__wrapper { box-shadow: none !important; + flex: 1 1 auto; + width: 100%; + overflow-y: auto; } &__footers { @@ -313,5 +322,20 @@ font-size: 12px; line-height: 16px; } + + &__buttons { + flex-flow: row nowrap; + width: 100%; + align-items: center; + justify-content: center; + padding: 12px 0; + margin: 0; + border-top: 1px solid $gallery; + + button { + flex: 1 0 auto; + margin: 0 12px; + } + } } } -- cgit From 0d8f21ad58cc50c635974ee9ce487ce98993ea38 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 25 Oct 2017 18:56:51 -0700 Subject: Fix input border rendering on mobile --- ui/app/css/itcss/components/editable-label.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/editable-label.scss b/ui/app/css/itcss/components/editable-label.scss index 13570610c..c69ea1428 100644 --- a/ui/app/css/itcss/components/editable-label.scss +++ b/ui/app/css/itcss/components/editable-label.scss @@ -15,6 +15,7 @@ width: 250px; font-size: 14px; text-align: center; + border: 1px solid $alto; &--error { border: 1px solid $monzo; -- cgit From f9fc6cec3b01357dd5bb182b6389426d1f17260a Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 26 Oct 2017 14:29:22 -0230 Subject: eth_sign warning color --- ui/app/css/itcss/components/request-signature.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index ee54235d0..d81099bfa 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -131,8 +131,8 @@ margin-top: 20px; } - &__notice { - color: #9B9B9B; + &__notice, + &__warning { font-family: "Avenir Next"; font-size: 14px; line-height: 19px; @@ -142,6 +142,14 @@ width: 100%; } + &__notice { + color: $dusty-gray; + } + + &__warning { + color: $crimson; + } + &__rows { height: 100%; overflow-y: scroll; -- cgit From dc0b3255cf908320b5b46f02765ea03b5b4db6b7 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 30 Oct 2017 20:09:27 -0230 Subject: Fixes width of from and to dropdowns in extension and on mobile views. --- ui/app/css/itcss/components/send.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 282eef030..4d7e6d71a 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -577,6 +577,7 @@ line-height: 16px; font-size: 12px; color: $tundora; + position: relative; &__close-area { position: fixed; @@ -591,7 +592,7 @@ z-index: 1050; position: absolute; height: 220px; - width: 240px; + width: 100%; border: 1px solid $geyser; border-radius: 4px; background-color: $white; -- cgit From 319779ab081f70343b5ef77531450878292a90d6 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 26 Oct 2017 14:13:12 -0230 Subject: Adds max amount feature for send-ether --- ui/app/css/itcss/components/send.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 4d7e6d71a..2bd192788 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -629,6 +629,15 @@ } } + &__amount-max { + color: $curious-blue; + font-family: Roboto; + font-size: 12px; + left: 8px; + border: none; + cursor: pointer; + } + &__gas-fee-display { width: 100%; } -- cgit From 62f2aebe1d9c3efd6ace8785fc96bb43ae08afe8 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 9 Nov 2017 13:17:10 -0330 Subject: Network loading does not block network loading. --- ui/app/css/itcss/components/index.scss | 2 ++ ui/app/css/itcss/components/loading-overlay.scss | 21 +++++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 ui/app/css/itcss/components/loading-overlay.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 4ba02be67..dfb4f23f0 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -16,6 +16,8 @@ @import './confirm.scss'; +@import './loading-overlay.scss'; + // Balances @import './hero-balance.scss'; diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss new file mode 100644 index 000000000..15009c1e6 --- /dev/null +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -0,0 +1,21 @@ +.loading-overlay { + left: 0px; + z-index: 50; + position: absolute; + flex-direction: column; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + background: rgba(255, 255, 255, 0.8); + + @media screen and (max-width: 575px) { + margin-top: 56px; + height: calc(100% - 56px); + } + + @media screen and (min-width: 576px) { + margin-top: 75px; + height: calc(100% - 75px); + } +} -- cgit From 08d9ecc0454c729356f3f7a6d91156ee96c66959 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 10 Nov 2017 16:15:43 -0330 Subject: Cursor pointer and hover background on from and to dropdown items. --- ui/app/css/itcss/components/account-dropdown.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss index c298c4019..725da9d39 100644 --- a/ui/app/css/itcss/components/account-dropdown.scss +++ b/ui/app/css/itcss/components/account-dropdown.scss @@ -69,4 +69,15 @@ overflow: hidden; text-overflow: ellipsis; } + + &__dropdown { + &:hover { + background: rgba($alto, .2); + cursor: pointer; + + input { + background: rgba($alto, .1); + } + } + } } -- cgit From 7dba114feb428f7f2f78fee5611377b04bff5be6 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 1 Dec 2017 14:19:53 -0800 Subject: Update font weights to 300, remove animation from network dropdown, fix network dropdown not closing from certain click-areas --- ui/app/css/itcss/components/account-menu.scss | 6 +++--- ui/app/css/itcss/components/menu.scss | 2 +- ui/app/css/itcss/components/newui-sections.scss | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index e40e5a8c0..e16d2e024 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -40,7 +40,7 @@ font-size: 12px; line-height: 23px; padding: 0 24px; - font-weight: 200; + font-weight: 300; } img { @@ -113,7 +113,7 @@ &__name { color: $white; font-size: 18px; - font-weight: 200; + font-weight: 300; line-height: 16px; } @@ -126,7 +126,7 @@ &__action { font-size: 16px; line-height: 18px; - font-weight: 200; + font-weight: 300; cursor: pointer; } } diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index 17e24de98..7953834ee 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -12,7 +12,7 @@ align-items: center; position: relative; z-index: 200; - font-weight: 200; + font-weight: 300; @media screen and (max-width: 575px) { padding: 14px; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 244de2ba0..43a59c4da 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -248,7 +248,7 @@ $wallet-view-bg: $wild-sand; // wallet view .account-name { font-size: 24px; - font-weight: 200; + font-weight: 300; line-height: 20px; color: $scorpion; margin-top: 8px; -- cgit From 7f795240706c013dc4a9ece0e9c9e33897c7fc71 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 14 Nov 2017 12:34:55 -0330 Subject: Add UI selection --- ui/app/css/itcss/components/menu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss index 17e24de98..77c49bbcf 100644 --- a/ui/app/css/itcss/components/menu.scss +++ b/ui/app/css/itcss/components/menu.scss @@ -11,7 +11,7 @@ flex-flow: row nowrap; align-items: center; position: relative; - z-index: 200; + z-index: 201; font-weight: 200; @media screen and (max-width: 575px) { -- cgit From 9db00fa507c04180f6425cc3b1e3187afa193ab8 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 4 Dec 2017 22:30:11 -0330 Subject: Show user notifications after switch between UIs --- ui/app/css/itcss/components/modal.scss | 36 +++++++++++++++++++++++++++++++ ui/app/css/itcss/components/settings.scss | 5 +++++ 2 files changed, 41 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index b69bd5c7e..9b64564d6 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -563,3 +563,39 @@ } } } + +//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; +} \ No newline at end of file diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss index 2f29d8017..d60ebd934 100644 --- a/ui/app/css/itcss/components/settings.scss +++ b/ui/app/css/itcss/components/settings.scss @@ -145,6 +145,11 @@ color: $monzo; } +.settings__clear-button--orange { + border: 1px solid rgba(247, 134, 28, 1); + color: rgba(247, 134, 28, 1); +} + .settings__info-logo-wrapper { height: 80px; margin-bottom: 20px; -- cgit From 05c6789030791bd1b46434cf89c1817db37e8f38 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 8 Dec 2017 21:18:08 -0330 Subject: Adds button for opening app in main browser window in extension. --- ui/app/css/itcss/components/newui-sections.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 43a59c4da..61dfbd176 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -38,6 +38,10 @@ $wallet-view-bg: $wild-sand; } } +.open-in-browser { + cursor: pointer; +} + // wallet view and sidebar .wallet-view { -- cgit From 208e94d3bfdaf5ab6f279fb2000f1a3d14920b1b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 10 Jan 2018 21:09:09 -0800 Subject: Update main view styling --- ui/app/css/itcss/components/header.scss | 8 +++--- ui/app/css/itcss/components/hero-balance.scss | 30 ++++++++++++++--------- ui/app/css/itcss/components/newui-sections.scss | 29 +++++++++++----------- ui/app/css/itcss/components/token-list.scss | 6 +++-- ui/app/css/itcss/components/transaction-list.scss | 6 +---- ui/app/css/itcss/components/wallet-balance.scss | 20 +++++++++------ 6 files changed, 54 insertions(+), 45 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss index a6332f819..2a1f7abc7 100644 --- a/ui/app/css/itcss/components/header.scss +++ b/ui/app/css/itcss/components/header.scss @@ -53,7 +53,7 @@ } @media screen and (min-width: 1281px) { - width: 65vw; + width: 62vw; } } @@ -61,8 +61,10 @@ font-family: Roboto; text-transform: uppercase; font-weight: 400; - color: #22232c; // $shark - line-height: 29px; + font-size: 1.1rem; + position: relative; + padding-left: 15px; + color: #5b5d67; @media screen and (max-width: 575px) { display: none; diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index bdbdd2645..643363f95 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -16,7 +16,7 @@ flex-direction: row; justify-content: flex-start; align-items: center; - margin: 2.8em 2.37em .8em; + margin: 2.3em 2.37em .8em; } .balance-container { @@ -42,8 +42,9 @@ text-align: center; .token-amount { - font-size: 175%; - margin-top: 12.5%; + font-size: 1.75rem; + margin-top: 1rem; + font-weight: 400; } .fiat-amount { @@ -54,12 +55,13 @@ } @media screen and (min-width: $break-large) { - margin-left: 3%; + margin-left: .8em; justify-content: flex-start; align-items: flex-start; .token-amount { - font-size: 135%; + font-size: 1.5rem; + font-weight: 400; } .fiat-amount { @@ -69,13 +71,6 @@ } } - .balance-icon { - border-radius: 25px; - width: 45px; - height: 45px; - border: 1px solid $alto; - } - .hero-balance-buttons { @media screen and (max-width: $break-small) { @@ -112,3 +107,14 @@ } } } + +.hero-balance-button { + text-align: center; + padding: .9rem 1rem; + color: $white; + background: $curious-blue; + border-radius: 2px; + font-size: .85rem; + width: 6rem; + font-weight: 300; +} diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 61dfbd176..3ae47cb35 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -4,7 +4,7 @@ // Component Colors $tx-view-bg: $white; -$wallet-view-bg: $wild-sand; +$wallet-view-bg: $alabaster; // Main container .main-container { @@ -47,7 +47,7 @@ $wallet-view-bg: $wild-sand; .wallet-view { display: flex; flex-direction: column; - flex: 33.5 1 33.5%; + flex: 32 1 32%; width: 0; background: $wallet-view-bg; z-index: 200; @@ -69,22 +69,21 @@ $wallet-view-bg: $wild-sand; } &__keyring-label { - height: 40px; + height: 50px; color: $dusty-gray; font-family: Roboto; font-size: 10px; - line-height: 40px; text-align: right; - padding: 0 20px; + padding: 17px 20px 0; + box-sizing: border-box; } &__details-button { color: $curious-blue; font-size: 10px; - line-height: 13px; text-align: center; border: 1px solid $curious-blue; - border-radius: 10.5px; + border-radius: 17px; background-color: transparent; margin: 0 auto; padding: 4px 12px; @@ -121,12 +120,12 @@ $wallet-view-bg: $wild-sand; &__add-token-button { flex: 0 0 auto; - color: $dusty-gray; + color: $curious-blue; font-size: 14px; line-height: 19px; text-align: center; margin: 36px auto; - border: 1px solid $dusty-gray; + border: 1px solid $curious-blue; border-radius: 2px; font-weight: 300; background: none; @@ -199,7 +198,7 @@ $wallet-view-bg: $wild-sand; .main-container { // margin-top: 6.9vh; - width: 85%; + width: 85vw; height: 90vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } @@ -208,7 +207,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 769px) { .main-container { // margin-top: 6.9vh; - width: 80%; + width: 80vw; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } @@ -217,7 +216,7 @@ $wallet-view-bg: $wild-sand; @media screen and (min-width: 1281px) { .main-container { // margin-top: 6.9vh; - width: 65%; + width: 62vw; height: 82vh; box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); } @@ -252,11 +251,11 @@ $wallet-view-bg: $wild-sand; // wallet view .account-name { font-size: 24px; - font-weight: 300; + font-weight: 400; line-height: 20px; - color: $scorpion; + color: $black; margin-top: 8px; - margin-bottom: 24px; + margin-bottom: .9rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index d4add71b1..5cd5b3807 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -12,7 +12,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( position: relative; &__token-balance { - font-size: 130%; + font-size: 1.5rem; + font-weight: 400; @media #{$wallet-balance-breakpoint-range} { font-size: 105%; @@ -34,7 +35,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } &--active { - background-color: rgba($wallet-balance-bg, 1); + background-color: $manatee; + color: $white; } &__identicon { diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index a5d508f11..0ff0b3dda 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -32,13 +32,9 @@ } @media screen and (min-width: $break-large) { - .tx-list-header-wrapper { - flex: 0 0 55px; - } - .tx-list-header { font-size: 16px; - margin: 1.5em 2.37em; + margin: 1.1em 2.37em .8em; } .tx-list-container::-webkit-scrollbar { diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index 64b291b89..44f405e08 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -8,7 +8,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( background: rgba($wallet-balance-bg, 0); &--active { - background: rgba($wallet-balance-bg, 1); + background: $manatee; + color: $white; } } @@ -41,7 +42,8 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( align-items: flex-start; .token-amount { - font-size: 135%; + font-size: 1.5rem; + font-weight: 400; } .fiat-amount { @@ -61,11 +63,13 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( } } } +} - .balance-icon { - border-radius: 25px; - width: 45px; - height: 45px; - border: 1px solid $alto; - } +.balance-icon { + border-radius: 25px; + width: 50px; + height: 50px; + border: 1px solid $alto; + padding: 5px; + background: $white; } -- cgit 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/components') 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 From 376e1365727a97344d70d627ae27e8e70830a17a Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 16:30:07 -0800 Subject: Update styling for buttons, font weights --- ui/app/css/itcss/components/buttons.scss | 38 +++++++++++++++++++++++-- ui/app/css/itcss/components/confirm.scss | 9 ++---- ui/app/css/itcss/components/hero-balance.scss | 31 +------------------- ui/app/css/itcss/components/modal.scss | 29 +++++++------------ ui/app/css/itcss/components/newui-sections.scss | 27 +++++------------- ui/app/css/itcss/components/send.scss | 34 ++++------------------ ui/app/css/itcss/components/token-list.scss | 1 - ui/app/css/itcss/components/wallet-balance.scss | 1 - 8 files changed, 61 insertions(+), 109 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 8ba084b4a..1450b71cc 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -6,9 +6,43 @@ background-color: #02c9b1; // TODO: reusable color in colors.css } -button.btn-clear { +.btn-clear { background: $white; - border: 1px solid; + text-align: center; + padding: .8rem 1rem; + color: $curious-blue; + border: 2px solid $spindle; + border-radius: 4px; + font-size: .85rem; + font-weight: 400; + transition: border-color .3s ease; + + &:hover { + border-color: $curious-blue; + } + + &--disabled, + &[disabled] { + cursor: auto; + opacity: .5; + pointer-events: none; + } +} + +.btn-cancel { + background: $white; + text-align: center; + padding: .9rem 1rem; + color: $scorpion; + border: 2px solid $dusty-gray; + border-radius: 4px; + font-size: .85rem; + font-weight: 400; + transition: border-color .3s ease; + + &:hover { + border-color: $scorpion; + } } // No longer used in flat design, remove when modal buttons done diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 4a8232e39..e75a827f9 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -102,15 +102,10 @@ .confirm-screen-back-button { background: transparent; - border: 1px solid $curious-blue; left: 24px; position: absolute; - text-align: center; - color: $curious-blue; - padding: 6px 13px 7px 12px; - border-radius: 2px; - height: 30px; - width: 54px; + padding: 6px 12px; + font-size: .7rem; @media screen and (max-width: $break-small) { margin-right: 12px; diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index 643363f95..a7a883909 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -37,6 +37,7 @@ } .balance-display { + color: $black; @media screen and (max-width: $break-small) { text-align: center; @@ -44,7 +45,6 @@ .token-amount { font-size: 1.75rem; margin-top: 1rem; - font-weight: 400; } .fiat-amount { @@ -61,7 +61,6 @@ .token-amount { font-size: 1.5rem; - font-weight: 400; } .fiat-amount { @@ -84,37 +83,9 @@ flex-grow: 2; justify-content: flex-end; } - - button.btn-clear { - background: $white; - border: 1px solid; - border-radius: 2px; - font-size: 12px; - - @media screen and (max-width: $break-small) { - border-color: $curious-blue; - color: $curious-blue; - height: 36px; - } - - @media screen and (min-width: $break-large) { - border-color: $curious-blue; - color: $curious-blue; - padding: 0; - width: 85px; - height: 34px; - } - } } } .hero-balance-button { - text-align: center; - padding: .9rem 1rem; - color: $white; - background: $curious-blue; - border-radius: 2px; - font-size: .85rem; width: 6rem; - font-weight: 300; } diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 9b64564d6..307401666 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -258,19 +258,10 @@ width: 286px; } - .btn-clear { - min-height: 28px; - font-size: 14px; - border-color: $curious-blue; - color: $curious-blue; - border-radius: 2px; - flex-basis: 100%; - width: 75%; + .account-modal__button { margin-top: 17px; padding: 10px 22px; - height: 44px; width: 235px; - font-family: Roboto; } } @@ -346,17 +337,17 @@ display: flex; flex-direction: row; justify-content: center; +} - .btn-clear { - width: 141px; - height: 54px; - } +.export-private-key__button { + margin-top: 17px; + padding: 10px 22px; + width: 141px; + height: 54px; +} - .btn-cancel { - margin-right: 15px; - border-color: $dusty-gray; - color: $scorpion; - } +.export-private-key__button--cancel { + margin-right: 15px; } .private-key-password-display-wrapper { diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 3ae47cb35..af1a6974c 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -79,10 +79,7 @@ $wallet-view-bg: $alabaster; } &__details-button { - color: $curious-blue; font-size: 10px; - text-align: center; - border: 1px solid $curious-blue; border-radius: 17px; background-color: transparent; margin: 0 auto; @@ -120,16 +117,14 @@ $wallet-view-bg: $alabaster; &__add-token-button { flex: 0 0 auto; - color: $curious-blue; - font-size: 14px; - line-height: 19px; - text-align: center; margin: 36px auto; - border: 1px solid $curious-blue; - border-radius: 2px; - font-weight: 300; background: none; - padding: 9px 30px; + padding: .7rem 2rem; + transition: border-color .3s ease; + + &:hover { + border-color: $curious-blue; + } } } @@ -238,20 +233,12 @@ $wallet-view-bg: $alabaster; overflow-y: auto; background-color: $white; } - - button.btn-clear { - width: 93px; - height: 50px; - font-size: .7em; - background: $white; - border: 1px solid; - } } // wallet view .account-name { font-size: 24px; - font-weight: 400; + font-weight: 300; line-height: 20px; color: $black; margin-top: 8px; diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 2bd192788..beb3e519c 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -526,8 +526,9 @@ } &__form { - margin: 13px 0; + padding: 13px 0; width: 100%; + overflow-y: auto; @media screen and (max-width: $break-small) { padding: 13px 0; @@ -587,7 +588,7 @@ width: 100%; height: 100%; } - + &__list { z-index: 1050; position: absolute; @@ -677,40 +678,15 @@ border-top: 1px solid $alto; background: $white; padding: 0 12px; + flex-shrink: 0; } &__next-btn, - &__cancel-btn, - &__next-btn__disabled { + &__cancel-btn { width: 163px; - text-align: center; - height: 55px; - border-radius: 2px; - background-color: $white; - font-family: Roboto; - font-size: 16px; - font-weight: 300; - line-height: 21px; - border: 1px solid; margin: 0 4px; } - &__next-btn, - &__next-btn__disabled { - color: $curious-blue; - border-color: $curious-blue; - } - - &__next-btn__disabled { - opacity: .5; - cursor: auto; - } - - &__cancel-btn { - color: $dusty-gray; - border-color: $dusty-gray; - } - &__customize-gas { border: 1px solid #D8D8D8; border-radius: 4px; diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index 5cd5b3807..bdd26099a 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -13,7 +13,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( &__token-balance { font-size: 1.5rem; - font-weight: 400; @media #{$wallet-balance-breakpoint-range} { font-size: 105%; diff --git a/ui/app/css/itcss/components/wallet-balance.scss b/ui/app/css/itcss/components/wallet-balance.scss index 44f405e08..293771550 100644 --- a/ui/app/css/itcss/components/wallet-balance.scss +++ b/ui/app/css/itcss/components/wallet-balance.scss @@ -43,7 +43,6 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( .token-amount { font-size: 1.5rem; - font-weight: 400; } .fiat-amount { -- cgit From b0a6bfdeece8a5afb860bc47f01373d08a0895b8 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 16:59:00 -0800 Subject: Change styling for network dropdown --- ui/app/css/itcss/components/network.scss | 42 ++++++++++++-------------------- 1 file changed, 15 insertions(+), 27 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index 98dbdffb2..d9a39b8d5 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -8,41 +8,25 @@ } .network-component.pointer { - border: 1px solid $shark; + border: 2px solid $silver; border-radius: 82px; - padding: 6px; + padding: 3px; flex: 0 0 auto; - &.ethereum-network { - border-color: rgb(3, 135, 137); - - .menu-icon-circle div { - background-color: rgba(3, 135, 137, .7) !important; - } + &.ethereum-network .menu-icon-circle div { + background-color: rgba(3, 135, 137, .7) !important; } - &.ropsten-test-network { - border-color: rgb(233, 21, 80); - - .menu-icon-circle div { - background-color: rgba(233, 21, 80, .7) !important; - } + &.ropsten-test-network .menu-icon-circle div { + background-color: rgba(233, 21, 80, .7) !important; } - &.kovan-test-network { - border-color: rgb(105, 4, 150); - - .menu-icon-circle div { - background-color: rgba(105, 4, 150, .7) !important; - } + &.kovan-test-network .menu-icon-circle div { + background-color: rgba(105, 4, 150, .7) !important; } - &.rinkeby-test-network { - border-color: rgb(235, 179, 63); - - .menu-icon-circle div { - background-color: rgba(235, 179, 63, .7) !important; - } + &.rinkeby-test-network .menu-icon-circle div { + background-color: rgba(235, 179, 63, .7) !important; } } @@ -66,11 +50,12 @@ } .network-name { - line-height: 15px; padding: 0 4px; font-family: Roboto; font-size: 12px; flex: 1 0 auto; + color: $tundora; + font-weight: 500; } .network-droppo { @@ -167,3 +152,6 @@ line-height: 18px; } +.network-caret { + margin: 0 8px 2px; +} -- cgit From 0f4bfcb02e3a04f044a571e01a4977dae2afec8e Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 17:12:58 -0800 Subject: Fix token balance color --- ui/app/css/itcss/components/hero-balance.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss index a7a883909..99fd2a96d 100644 --- a/ui/app/css/itcss/components/hero-balance.scss +++ b/ui/app/css/itcss/components/hero-balance.scss @@ -37,7 +37,9 @@ } .balance-display { - color: $black; + .token-amount { + color: $black; + } @media screen and (max-width: $break-small) { text-align: center; -- cgit 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 ++++++++++++++++++++++++++++++++- 1 file changed, 253 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components') 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; +} -- cgit 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/components') 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 From 980e1bfcf82361185f6d1b22abd9593ba166825e Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 10 Jan 2018 14:55:38 -0330 Subject: New add account page with create and import options. --- ui/app/css/itcss/components/index.scss | 2 + ui/app/css/itcss/components/new-account.scss | 181 +++++++++++++++++++++++++++ 2 files changed, 183 insertions(+) create mode 100644 ui/app/css/itcss/components/new-account.scss (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index dfb4f23f0..d1b9b6277 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -51,3 +51,5 @@ @import './account-dropdown-mini.scss'; @import './editable-label.scss'; + +@import './new-account.scss'; diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss new file mode 100644 index 000000000..e14f567e1 --- /dev/null +++ b/ui/app/css/itcss/components/new-account.scss @@ -0,0 +1,181 @@ +.new-account { + width: 376px; + background-color: #FFFFFF; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.08); + z-index: 25; + padding-bottom: 31px; + + &__header { + display: flex; + flex-flow: column; + border-bottom: 1px solid $geyser; + } + + &__title { + color: $tundora; + font-family: Roboto; + font-size: 32px; + font-weight: 500; + line-height: 43px; + margin-top: 22px; + margin-left: 29px; + } + + &__tabs { + margin-left: 22px; + display: flex; + margin-top: 10px; + + &__tab { + height: 54px; + width: 75px; + padding: 15px 10px; + color: $dusty-gray; + font-family: Roboto; + font-size: 18px; + line-height: 24px; + text-align: center; + } + + &__tab:first-of-type { + margin-right: 20px; + } + + &__unselected:hover { + color: $black; + border-bottom: none; + } + + &__selected { + color: $curious-blue; + border-bottom: 3px solid $curious-blue; + } + } + +} + +.new-account-import-form { + &__select-section { + display: flex; + justify-content: space-evenly; + align-items: center; + margin-top: 29px; + } + + &__select-label { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + } + + &__select { + height: 54px; + width: 210px; + border: 1px solid #D2D8DD; + border-radius: 4px; + background-color: #FFFFFF; + display: flex; + align-items: center; + + .Select-control, + .Select-control:hover { + border: none; + box-shadow: none; + } + } + + &__instruction { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + align-self: flex-start; + margin-left: 30px; + } + + &__private-key { + display: flex; + flex-flow: column; + align-items: center; + margin-top: 34px; + } + + &__input-password { + height: 54px; + width: 315px; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + margin-top: 16px; + } + + &__json { + display: flex; + flex-flow: column; + align-items: center; + margin-top: 29px; + } +} + +.new-account-create-form { + display: flex; + flex-flow: column; + align-items: center; + + &__input-label { + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + margin-top: 29px; + align-self: flex-start; + margin-left: 30px; + } + + &__input { + height: 54px; + width: 315.84px; + border: 1px solid $geyser; + border-radius: 4px; + background-color: $white; + color: $scorpion; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + margin-top: 15px; + } + + &__buttons { + margin-top: 39px; + display: flex; + width: 100%; + justify-content: space-evenly; + } + + &__button-cancel, + &__button-create { + height: 55px; + width: 150px; + border-radius: 2px; + background-color: #FFFFFF; + } + + &__button-cancel { + border: 1px solid $dusty-gray; + color: $dusty-gray; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + text-align: center; + } + + &__button-create { + border: 1px solid $curious-blue; + color: $curious-blue; + font-family: Roboto; + font-size: 16px; + line-height: 21px; + text-align: center; + } +} \ No newline at end of file -- cgit From 2bc85ea72f2b53f763149dafd3a7787de9016635 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 12 Jan 2018 13:59:43 -0330 Subject: Fix input box padding and select highlight in new account create and import page. --- ui/app/css/itcss/components/new-account.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index e14f567e1..c5e4ea761 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -80,8 +80,14 @@ .Select-control, .Select-control:hover { + height: 100%; border: none; box-shadow: none; + + .Select-value { + display: flex; + align-items: center; + } } } @@ -108,6 +114,10 @@ border-radius: 4px; background-color: $white; margin-top: 16px; + color: $scorpion; + font-family: Roboto; + font-size: 16px; + padding: 0px 20px; } &__json { @@ -144,6 +154,7 @@ font-size: 16px; line-height: 21px; margin-top: 15px; + padding: 0px 20px; } &__buttons { -- cgit From dce6dcf437ecb7769d45ee38f1d2227a74f09ca6 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 12 Jan 2018 16:16:28 -0800 Subject: Fix Add Token button order, styling --- ui/app/css/itcss/components/add-token.scss | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss index 5f6d0fcff..13020f62f 100644 --- a/ui/app/css/itcss/components/add-token.scss +++ b/ui/app/css/itcss/components/add-token.scss @@ -94,6 +94,7 @@ padding: 12px 0; font-weight: 600; cursor: pointer; + position: relative; &:hover { background-color: rgba(0, 0, 0, .05); @@ -164,9 +165,18 @@ &__buttons { display: flex; - flex-flow: column nowrap; + flex-flow: row nowrap; margin: 30px 0 51px; flex: 0 0 auto; + align-items: center; + justify-content: center; + } + + &__button { + flex: 1 0 141px; + margin: 0 12px; + padding: 10px 22px; + height: 54px; } &__token-icons-container { @@ -324,18 +334,10 @@ } &__buttons { - flex-flow: row nowrap; - width: 100%; - align-items: center; - justify-content: center; padding: 12px 0; margin: 0; border-top: 1px solid $gallery; - - button { - flex: 1 0 auto; - margin: 0 12px; - } + width: 100%; } } } -- cgit From 644adeccf6b5365ef2c8c9a5ba69b90fdaa1f2ec Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Sat, 13 Jan 2018 14:59:16 -0800 Subject: Fix Hide Token modal styling, popup positioning --- ui/app/css/itcss/components/modal.scss | 24 +++++++----------------- ui/app/css/itcss/components/newui-sections.scss | 2 +- ui/app/css/itcss/components/token-list.scss | 10 +++++----- 3 files changed, 13 insertions(+), 23 deletions(-) (limited to 'ui/app/css/itcss/components') diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 7a2ec35a4..501351700 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -486,10 +486,9 @@ .hide-token-confirmation { min-height: 250.72px; - width: 374.49px; border-radius: 4px; - background-color: #FFFFFF; - box-shadow: 0 1px 7px 0 rgba(0,0,0,0.5); + background-color: $white; + box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .5); &__container { padding: 24px 27px 21px; @@ -499,7 +498,7 @@ } &__identicon { - margin-bottom: 10px + margin-bottom: 10px; } &__symbol { @@ -538,20 +537,11 @@ justify-content: center; margin-top: 15px; width: 100%; + } - button { - height: 44px; - width: 113px; - border: 1px solid $scorpion; - border-radius: 2px; - color: $tundora; - font-family: Roboto; - font-size: 14px; - line-height: 20px; - text-align: center; - margin-left: 4px; - margin-right: 4px; - } + &__button { + width: 141px; + margin: 0 5px; } } diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index af1a6974c..c9a06a2cc 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -153,7 +153,7 @@ $wallet-view-bg: $alabaster; background: rgb(250, 250, 250); z-index: $sidebar-z-index; position: fixed; - top: 56px; + top: 66px; left: 0; right: 0; bottom: 0; diff --git a/ui/app/css/itcss/components/token-list.scss b/ui/app/css/itcss/components/token-list.scss index bdd26099a..e24bf812b 100644 --- a/ui/app/css/itcss/components/token-list.scss +++ b/ui/app/css/itcss/components/token-list.scss @@ -63,11 +63,11 @@ $wallet-balance-breakpoint-range: "screen and (min-width: #{$break-large}) and ( height: 55px; width: 191px; border-radius: 4px; - background-color: rgba(0,0,0,0.82); - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5); - position: fixed; - margin-top: 20px; - margin-left: 105px; + background-color: rgba(0, 0, 0, .82); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5); + position: absolute; + top: 60px; + right: 25px; z-index: 2000; &__close-area { -- cgit