fix: edited general styling (#105)

### Description
Image for guidance as to how change should display is attached after each list item

Home page
- Logo dimensions can be smaller
- Links could appear in same order as menu items
- Call to action on home page could be useful
![localhost_8100_ (1)](https://user-images.githubusercontent.com/24867345/54199465-e9e4b400-44c0-11e9-8bd0-f34a0ac37a6e.png)

Manage Tasks page
- Task item last-child could do without the border-bottom
- Make border-bottom of each task item symmetrical
![tasks](https://user-images.githubusercontent.com/24867345/54199415-c3267d80-44c0-11e9-837f-7aba08e6badc.jpg)
- "Number of items added when offline" and "Network status" badges could display inline with labels
![badges](https://user-images.githubusercontent.com/24867345/54199510-01bc3800-44c1-11e9-9621-e31c0896e12b.jpg)

Files
- Remove extra padding on this page
- Make border-bottom of uploaded file items symmetrical
![files](https://user-images.githubusercontent.com/24867345/54201353-5661b200-44c5-11e9-8d19-50e97e994b5c.jpg)

Settings page
- Change heading title to make more consistent with other pages
![settings_header](https://user-images.githubusercontent.com/24867345/54199601-3a5c1180-44c1-11e9-912e-5497f25365a1.jpg)

About page
- More information could also appear on a card
![more_information](https://user-images.githubusercontent.com/24867345/54199963-07664d80-44c2-11e9-96dd-9b9fc70a4758.jpg)

Global
- Border on menu items not full width
![menu_item](https://user-images.githubusercontent.com/24867345/54199208-42678180-44c0-11e9-829e-fde56c2c49c8.jpg)

src/app/pages/about/docs.page.html

@@ -115,12 +115,18 @@
           Monitor interactions with the Identity Management service
         </li>
       </ul>
-
     </ion-card-content>
   </ion-card>
-  <p text-center>
-    For further information, visit
+  <ion-card>
+     <ion-card-header>
+      <ion-card-title>More information</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+  <p>
+    For further information, visit:
     <br />
     <a href="https://www.aerogear.org/">www.aerogear.org</a>
   </p>
+  </ion-card-content>
+</ion-card>
 </ion-content>

src/app/pages/files/files.page.html

@@ -9,7 +9,7 @@
   </ion-toolbar>
 </ion-header>
 
-<ion-content padding>
+<ion-content>
   <ion-card>
     <ion-card-header>
       <ion-card-title>Upload Document</ion-card-title>
@@ -29,7 +29,8 @@
       <ion-card-content>
         <div *ngIf="items">
           <ion-list>
-            <ion-item-group *ngFor="let item of items">
+            <ion-item-group *ngFor="let item of items; let last = last"
+            [class.last-item]="last">
               <ion-item href="{{ item.url }}">
                 <ion-label>
                   <h2>{{ item.filename }}</h2>

src/app/pages/home/home.page.html

@@ -8,50 +8,68 @@
     </ion-title>
   </ion-toolbar>
 </ion-header>
-
-<ion-content>
-  <ion-img class="logo" src="assets/aerogear.png"></ion-img>
+<ion-content padding>
+  <div class="welcome-header">
+    <ion-img class="logo" src="assets/aerogear.png"></ion-img>
+  </div>
+  <ion-card>
+    <ion-card-content>
+      This app demonstrates how to use the AeroGear Mobile services, backed by
+      OpenShift to perform a wide range of common mobile tasks such as Data
+      Synchronisation, Identity Management, Device Security, Metrics Capture,
+      Push Notifications and more.
+    </ion-card-content>
+  </ion-card>
   <ion-list lines="none" class="menu-container">
-    <ion-item routerDirection='root' routerLink="about">
-      <ion-icon slot="start" color="medium" name="book"></ion-icon>
-      <ion-label>
-        About
-        <p>Information about this application </p>
-      </ion-label>
-    </ion-item>
-    <ion-item routerDirection='root' routerLink="tasks">
+    <ion-item routerDirection="root" routerLink="tasks">
       <ion-icon slot="start" color="medium" name="build"></ion-icon>
       <ion-label text-wrap>
         Manage Tasks
-        <p>An example task manager to demonstrate how to perform data synchronisation with AeroGear Data Sync powered by
-          Voyager GraphQL</p>
+        <p>
+          An example task manager to demonstrate how to perform data
+          synchronisation with AeroGear Data Sync powered by Voyager GraphQL
+        </p>
       </ion-label>
     </ion-item>
-    <ion-item routerDirection='root' routerLink="profile">
+    <ion-item routerDirection="root" routerLink="profile">
       <ion-icon slot="start" color="medium" name="person"></ion-icon>
       <ion-label text-wrap>User profile
-        <p>An example to demonstrate how to perform user profile management with AeroGear Identity Management Service
-          powered by Keycloak</p>
+        <p>
+          An example to demonstrate how to perform user profile management with
+          AeroGear Identity Management Service powered by Keycloak
+        </p>
       </ion-label>
     </ion-item>
-    <ion-item routerDirection='root' routerLink="files">
+    <ion-item routerDirection="root" routerLink="files">
       <ion-icon slot="start" color="medium" name="document"></ion-icon>
       <ion-label text-wrap>Files
-        <p>An example to demonstrate how to synchronise binary data with AeroGear Data Sync powered by Voyager GraphQL
+        <p>
+          An example to demonstrate how to synchronise binary data with AeroGear
+          Data Sync powered by Voyager GraphQL
         </p>
       </ion-label>
     </ion-item>
-    <ion-item routerDirection='root' routerLink="security">
+    <ion-item routerDirection="root" routerLink="security">
       <ion-icon slot="start" color="medium" name="settings"></ion-icon>
       <ion-label text-wrap>Device Security
-        <p>An example to demonstrate security checks capabilities powered by Device Security SDK</p>
+        <p>
+          An example to demonstrate security checks capabilities powered by
+          Device Security SDK
+        </p>
       </ion-label>
     </ion-item>
-    <ion-item routerDirection='root' routerLink="settings">
+    <ion-item routerDirection="root" routerLink="settings">
       <ion-icon slot="start" color="medium" name="settings"></ion-icon>
       <ion-label text-wrap>Settings
         <p>Application Settings</p>
       </ion-label>
     </ion-item>
+    <ion-item routerDirection="root" routerLink="about">
+      <ion-icon slot="start" color="medium" name="book"></ion-icon>
+      <ion-label>
+        About
+        <p>Information about this application</p>
+      </ion-label>
+    </ion-item>
   </ion-list>
-</ion-content>
+</ion-content>

src/app/pages/home/home.page.scss

@@ -1,16 +1,37 @@
-.welcome-card ion-img {
-  max-height: 35vh;
+.welcome-header {
+  // background-color: var(--ion-color-light);
+  padding: 16px;
+  width: 100%;
+  text-align: center;
+}
+
+.welcome-header img {
+  max-width: 200px;
+  padding: 25px 5px 20px 0;
+}
+
+.welcome-header ion-img {
+  // max-height: 5vh;
   overflow: hidden;
 }
 
+.welcome-header ion-img img {
+  width: 100%;
+}
+
 .logo {
-  margin: 2vw;
+  margin: 1vw;
+  max-width: 40%
 }
 
 .menu-container {
   margin: 0vw;
 }
 
+.item-inner{
+  border-style: unset !important;
+}
+
 .header-text {
   font-size: 2em;
 }

src/app/pages/settings/settings.page.html

@@ -11,7 +11,7 @@
 
 <ion-content padding>
   <ion-list>
-    <ion-header>Push Notification</ion-header>
+    <h4>Push Notification</h4>
     <ion-item>
         <ion-label item-left>Enabled</ion-label>
         <ion-toggle [(ngModel)]="pushEnabled" (ionChange)="togglePushEnabled();" item-right></ion-toggle>

src/app/pages/task/task.page.scss

@@ -0,0 +1,24 @@
+.task-item {
+    padding-bottom: 0;
+}
+
+.item .sc-ion-label-md-h {
+    overflow: visible;
+    white-space: pre-wrap;
+}
+
+ion-note {
+    padding: 10px;
+    line-height: 21px;
+    white-space: pre-wrap;
+}
+
+ion-badge {
+    vertical-align: middle;
+    white-space: pre-line;
+    text-align: left;
+}
+
+ion-footer div {
+    margin: 10px;
+}

src/global.scss

@@ -12,4 +12,15 @@
 
 .banner {
     margin-right: 2vh;
+}
+
+ion-item {
+    --inner-padding-end: 0;
+    --padding-end: 16px;
+}
+
+.last-item {
+    ion-item {
+        --border-color: transparent;
+    }
 }

src/index.html

@@ -10,7 +10,7 @@
   <meta name="format-detection" content="telephone=no">
   <meta name="msapplication-tap-highlight" content="no">
 
-  <link rel="icon" type="image/png" href="assets/icon/favicon.png">
+  <link rel="icon" type="image/x-icon" href="assets/icon/aerogear_icon.svg">
 
   <!-- add to homescreen for ios -->
   <meta name="apple-mobile-web-app-capable" content="yes">