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/modal.scss') 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/modal.scss | 67 +++++++++++++++++++++++++++++++--- 1 file changed, 62 insertions(+), 5 deletions(-) (limited to 'ui/app/css/itcss/components/modal.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/modal.scss') 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/modal.scss') 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/modal.scss') 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/modal.scss') 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 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/modal.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'ui/app/css/itcss/components/modal.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; } } -- 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/modal.scss | 70 ++++++++++++++++++++++++++-------- 1 file changed, 54 insertions(+), 16 deletions(-) (limited to 'ui/app/css/itcss/components/modal.scss') 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/modal.scss') 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/modal.scss') 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 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss/components/modal.scss') 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 -- 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 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/modal.scss') 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 +} -- 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/modal.scss') 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/modal.scss') 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 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/modal.scss | 61 ++++++++++++++++++---------------- 1 file changed, 32 insertions(+), 29 deletions(-) (limited to 'ui/app/css/itcss/components/modal.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; -- 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/modal.scss') 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/modal.scss') 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/modal.scss') 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 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/modal.scss') 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/modal.scss') 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 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'ui/app/css/itcss/components/modal.scss') 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 -- 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/modal.scss') 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/modal.scss') 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 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/modal.scss') 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 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/modal.scss') 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/modal.scss') 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 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/modal.scss') 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 ++++++++++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) (limited to 'ui/app/css/itcss/components/modal.scss') 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; -- 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/modal.scss') 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 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/modal.scss') 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 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/modal.scss') 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 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/modal.scss') 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 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/modal.scss | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'ui/app/css/itcss/components/modal.scss') 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; -- 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/modal.scss') 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 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/modal.scss') 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 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/modal.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/css/itcss/components/modal.scss') 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; -- 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/modal.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'ui/app/css/itcss/components/modal.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 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 ++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) (limited to 'ui/app/css/itcss/components/modal.scss') 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 -- cgit