styles - homogenized app components

.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/

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;

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;

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),

src/pages/add/import-wallet/import-wallet.html

@@ -5,7 +5,7 @@
 </ion-header>
 
 <ion-content>
-  <ion-segment [(ngModel)]="selectedTab" color="primary" (ionChange)="selectTab(selectedTab)">
+  <ion-segment [(ngModel)]="selectedTab" color="accent" (ionChange)="selectTab(selectedTab)">
     <ion-segment-button value="words" translate>
       Words
     </ion-segment-button>
@@ -53,7 +53,7 @@
 
         <ion-item>
           <ion-label stacked>Testnet</ion-label>
-          <ion-toggle [(ngModel)]="formData.testnet" formControlName="testnet" (ionChange)="setDerivationPath()"></ion-toggle>
+          <ion-toggle [(ngModel)]="formData.testnet" color="accent" formControlName="testnet" (ionChange)="setDerivationPath()"></ion-toggle>
         </ion-item>
       </div>
 

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
 // --------------------------------------------------