From 4065bae564b84a99931a281180593e7062ab49ba Mon Sep 17 00:00:00 2001 From: Martin Allien Date: Thu, 26 Oct 2017 22:02:22 +0200 Subject: [PATCH 01/16] Receive page - responsive finish --- src/app/wallet/receive/receive.component.html | 51 ++++++++++--------- src/app/wallet/receive/receive.component.scss | 22 +++++++- src/assets/theme.scss | 18 ++----- 3 files changed, 52 insertions(+), 39 deletions(-) diff --git a/src/app/wallet/receive/receive.component.html b/src/app/wallet/receive/receive.component.html index 2931d07e4..a09abeedc 100644 --- a/src/app/wallet/receive/receive.component.html +++ b/src/app/wallet/receive/receive.component.html @@ -21,30 +21,32 @@ -
+
- -
- -
+ +
+ + +
-
+
{{ getAddressType() }} address
{{ selected.label }}
-
-
+
+
{{ word }}
+
@@ -55,26 +57,27 @@
Unused address
-
-
/{{ getUnusedAddress().id }}
-
{{ getUnusedAddress().label }}
-
+
+
/{{ getUnusedAddress().id }}
+
{{ getUnusedAddress().label }}
+
{{ getUnusedAddress().address }} +
-
+
- + -
+
- +
@@ -91,26 +94,26 @@
-
-
/{{ address.id }}
-
{{ address.label }}
-
+
+
/{{ address.id }}
+
{{ address.label }}
+
{{ address.address }}
Total received: {{ address.balance }}
-
+
- + - + - +
diff --git a/src/app/wallet/receive/receive.component.scss b/src/app/wallet/receive/receive.component.scss index 3ca4aef9d..b9f0f5f7d 100644 --- a/src/app/wallet/receive/receive.component.scss +++ b/src/app/wallet/receive/receive.component.scss @@ -29,6 +29,9 @@ .address-details { text-align: center; margin-top: 15px; + @media (max-width: 960px) { + text-align: left; + } .details-title { font-weight: bold; text-transform: uppercase; @@ -39,10 +42,16 @@ text-transform: uppercase; color: #515153; margin: 10px 0 25px; + @media (max-width: 960px) { + margin: 10px 0 20px; + } } .details-address { font-family: monospace; margin: 0 25px 20px; + @media (max-width: 960px) { + margin: 0 0 20px; + } } } @@ -50,7 +59,7 @@ Address list \* ------------------------------- */ -.address-title { // section title +.address-title { // section title (used/unused) font-weight: normal; text-transform: uppercase; color: $text-muted; @@ -71,14 +80,25 @@ .address { overflow: hidden; text-overflow: ellipsis; + font-family: monospace; background: transparent; transition: background .3s; .total { font-size: 0.8em; + font-family: $font; + color: $text-muted; margin-top: 5px; .received-amount { color: $color; + font-weight: 600; } } } + .address-actions { // copy, sign, ... + .mat-icon { + width: auto; + height: auto; + font-size: 16px; + } + } } diff --git a/src/assets/theme.scss b/src/assets/theme.scss index cce445f7a..90e4d724f 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -12,6 +12,10 @@ margin-bottom: 25px; } +.qrcode { + text-align: center; +} + /** * Side bar Menu. */ @@ -324,13 +328,6 @@ panel-header-title { @media (max-width: 1280px) { - .qrcode { - text-align: center; - img { - width: 127px; - height: 127px; - } - } .md-left-border { border-left: none; justify-content: flex-start !important; @@ -382,11 +379,4 @@ panel-header-title { } @media (max-width: 640px) { - .qrcode { - text-align: center; - img { - height: auto; - max-width: 100%; - } - } } From e22836faec80a5117e8093849b37cb58fa225b72 Mon Sep 17 00:00:00 2001 From: Gerlof van Ek Date: Fri, 27 Oct 2017 13:45:47 +0200 Subject: [PATCH 02/16] Send page + Scrollbars + Fixes --- src/app/settings/settings.component.scss | 3 +- src/app/wallet/send/send.component.html | 290 +++++++++-------------- src/app/wallet/send/send.component.scss | 133 ++++++++++- src/assets/_config.scss | 2 +- src/assets/theme.scss | 29 +++ 5 files changed, 268 insertions(+), 189 deletions(-) diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss index 1e602a87c..fbb076cc2 100644 --- a/src/app/settings/settings.component.scss +++ b/src/app/settings/settings.component.scss @@ -54,8 +54,7 @@ button:active { /* Particl inputs */ input[type="text"] { - background-color: #FBFBFB; + background-color: #fff; border: 1px solid #EDEDED; - border-radius: 3px; padding: 4px; } \ No newline at end of file diff --git a/src/app/wallet/send/send.component.html b/src/app/wallet/send/send.component.html index 11e11ff0a..8e5c0f852 100644 --- a/src/app/wallet/send/send.component.html +++ b/src/app/wallet/send/send.component.html @@ -1,5 +1,5 @@ -
+
@@ -16,215 +16,139 @@
-
-
-
+
- -
+
- + -
- -
From Account
- - Public - - Blind - - Private - -
+
+ +
From Account
+ Public + Blind + Private +
Balance: {{getBalance(send.input)}} PART
- -
From Account
- - - Public - - Blind - - Private - -
+ +
From Account
+ Public + Blind + Private +
Balance: {{getBalance(send.input)}} PART
+ + + -
- - - - - -
- -
TO ACCOUNT
- Public - - Blind - - Private - - -
+
+ +
To Account
+ Public + Blind + Private +
Balance: - {{getBalance(send.output)}} PART + {{getBalance(send.input)}} PART
+ + + -
- - - - - -
-
Pay to:
+
+
Pay to
- - -
- - + - -
- - - - +
+ + + +
+ + + + + + + + + +
+
-
- -
- - - - - - -
-
Narration
- - - -
- - - - - - -
-
Amount
- - + + + + +
+
Narration
+ + + +
+ + + + + +
+
Amount
+ + - - - PART - -
- - - - - - -
-
Privacy level
- -
-
- Low - Medium - High -
- - - -
+ + + PART + +
+ + + + + +
+
Privacy level
+
+
+ Low + Medium + High +
+ +
+
+ + + + + +
+ + +
+
- - -
- - -
- - -
- -
-
+
\ No newline at end of file diff --git a/src/app/wallet/send/send.component.scss b/src/app/wallet/send/send.component.scss index 8ef32ec07..9249ff319 100644 --- a/src/app/wallet/send/send.component.scss +++ b/src/app/wallet/send/send.component.scss @@ -1,5 +1,13 @@ @import "./src/assets/_config"; // import shared colors etc. +/* ------------------------------- *\ + Todo: cleanup +\* ------------------------------- */ + +/* ------------------------------- *\ + Layout +\* ------------------------------- */ + .formTableFullWidth { width: 100%; } @@ -10,12 +18,131 @@ input[type="text"] { .mat-list { .mat-divider { - margin: 20px 0; + margin: 0px 0; border-color: transparent; - } - + } } .mat-select-trigger { padding-top: 21px !important; } + +.mat-expansion-panel { + box-shadow: none; +} + +.mat-card { + background: transparent; + padding: 25px 20px 0 20px; + border-bottom: 0px solid $bg-shadow; +} + +.mat-card h5 { + text-transform: uppercase; + font-weight: bold; + font-size: 12px; +} + +.mat-input-element { + width: calc(100% - 8px); +} + +.mat-select { + padding-top: 4px; +} + +md-card.mat-card { + box-shadow: 0 0px 0 #E9E9E9 !important; +} + +.md-list-item { + padding: 25px; +} + +.md-list-radio h5 { + margin-top: 15px; +} + +.md-radio-group { + background: #fff; +} + +.md-send-card { + padding: 20px; + min-height: 14vh; + height: auto; +} + +.md-radio-button-center, .md-balance-center { + padding-top: 12px; +} + +.md-tab-right { + float: right; +} + +.no-bg { + background:transparent; +} + +.button-line { + border-bottom: 1px solid $bg-shadow; +} + +.nc-circle-remove, .nc-copy-2, .nc-multiple-19 { + width: auto; + height: auto; + font-size: 16px; +} + +.balance-label { + font-weight: bold; +} + +/* ------------------------------- *\ + Buttons +\* ------------------------------- */ + +app-header { +button { + background-color: #fafafa; + border: none; + padding: 1px 15px 0 15px ; + margin: 5px 10px 0 0; + font-size: 13px; + border-bottom: 0px solid $bg-shadow; + float:right; + font-weight:normal; + color: #232728; +} +.button-line { + border-bottom: 1px solid $bg-shadow; +} + button.show-address { + md-icon { + font-size: 20px; + width: auto; + height: auto; + margin-right: 6px; + line-height: 1.5; + color: $color; + background:transparent; + } + span { + color: $text; + text-transform: uppercase; + font-size: 13px; + } + } +} + +.button-send { + background-color: white; + border: none; + padding: 0; + margin: 15px 20px 0 0; + text-transform: uppercase; + font-weight: bold; + font-size: 0.9; + border-bottom: 1px solid #F1F1F1; +} \ No newline at end of file diff --git a/src/assets/_config.scss b/src/assets/_config.scss index a3d4df83e..74d42a83e 100644 --- a/src/assets/_config.scss +++ b/src/assets/_config.scss @@ -10,4 +10,4 @@ $text: #232728; // default text color $text-muted: #7E8790; // grey (for section titles, descriptions etc.) // bg/element colors -$bg-shadow: #E9E9E9; // lines, box shadows etc. \ No newline at end of file +$bg-shadow: #dcdcdc; // lines, box shadows etc. \ No newline at end of file diff --git a/src/assets/theme.scss b/src/assets/theme.scss index 90e4d724f..aae5ee553 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -177,6 +177,35 @@ input[type="text"] { padding: 20px; } +/** + * Scrollbars + */ + +/* pseudo elements +::-webkit-scrollbar {} +::-webkit-scrollbar-button {} +::-webkit-scrollbar-track {} +::-webkit-scrollbar-track-piece {} +::-webkit-scrollbar-thumb {} +::-webkit-scrollbar-corner {} +::-webkit-resizer {} +*/ + +::-webkit-scrollbar-track { + border-radius: 15px; + background-color: #e9e9e9; +} + +::-webkit-scrollbar { + width: 6px; +} + +::-webkit-scrollbar-thumb:vertical { + width: 6px; + border-radius: 15px; + background-color: $color; +} + /** * History List */ From 8066cc2731e16862c773617690e334a32fb77491 Mon Sep 17 00:00:00 2001 From: Martin Allien Date: Fri, 27 Oct 2017 14:40:58 +0200 Subject: [PATCH 03/16] fixed select boxes + added TODOs --- src/app/overview/widgets/coldstake/coldstake.component.html | 2 +- .../overview/widgets/stakinginfo/stakinginfo.component.html | 6 +++--- src/assets/theme.scss | 4 ++++ 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/overview/widgets/coldstake/coldstake.component.html b/src/app/overview/widgets/coldstake/coldstake.component.html index 69929832c..ef9b35914 100644 --- a/src/app/overview/widgets/coldstake/coldstake.component.html +++ b/src/app/overview/widgets/coldstake/coldstake.component.html @@ -26,6 +26,6 @@

- @FIXME: Cold Staking lets you spend from one machine and stake from another. This greatly increases safety of your coins. + @FIXME: Cold Staking lets you spend from one machine and stake from another. This greatly increases safety of your coins.

\ No newline at end of file diff --git a/src/app/overview/widgets/stakinginfo/stakinginfo.component.html b/src/app/overview/widgets/stakinginfo/stakinginfo.component.html index ba96897a7..15f169840 100644 --- a/src/app/overview/widgets/stakinginfo/stakinginfo.component.html +++ b/src/app/overview/widgets/stakinginfo/stakinginfo.component.html @@ -11,12 +11,12 @@ - + - + @@ -24,7 +24,7 @@ - +
Next rewardTODO ~3 hours~3 hours
Your Stake weight TODO 3.48 ‰3.48 ‰
Stake percentage
Stake rewardTODO 1.494 PART1.494 PART
diff --git a/src/assets/theme.scss b/src/assets/theme.scss index aae5ee553..3817881af 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -16,6 +16,10 @@ text-align: center; } +.mat-select-panel { // select box fix + background: white; +} + /** * Side bar Menu. */ From 1de896784150ee5a601bc33dfede36ae6dedabec Mon Sep 17 00:00:00 2001 From: Martin Allien Date: Sat, 28 Oct 2017 15:26:03 +0200 Subject: [PATCH 04/16] dialogs' remake --- src/app/app.component.scss | 2 +- .../modals/coldstake/coldstake.component.html | 6 + .../modals/coldstake/coldstake.component.scss | 4 + .../createwallet/createwallet.component.html | 6 + .../createwallet/createwallet.component.scss | 6 + .../encryptwallet.component.html | 40 +++--- .../encryptwallet.component.scss | 3 + src/app/modals/modals.component.html | 14 +- src/app/modals/modals.component.scss | 44 ++++-- src/app/modals/shared/_modal-layout.scss | 27 ++++ .../percentage-bar.component.scss | 12 ++ src/app/modals/syncing/syncing.component.html | 6 + src/app/modals/syncing/syncing.component.scss | 4 + .../unlockwallet/unlockwallet.component.html | 8 +- .../unlockwallet/unlockwallet.component.scss | 3 + src/assets/_config.scss | 1 + src/assets/particl-logo-symbol.svg | 134 ++++++++++++++++++ src/assets/theme.scss | 47 +++--- 18 files changed, 311 insertions(+), 56 deletions(-) create mode 100644 src/app/modals/shared/_modal-layout.scss create mode 100644 src/assets/particl-logo-symbol.svg diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 55532b556..8d5b0aae0 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -60,7 +60,7 @@ .logo { display: inline-block; - background-image: url("../assets/particl-logo.svg"); + background-image: url("/assets/particl-logo.svg"); background-repeat: no-repeat; background-position: 0 0; background-size: 144px 60px; diff --git a/src/app/modals/coldstake/coldstake.component.html b/src/app/modals/coldstake/coldstake.component.html index 558339ba5..4c26d6411 100644 --- a/src/app/modals/coldstake/coldstake.component.html +++ b/src/app/modals/coldstake/coldstake.component.html @@ -1,3 +1,9 @@ +
+
+ Cold Staking +
+
+
diff --git a/src/app/modals/coldstake/coldstake.component.scss b/src/app/modals/coldstake/coldstake.component.scss index bbf357734..648e1661e 100644 --- a/src/app/modals/coldstake/coldstake.component.scss +++ b/src/app/modals/coldstake/coldstake.component.scss @@ -1,3 +1,7 @@ +@import "./src/assets/_config"; // import shared colors etc. + +@import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.) + .input-gap { margin: 12px !important; } diff --git a/src/app/modals/createwallet/createwallet.component.html b/src/app/modals/createwallet/createwallet.component.html index 92d6b3174..d199b95a0 100644 --- a/src/app/modals/createwallet/createwallet.component.html +++ b/src/app/modals/createwallet/createwallet.component.html @@ -1,3 +1,9 @@ +
+
+ Add Account +
+
+
diff --git a/src/app/modals/createwallet/createwallet.component.scss b/src/app/modals/createwallet/createwallet.component.scss index eaf6c43be..20e0d250b 100644 --- a/src/app/modals/createwallet/createwallet.component.scss +++ b/src/app/modals/createwallet/createwallet.component.scss @@ -1,3 +1,9 @@ +@import "./src/assets/_config"; // import shared colors etc. + +@import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.) + + + /deep/ app-password > div { margin-top: 20px; } diff --git a/src/app/modals/encryptwallet/encryptwallet.component.html b/src/app/modals/encryptwallet/encryptwallet.component.html index abca03888..e36e259dc 100644 --- a/src/app/modals/encryptwallet/encryptwallet.component.html +++ b/src/app/modals/encryptwallet/encryptwallet.component.html @@ -1,16 +1,22 @@ -
-
-
-

Please enter a password to encrypt your wallet.

-

Do NOT forget this password or you will be unable to access your coins.

-
+
+
+ Encrypt Wallet +
+
-
-

Please enter your password again to confirm that you've typed the right password.

-

Do NOT forget this password or you will be unable to access your coins.

-
+ +
+
+

Please enter a password to encrypt your wallet.

+

Do NOT forget this password or you will be unable to access your coins.

+
+

Please enter your password again to confirm that you've typed the right password.

+

Do NOT forget this password or you will be unable to access your coins.

+
+
+ Do NOT forget this password or you will be unable to access your coins. - + -
-
- -
+
+
+
+ diff --git a/src/app/modals/encryptwallet/encryptwallet.component.scss b/src/app/modals/encryptwallet/encryptwallet.component.scss index e69de29bb..1be0810f6 100644 --- a/src/app/modals/encryptwallet/encryptwallet.component.scss +++ b/src/app/modals/encryptwallet/encryptwallet.component.scss @@ -0,0 +1,3 @@ +@import "./src/assets/_config"; // import shared colors etc. + +@import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.) \ No newline at end of file diff --git a/src/app/modals/modals.component.html b/src/app/modals/modals.component.html index a8a67cbbd..9be8c0b63 100644 --- a/src/app/modals/modals.component.html +++ b/src/app/modals/modals.component.html @@ -1,13 +1,19 @@ - + +
-
- -
+ + + +
+
diff --git a/src/app/modals/modals.component.scss b/src/app/modals/modals.component.scss index 5b6ee0ed2..0ab76778a 100644 --- a/src/app/modals/modals.component.scss +++ b/src/app/modals/modals.component.scss @@ -1,9 +1,37 @@ +@import "./src/assets/_config"; // import shared colors etc. + .modal.in .modal-dialog { width: 100%; - height:100%; + height: 100%; margin: 0; } +/* ------------------------------- *\ + Modal header +\* ------------------------------- */ +/* +.modal-header { + margin: 0 -24px 60px; + padding: 40px 24px; + background: $bg-black; + .logo { + margin: 0 auto; + width: 170px; + height: auto; + display: block; + } +} +*/ +.modal-footer-info { + position: fixed; + bottom: 0; + left: calc((100% - 900px) / 2); + width: 900px; + height: 20px; + text-align: center; +} + + .modal-content { border-radius: 0; background: none; @@ -22,16 +50,6 @@ padding: 15px; } -.modal-footer-info { - position: fixed; - bottom: 0; - left: 0; - right: 0; - height: 20px; - font-weight: bold; - text-align: center; -} - .statusText { position: absolute; top: 50%; @@ -55,7 +73,7 @@ top: 0; bottom: 0; transition: width .2s; - background-color: #02e8b0; + background-color: $color; color: #212121; height: 100%; overflow: hidden; @@ -63,7 +81,7 @@ .inverted-bar { background-color: #212121 !important; - color: #02e8b0 !important; + color: $color !important; right: 0 !important; } diff --git a/src/app/modals/shared/_modal-layout.scss b/src/app/modals/shared/_modal-layout.scss new file mode 100644 index 000000000..3d0c210d4 --- /dev/null +++ b/src/app/modals/shared/_modal-layout.scss @@ -0,0 +1,27 @@ +.modal-header { + margin: 0 -24px 60px; + padding: 20px 24px; + background: $bg-black; + color: white; + .modal-title { + margin: 0 30px 0 70px; + border-left: 1px solid black; + box-shadow: -1px 0 lighten($bg-black, 10%); + position: relative; + padding: 9px 0 11px 25px; + font-size: 20px; + text-transform: uppercase; + font-weight: 600; + &::before { + content: ""; + position: absolute; + left: -53px; + width: 26px; + height: 26px; + display: block; + background: url("/assets/particl-logo-symbol.svg") no-repeat 50% 50%; + background-size: contain; + top: 10px; + } + } +} \ No newline at end of file diff --git a/src/app/modals/shared/percentage-bar/percentage-bar.component.scss b/src/app/modals/shared/percentage-bar/percentage-bar.component.scss index e69de29bb..fe43ded77 100644 --- a/src/app/modals/shared/percentage-bar/percentage-bar.component.scss +++ b/src/app/modals/shared/percentage-bar/percentage-bar.component.scss @@ -0,0 +1,12 @@ +.percentage-bar-bottom { + .percentage-bar-text { + position: absolute; + top: 2px; + left: 50%; + transform: translateX(-50%); + z-index: 99999; + font-size: 11px; + font-weight: normal; + text-transform: uppercase; + } + } \ No newline at end of file diff --git a/src/app/modals/syncing/syncing.component.html b/src/app/modals/syncing/syncing.component.html index 283206c68..fc170bdcb 100644 --- a/src/app/modals/syncing/syncing.component.html +++ b/src/app/modals/syncing/syncing.component.html @@ -1,3 +1,9 @@ +
+
+ Syncing Wallet +
+
+
diff --git a/src/app/modals/syncing/syncing.component.scss b/src/app/modals/syncing/syncing.component.scss index 70e795bc3..7a1320b76 100644 --- a/src/app/modals/syncing/syncing.component.scss +++ b/src/app/modals/syncing/syncing.component.scss @@ -1,3 +1,7 @@ +@import "./src/assets/_config"; // import shared colors etc. + +@import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.) + .center { text-align: center; } diff --git a/src/app/modals/unlockwallet/unlockwallet.component.html b/src/app/modals/unlockwallet/unlockwallet.component.html index c30c9dc73..1b8d989bc 100644 --- a/src/app/modals/unlockwallet/unlockwallet.component.html +++ b/src/app/modals/unlockwallet/unlockwallet.component.html @@ -1,4 +1,10 @@ -
+
+
+ Unlock Wallet +
+
+ +

Please enter your password to unlock your wallet.

diff --git a/src/app/modals/unlockwallet/unlockwallet.component.scss b/src/app/modals/unlockwallet/unlockwallet.component.scss index e69de29bb..1be0810f6 100644 --- a/src/app/modals/unlockwallet/unlockwallet.component.scss +++ b/src/app/modals/unlockwallet/unlockwallet.component.scss @@ -0,0 +1,3 @@ +@import "./src/assets/_config"; // import shared colors etc. + +@import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.) \ No newline at end of file diff --git a/src/assets/_config.scss b/src/assets/_config.scss index 74d42a83e..b233a6d43 100644 --- a/src/assets/_config.scss +++ b/src/assets/_config.scss @@ -10,4 +10,5 @@ $text: #232728; // default text color $text-muted: #7E8790; // grey (for section titles, descriptions etc.) // bg/element colors +$bg-black: #222828; // sidebar $bg-shadow: #dcdcdc; // lines, box shadows etc. \ No newline at end of file diff --git a/src/assets/particl-logo-symbol.svg b/src/assets/particl-logo-symbol.svg new file mode 100644 index 000000000..60432ea13 --- /dev/null +++ b/src/assets/particl-logo-symbol.svg @@ -0,0 +1,134 @@ + +image/svg+xmlLayer 1Layer 1 \ No newline at end of file diff --git a/src/assets/theme.scss b/src/assets/theme.scss index 3817881af..c05a7c3cd 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -266,30 +266,37 @@ input[type="text"] { font-size: 1em !important; } -/** - * Dialog style - */ -.mat-dialog-container { - max-width: 100% !important; - background: transparent !important; - background-color: rgba(255, 255, 255, 0.95) !important; - position: relative; - .close_button { - position: absolute; - right: 0px; - top: 5px; - background: transparent; - color: #999; - min-width: 50px; - &:hover { - color: #222; +/* ------------------------------- *\ + Dialogs +\* ------------------------------- */ + +.cdk-overlay-container { + .mat-dialog-container { + position: relative; + top: 24px; + left: calc((100% - 900px) / 2); + bottom: 0; + max-width: 900px; + padding-top: 0; + .close_button { + position: absolute; + right: 24px; + top: 24px; + background: transparent; + color: $text-muted; + min-width: 50px; + &:hover { + color: white; + } + } + .md-wallet-content { + max-height: 100% !important; } - } - .md-wallet-content { - max-height: 100% !important; } } + + .create-wallet-action-button { min-width: 145px !important; margin: 12px !important; From 003cc25da5a26449e1aee78ef5de31ed1495d173 Mon Sep 17 00:00:00 2001 From: Martin Allien Date: Sun, 29 Oct 2017 21:47:14 +0100 Subject: [PATCH 05/16] dialogs: Add account, Encrypt wallet --- .../createwallet/createwallet.component.html | 75 +++++++++++-------- .../createwallet/createwallet.component.scss | 44 +++++------ .../encryptwallet.component.html | 64 +++++++++------- .../encryptwallet.component.scss | 3 +- src/app/modals/shared/_modal-layout.scss | 55 +++++++++++++- .../shared/password/password.component.html | 71 ++++++++---------- .../shared/password/password.component.scss | 9 +++ src/assets/theme.scss | 25 ++++--- 8 files changed, 211 insertions(+), 135 deletions(-) diff --git a/src/app/modals/createwallet/createwallet.component.html b/src/app/modals/createwallet/createwallet.component.html index d199b95a0..ba4038813 100644 --- a/src/app/modals/createwallet/createwallet.component.html +++ b/src/app/modals/createwallet/createwallet.component.html @@ -4,42 +4,57 @@
-
+
+ + -
-
- Welcome, please select one of the options below. -
- It is recommended to encrypt your wallet before creating or restoring a wallet, in order to not leave any - possible key fragments lying around. -
-
-
- -
- - - -
-
- +
+
+ +
+
Encrypt wallet first
+

+ It is recommended to encrypt your wallet before creating or restoring a wallet, in order to not leave any possible key fragments lying around. +

+
+ +
+
+
+ +
+
Create or Restore wallet
+

+ Create a new wallet or restore your old wallet using your Recovery Passphrase. +

+
+ + +
+
+ +
+
+ + -
-
+
+ +
Let's create a new wallet
- -
@@ -82,7 +97,7 @@
- +
diff --git a/src/app/modals/createwallet/createwallet.component.scss b/src/app/modals/createwallet/createwallet.component.scss index 20e0d250b..60c5c41bf 100644 --- a/src/app/modals/createwallet/createwallet.component.scss +++ b/src/app/modals/createwallet/createwallet.component.scss @@ -3,40 +3,30 @@ @import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.) +/* ------------------------------- *\ + Step 0: Choose action +\* ------------------------------- */ -/deep/ app-password > div { - margin-top: 20px; -} - -/deep/ input.recovery-word { - max-width: 100%; +.section { + &.encrypt-first { + text-align: center; + } + &.create-restore { + text-align: center; + } + &.go-back { + margin-bottom: 20px; + } } -.alert { - margin-bottom: 0; -} -.align-center { - text-align: center; -} -.create-wallet-action-button { - margin: 3px; -} -.mat-dialog-content { - width: 100% !important; - height: 100% !important; +/deep/ app-password > div { + margin-top: 20px; } -.gap50 { - height: 50px; +/deep/ input.recovery-word { + max-width: 100%; } -@media only screen and (max-width: 480px) { - .wallet-buttons-container button { - float: none; - display: block; - margin: 10px auto 0; - } -} diff --git a/src/app/modals/encryptwallet/encryptwallet.component.html b/src/app/modals/encryptwallet/encryptwallet.component.html index e36e259dc..97fcb284d 100644 --- a/src/app/modals/encryptwallet/encryptwallet.component.html +++ b/src/app/modals/encryptwallet/encryptwallet.component.html @@ -5,33 +5,47 @@
-
-
-

Please enter a password to encrypt your wallet.

-

Do NOT forget this password or you will be unable to access your coins.

-
+
+
-
-

Please enter your password again to confirm that you've typed the right password.

-

Do NOT forget this password or you will be unable to access your coins.

-
-
+
+
Choose a password
+

+ Please enter a password to encrypt your wallet. +

+

+ Do NOT forget this password or you will be unable to access your coins +

+
- - - -
-
- -
+ + +
+
Choose a password
+

+ Please enter your chosen password again to confirm it. +

+

+ Do NOT forget this password or you will be unable to access your coins +

+
+ + + + + +
+ +
+ +
+ diff --git a/src/app/modals/encryptwallet/encryptwallet.component.scss b/src/app/modals/encryptwallet/encryptwallet.component.scss index 1be0810f6..1da606c24 100644 --- a/src/app/modals/encryptwallet/encryptwallet.component.scss +++ b/src/app/modals/encryptwallet/encryptwallet.component.scss @@ -1,3 +1,4 @@ @import "./src/assets/_config"; // import shared colors etc. -@import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.) \ No newline at end of file +@import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.) + diff --git a/src/app/modals/shared/_modal-layout.scss b/src/app/modals/shared/_modal-layout.scss index 3d0c210d4..a640ade1f 100644 --- a/src/app/modals/shared/_modal-layout.scss +++ b/src/app/modals/shared/_modal-layout.scss @@ -1,5 +1,16 @@ +button { + .mat-icon { + margin-right: 5px; + width: auto; + height: auto; + font-size: 16px; + position: relative; + top: -1px; + } +} + .modal-header { - margin: 0 -24px 60px; + margin: 0 -24px 70px; padding: 20px 24px; background: $bg-black; color: white; @@ -7,7 +18,6 @@ margin: 0 30px 0 70px; border-left: 1px solid black; box-shadow: -1px 0 lighten($bg-black, 10%); - position: relative; padding: 9px 0 11px 25px; font-size: 20px; text-transform: uppercase; @@ -15,13 +25,50 @@ &::before { content: ""; position: absolute; - left: -53px; + left: 41px; + top: 30px; width: 26px; height: 26px; display: block; background: url("/assets/particl-logo-symbol.svg") no-repeat 50% 50%; background-size: contain; - top: 10px; } } +} + + +.container { + .content { + max-width: 560px; + margin: 0 auto; + .section { + margin-bottom: 40px; + &:last-child { + margin-bottom: 0; + } + } + .title { + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + } + .actions { + text-align: center; + margin: 20px 0 30px; + } + } +} + +p.warning { + background: rgba($color-alert, 0.1); + padding: 15px 25px; + margin: 20px 0; + border-left: 3px solid $color-alert; + font-weight: 600; + .mat-icon { + color: $color-alert; + width: auto; + height: auto; + margin-right: 10px; + } } \ No newline at end of file diff --git a/src/app/modals/shared/password/password.component.html b/src/app/modals/shared/password/password.component.html index e227cf9cb..5271a4bb3 100644 --- a/src/app/modals/shared/password/password.component.html +++ b/src/app/modals/shared/password/password.component.html @@ -1,39 +1,32 @@ -
-
-
- -
-
-
- - - -
- - - SHOW PASSWORD - - - - STAKE ONLY - - -
-
- -
- -
-
-
-
+
+ + + + + + + + + Show password + + + + Stake only + + + +
+ +
+ + +
\ No newline at end of file diff --git a/src/app/modals/shared/password/password.component.scss b/src/app/modals/shared/password/password.component.scss index 57b358157..d16c0e6a4 100644 --- a/src/app/modals/shared/password/password.component.scss +++ b/src/app/modals/shared/password/password.component.scss @@ -7,4 +7,13 @@ input[type=checkbox] + label { input[name=stakeonly] { margin-left: 5%; +} + + +.show-password { // checkbox next to input + margin-left: 20px; +} + +.actions { // area with button(s) + margin: 10px 0 20px; } \ No newline at end of file diff --git a/src/assets/theme.scss b/src/assets/theme.scss index c05a7c3cd..adabd308b 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -280,14 +280,24 @@ input[type="text"] { padding-top: 0; .close_button { position: absolute; - right: 24px; - top: 24px; + right: 0; + top: 0; + padding: 25px 38px; background: transparent; color: $text-muted; min-width: 50px; - &:hover { + .mat-icon { + background: rgba($color-alert, 0.5); + border-radius: 50%; + font-size: 18px; + line-height: 1.4; color: white; } + &:hover { + .mat-icon { + background: $color-alert; + } + } } .md-wallet-content { max-height: 100% !important; @@ -297,10 +307,6 @@ input[type="text"] { -.create-wallet-action-button { - min-width: 145px !important; - margin: 12px !important; -} .form_block { width: 60%; .mat-form-field { @@ -326,14 +332,15 @@ input[type="text"] { } .error { - color: #ec4b50; + color: $color-alert; } .hr-light { border: none; - border-bottom: 1px solid #ccc; + border-bottom: 1px solid $bg-shadow; margin: 20px 0; } + input[type="text"].md-bg-transparent { background-color: transparent !important; } From 7fafa08121d28a07c76b43ee74675a9f8fc2a0e2 Mon Sep 17 00:00:00 2001 From: Martin Allien Date: Sun, 29 Oct 2017 22:25:17 +0100 Subject: [PATCH 06/16] dialog: Cold staking (step 1) --- .../modals/coldstake/coldstake.component.html | 93 +++++++++++++------ src/app/modals/shared/_modal-layout.scss | 43 ++++++--- .../unlockwallet/unlockwallet.component.html | 31 ++++--- src/styles.scss | 2 +- 4 files changed, 111 insertions(+), 58 deletions(-) diff --git a/src/app/modals/coldstake/coldstake.component.html b/src/app/modals/coldstake/coldstake.component.html index 4c26d6411..147f55880 100644 --- a/src/app/modals/coldstake/coldstake.component.html +++ b/src/app/modals/coldstake/coldstake.component.html @@ -4,38 +4,75 @@
-
+
+ -
-
-

Welcome, read the instructions very carefully!

-

- Hot wallet: - Selecting this option will turn this computer into a staking node. - It will be unable to spend the coins but is allowed to stake them.
-

-

- Cold wallet: - Selecting this option will turn this computer into a cold storage node. - It is able to spend the coins but is not allowed to stake them.
- Note: this will create a special transaction with a dust output of 0.00001 and a transaction fee. +

+
+
Cold Staking setup
+

+ + Please, read these instructions very carefully!

-
+
+ +
+ + +
+

Hot wallet

+

+ Selecting this option will turn this computer into a staking node. +

+
    +
  • Hot wallet can stake coins
    • +
  • Hot wallet cannot spend coins
    • +
+
+ + +
+

Cold wallet

+

+ Selecting this option will turn this computer into a cold storage node. +

+
    +
  • Cold wallet cannot stake coins
    • +
  • Cold wallet can spend coins
    • +
+ + Note: this will create a special transaction with a dust output of 0.00001 and a transaction fee. + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ -
-
-
- - -
-
-
- diff --git a/src/app/modals/shared/_modal-layout.scss b/src/app/modals/shared/_modal-layout.scss index a640ade1f..e4281ac88 100644 --- a/src/app/modals/shared/_modal-layout.scss +++ b/src/app/modals/shared/_modal-layout.scss @@ -38,37 +38,52 @@ button { .container { + display: flex; + position: absolute; + top: 90px; + bottom: 45px; + left: 0; + right: 0; .content { + width: 100%; max-width: 560px; - margin: 0 auto; + margin: auto; .section { margin-bottom: 40px; &:last-child { margin-bottom: 0; } } - .title { + .title { // content's title font-size: 18px; font-weight: 700; text-transform: uppercase; } - .actions { + .subtitle { // "H2" subtitle + text-transform: uppercase; + font-size: 15px; + font-weight: 600; + } + .actions { // container for action buttons text-align: center; margin: 20px 0 30px; } } } -p.warning { - background: rgba($color-alert, 0.1); - padding: 15px 25px; - margin: 20px 0; - border-left: 3px solid $color-alert; - font-weight: 600; - .mat-icon { - color: $color-alert; - width: auto; - height: auto; - margin-right: 10px; +p { + font-size: 13px; + &.warning { + background: rgba($color-alert, 0.1); + padding: 15px 25px; + margin: 20px 0; + border-left: 3px solid $color-alert; + font-weight: 600; + .mat-icon { + color: $color-alert; + width: auto; + height: auto; + margin-right: 10px; + } } } \ No newline at end of file diff --git a/src/app/modals/unlockwallet/unlockwallet.component.html b/src/app/modals/unlockwallet/unlockwallet.component.html index 1b8d989bc..da48616a8 100644 --- a/src/app/modals/unlockwallet/unlockwallet.component.html +++ b/src/app/modals/unlockwallet/unlockwallet.component.html @@ -4,19 +4,20 @@
-
-
-
-

Please enter your password to unlock your wallet.

-
-
-
+
+
+
Unlock your wallet
+

+ Please enter your password to unlock your wallet +

- - -
+ + + +
+
\ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 3690bc151..0e47e640f 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -450,6 +450,6 @@ input.verify-sucess { } a.highlight { - color: #41ecc2; + color: $color; text-decoration: none; } From 69386e1671932e7a5a3e70431e39f43acd3dda7e Mon Sep 17 00:00:00 2001 From: Martin Allien Date: Sun, 29 Oct 2017 23:44:06 +0100 Subject: [PATCH 07/16] =?UTF-8?q?dialog:=20Cold=20staking=20(step=202?= =?UTF-8?q?=E2=80=944)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modals/coldstake/coldstake.component.html | 154 ++++++++---------- .../modals/coldstake/coldstake.component.scss | 17 +- .../createwallet/createwallet.component.html | 4 +- .../encryptwallet.component.html | 4 +- src/app/modals/modals.component.scss | 4 +- src/app/modals/shared/_modal-layout.scss | 15 +- src/app/modals/syncing/syncing.component.html | 4 +- .../unlockwallet/unlockwallet.component.html | 4 +- src/assets/theme.scss | 8 +- 9 files changed, 111 insertions(+), 103 deletions(-) diff --git a/src/app/modals/coldstake/coldstake.component.html b/src/app/modals/coldstake/coldstake.component.html index 147f55880..6d114d2cd 100644 --- a/src/app/modals/coldstake/coldstake.component.html +++ b/src/app/modals/coldstake/coldstake.component.html @@ -1,8 +1,8 @@ -
+
@@ -10,6 +10,7 @@
+
Cold Staking setup

@@ -68,107 +69,94 @@

Cold wallet

-
+ -
- - - -
-
- -
-
-
- +
+
- -
-
-

- Hot wallet: - Copy this and enter this into the cold wallet. -

-
+ + -
+ -
-
-
- - - -
-
- - -
-
+
+
+ -
-
- -
-
-
-
+ + +
+
+ + -
-
-

- Please enter the address generated by the hot wallet. -

-
- -
- -
-
-
- - - +
+
+

Cold wallet setup

+

+ Please enter the address generated by the hot wallet. +

+ + + + + +
+
-
-
- -
- -
-
-
+ +
+
+ + -
-
- {{finalMessage}} -
-
+
+
+
+ {{ finalMessage }} +
+
+
diff --git a/src/app/modals/coldstake/coldstake.component.scss b/src/app/modals/coldstake/coldstake.component.scss index 648e1661e..fe9902c38 100644 --- a/src/app/modals/coldstake/coldstake.component.scss +++ b/src/app/modals/coldstake/coldstake.component.scss @@ -2,10 +2,23 @@ @import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.) -.input-gap { - margin: 12px !important; + +.hot-stake-address { + width: 100%; + font-family: monospace; +} + +.cold-stake-address { + width: 100%; + margin: 15px 0 0; + font-family: monospace; } + + + + + @media only screen and (max-width: 480px) { .wallet-buttons-container button { float: none; diff --git a/src/app/modals/createwallet/createwallet.component.html b/src/app/modals/createwallet/createwallet.component.html index ba4038813..fc601464f 100644 --- a/src/app/modals/createwallet/createwallet.component.html +++ b/src/app/modals/createwallet/createwallet.component.html @@ -1,8 +1,8 @@ -
+
diff --git a/src/app/modals/encryptwallet/encryptwallet.component.html b/src/app/modals/encryptwallet/encryptwallet.component.html index 97fcb284d..f9af7ac10 100644 --- a/src/app/modals/encryptwallet/encryptwallet.component.html +++ b/src/app/modals/encryptwallet/encryptwallet.component.html @@ -1,8 +1,8 @@ -
+
diff --git a/src/app/modals/modals.component.scss b/src/app/modals/modals.component.scss index 0ab76778a..3a77aea9a 100644 --- a/src/app/modals/modals.component.scss +++ b/src/app/modals/modals.component.scss @@ -25,8 +25,8 @@ .modal-footer-info { position: fixed; bottom: 0; - left: calc((100% - 900px) / 2); - width: 900px; + left: calc((100% - 800px) / 2); + width: 800px; height: 20px; text-align: center; } diff --git a/src/app/modals/shared/_modal-layout.scss b/src/app/modals/shared/_modal-layout.scss index e4281ac88..6047f79ac 100644 --- a/src/app/modals/shared/_modal-layout.scss +++ b/src/app/modals/shared/_modal-layout.scss @@ -9,6 +9,7 @@ button { } } +/* .modal-header { margin: 0 -24px 70px; padding: 20px 24px; @@ -35,13 +36,13 @@ button { } } } - +*/ .container { display: flex; position: absolute; - top: 90px; - bottom: 45px; + top: 80px; + bottom: 70px; left: 0; right: 0; .content { @@ -67,6 +68,9 @@ button { .actions { // container for action buttons text-align: center; margin: 20px 0 30px; + &.text-left { + text-align: left; + } } } } @@ -86,4 +90,9 @@ p { margin-right: 10px; } } +} + +small { + color: $text-muted; + font-size: 90%; } \ No newline at end of file diff --git a/src/app/modals/syncing/syncing.component.html b/src/app/modals/syncing/syncing.component.html index fc170bdcb..3faf1c0aa 100644 --- a/src/app/modals/syncing/syncing.component.html +++ b/src/app/modals/syncing/syncing.component.html @@ -1,8 +1,8 @@ -
+
diff --git a/src/app/modals/unlockwallet/unlockwallet.component.html b/src/app/modals/unlockwallet/unlockwallet.component.html index da48616a8..216fa614c 100644 --- a/src/app/modals/unlockwallet/unlockwallet.component.html +++ b/src/app/modals/unlockwallet/unlockwallet.component.html @@ -1,8 +1,8 @@ -
+
diff --git a/src/assets/theme.scss b/src/assets/theme.scss index adabd308b..3ce2e5a95 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -273,11 +273,9 @@ input[type="text"] { .cdk-overlay-container { .mat-dialog-container { position: relative; - top: 24px; - left: calc((100% - 900px) / 2); - bottom: 0; - max-width: 900px; - padding-top: 0; + max-width: 800px; + height: calc(100% - 24px); + margin: 24px auto auto auto; .close_button { position: absolute; right: 0; From 271146859c4106954e3d8430718bba036d66acb9 Mon Sep 17 00:00:00 2001 From: Gerlof van Ek Date: Tue, 31 Oct 2017 01:54:02 +0100 Subject: [PATCH 08/16] Send page cleanup + Bug fixes + Sidebar active fix --- src/app/app.component.html | 15 ++-- src/app/wallet/send/send.component.html | 100 ++++++++++++------------ src/app/wallet/send/send.component.scss | 33 ++++---- src/assets/theme.scss | 10 +-- 4 files changed, 77 insertions(+), 81 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 36470b2ae..ee826d9f6 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -22,37 +22,38 @@ Wallet - - + + + Receive - + Send - + History - + Address Book - + - Add Acount + Add Account diff --git a/src/app/wallet/send/send.component.html b/src/app/wallet/send/send.component.html index 8e5c0f852..543bd540f 100644 --- a/src/app/wallet/send/send.component.html +++ b/src/app/wallet/send/send.component.html @@ -1,8 +1,7 @@
-
-
+
+
@@ -16,10 +15,9 @@
-
+
@@ -28,26 +26,26 @@
-
- + + -
- -
From Account
- Public - Blind - Private -
+
+ +
From Account
+ Public + Blind + Private +
Balance: {{getBalance(send.input)}} PART
- -
From Account
- Public - Blind - Private -
+ +
From Account
+ Public + Blind + Private +
Balance: {{getBalance(send.input)}} PART
@@ -58,13 +56,13 @@
From Account
-
- -
To Account
- Public - Blind - Private -
+
+ +
To Account
+ Public + Blind + Private +
Balance: {{getBalance(send.input)}} PART
@@ -75,23 +73,24 @@
To Account
-
-
Pay to
- +
+
Pay to
+ + - -
- + +
+ - -
- + +
+ - + - +
@@ -102,10 +101,10 @@
Pay to
-
-
Narration
- - +
+
Narration
+ +
@@ -113,14 +112,15 @@
Narration
-
-
Amount
- +
+
Amount
+ - + + PART
@@ -129,10 +129,10 @@
Amount
-
-
Privacy level
+
+
Privacy level
-
+
Low Medium High diff --git a/src/app/wallet/send/send.component.scss b/src/app/wallet/send/send.component.scss index 9249ff319..3b47dc509 100644 --- a/src/app/wallet/send/send.component.scss +++ b/src/app/wallet/send/send.component.scss @@ -1,9 +1,5 @@ @import "./src/assets/_config"; // import shared colors etc. -/* ------------------------------- *\ - Todo: cleanup -\* ------------------------------- */ - /* ------------------------------- *\ Layout \* ------------------------------- */ @@ -23,10 +19,6 @@ input[type="text"] { } } -.mat-select-trigger { - padding-top: 21px !important; -} - .mat-expansion-panel { box-shadow: none; } @@ -68,25 +60,18 @@ md-card.mat-card { } .md-send-card { - padding: 20px; + padding: 10px 30px 10px 30px; min-height: 14vh; height: auto; } -.md-radio-button-center, .md-balance-center { - padding-top: 12px; -} - .md-tab-right { float: right; } .no-bg { background:transparent; -} - -.button-line { - border-bottom: 1px solid $bg-shadow; + margin-bottom: 20px; } .nc-circle-remove, .nc-copy-2, .nc-multiple-19 { @@ -97,6 +82,17 @@ md-card.mat-card { .balance-label { font-weight: bold; + text-transform: uppercase; + font-size: 12px; +} + +.md-list-radio .mat-radio-button { + margin-bottom: 0px; +} + +.privacy-label { + font-weight:bold; + padding-bottom: 10px; } /* ------------------------------- *\ @@ -114,8 +110,9 @@ button { float:right; font-weight:normal; color: #232728; + font-weight:bold; } -.button-line { +.bottom-line { border-bottom: 1px solid $bg-shadow; } button.show-address { diff --git a/src/assets/theme.scss b/src/assets/theme.scss index 3ce2e5a95..5efc57402 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -42,6 +42,7 @@ .mat-list-item-content { height: auto !important; } + } &.sidesubmenu { a { @@ -58,18 +59,15 @@ } } +.active > md-list-item > div > md-icon { + color: $color !important; +} .header-main { border-bottom: 1px solid #ddd; background: #fff; } -/* -.active > md-list-item > div > md-icon { - color: #41ECC2 !important; -} -*/ - .containerX { width: 100%; } From 106e70acc14b09545fb3e1b7c949f1623fb0fc9e Mon Sep 17 00:00:00 2001 From: Gerlof van Ek Date: Tue, 31 Oct 2017 12:38:16 +0100 Subject: [PATCH 09/16] Send page fixes & buttons --- src/app/settings/settings.component.scss | 3 -- src/app/wallet/send/send.component.html | 17 +++++--- src/app/wallet/send/send.component.scss | 52 +++++++++++++++++------- src/assets/theme.scss | 2 +- 4 files changed, 50 insertions(+), 24 deletions(-) diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss index fbb076cc2..2eea754dd 100644 --- a/src/app/settings/settings.component.scss +++ b/src/app/settings/settings.component.scss @@ -32,7 +32,6 @@ button { border: none; padding: 8px 30px; margin: 0 5px 20px 5px; - text-transform: uppercase; font-weight: bold; font-size: 0.8em; border-bottom: 1px solid #F1F1F1; @@ -44,12 +43,10 @@ button:active { .warning { color: white; background-color: #ED4B4D; - border-bottom: 2px solid #B64446; } .validate { color: white; background-color: #03E8B0; - border-bottom: 1px solid #07B98D; } /* Particl inputs */ diff --git a/src/app/wallet/send/send.component.html b/src/app/wallet/send/send.component.html index 543bd540f..dfd8dffd1 100644 --- a/src/app/wallet/send/send.component.html +++ b/src/app/wallet/send/send.component.html @@ -40,7 +40,7 @@
From Account
{{getBalance(send.input)}} PART
- +
From Account
Public Blind @@ -119,7 +119,6 @@
Amount
[ngClass]="{'verify-sucess': checkAmount() === true, 'verify-error': checkAmount() === false }" oninput="validity.valid||(value='');" step="any"> - PART @@ -145,10 +144,18 @@
Privacy level
-
- - + +
+ +
+
\ No newline at end of file diff --git a/src/app/wallet/send/send.component.scss b/src/app/wallet/send/send.component.scss index 3b47dc509..5376b0d5d 100644 --- a/src/app/wallet/send/send.component.scss +++ b/src/app/wallet/send/send.component.scss @@ -29,6 +29,10 @@ input[type="text"] { border-bottom: 0px solid $bg-shadow; } +.mat-card .send { + padding: 0px 0px 20px 0px; +} + .mat-card h5 { text-transform: uppercase; font-weight: bold; @@ -69,11 +73,6 @@ md-card.mat-card { float: right; } -.no-bg { - background:transparent; - margin-bottom: 20px; -} - .nc-circle-remove, .nc-copy-2, .nc-multiple-19 { width: auto; height: auto; @@ -127,19 +126,42 @@ button { } span { color: $text; - text-transform: uppercase; font-size: 13px; } } } -.button-send { - background-color: white; - border: none; - padding: 0; - margin: 15px 20px 0 0; - text-transform: uppercase; - font-weight: bold; - font-size: 0.9; - border-bottom: 1px solid #F1F1F1; +.mat-raised-button { + box-sizing: border-box; + position: relative; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + outline: 0; + border: none; + -webkit-tap-highlight-color: transparent; + display: inline-block; + white-space: nowrap; + text-decoration: none; + vertical-align: baseline; + text-align: center; + margin: 0; + min-width: 88px; + line-height: 36px; + padding: 0 16px; + border-radius: 2px; + font-size: 14px; + font-weight: 500; + text-transform: none; +} + +.mat-icon { + margin-right: 5px; + width: auto; + height: auto; + font-size: 16px; + position: relative; + top: -1px; } \ No newline at end of file diff --git a/src/assets/theme.scss b/src/assets/theme.scss index 5efc57402..732070d15 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -342,7 +342,7 @@ input[type="text"].md-bg-transparent { } .md-send-list { - .mat-select-trigger{ height: 37px; } + .mat-select-trigger{ height: 23px; } } .header-nav { From 2cd1f95f0e673fcb275518e783ad0a486191d300 Mon Sep 17 00:00:00 2001 From: Martin Allien Date: Tue, 31 Oct 2017 13:51:59 +0100 Subject: [PATCH 10/16] dialog: Create/Restore wallet --- .../createwallet/createwallet.component.html | 377 +++++++++--------- .../createwallet/createwallet.component.scss | 16 + .../passphrase/passphrase.component.html | 60 ++- .../passphrase/passphrase.component.scss | 20 +- .../shared/password/password.component.html | 6 +- .../unlockwallet/unlockwallet.component.html | 1 + 6 files changed, 248 insertions(+), 232 deletions(-) diff --git a/src/app/modals/createwallet/createwallet.component.html b/src/app/modals/createwallet/createwallet.component.html index fc601464f..c46d9a9ec 100644 --- a/src/app/modals/createwallet/createwallet.component.html +++ b/src/app/modals/createwallet/createwallet.component.html @@ -50,221 +50,208 @@
+
+ +
Name your wallet
+

+ Choose a name for your wallet (e.g. Personal wallet, Shop income, Savings, …) +

+ +
+

+ + + Wallet Name is required + + + Wallet Name cannot be more than 32 characters long. + +

+ + + + + +
+ + +
-
- Let's create a new wallet -
- -
- - -
-
- -
- -
-
- - - - -
-
- Wallet Name is required -
-
- Wallet Name cannot be more than 32 characters long. -
-
-
-
- - -
-
-
-
-
+
+
+ + -
- -
- - Generate your wallet recovery phrase - - - Write down your wallet recovery phrase
-
- It is very important to write down your recovery phrase and to remember your password. - You will not be able to restore your wallet without them. -
- - - Enter your wallet recovery phrase
-
- Fill in the missing words of the recovery passphrase. -
- - -
-
-
-
-
- -
+
+
-
-
- - - -
-
-
-
- - - - - - - -
-
- {{ errorString }} -
-
- - -
-
-
+
+ +
+
+ + -
-
- - Please enter your 24 word recovery phrase and optional recovery passphrase below. - - - -
-
-
-
- -
+
+
-
-
- - - -
-
-
-
- - - - - -
- {{ errorString }} -
- - - - -
-
-
-
- -
-
+
Wallet Recovery
+ -
-
-
+
+

+ Enter your 24 word Recovery Phrase: +

+ + + +

+ {{ errorString }} +

+
+ +
+
Recovery Password
+

+ If you set up a Recovery Password during wallet creation as well, enter it below: +

+ + + +
+ +
+ +
+ +
+
+ + -
-
-

Congratulations with your new wallet

-
- Your new wallet has been set as the default wallet, you can now generate new addresses on your wallet. -
-
-
+
+
-
-
- +
Congratulations!
+

+ Your new wallet was created successfully and set as the default wallet! +

+
+
-
-
+ +
+
+ + -
- - - - - - - -
+
+
+ + + + +
+
+
diff --git a/src/app/modals/createwallet/createwallet.component.scss b/src/app/modals/createwallet/createwallet.component.scss index 60c5c41bf..9e3c22b05 100644 --- a/src/app/modals/createwallet/createwallet.component.scss +++ b/src/app/modals/createwallet/createwallet.component.scss @@ -3,6 +3,10 @@ @import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.) +.actions { + margin-bottom: 80px; +} + /* ------------------------------- *\ Step 0: Choose action \* ------------------------------- */ @@ -20,6 +24,18 @@ } +/* ------------------------------- *\ + Step 1: Create/Restore +\* ------------------------------- */ + + +/* ------------------------------- *\ + Step 2: Recovery Phrase +\* ------------------------------- */ + + + + /deep/ app-password > div { diff --git a/src/app/modals/createwallet/passphrase/passphrase.component.html b/src/app/modals/createwallet/passphrase/passphrase.component.html index 61ae5bf46..52ab0dd81 100644 --- a/src/app/modals/createwallet/passphrase/passphrase.component.html +++ b/src/app/modals/createwallet/passphrase/passphrase.component.html @@ -1,33 +1,29 @@ -
-
-
- +
+
Your Recovery Phrase
+ +
+
+ + +
-
-
-
- - - -
-
-
- - - - -
-
-
-
-
+
+ +
+ + + + + +
+
\ No newline at end of file diff --git a/src/app/modals/createwallet/passphrase/passphrase.component.scss b/src/app/modals/createwallet/passphrase/passphrase.component.scss index 8b72b62cd..def4423f0 100644 --- a/src/app/modals/createwallet/passphrase/passphrase.component.scss +++ b/src/app/modals/createwallet/passphrase/passphrase.component.scss @@ -1,7 +1,19 @@ -.icon:hover { - color: #03e8b0; +@import "./src/assets/_config"; // import shared colors etc. + +.subtitle { + text-transform: uppercase; + font-size: 15px; + font-weight: 600; + margin-bottom: 10px; +} + +.mat-form-field { + width: 100%; + font-family: "Open Sans"; } -.icon { +.mat-icon { + width: auto; + height: auto; padding: 5px; -} \ No newline at end of file +} diff --git a/src/app/modals/shared/password/password.component.html b/src/app/modals/shared/password/password.component.html index 5271a4bb3..13ec3654b 100644 --- a/src/app/modals/shared/password/password.component.html +++ b/src/app/modals/shared/password/password.component.html @@ -3,14 +3,18 @@ + + placeholder="{{ label }}" /> diff --git a/src/app/modals/unlockwallet/unlockwallet.component.html b/src/app/modals/unlockwallet/unlockwallet.component.html index 216fa614c..ac7131dc6 100644 --- a/src/app/modals/unlockwallet/unlockwallet.component.html +++ b/src/app/modals/unlockwallet/unlockwallet.component.html @@ -12,6 +12,7 @@

Date: Tue, 31 Oct 2017 16:01:14 +0100 Subject: [PATCH 11/16] clean-up --- .../modals/coldstake/coldstake.component.html | 6 ---- .../createwallet/createwallet.component.html | 6 ---- .../encryptwallet.component.html | 7 ----- src/app/modals/modals.component.html | 6 ---- src/app/modals/shared/_modal-layout.scss | 29 ------------------- src/app/modals/syncing/syncing.component.html | 6 ---- .../unlockwallet/unlockwallet.component.html | 6 ---- 7 files changed, 66 deletions(-) diff --git a/src/app/modals/coldstake/coldstake.component.html b/src/app/modals/coldstake/coldstake.component.html index 6d114d2cd..1b080ce77 100644 --- a/src/app/modals/coldstake/coldstake.component.html +++ b/src/app/modals/coldstake/coldstake.component.html @@ -1,9 +1,3 @@ - -
diff --git a/src/app/modals/createwallet/createwallet.component.html b/src/app/modals/createwallet/createwallet.component.html index c46d9a9ec..c96ed79e8 100644 --- a/src/app/modals/createwallet/createwallet.component.html +++ b/src/app/modals/createwallet/createwallet.component.html @@ -1,9 +1,3 @@ - -
diff --git a/src/app/modals/encryptwallet/encryptwallet.component.html b/src/app/modals/encryptwallet/encryptwallet.component.html index f9af7ac10..6ba3c6ffc 100644 --- a/src/app/modals/encryptwallet/encryptwallet.component.html +++ b/src/app/modals/encryptwallet/encryptwallet.component.html @@ -1,10 +1,3 @@ - - -
diff --git a/src/app/modals/modals.component.html b/src/app/modals/modals.component.html index 9be8c0b63..f00ca498f 100644 --- a/src/app/modals/modals.component.html +++ b/src/app/modals/modals.component.html @@ -4,13 +4,7 @@
- - - -
diff --git a/src/app/modals/shared/_modal-layout.scss b/src/app/modals/shared/_modal-layout.scss index 6047f79ac..435501046 100644 --- a/src/app/modals/shared/_modal-layout.scss +++ b/src/app/modals/shared/_modal-layout.scss @@ -9,35 +9,6 @@ button { } } -/* -.modal-header { - margin: 0 -24px 70px; - padding: 20px 24px; - background: $bg-black; - color: white; - .modal-title { - margin: 0 30px 0 70px; - border-left: 1px solid black; - box-shadow: -1px 0 lighten($bg-black, 10%); - padding: 9px 0 11px 25px; - font-size: 20px; - text-transform: uppercase; - font-weight: 600; - &::before { - content: ""; - position: absolute; - left: 41px; - top: 30px; - width: 26px; - height: 26px; - display: block; - background: url("/assets/particl-logo-symbol.svg") no-repeat 50% 50%; - background-size: contain; - } - } -} -*/ - .container { display: flex; position: absolute; diff --git a/src/app/modals/syncing/syncing.component.html b/src/app/modals/syncing/syncing.component.html index 5cc240ce3..03b4ba8e2 100644 --- a/src/app/modals/syncing/syncing.component.html +++ b/src/app/modals/syncing/syncing.component.html @@ -1,9 +1,3 @@ - -
diff --git a/src/app/modals/unlockwallet/unlockwallet.component.html b/src/app/modals/unlockwallet/unlockwallet.component.html index ac7131dc6..01c9bf28a 100644 --- a/src/app/modals/unlockwallet/unlockwallet.component.html +++ b/src/app/modals/unlockwallet/unlockwallet.component.html @@ -1,9 +1,3 @@ - -
Unlock your wallet
From 0d9cb14779c0bc07272bbb22a3582db12cb33baf Mon Sep 17 00:00:00 2001 From: Gerlof van Ek Date: Tue, 31 Oct 2017 17:01:00 +0100 Subject: [PATCH 12/16] lint fix --- src/app/wallet/send/send.component.html | 164 ++++++++++++------------ 1 file changed, 84 insertions(+), 80 deletions(-) diff --git a/src/app/wallet/send/send.component.html b/src/app/wallet/send/send.component.html index dfd8dffd1..1d4b69b55 100644 --- a/src/app/wallet/send/send.component.html +++ b/src/app/wallet/send/send.component.html @@ -56,7 +56,7 @@
From Account
-
+
To Account
Public @@ -71,91 +71,95 @@
To Account
- +
Pay to
- + -
- - - -
- - - - - - - - - -
-
+
+ + + +
+ + + + + + + + +
- - - - - -
-
Narration
- - - -
- - - - - -
-
Amount
- - - - - PART - -
- - - - - -
-
Privacy level
-
-
- Low - Medium - High -
- -
-
- - - - - - -
- - +
+
+ + + + + +
+
Narration
+ + + +
+ + + + + +
+
Amount
+ + + + + PART + +
+ + + + + +
+
Privacy level
+
+
+ Low + Medium + High
- - + +
-
\ No newline at end of file + + + + + + +
+ + +
+ + +
+
\ No newline at end of file From 1588ef68c74f4c60599aae0a678b6be5bea6de31 Mon Sep 17 00:00:00 2001 From: Martin Allien Date: Tue, 31 Oct 2017 22:41:30 +0100 Subject: [PATCH 13/16] dialog: Sync & Intro splash --- src/app/modals/syncing/syncing.component.html | 110 +++++++++--------- src/app/modals/syncing/syncing.component.scss | 35 ++++-- src/assets/index.css | 59 +++++++--- src/index.html | 32 ++--- 4 files changed, 144 insertions(+), 92 deletions(-) diff --git a/src/app/modals/syncing/syncing.component.html b/src/app/modals/syncing/syncing.component.html index 03b4ba8e2..639c0872d 100644 --- a/src/app/modals/syncing/syncing.component.html +++ b/src/app/modals/syncing/syncing.component.html @@ -1,56 +1,62 @@
-
-
- The displayed information may be out of date. Your wallet automatically synchronizes with the Particl network after a connection is established, - but this process has not completed yet. This means that recent transactions will not be visible, and the balance may not be up-to-date until this - process has completed. -
- SPENDING PARTICL MAY NOT BE POSSIBLE DURING THAT PHASE! +
+ + +
+
Wallet is syncing
+

+ Your wallet automatically synchronizes with the Particl network after a connection is established, but this process has not completed yet. This means that recent transactions will not be visible, and the balance may not be up-to-date until this process has completed. +

+

+ Spending Particl may not be possible during this phase +

+

+ + Warning: No peers connected. Please check your internet connection +

+
+ + +
+
+ + {{ syncPercentage ? remainder : 'loading...' }} + +
Blocks to sync
+
+
+ + {{ syncPercentage ? estimatedTimeLeft : 'loading...' }} + +
Estimated time left
-
- Warning : no peers connected. Please check your Internet connection. +
+ + {{ syncPercentage ? lastBlockTime : 'loading...' }} + +
Last Block time
-
-
-
- -
- -
-
-
-

AMOUNT OF BLOCKS LEFT

-
- {{ syncPercentage ? remainder : 'loading...' }} -
-
-

LAST BLOCK TIME

-
- {{ syncPercentage ? lastBlockTime : 'loading...' }} -
-
-

PROGRESS INCREASE PER MINUTE

-
- {{ syncPercentage ? increasePerMinute : 'loading...' }} -
-
-

ESTIMATED TIME LEFT UNTIL SYNCED

-
- {{ syncPercentage ? estimatedTimeLeft : 'loading...' }} -
-
-
-
- -
-
- -
-
- "to hide the signal you must generate noise". -
-
- -Ido Kaiser -
-
+
+ + +
+
+
+ + +
+
+
+ +
+ +
+

To hide the signal you must generate noise.

+
Ido Kaiser
+
+
+ +
+
+
diff --git a/src/app/modals/syncing/syncing.component.scss b/src/app/modals/syncing/syncing.component.scss index 7a1320b76..8bf804749 100644 --- a/src/app/modals/syncing/syncing.component.scss +++ b/src/app/modals/syncing/syncing.component.scss @@ -2,19 +2,30 @@ @import "../shared/_modal-layout"; // shared layout for modals (dialog titles etc.) -.center { - text-align: center; + +.alert { + color: $color-alert; } -.margin-top-100px { - margin-top: 100px; -} -.syncing-blocks h4 { - font-weight: 700; - font-size: 14px; -} - -.alert { - color: #f44336; +.sync-stats { + .item { + text-align: center; + margin-bottom: 45px; + &.big { + .value { + font-size: 30px; + } + } + &.small { + .value { + font-size: 16px; + } + } + .description { + text-transform: uppercase; + color: $text-muted; + margin-top: 5px; + } + } } diff --git a/src/assets/index.css b/src/assets/index.css index f307a2e66..436ef08cc 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -1,23 +1,54 @@ -.logo-index { - height: 200px; - max-width: 35%; - margin: auto; - margin: 60px auto 60px; -} +/* + +// main colors +$color: #02E8B0; // primary green-ish color +$color-success: #4f8a10; +$color-alert: #ec4b50; + +// text colors +$text: #232728; // default text color +$text-muted: #7E8790; // grey (for section titles, descriptions etc.) + +// bg/element colors +$bg-black: #222828; // sidebar +$bg-shadow: #dcdcdc; // lines, box shadows etc. -.center-index { +*/ + +.intro { + background: #222828; + color: white; text-align: center; + font-family: "Open Sans", sans-serif; + display: flex; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; } -#loading { -margin: 0 auto; +.intro > .content { + margin: auto; + width: 100%; + max-width: 600px; } -#quote { - font-size: 1.3em; +.logo { + width: 240px; + height: auto; + margin-bottom: 40px; } -#quote-author { - font-style: italic; - color: #9ca09f; +.quote { + font-size: 17px; } + +.author { + font-size: 13px; + color: #7E8790; +} + +.loading { + margin-top: 30px; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index 012576f26..a44e4a25d 100644 --- a/src/index.html +++ b/src/index.html @@ -11,20 +11,24 @@ -
-
- -
-
- -
-
- "to hide the signal you must generate noise". -
-
- -Ido Kaiser -
-
+ + +
+
+ + + +
+

To hide the signal you must generate noise.

+
— Ido Kaiser
+
+ + + +
+
+ + From 2ddd1241f8ec4cb7cb8a084949138bead2ea7140 Mon Sep 17 00:00:00 2001 From: Martin Allien Date: Tue, 31 Oct 2017 23:28:37 +0100 Subject: [PATCH 14/16] fixed module import --- src/app/modals/syncing/syncing.component.spec.ts | 2 ++ src/assets/index.css | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/modals/syncing/syncing.component.spec.ts b/src/app/modals/syncing/syncing.component.spec.ts index 0498fcd9d..867391894 100644 --- a/src/app/modals/syncing/syncing.component.spec.ts +++ b/src/app/modals/syncing/syncing.component.spec.ts @@ -1,6 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { SyncingComponent } from './syncing.component'; +import { MdIconModule } from '@angular/material'; import { SharedModule } from '../../shared/shared.module'; import { RpcModule } from '../../core/rpc/rpc.module'; @@ -15,6 +16,7 @@ describe('SyncingComponent', () => { TestBed.configureTestingModule({ imports: [ SharedModule, + MdIconModule, RpcModule.forRoot() ], declarations: [ SyncingComponent ] diff --git a/src/assets/index.css b/src/assets/index.css index 436ef08cc..ec295ee96 100644 --- a/src/assets/index.css +++ b/src/assets/index.css @@ -37,7 +37,7 @@ $bg-shadow: #dcdcdc; // lines, box shadows etc. .logo { width: 240px; height: auto; - margin-bottom: 40px; + margin: 20px 0 40px; } .quote { @@ -50,5 +50,6 @@ $bg-shadow: #dcdcdc; // lines, box shadows etc. } .loading { - margin-top: 30px; + width: 100%; + max-width: 100px; } \ No newline at end of file From 1f93edad042ac6107f56727a733c777a11987af7 Mon Sep 17 00:00:00 2001 From: Martin Allien Date: Wed, 1 Nov 2017 00:44:21 +0100 Subject: [PATCH 15/16] daemon/wallet errors, fixed active menu hover effect --- src/app/app.component.html | 2 +- src/app/app.component.scss | 15 +++++++++++---- src/assets/theme.scss | 19 ++++++++++++++++++- 3 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index ee826d9f6..1078a535c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -82,7 +82,7 @@ - + error {{daemonError}} diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 8d5b0aae0..a6743d896 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -68,7 +68,14 @@ width: 144px; } -/deep/ .verify-sucess { - color: #4F8A10; - background-color: #DFF2BF !important; -} + +/deep/ input { + &.verify-sucess { + color: darken($color, 7%) !important; // #57a800 + background-color: rgba($color, 0.07) !important; // #edfad7 + } + &.verify-error { + color: darken($color-alert, 5%); + background: rgba($color-alert, 0.1) !important; + } +} \ No newline at end of file diff --git a/src/assets/theme.scss b/src/assets/theme.scss index f45ba75fc..8d0df0a01 100644 --- a/src/assets/theme.scss +++ b/src/assets/theme.scss @@ -36,7 +36,7 @@ &:hover { background: darken(#222828, 1.5%); .mat-icon { - color: lighten(#4B4A4F, 10%) !important; + color: lighten(#4B4A4F, 10%); } } .mat-list-item-content { @@ -52,6 +52,23 @@ text-transform: uppercase; min-height: 40px; } + &.error { // daemon/wallet error messages + .mat-list-item:hover { + background: none; + .mat-icon { + color: $color-alert; + } + } + .mat-list-item-content { + color: white; + font-size: 11px; + padding: 24px 16px; + } + .mat-icon { + color: $color-alert; + margin: 0 14px 0 0; + } + } } } .mat-expansion-panel-body { // accordion menu From a75920a07f8518c47c4f5188b44fc9e45eb9bcd9 Mon Sep 17 00:00:00 2001 From: Gerlof van Ek Date: Wed, 1 Nov 2017 01:02:40 +0100 Subject: [PATCH 16/16] routerLinkActive fix --- src/app/app.component.html | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 1078a535c..b944b00ec 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -24,27 +24,25 @@ Wallet - - - + Receive - + Send - + History - + Address Book