From 31089778ba3c97443e25bd3a7a901f45757894d9 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 27 Aug 2018 20:58:40 -0700 Subject: Add raised type buttons to Button component. Refactor all buttons within app to Button components --- ui/app/css/itcss/components/buttons.scss | 15 +++++++++++---- ui/app/css/itcss/components/send.scss | 4 ++++ 2 files changed, 15 insertions(+), 4 deletions(-) (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss index 34565767f..655188a3e 100644 --- a/ui/app/css/itcss/components/buttons.scss +++ b/ui/app/css/itcss/components/buttons.scss @@ -2,10 +2,7 @@ Buttons */ -.btn-default, -.btn-primary, -.btn-secondary, -.btn-confirm { +.button { height: 44px; background: $white; display: flex; @@ -79,6 +76,16 @@ background-color: $curious-blue; } +.btn-raised { + color: $curious-blue; + background-color: $white; + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08); + padding: 6px; + height: initial; + width: initial; + min-width: initial; +} + .btn--large { height: 54px; } diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 806ac8536..abc77b75a 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -833,6 +833,10 @@ line-height: 12px; color: $red; } + + &__cancel { + margin-right: 10px; + } } &__gas-modal-card { -- cgit v1.2.3 From 014240b066585f5983a4e6d65d6223f235044380 Mon Sep 17 00:00:00 2001 From: Chad Grimaldi Date: Wed, 12 Sep 2018 22:57:35 -0400 Subject: increase z-index of send-to input to allow for right-click (#5242) --- ui/app/css/itcss/components/send.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 806ac8536..03c7e457c 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -622,12 +622,14 @@ position: relative; &__down-caret { + z-index: 1051; position: absolute; top: 18px; right: 12px; } &__qr-code { + z-index: 1051; position: absolute; top: 13px; right: 33px; @@ -647,6 +649,8 @@ &__to-autocomplete, &__memo-text-area, &__hex-data { &__input { + z-index: 1050; + position: relative; height: 54px; width: 100%; border: 1px solid $alto; -- cgit v1.2.3 From 36dd0354e777e6786ae0d2284ffcb1adbc6d85f7 Mon Sep 17 00:00:00 2001 From: bitpshr Date: Mon, 10 Sep 2018 17:11:57 -0400 Subject: Implement latest EIP-712 protocol --- ui/app/css/itcss/components/request-signature.scss | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss index b607aded3..445b9ebf5 100644 --- a/ui/app/css/itcss/components/request-signature.scss +++ b/ui/app/css/itcss/components/request-signature.scss @@ -23,6 +23,25 @@ } } + &__typed-container { + padding: 17px; + + h1 { + font-weight: 900; + margin-bottom: 5px; + } + + * { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + > div { + margin-bottom: 10px; + } + } + &__header { height: 64px; width: 100%; -- cgit v1.2.3 From 055ddd5f1e0acd8022189f7b6583055b0e68dbf1 Mon Sep 17 00:00:00 2001 From: chadmg Date: Thu, 13 Sep 2018 19:23:04 -0400 Subject: follow up style fix to #5242 --- ui/app/css/itcss/components/send.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 4f97fc662..125134f12 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -622,14 +622,14 @@ position: relative; &__down-caret { - z-index: 1051; + z-index: 1026; position: absolute; top: 18px; right: 12px; } &__qr-code { - z-index: 1051; + z-index: 1026; position: absolute; top: 13px; right: 33px; @@ -649,7 +649,7 @@ &__to-autocomplete, &__memo-text-area, &__hex-data { &__input { - z-index: 1050; + z-index: 1025; position: relative; height: 54px; width: 100%; -- cgit v1.2.3 From cd28dbb1d5400589347d1ed868ed5d20f9b2f9aa Mon Sep 17 00:00:00 2001 From: Sean Date: Sat, 15 Sep 2018 15:22:10 -0400 Subject: Improvement: Increase click area for arrows (#5264) --- ui/app/css/itcss/components/send.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 125134f12..7fc960d7d 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -888,12 +888,21 @@ font-size: 18px; color: $tundora; right: 0px; - padding: 1px 4px; + padding: 0; display: flex; justify-content: space-around; align-items: center; } + .gas-tooltip-input-arrow-wrapper { + align-items: center; + align-self: stretch; + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; + } + input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; display: none; -- cgit v1.2.3 From b1b5968e5e4f7bdf9a7db159bbc2f1e64c2808f0 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 19 Sep 2018 15:32:20 -0230 Subject: Remove unused loading-overlay--full-screen CSS styles Refs #4417 --- ui/app/css/itcss/components/loading-overlay.scss | 7 ------- 1 file changed, 7 deletions(-) (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index b07d6af17..6d7d666be 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -20,13 +20,6 @@ height: calc(100% - 75px); } - &--full-screen { - position: fixed; - height: 100vh; - width: 100vw; - margin-top: 0; - } - &__container { position: absolute; top: 33%; -- cgit v1.2.3 From 4c376695573ea2372e25b1a14ed31edb5f613d2d Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 19 Sep 2018 15:33:53 -0230 Subject: Make the LoadingScreen component 100% as tall as its container --- ui/app/css/itcss/components/loading-overlay.scss | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index 6d7d666be..38627af17 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -8,18 +8,9 @@ align-items: center; flex: 1 1 auto; width: 100%; + height: 100%; background: rgba(255, 255, 255, .8); - @media screen and (max-width: 575px) { - margin-top: 66px; - height: calc(100% - 66px); - } - - @media screen and (min-width: 576px) { - margin-top: 75px; - height: calc(100% - 75px); - } - &__container { position: absolute; top: 33%; -- cgit v1.2.3 From fbf14cd130c6f7f73697fad28730da485cb7c946 Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 19 Sep 2018 15:52:39 -0230 Subject: Prevent loading screen from overlaying the app bar Refs #4417 This change is functional copy of 3893469 that solves the problem in a way that doesn't depend on the height of the app bar since the app bar isn't a fixed height in the smaller views. --- ui/app/css/itcss/components/loading-overlay.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index 38627af17..17f12ab73 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -1,6 +1,6 @@ .loading-overlay { left: 0; - z-index: 50; + z-index: 256; position: absolute; flex-direction: column; display: flex; -- cgit v1.2.3 From 3987f9860f9a1892c12237b726db30a8d5a3c41d Mon Sep 17 00:00:00 2001 From: Whymarrh Whitby Date: Wed, 19 Sep 2018 16:43:58 -0230 Subject: Move main-container wrapper div into its own class --- ui/app/css/itcss/components/loading-overlay.scss | 2 +- ui/app/css/itcss/components/newui-sections.scss | 10 ++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss index 17f12ab73..b023c8423 100644 --- a/ui/app/css/itcss/components/loading-overlay.scss +++ b/ui/app/css/itcss/components/loading-overlay.scss @@ -1,6 +1,6 @@ .loading-overlay { left: 0; - z-index: 256; + z-index: 51; position: absolute; flex-direction: column; display: flex; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 7eb193d6f..8e963d495 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -22,6 +22,12 @@ $wallet-view-bg: $alabaster; display: none; } +.main-container-wrapper { + display: flex; + width: 100vw; + justify-content: center; +} + //Account and transaction details .account-and-transaction-details { display: flex; @@ -219,6 +225,10 @@ $wallet-view-bg: $alabaster; overflow-y: auto; background-color: $white; } + + .main-container-wrapper { + height: 100%; + } } // wallet view -- cgit v1.2.3 From b579ee9619d5d775484f382b800c3426311da19d Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 11 Sep 2018 17:32:37 -0700 Subject: Refactor settings page to use JSX and follow component file folder structure --- ui/app/css/itcss/components/index.scss | 2 - ui/app/css/itcss/components/settings.scss | 214 ------------------------------ 2 files changed, 216 deletions(-) delete mode 100644 ui/app/css/itcss/components/settings.scss (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index 9e2008b54..99deaf918 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -36,8 +36,6 @@ @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 deleted file mode 100644 index 0dd61ac5e..000000000 --- a/ui/app/css/itcss/components/settings.scss +++ /dev/null @@ -1,214 +0,0 @@ -.settings { - position: relative; - background: $white; - display: flex; - flex-flow: column nowrap; -} - -.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; - height: auto; - overflow: auto; -} - -.settings__content-row { - display: flex; - flex-direction: row; - padding: 10px 0 20px; - - @media screen and (max-width: 575px) { - flex-direction: column; - padding: 10px 0; - } -} - -.settings__content-item { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - padding: 0 5px; - height: 71px; - - @media screen and (max-width: 575px) { - height: initial; - padding: 5px 0; - } - - &--without-height { - height: initial; - } -} - -.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; - border: 1px solid $alto; -} - -.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__button--red { - border-color: lighten($monzo, 10%); - color: $monzo; - - &:active { - background: lighten($monzo, 55%); - border-color: $monzo; - } - - &:hover { - border-color: $monzo; - } -} - -.settings__button--orange { - border-color: lighten($ecstasy, 20%); - color: $ecstasy; - - &:active { - background: lighten($ecstasy, 40%); - border-color: $ecstasy; - } - - &:hover { - border-color: $ecstasy; - } -} - -.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 v1.2.3 From 13a1d4672045371f6366bf1fc48b77cb880eb4f8 Mon Sep 17 00:00:00 2001 From: HackyMiner Date: Sat, 29 Sep 2018 04:53:58 +0900 Subject: support editable customRPC (#5267) * support editable customRPC #5246 * remove rpcList size restriction --- ui/app/css/itcss/components/network.scss | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index b23876d01..833a91f12 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -59,6 +59,15 @@ font-weight: 500; } +.dropdown-menu-item .fa.delete { + margin-right: 10px; + display: none; +} + +.dropdown-menu-item:hover .fa.delete { + display: inherit; +} + .network-droppo { right: 2px; -- cgit v1.2.3 From b5169340ab2c0fed27d770c2d120961559b37965 Mon Sep 17 00:00:00 2001 From: Sean Date: Mon, 1 Oct 2018 10:07:23 -0400 Subject: Improvement: Reposition customize gas error (#5265) --- ui/app/css/itcss/components/send.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 7fc960d7d..a57653b45 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -831,11 +831,13 @@ &__error-message { display: block; position: absolute; - top: 4px; - right: 4px; + top: -18px; + right: 0; font-size: 12px; line-height: 12px; color: $red; + width: 100%; + text-align: center; } &__cancel { -- cgit v1.2.3 From f88373237bebbaf286cab9085871166307ae9ab1 Mon Sep 17 00:00:00 2001 From: Santiago Gonzalez Toral Date: Tue, 2 Oct 2018 20:29:03 -0500 Subject: Added account options on home screen --- ui/app/css/itcss/components/account-details-dropdown.scss | 7 +++++++ ui/app/css/itcss/components/index.scss | 2 ++ 2 files changed, 9 insertions(+) create mode 100644 ui/app/css/itcss/components/account-details-dropdown.scss (limited to 'ui/app/css') diff --git a/ui/app/css/itcss/components/account-details-dropdown.scss b/ui/app/css/itcss/components/account-details-dropdown.scss new file mode 100644 index 000000000..2a3007f83 --- /dev/null +++ b/ui/app/css/itcss/components/account-details-dropdown.scss @@ -0,0 +1,7 @@ +.account-details-dropdown { + width: 60%; + position: absolute; + top: 120px; + right: 15px; + z-index: 2000; +} \ 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 99deaf918..63aa62eb3 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -42,6 +42,8 @@ @import './request-signature.scss'; +@import './account-details-dropdown.scss'; + @import './account-dropdown-mini.scss'; @import './editable-label.scss'; -- cgit v1.2.3