AuthGuards && login help

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { AuthGuardService } from './services/auth-guard.service';
 
 const routes: Routes = [
-  { path: '', redirectTo: 'login', pathMatch: 'full' },
+  { path: '', redirectTo: 'start', pathMatch: 'full' },
   { path: 'start', loadChildren: './pages/start/start.module#StartPageModule' },
   { path: 'login', loadChildren: './pages/compte/login/login.module#LoginPageModule' },
   { path: 'mainslider', loadChildren: './pages/mainslider/mainslider.module#MainsliderPageModule' },
-  { path: 'app', loadChildren: './pages/menu/menu.module#MenuPageModule' },
-  { path: 'offre-details', loadChildren: './pages/offres/offre-details/offre-details.module#OffreDetailsPageModule' },
+  {
+    path: 'app',
+    loadChildren: './pages/menu/menu.module#MenuPageModule',
+    canActivate: [AuthGuardService]
+  },
+  {
+    path: 'offre-details',
+    loadChildren: './pages/offres/offre-details/offre-details.module#OffreDetailsPageModule',
+    canActivate: [AuthGuardService]
+  },
+  { path: 'login-help', loadChildren: './pages/compte/login-help/login-help.module#LoginHelpPageModule' },
+
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -44,14 +44,27 @@ export class AppComponent {
             // Set locator
             // this.setLocator();
 
-            this._STOR.get('wpUser').then((wpUser) => {
-                if (wpUser) {
-                    this.router.navigateByUrl('/app/dashboard', { replaceUrl: true });
-                    // this._AUTH.validateAuthToken(wpUser.token);
+            this._AUTH.authState.subscribe(state => {
+                if (state) {
+                    this._STOR.get('APP_PARAMS').then(appParams => {
+                        if (appParams.PARAM_mainslider) {
+                            this.router.navigate(['app/dashboard']);
+                        } else {
+                            this.router.navigate(['mainslider']);
+                        }
+                    });
                 } else {
-                    this.router.navigateByUrl('/login', { replaceUrl: true });
+                    this.router.navigate(['login']);
                 }
             });
+            // this._STOR.get('wpUser').then((wpUser) => {
+            //     if (wpUser) {
+            //         this.router.navigateByUrl('/app/dashboard', { replaceUrl: true });
+            //         // this._AUTH.validateAuthToken(wpUser.token);
+            //     } else {
+            //         this.router.navigateByUrl('/login', { replaceUrl: true });
+            //     }
+            // });
             // this._STOR.get('PARAM_mainslider').then((prmMainslider) => {
             //     if (prmMainslider) {
             //         this._STOR.get('isLoggedIn').then((isLoggedIn) => {
@@ -73,6 +86,7 @@ export class AppComponent {
         this._STOR.get('APP_PARAMS').then((val) => {
             if (val === null) {
                 this._STOR.set('APP_PARAMS', {
+                    PARAM_mainslider: false,
                     PARAM_geolocate: true,
                     PARAM_geoarea: 1000,
                     PARAM_notiftime: 2880,

src/app/app.module.ts

@@ -21,7 +21,9 @@ import { AppVersion } from '@ionic-native/app-version/ngx';
 import { GooglePlus } from '@ionic-native/google-plus/ngx';
 import { environment } from 'src/environments/environment';
 import { AuthService } from './services/auth.service';
-import { AngularFireAuthModule } from '@angular/fire/auth';
+import { AuthGuardService } from './services/auth-guard.service';
+import { LoginHelpPageModule } from './modals/login-help/login-help.module';
+// import { AngularFireAuthModule } from '@angular/fire/auth';
 
 // import * as firebase from 'firebase';
 
@@ -39,7 +41,7 @@ import { AngularFireAuthModule } from '@angular/fire/auth';
       driverOrder: ['websql', 'sqlite', 'indexeddb']
     }),
     HttpClientModule,
-    AngularFireAuthModule
+    LoginHelpPageModule
   ],
   providers: [
     StatusBar,
@@ -53,7 +55,8 @@ import { AngularFireAuthModule } from '@angular/fire/auth';
     BackgroundGeolocation,
     AppVersion,
     GooglePlus,
-    AuthService
+    AuthService,
+    AuthGuardService
   ],
   bootstrap: [AppComponent]
 })

src/app/app.scss

@@ -44,4 +44,9 @@ div.start {
   ion-spinner {
     transform: scale(3);
   }
+}
+.swiper-pagination {
+  .swiper-pagination-bullet {
+    opacity: 1 !important;
+  }
 }
\ No newline at end of file

src/app/modals/login-help/login-help.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { LoginHelpPage } from './login-help.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoginHelpPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [LoginHelpPage]
+})
+export class LoginHelpPageModule {}

src/app/modals/login-help/login-help.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-title>loginHelp</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/modals/login-help/login-help.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginHelpPage } from './login-help.page';
+
+describe('LoginHelpPage', () => {
+  let component: LoginHelpPage;
+  let fixture: ComponentFixture<LoginHelpPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginHelpPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginHelpPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modals/login-help/login-help.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login-help',
+  templateUrl: './login-help.page.html',
+  styleUrls: ['./login-help.page.scss'],
+})
+export class LoginHelpPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/compte/login/login.module.ts

@@ -24,4 +24,4 @@ const routes: Routes = [
   ],
   declarations: [LoginPage]
 })
-export class LoginPageModule {}
+export class LoginPageModule { }

src/app/pages/compte/login/login.page.html

 <ion-header>
   <ion-toolbar color="primary">
     <ion-title>Connexion</ion-title>
+    <ion-button size="small" fill="outline" color="light" slot="end" (click)="presentHelpModal()">
+      <ion-icon name="help-circle"></ion-icon>
+    </ion-button>
   </ion-toolbar>
 </ion-header>
 <ion-content text-center color="primary" padding>

src/app/pages/compte/login/login.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
-import { AlloService } from '../../../services/allo-service';
-import { AuthService } from '../../../services/auth.service';
+import { ModalController } from '@ionic/angular';
 import { Storage } from '@ionic/storage';
 import { Router } from '@angular/router';
 import { GooglePlus } from '@ionic-native/google-plus/ngx';
+import { AlloService } from '../../../services/allo-service';
+import { AuthService } from '../../../services/auth.service';
+import { LoginHelpPage } from '../../../modals/login-help/login-help.page';
 // import swal from 'sweetalert';
 
 @Component({
@@ -33,12 +35,19 @@ export class LoginPage implements OnInit {
         public formBuilder: FormBuilder,
         public storage: Storage,
         public router: Router,
+        public modalController: ModalController,
         private googlePlus: GooglePlus,
         public _ALLO: AlloService,
         public _AUTH: AuthService
     ) { }
 
     ngOnInit() {
+        this._AUTH.getAuthState().subscribe(state => {
+            if (state) {
+                let name = this._AUTH.infoNicename === 'anonymous' ? 'Anonyme' : this._AUTH.infoFullname;
+                this._ALLO.presentToast('Connexion', 'Bienvenue ' + name, 'top');
+            }
+        });
         this.validationsForm = this.formBuilder.group({
             email: new FormControl('', Validators.compose([
                 Validators.required,
@@ -48,14 +57,30 @@ export class LoginPage implements OnInit {
         });
     }
 
+    async presentHelpModal() {
+      const modal = await this.modalController.create({
+        component: LoginHelpPage
+      });
+      return await modal.present();
+    }
+
     doAnonymousLogIn() {
-        this.storage.set('wpUser', {
+        const wpUser = {
             token: null,
             user_nicename: 'anonymous',
             user_display_name: 'Mode anonyme',
             user_email: 'nomail',
+        };
+        this.storage.set('wpUser', wpUser).then(() => {
+            this._AUTH.setUser(wpUser);
+            // this.storage.get('APP_PARAMS').then(appParams => {
+            //     if (appParams.PARAM_mainslider) {
+            //         this.router.navigate(['app/dashboard']);
+            //     } else {
+            //         this.router.navigate(['mainslider']);
+            //     }
+            // });
         });
-        this.router.navigateByUrl('/mainslider', { replaceUrl: true });
     }
 
     onSubmit(values) {
@@ -65,7 +90,13 @@ export class LoginPage implements OnInit {
                 res => {
                     this._ALLO.dismissLoading();
                     console.log('User exist', res);
-                    this.router.navigateByUrl('/mainslider', { replaceUrl: true });
+                    this.storage.get('APP_PARAMS').then(appParams => {
+                        if (appParams.PARAM_mainslider) {
+                            this.router.navigate(['app/dashboard']);
+                        } else {
+                            this.router.navigate(['mainslider']);
+                        }
+                    });
                 },
                 err => {
                     this._ALLO.dismissLoading();

src/app/pages/mainslider/mainslider.page.html

 <ion-content color="primary">
-	<ion-slides #mainSlider  [options]="slideOpts" pager="true" [hidden]="hideSlider">
+	<ion-slides #mainSlider [options]="slideOpts" pager="true" [hidden]="hideSlider">
 		<ion-slide padding>
 			<ion-item lines="none" color="primary" class="skip">
 				<ion-button fill="outline" color="light" (click)="skipPresentation($event)">
@@ -197,12 +197,8 @@
 						<ion-text color="light">
 							<p class="text-1x">
 								Pour une expérience très riche, il est très souhaitable d'activer le GPS de votre
-								mobile,
-								afin de vous
-								envoyer des notifications sur les promos de nos partenaires, une fois vous vous
-								approchez de
-								leurs
-								locaux !
+								mobile, afin de vous envoyer des notifications sur les promos de nos partenaires à
+								proximité !
 							</p>
 						</ion-text>
 					</ion-col>
@@ -212,14 +208,13 @@
 						<ion-grid no-margin no-padding>
 							<ion-row>
 								<ion-col>
-									<ion-button class="round" color="light" margin-top full tappable
-									routerLink="/app/dashboard"
-                                    routerDirection="root" routerLinkActive="active">
+									<ion-button class="round" size="small" color="light" margin-top full tappable
+										(click)="goToDashboard()" routerDirection="forward" routerLinkActive="active">
 										Continuer sans &nbsp;<ion-icon name="arrow-dropright-circle"></ion-icon>
 									</ion-button>
 								</ion-col>
 								<ion-col>
-									<ion-button ion-button class="round" color="warning" margin-top full tappable
+									<ion-button class="round" size="small" color="warning" margin-top full tappable
 										(click)="getGps()">
 										Activer le GPS &nbsp;<ion-icon name="locate"></ion-icon>
 									</ion-button>

src/app/pages/mainslider/mainslider.page.scss

@@ -20,5 +20,5 @@ ion-slides {
   }
 
   --bullet-background: #ffffff !important;
-  --bullet-background-active: var(--ion-color-secondary, #ffffff) !important;
+  --bullet-background-active: var(--ion-color-dark, #000000) !important;
 }
\ No newline at end of file

src/app/pages/mainslider/mainslider.page.ts

@@ -81,11 +81,13 @@ export class MainsliderPage implements OnInit {
 
     getGps() {
         if (this.platform.is('cordova')) {
-            console.log('cord');
             this._PERM.checkGps();
             this._LOCATE.initLocator();
         }
-        this._STOR.set('PARAM_geolocate', true);
+        this._STOR.get('APP_PARAMS').then(appParams => {
+            appParams.PARAM_mainslider = true;
+            this._STOR.set('APP_PARAMS', appParams);
+        });
         this.goToDashboard();
     }
 
@@ -95,7 +97,11 @@ export class MainsliderPage implements OnInit {
     }
 
     goToDashboard() {
-        this.router.navigateByUrl('/app/dashboard');
+        this._STOR.get('APP_PARAMS').then(appParams => {
+            appParams.PARAM_mainslider = true;
+            this._STOR.set('APP_PARAMS', appParams);
+        });
+        this.router.navigate(['app/dashboard']);
     }
 
     ionViewDidEnter() {

src/app/pages/menu/menu.page.html

@@ -31,9 +31,9 @@
                             <ion-icon name="star"></ion-icon>
                             <ion-label>Testeur</ion-label>
                         </ion-chip>
-                        <ion-chip color="light">
+                        <!-- <ion-chip color="light">
                             <ion-icon name="trophy" no-margin></ion-icon>
-                        </ion-chip>
+                        </ion-chip> -->
                     </ion-col>
                 </ion-row>
             </ion-grid>

src/app/services/auth-guard.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuardService } from './auth-guard.service';
+
+describe('AuthGuardService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: AuthGuardService = TestBed.get(AuthGuardService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/auth-guard.service.ts

+import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuardService implements CanActivate {
+
+  constructor(
+    public authService: AuthService
+  ) { }
+
+  canActivate(): boolean {
+    return this.authService.isAuthenticated();
+  }
+}

src/app/services/auth.service.ts

@@ -4,6 +4,7 @@ import { Storage } from '@ionic/storage';
 import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 import { HTTP } from '@ionic-native/http/ngx';
 import { Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
 
 import { AlloService } from './allo-service';
 
@@ -20,6 +21,9 @@ export class AuthService {
   public infoFullname;
   public infoEmail;
 
+  authState = new BehaviorSubject(false);
+  authProfile = new BehaviorSubject(false);
+
   constructor(
     private platform: Platform,
     public storage: Storage,
@@ -28,11 +32,40 @@ export class AuthService {
     private router: Router,
     private _ALLO: AlloService
   ) {
-    this.storage.get('wpUser').then(wpUser => {
+    this.platform.ready().then(() => {
+      this.storage.get('wpUser').then(wpUser => {
+        if (wpUser) {
+          this.infoNicename = wpUser.user_nicename;
+          this.infoFullname = wpUser.user_display_name;
+          this.infoEmail = wpUser.user_email;
+        }
+      });
+      this.isLoggedIn();
+      this.isAnonymous();
+    });
+  }
+
+  isAuthenticated() {
+    return this.authState.value;
+  }
+
+  getAuthState() {
+    return this.authState;
+  }
+
+  isLoggedIn() {
+    this.storage.get('wpUser').then((wpUser) => {
       if (wpUser) {
-        this.infoNicename = wpUser.user_nicename;
-        this.infoFullname = wpUser.user_display_name;
-        this.infoEmail = wpUser.user_email;
+        console.log('wpuser found')
+        this.authState.next(true);
+      }
+    });
+  }
+
+  isAnonymous() {
+    this.storage.get('wpUser').then((wpUser) => {
+      if (wpUser && wpUser.hasOwnProperty('user_nicename') && wpUser.user_nicename === 'anonymous') {
+        this.authProfile.next(true);
       }
     });
   }
@@ -46,11 +79,13 @@ export class AuthService {
     this.infoNicename = user.user_nicename;
     this.infoFullname = user.user_display_name;
     this.infoEmail = user.user_email;
+    this.authState.next(true);
 
     return this.storage.set('wpUser', user);
   }
 
   logOut() {
+    this.authState.next(false);
     return this.storage.remove('wpUser');
   }
 
@@ -64,7 +99,9 @@ export class AuthService {
       if (this.platform.is('cordova')) {
         this.httpAdv.post(Config.WORDPRESS_URL + 'wp-json/jwt-auth/v1/token', authData, {}).then(
           res => {
-            this.setUser(res);
+            console.log(res);
+            this.setUser(JSON.parse(res.data));
+            this.authState.next(true);
             resolve(res);
           },
           err => reject(err)
@@ -73,6 +110,7 @@ export class AuthService {
         this.http.post(Config.WORDPRESS_URL + 'wp-json/jwt-auth/v1/token', authData).subscribe(
           res => {
             this.setUser(res);
+            this.authState.next(true);
             resolve(res);
           },
           err => reject(err)
@@ -129,38 +167,38 @@ export class AuthService {
 
   // Firebase
   firebaseRegister(value) {
-    return new Promise<any>((resolve, reject) => {
-      firebase.auth().createUserWithEmailAndPassword(value.email, value.password)
-        .then(
-          res => resolve(res),
-          err => reject(err));
-    })
+    // return new Promise<any>((resolve, reject) => {
+    //   firebase.auth().createUserWithEmailAndPassword(value.email, value.password)
+    //     .then(
+    //       res => resolve(res),
+    //       err => reject(err));
+    // })
   }
 
   firebaseLogin(value) {
-    return new Promise<any>((resolve, reject) => {
-      firebase.auth().signInWithEmailAndPassword(value.email, value.password)
-        .then(
-          res => resolve(res),
-          err => reject(err));
-    });
+    // return new Promise<any>((resolve, reject) => {
+    //   firebase.auth().signInWithEmailAndPassword(value.email, value.password)
+    //     .then(
+    //       res => resolve(res),
+    //       err => reject(err));
+    // });
   }
 
   firebaseLogout() {
-    return new Promise((resolve, reject) => {
-      if (firebase.auth().currentUser) {
-        firebase.auth().signOut()
-          .then(() => {
-            console.log("LOG Out");
-            resolve();
-          }).catch((error) => {
-            reject();
-          });
-      }
-    })
+    // return new Promise((resolve, reject) => {
+    //   if (firebase.auth().currentUser) {
+    //     firebase.auth().signOut()
+    //       .then(() => {
+    //         console.log("LOG Out");
+    //         resolve();
+    //       }).catch((error) => {
+    //         reject();
+    //       });
+    //   }
+    // })
   }
 
   firebaseUserDetails() {
-    return firebase.auth().currentUser;
+    // return firebase.auth().currentUser;
   }
 }

src/theme/variables.scss

@@ -2,6 +2,7 @@
 // http://ionicframework.com/docs/theming/
 
 /** Ionic CSS Variables **/
+@import url('https://fonts.googleapis.com/css?family=Abel');
 @font-face {
   font-family: "Open Sans";
   src: url("../assets/fonts/opensans/regular/OpenSans-Regular-webfont.eot");
@@ -25,27 +26,27 @@
 :root {
   /** primary **/
   --ion-color-primary: #f93129;
-  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-rgb: 249, 49, 41;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #f7b32b;
-  --ion-color-primary-tint: #fcf6b1;
+  --ion-color-primary-shade: #db2b24;
+  --ion-color-primary-tint: #fa463e;
 
   /** secondary **/
   --ion-color-secondary: #f7b32b;
-  --ion-color-secondary-rgb: 12, 209, 232;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #f7b32b;
-  --ion-color-secondary-tint: #fcf6b1;
+  --ion-color-secondary-rgb: 247, 179, 43;
+  --ion-color-secondary-contrast: #000000;
+  --ion-color-secondary-contrast-rgb: 0, 0, 0;
+  --ion-color-secondary-shade: #d99e26;
+  --ion-color-secondary-tint: #f8bb40;
 
   /** tertiary **/
   --ion-color-tertiary: #2d1e2f;
-  --ion-color-tertiary-rgb: 112, 68, 255;
+  --ion-color-tertiary-rgb: 45, 30, 47;
   --ion-color-tertiary-contrast: #ffffff;
   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #2d1e2f;
-  --ion-color-tertiary-tint: #7e57ff;
+  --ion-color-tertiary-shade: #281a29;
+  --ion-color-tertiary-tint: #423544;
 
   /** success **/
   --ion-color-success: #10dc60;
@@ -95,9 +96,124 @@
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
 
-  /** **/
+  /** Gradient grey **/
+  --ion-color-gradgrey: linear-gradient(to bottom, #ffffff, #fbfbfb, #f6f6f6, #f2f2f2, #eeeeee);
+  --ion-color-gradgrey-rgb: 255, 255, 255;
+  --ion-color-gradgrey-contrast: #000000;
+  --ion-color-gradgrey-contrast-rgb: 0, 0, 0;
+  --ion-color-gradgrey-shade: #e0e0e0;
+  --ion-color-gradgrey-tint: #ffffff;
+
+  /** FB **/
   --ion-color-fb: #3c5a99;
+  --ion-color-fb-rgb: 60, 90, 153;
+  --ion-color-fb-contrast: #ffffff;
+  --ion-color-fb-contrast-rgb: 255, 255, 255;
+  --ion-color-fb-shade: #354f87;
+  --ion-color-fb-tint: #506ba3;
+
+  /** G **/
   --ion-color-g: #cc3333;
+  --ion-color-g-rgb: 204, 51, 51;
+  --ion-color-g-contrast: #ffffff;
+  --ion-color-g-contrast-rgb: 255, 255, 255;
+  --ion-color-g-shade: #b42d2d;
+  --ion-color-g-tint: #d14747;
+
+  /** Blue **/
+  --ion-color-blue: #3880ff;
+  --ion-color-blue-rgb: 56,128,255;
+  --ion-color-blue-contrast: #ffffff;
+  --ion-color-blue-contrast-rgb: 255,255,255;
+  --ion-color-blue-shade: #3171e0;
+  --ion-color-blue-tint: #4c8dff;
+
+  /** Rose **/
+  --ion-color-rose: #ffceff;
+  --ion-color-rose-rgb: 255,206,255;
+  --ion-color-rose-contrast: #000000;
+  --ion-color-rose-contrast-rgb: 0,0,0;
+  --ion-color-rose-shade: #e0b5e0;
+  --ion-color-rose-tint: #ffd3ff;
+
+  /** Purple **/
+  --ion-color-purple: #c98ce3;
+  --ion-color-purple-rgb: 201,140,227;
+  --ion-color-purple-contrast: #ffffff;
+  --ion-color-purple-contrast-rgb: 0,0,0;
+  --ion-color-purple-shade: #b17bc8;
+  --ion-color-purple-tint: #ce98e6;
+
+  /** Orange **/
+  --ion-color-orange: #FFA500;
+  --ion-color-orange-rgb: 255,165,0;
+  --ion-color-orange-contrast: #ffffff;
+  --ion-color-orange-contrast-rgb: 0,0,0;
+  --ion-color-orange-shade: #e09100;
+  --ion-color-orange-tint: #ffae1a;
+
+  --ion-font-family: "Open Sans";
+}
+
+.ion-color-gradgrey {
+  --ion-color-base: var(--ion-color-gradgrey);
+  --ion-color-base-rgb: var(--ion-color-gradgrey-rgb);
+  --ion-color-contrast: var(--ion-color-gradgrey-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-gradgrey-contrast-rgb);
+  --ion-color-shade: var(--ion-color-gradgrey-shade);
+  --ion-color-tint: var(--ion-color-gradgrey-tint);
+}
+
+.ion-color-fb {
+  --ion-color-base: var(--ion-color-fb);
+  --ion-color-base-rgb: var(--ion-color-fb-rgb);
+  --ion-color-contrast: var(--ion-color-fb-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-fb-contrast-rgb);
+  --ion-color-shade: var(--ion-color-fb-shade);
+  --ion-color-tint: var(--ion-color-fb-tint);
+}
+
+.ion-color-g {
+  --ion-color-base: var(--ion-color-g);
+  --ion-color-base-rgb: var(--ion-color-g-rgb);
+  --ion-color-contrast: var(--ion-color-g-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-g-contrast-rgb);
+  --ion-color-shade: var(--ion-color-g-shade);
+  --ion-color-tint: var(--ion-color-g-tint);
+}
+
+.ion-color-blue {
+  --ion-color-base: var(--ion-color-blue);
+  --ion-color-base-rgb: var(--ion-color-blue-rgb);
+  --ion-color-contrast: var(--ion-color-blue-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-blue-contrast-rgb);
+  --ion-color-shade: var(--ion-color-blue-shade);
+  --ion-color-tint: var(--ion-color-blue-tint);
+}
+
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+.ion-color-purple {
+  --ion-color-base: var(--ion-color-purple);
+  --ion-color-base-rgb: var(--ion-color-purple-rgb);
+  --ion-color-contrast: var(--ion-color-purple-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-purple-contrast-rgb);
+  --ion-color-shade: var(--ion-color-purple-shade);
+  --ion-color-tint: var(--ion-color-purple-tint);
+}
 
-  --ion-font-family: 'Open Sans';
+.ion-color-orange {
+  --ion-color-base: var(--ion-color-orange);
+  --ion-color-base-rgb: var(--ion-color-orange-rgb);
+  --ion-color-contrast: var(--ion-color-orange-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-orange-contrast-rgb);
+  --ion-color-shade: var(--ion-color-orange-shade);
+  --ion-color-tint: var(--ion-color-orange-tint);
 }