Merge branch '60-create-common-theming-styles-and-colors' into 'master'

Resolve "Create common theming styles and colors"

Closes #60

See merge request 92khra1mst/hft_awado_app!42

src/app/app.component.html

@@ -2,20 +2,19 @@
   <ion-split-pane contentId="main-content">
     <ion-menu contentId="main-content" type="overlay" *ngIf="restService.isUserLoggedIn && !restService.isLoginPage">
       <ion-header>
-        <ion-toolbar>
-          <ion-title>Menu</ion-title>
-         
+        <ion-toolbar color="awPrimary">
+          <ion-title>AWADO</ion-title>
           <div class="ion-text">
-           Welcome , {{userService.userDetails.username}}
+            {{"Welcome, " + (userService.userDetails.username || "Guest")}}
           </div>
         </ion-toolbar>
       </ion-header>
       <ion-content>
         <ion-list>
           <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
-            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
-              <ion-icon slot="start" [name]="p.icon"></ion-icon>
-              <ion-label>
+            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" routerLinkActive="active-link">
+              <ion-icon color="awPrimary" slot="start" [name]="p.icon"></ion-icon>
+              <ion-label color="awPrimary">
                 {{p.title}}
               </ion-label>
             </ion-item>

src/app/app.component.scss

 .ion-text{
-    font-size: small;
-    color:black;
-    font-weight: bold;
-    margin-left: 20px;
-    margin-top: 3px;
-  }
- 
\ No newline at end of file
+  font-weight: 400;
+  margin-left: 20px;
+  margin-top: 8px;
+}
+
+// ion-label, ion-icon{
+//   color: #364f6b!important;
+// }
+
+ion-label{
+  font-weight: 500;
+}
+
+ion-toolbar{
+  padding-top: 10px!important;
+  padding-bottom: 10px!important;
+  color: #f5f5f5;
+}
\ No newline at end of file

src/app/feedback/feedback.page.html

 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar color="awPrimary">
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>

src/app/help-line/help-line.page.html

  <ion-header>
-    <ion-toolbar>
+    <ion-toolbar color="awPrimary">
       <ion-buttons slot="start">
         <ion-menu-button></ion-menu-button>
       </ion-buttons>

src/app/hirebike/hirebike.page.html

 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar color="awPrimary">
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>

src/app/home/home.page.html

 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar color="awPrimary">
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
     <ion-title slot="start">
       Home
     </ion-title>
-    <ion-item class="checkbox-wrapper">
+    <ion-item color="awPrimary" slot="end">
       <ion-label class="text" (click)="enable3DMaps()">3D</ion-label>
     </ion-item>
   </ion-toolbar>

src/app/myreservation/myreservation.page.html

 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar color="awPrimary">
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>

src/app/ridehistory/ridehistory.page.html

 <ion-header>
-    <ion-toolbar>
+    <ion-toolbar color="awPrimary">
       <ion-buttons slot="start">
         <ion-menu-button></ion-menu-button>
       </ion-buttons>

src/global.scss

@@ -10,6 +10,7 @@
  */
 
 /* Core CSS required for Ionic components to work properly */
+@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700|Roboto:300,400,500,700&display=swap');
 @import "~@ionic/angular/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
@@ -24,3 +25,7 @@
 @import "~@ionic/angular/css/text-alignment.css";
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
+
+:root {
+    --ion-font-family: 'Montserrat', cursive;
+}

src/theme/variables.scss

@@ -52,7 +52,8 @@
   --ion-color-danger-tint: #f25454;
 
   /** dark **/
-  --ion-color-dark: #222428;
+  //--ion-color-dark: #222428;
+  --ion-color-dark: #364f6b;
   --ion-color-dark-rgb: 34, 34, 34;
   --ion-color-dark-contrast: #ffffff;
   --ion-color-dark-contrast-rgb: 255, 255, 255;
@@ -74,4 +75,24 @@
   --ion-color-light-contrast-rgb: 0, 0, 0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
+  
+}
+
+/** Awado Specific colors **/
+:root {
+  --ion-color-awPrimary: #364f6b;
+  --ion-color-awPrimary-rgb: 54,79,107;
+  --ion-color-awPrimary-contrast: #ffffff;
+  --ion-color-awPrimary-contrast-rgb: 255,255,255;
+  --ion-color-awPrimary-shade: #30465e;
+  --ion-color-awPrimary-tint: #4a617a;
+}
+
+.ion-color-awPrimary {
+  --ion-color-base: var(--ion-color-awPrimary);
+  --ion-color-base-rgb: var(--ion-color-awPrimary-rgb);
+  --ion-color-contrast: var(--ion-color-awPrimary-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-awPrimary-contrast-rgb);
+  --ion-color-shade: var(--ion-color-awPrimary-shade);
+  --ion-color-tint: var(--ion-color-awPrimary-tint);
 }