From f2bad6d9944be1214b025e3c02961d9f119e5ddb Mon Sep 17 00:00:00 2001 From: JDonadio Date: Fri, 27 Oct 2017 17:05:46 -0300 Subject: [PATCH 1/3] styles - homogenized app components --- .gitignore | 2 +- .../sass/{overrides.scss => _overrides.scss} | 6 ++- .../sass/{overrides.scss => _overrides.scss} | 4 +- src/app/app.module.ts | 8 ++- .../add/import-wallet/import-wallet.html | 4 +- src/theme/variables.scss | 50 ++++++++++++++++++- 6 files changed, 66 insertions(+), 8 deletions(-) rename app-template/bitpay/sass/{overrides.scss => _overrides.scss} (85%) rename app-template/copay/sass/{overrides.scss => _overrides.scss} (89%) diff --git a/.gitignore b/.gitignore index 000866d94..d139ebd1c 100644 --- a/.gitignore +++ b/.gitignore @@ -28,7 +28,7 @@ src/assets/externalServices.json src/assets/img/app src/index.html src/manifest.json -src/theme/overrides.scss +src/theme/_overrides.scss .sourcemaps/ .idea/ diff --git a/app-template/bitpay/sass/overrides.scss b/app-template/bitpay/sass/_overrides.scss similarity index 85% rename from app-template/bitpay/sass/overrides.scss rename to app-template/bitpay/sass/_overrides.scss index 41240bd9a..345a082be 100644 --- a/app-template/bitpay/sass/overrides.scss +++ b/app-template/bitpay/sass/_overrides.scss @@ -13,9 +13,11 @@ $colors: ( primary: #1e3186, secondary: #111b49, - danger: #ffa500, + accent: #647ce8, + warning: #EBA133, + danger: #bb331a, light: #f4f4f4, - dark: #222 + dark: #222, ); $text-color: #1e3186; diff --git a/app-template/copay/sass/overrides.scss b/app-template/copay/sass/_overrides.scss similarity index 89% rename from app-template/copay/sass/overrides.scss rename to app-template/copay/sass/_overrides.scss index b9451dc08..b3d1f71e5 100644 --- a/app-template/copay/sass/overrides.scss +++ b/app-template/copay/sass/_overrides.scss @@ -13,9 +13,11 @@ $colors: ( primary: #192c3a, secondary: #31465b, + accent: #1abb9b, + warning: #EBA133, danger: #bb331a, light: #f4f4f4, - dark: #222 + dark: #222, ); $text-color: #192c3a; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 052d1b84e..404fc41c1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -178,7 +178,13 @@ export function providersComponents() { @NgModule({ declarations: declarationsComponents(), imports: [ - IonicModule.forRoot(CopayApp, { tabsHideOnSubPages: true }), + IonicModule.forRoot(CopayApp, { + tabsHideOnSubPages: true, + modalEnter: 'modal-slide-in', + modalLeave: 'modal-slide-out', + tabsPlacement: 'bottom', + pageTransition: 'ios-transition' + }), BrowserModule, HttpModule, NgLoggerModule.forRoot(Level.LOG), diff --git a/src/pages/add/import-wallet/import-wallet.html b/src/pages/add/import-wallet/import-wallet.html index 95892246f..eb322c135 100644 --- a/src/pages/add/import-wallet/import-wallet.html +++ b/src/pages/add/import-wallet/import-wallet.html @@ -5,7 +5,7 @@ - + Words @@ -53,7 +53,7 @@ Testnet - + diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 9c764f53a..486c8deff 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -19,8 +19,56 @@ $app-direction: ltr; // To view all the possible Ionic variables, see: // http://ionicframework.com/docs/theming/overriding-ionic-variables/ -// TODO: Custom variables (backward compatibilities). Will be REMOVED +// Override - Homogenized ionic component styles +@import 'overrides'; + +/* filled button */ +$button-ios-background-color: color($colors, accent); +$button-md-background-color: color($colors, accent); +$button-wp-background-color: color($colors, accent); + +/* outline button */ +$button-ios-outline-text-color: color($colors, accent) !important; +$button-md-outline-text-color: color($colors, accent) !important; +$button-wp-outline-text-color: color($colors, accent) !important; + +/* pagination bullets */ +.swiper-pagination-bullet-active { + background: color($colors, accent) !important; +} + +/* checkbox */ +$checkbox-ios-icon-border-color-off: color($colors, accent); +$checkbox-md-icon-border-color-off: color($colors, accent); +$checkbox-wp-icon-border-color-off: color($colors, accent); + +$checkbox-ios-icon-border-color-on: color($colors, accent); +$checkbox-md-icon-border-color-on: color($colors, accent); +$checkbox-wp-icon-border-color-on: color($colors, accent); + +$checkbox-ios-background-color-on: color($colors, accent); +$checkbox-md-icon-background-color-on: color($colors, accent); +$checkbox-wp-icon-background-color-on: color($colors, accent); + +$checkbox-md-icon-border-radius: 50%; +$checkbox-wp-icon-border-radius: 50%; + +$checkbox-md-icon-size: 21px; +$checkbox-wp-icon-size: 21px; + +$checkbox-md-item-start-margin-end: 20px; + +.checkbox-md, .checkbox-wp { + .checkbox-checked .checkbox-inner { + margin-top: 2px; + margin-left: 2px; + } +} + +/* alert buttons */ +$alert-ios-button-text-color: color($colors, accent); +$alert-md-button-text-color: color($colors, accent); // App iOS Variables // -------------------------------------------------- From b0a1a1ab01c60902f77558cd1f41bbbad87e48ba Mon Sep 17 00:00:00 2001 From: JDonadio Date: Sat, 28 Oct 2017 11:49:38 -0300 Subject: [PATCH 2/3] fix svg colors, onboarding and backup img --- .../img/onboarding/push-notifications.svg | 46 ++++++++++++++++++ .../bitpay/img/onboarding/tour-control.svg | 47 +++++++++++++++++++ .../bitpay/img/onboarding/tour-currency.svg | 33 +++++++++++++ .../bitpay/img/onboarding/tour-phone.svg | 39 +++++++++++++++ .../bitpay/img/onboarding}/warning.svg | 0 app-template/copay/img/onboarding/warning.svg | 18 +++++++ .../img/{ => backup}/backup-warning.svg | 0 src/assets/img/{ => backup}/no-screenshot.svg | 0 src/assets/img/logo-negative.svg | 18 ------- src/assets/img/onboarding-success.svg | 18 ------- .../backup-confirm-modal.html | 2 +- .../backup-warning-modal.html | 2 +- .../backup/backup-warning/backup-warning.html | 2 +- .../backup-request/backup-request.html | 2 +- 14 files changed, 187 insertions(+), 40 deletions(-) create mode 100644 app-template/bitpay/img/onboarding/push-notifications.svg create mode 100644 app-template/bitpay/img/onboarding/tour-control.svg create mode 100644 app-template/bitpay/img/onboarding/tour-currency.svg create mode 100644 app-template/bitpay/img/onboarding/tour-phone.svg rename {src/assets/img => app-template/bitpay/img/onboarding}/warning.svg (100%) create mode 100644 app-template/copay/img/onboarding/warning.svg rename src/assets/img/{ => backup}/backup-warning.svg (100%) rename src/assets/img/{ => backup}/no-screenshot.svg (100%) delete mode 100644 src/assets/img/logo-negative.svg delete mode 100644 src/assets/img/onboarding-success.svg diff --git a/app-template/bitpay/img/onboarding/push-notifications.svg b/app-template/bitpay/img/onboarding/push-notifications.svg new file mode 100644 index 000000000..829ee9427 --- /dev/null +++ b/app-template/bitpay/img/onboarding/push-notifications.svg @@ -0,0 +1,46 @@ + + + + push-notifications + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app-template/bitpay/img/onboarding/tour-control.svg b/app-template/bitpay/img/onboarding/tour-control.svg new file mode 100644 index 000000000..8971acaef --- /dev/null +++ b/app-template/bitpay/img/onboarding/tour-control.svg @@ -0,0 +1,47 @@ + + + + tour-control + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app-template/bitpay/img/onboarding/tour-currency.svg b/app-template/bitpay/img/onboarding/tour-currency.svg new file mode 100644 index 000000000..997e1c3a7 --- /dev/null +++ b/app-template/bitpay/img/onboarding/tour-currency.svg @@ -0,0 +1,33 @@ + + + + tour-currency + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app-template/bitpay/img/onboarding/tour-phone.svg b/app-template/bitpay/img/onboarding/tour-phone.svg new file mode 100644 index 000000000..91eb127c9 --- /dev/null +++ b/app-template/bitpay/img/onboarding/tour-phone.svg @@ -0,0 +1,39 @@ + + + + onboarding-tour-phone + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/warning.svg b/app-template/bitpay/img/onboarding/warning.svg similarity index 100% rename from src/assets/img/warning.svg rename to app-template/bitpay/img/onboarding/warning.svg diff --git a/app-template/copay/img/onboarding/warning.svg b/app-template/copay/img/onboarding/warning.svg new file mode 100644 index 000000000..953a82236 --- /dev/null +++ b/app-template/copay/img/onboarding/warning.svg @@ -0,0 +1,18 @@ + + + + warning + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/backup-warning.svg b/src/assets/img/backup/backup-warning.svg similarity index 100% rename from src/assets/img/backup-warning.svg rename to src/assets/img/backup/backup-warning.svg diff --git a/src/assets/img/no-screenshot.svg b/src/assets/img/backup/no-screenshot.svg similarity index 100% rename from src/assets/img/no-screenshot.svg rename to src/assets/img/backup/no-screenshot.svg diff --git a/src/assets/img/logo-negative.svg b/src/assets/img/logo-negative.svg deleted file mode 100644 index ab7e62a89..000000000 --- a/src/assets/img/logo-negative.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - Artboard 1 - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/assets/img/onboarding-success.svg b/src/assets/img/onboarding-success.svg deleted file mode 100644 index 665a3fd01..000000000 --- a/src/assets/img/onboarding-success.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - Group 3 - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html index 9c87b9411..204f2668f 100644 --- a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html +++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html @@ -1,7 +1,7 @@
- +
diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.html b/src/pages/backup/backup-warning-modal/backup-warning-modal.html index ba92da285..cb1a92584 100644 --- a/src/pages/backup/backup-warning-modal/backup-warning-modal.html +++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.html @@ -1,6 +1,6 @@
- +
diff --git a/src/pages/backup/backup-warning/backup-warning.html b/src/pages/backup/backup-warning/backup-warning.html index 12bbfef6d..908ea532a 100644 --- a/src/pages/backup/backup-warning/backup-warning.html +++ b/src/pages/backup/backup-warning/backup-warning.html @@ -10,7 +10,7 @@
Are you being watched?
Now is a perfect time to assess your surroundings. Nearby windows? Hidden cameras? Shoulder-spies?
- +
Anyone with your backup phrase can access or spend your bitcoin.
diff --git a/src/pages/onboarding/backup-request/backup-request.html b/src/pages/onboarding/backup-request/backup-request.html index c9c0c7d3a..69e5edb6e 100644 --- a/src/pages/onboarding/backup-request/backup-request.html +++ b/src/pages/onboarding/backup-request/backup-request.html @@ -1,6 +1,6 @@
- +

No backup, no bitcoin.

Since only you control your money, you’ll need to save your backup phrase in case this app is deleted.

From b281c14e83058504154e8cd28470d664f178cad3 Mon Sep 17 00:00:00 2001 From: JDonadio Date: Sat, 28 Oct 2017 12:11:28 -0300 Subject: [PATCH 3/3] fix confirm modal img - use map colors properly --- app-template/bitpay/sass/_overrides.scss | 1 + app-template/copay/sass/_overrides.scss | 1 + src/assets/img/backup/success.svg | 18 ++++++++++++++++++ .../backup-confirm-modal.html | 6 ++---- .../backup-confirm-modal.scss | 3 +-- src/pages/backup/backup-game/backup-game.html | 12 ++++++------ src/pages/backup/backup-game/backup-game.scss | 8 ++++---- .../backup-warning-modal.html | 2 +- .../backup-warning-modal.scss | 3 +-- 9 files changed, 35 insertions(+), 19 deletions(-) create mode 100644 src/assets/img/backup/success.svg diff --git a/app-template/bitpay/sass/_overrides.scss b/app-template/bitpay/sass/_overrides.scss index 345a082be..302d4f050 100644 --- a/app-template/bitpay/sass/_overrides.scss +++ b/app-template/bitpay/sass/_overrides.scss @@ -16,6 +16,7 @@ $colors: ( accent: #647ce8, warning: #EBA133, danger: #bb331a, + success: #7BC94D, light: #f4f4f4, dark: #222, ); diff --git a/app-template/copay/sass/_overrides.scss b/app-template/copay/sass/_overrides.scss index b3d1f71e5..b004d2f10 100644 --- a/app-template/copay/sass/_overrides.scss +++ b/app-template/copay/sass/_overrides.scss @@ -16,6 +16,7 @@ $colors: ( accent: #1abb9b, warning: #EBA133, danger: #bb331a, + success: #7BC94D, light: #f4f4f4, dark: #222, ); diff --git a/src/assets/img/backup/success.svg b/src/assets/img/backup/success.svg new file mode 100644 index 000000000..665a3fd01 --- /dev/null +++ b/src/assets/img/backup/success.svg @@ -0,0 +1,18 @@ + + + + Group 3 + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html index 204f2668f..cd96f6cfd 100644 --- a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html +++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.html @@ -1,8 +1,6 @@
-
- -
+
@@ -12,7 +10,7 @@
Be sure to store your recovery phrase in a secure place. If this app is deleted, your money cannot be recovered without it.
- +
diff --git a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss index a4936542f..2125796a3 100644 --- a/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss +++ b/src/pages/backup/backup-confirm-modal/backup-confirm-modal.scss @@ -1,5 +1,5 @@ .confirm-modal-header { - background: green; + background: color($colors, success); padding: 1rem; border-radius: 12px 12px 0 0; min-height: 120px; @@ -21,7 +21,6 @@ font-size: 1.6rem; } button { - padding-top: 2rem; background: none; font-size: 1.6rem; } diff --git a/src/pages/backup/backup-game/backup-game.html b/src/pages/backup/backup-game/backup-game.html index 2509cb37f..0be52dbed 100644 --- a/src/pages/backup/backup-game/backup-game.html +++ b/src/pages/backup/backup-game/backup-game.html @@ -26,7 +26,7 @@
We'll confirm on the next screen.
- +
@@ -35,13 +35,13 @@
Let's verify your backup phrase.
- +
Please tap each word in the correct order.
- @@ -51,8 +51,8 @@
Is this correct?
- - + +
@@ -75,7 +75,7 @@
- +
diff --git a/src/pages/backup/backup-game/backup-game.scss b/src/pages/backup/backup-game/backup-game.scss index 02b8db623..26fb16f84 100644 --- a/src/pages/backup/backup-game/backup-game.scss +++ b/src/pages/backup/backup-game/backup-game.scss @@ -9,18 +9,18 @@ .password-required { padding: 2rem; font-size: 14px; - color: #DB5B44; + color: color($colors, danger); } .password { - background-color: #f2f2f2; + background-color: color($colors, light); padding: 2rem; } .phrase { display: -webkit-box; - background: #f2f2f2; + background: color($colors, light); border: 2px dashed #d9d9d9; border-radius: 3px; - color: #445; + color: color($colors, secondary); text-align: center; max-width: 500px; min-height: 12rem; diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.html b/src/pages/backup/backup-warning-modal/backup-warning-modal.html index cb1a92584..122529edb 100644 --- a/src/pages/backup/backup-warning-modal/backup-warning-modal.html +++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.html @@ -10,7 +10,7 @@
If you take a screenshot, your backup may be viewed by other apps. You can make a safe backup with physical paper and a pen.
- +
diff --git a/src/pages/backup/backup-warning-modal/backup-warning-modal.scss b/src/pages/backup/backup-warning-modal/backup-warning-modal.scss index 6f235dbea..655d2f7f5 100644 --- a/src/pages/backup/backup-warning-modal/backup-warning-modal.scss +++ b/src/pages/backup/backup-warning-modal/backup-warning-modal.scss @@ -1,5 +1,5 @@ .warning-modal-header { - background: orange; + background: color($colors, warning); padding: 1rem; border-radius: 12px 12px 0 0; min-height: 120px; @@ -21,7 +21,6 @@ font-size: 1.6rem; } button { - padding-top: 2rem; background: none; font-size: 1.6rem; }