Updated the app name, changed food offers to offers and food types to categories in main page, change category icons

config.xml

@@ -1,6 +1,6 @@
 <?xml version='1.0' encoding='utf-8'?>
 <widget id="com.mallapp.testing" version="2.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-    <name>Mall App</name>
+    <name>Q-Hop</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
     <content src="index.html" />

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "mall-app",
-  "version": "0.0.1",
-  "author": "Ionic Framework",
-  "homepage": "https://ionicframework.com/",
+  "name": "q-hop",
+  "version": "1.0",
+  "author": "Nikhil KJ",
+  "homepage": "https://webtrigon.com/",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/bookmark/bookmark.page.html

@@ -25,7 +25,7 @@
                     <div class="offers-holder">
                         <div class="offer">
                             <ion-icon src="assets/custom/restaurant.svg"></ion-icon>
-                            Food Offers: <strong> {{ mallData.mall.offers_count }}  </strong>
+                            Offers: <strong> {{ mallData.mall.offers_count }}  </strong>
                         </div>
                     </div>
                     <div class="utilities-holder">

src/app/login/login.page.html

@@ -3,8 +3,11 @@
         <figure class="upfold">
             <img src="assets/custom/onboarding.svg">
         </figure>
+        <figure class="logo">
+            <img src="assets/custom/logo.png">
+        </figure>
         <header>
-            Welcome Back!
+            Welcome to <br> <strong> Q-Hop </strong>
         </header>
         <p class="description">
             Please login to your account

src/app/login/login.page.scss

@@ -1,8 +1,5 @@
-.login {
-    background-color: var(--background-blue);
-    height: 100vh;
-    overflow-y: auto;
-    display: block;
+ion-content {
+    --background: var(--background-blue);
 }
 
 .upfold {
@@ -16,6 +13,16 @@
     }
 }
 
+.logo {
+    display: block;
+    margin: 20px auto 0;
+    width: 50px;
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
 header {
     font-size: 20px;
     margin: 20px auto 0;

src/app/mall-details/mall-details.page.html

@@ -83,8 +83,6 @@
                 </p>
                 <div class="offers-holder">
                     <div class="offer">
-                        <span *ngIf="outlet.outlet_type"> <ion-icon name="restaurant"></ion-icon> Food </span>
-                        <span *ngIf="!outlet.outlet_type"> <ion-icon name="basket"></ion-icon> Shopping </span>
                         Offers: <strong> {{ outlet.offers ? outlet.offers.length : 0 }}  </strong>
                     </div>
                 </div>

src/app/malls/malls.page.html

@@ -29,19 +29,16 @@
     </div>
 
 	<div class="results-utilities-holder no-padding">
-        <h5> Food Types </h5>
-        <ion-button color="default" fill="clear"> SEE ALL </ion-button>
+        <h5> Categories </h5>
+        <ion-button disabled color="default" fill="clear"> SEE ALL </ion-button>
     </div>
 
     <div class="food-types-holder">
-        <button (click)="getMallsByFoodType('breakfast')" 
-        [ngClass]="{'active' : selectedFoodType === 'breakfast'}"> <ion-icon src="assets/custom/food-3.svg"></ion-icon> <span> Breakfast </span> </button>
-        <button (click)="getMallsByFoodType('pizza')" 
-        [ngClass]="{'active' : selectedFoodType === 'pizza'}"> <ion-icon src="assets/custom/food-1.svg"></ion-icon> <span> Pizza </span> </button>
-        <button (click)="getMallsByFoodType('donuts')" 
-        [ngClass]="{'active' : selectedFoodType === 'donuts'}"> <ion-icon src="assets/custom/food-2.svg"></ion-icon> <span> Doughnuts </span> </button>
-        <button (click)="getMallsByFoodType('cake')" 
-        [ngClass]="{'active' : selectedFoodType === 'cake'}"> <ion-icon src="assets/custom/food-4.svg"></ion-icon> <span> Cake </span> </button>
+        <ng-container *ngFor="let foodType of foodTypes">
+            <button (click)="getMallsByFoodType(foodType.name)" [ngClass]="{'active' : selectedFoodType === foodType.name}"> 
+                <img [src]="foodType.icon" alt=""> <span> {{ foodType.name }} </span> 
+            </button>
+        </ng-container>
     </div>
 
     <div class="results-utilities-holder">
@@ -63,7 +60,7 @@
                     <div class="offers-holder">
                         <div class="offer">
                             <ion-icon src="assets/custom/restaurant.svg"></ion-icon>
-                            Food Offers: <strong> {{ mallData.mall.offers_count }}  </strong>
+                            Offers: <strong> {{ mallData.mall.offers_count }}  </strong>
                         </div>
                     </div>
                     <div class="utilities-holder">

src/app/malls/malls.page.scss

@@ -97,12 +97,13 @@
             }
         }
 
-        ion-icon {
+        img {
             background-color: white;
             border-radius: 50%;
             box-shadow: 0px 0px 5px var(--brand-grey);
-            padding: 10px;
-            font-size: 35px;
+            padding: 2px;
+            width: 35px;
+            height: 35px;
             border: 2px solid transparent;
             transition: box-shadow 0.3s, border-color 0.3s;
         }
@@ -114,6 +115,7 @@
             margin-top: 10px;
             letter-spacing: 0.5px;
             transition: colo 0.3s;
+            text-transform: capitalize;
         }
     }
 }

src/app/malls/malls.page.ts

@@ -21,6 +21,31 @@ export class MallsPage implements OnInit {
     searchTerm: string = '';
     selectedFoodType: string = '';
     loader: any;
+    foodTypes: Array<{
+        name: string,
+        icon: string
+    }> = [{
+        name: 'books',
+        icon: 'assets/custom/Books.jpg'
+    }, {
+        name: 'cinema',
+        icon: 'assets/custom/Cinema.jpg'
+    }, {
+        name: 'electronics',
+        icon: 'assets/custom/Electronics.jpg'
+    }, {
+        name: 'food',
+        icon: 'assets/custom/Food.jpg'
+    }, {
+        name: 'shops',
+        icon: 'assets/custom/Shops.jpg'
+    }, {
+        name: 'supermarket',
+        icon: 'assets/custom/Supermarket.jpg'
+    }, {
+        name: 'toys',
+        icon: 'assets/custom/Toys.jpg'
+    }]
 
     constructor(
         private mallService: MallService,

src/app/onboarding/onboarding.page.html

@@ -3,10 +3,10 @@
         <!-- Slide 1 -->
         <ion-slide class="page1">
             <figure class="logo">
-                <img src="assets/custom/logo.svg">
+                <img src="assets/custom/logo.png">
             </figure>
             <header>
-                Welcome to <br> the Mall Application
+                Join <br> <strong> Q-Hop </strong>
             </header>
             <p class="description">
                 The best place to find the Malls, Food Centers, Shops and Parking Places!

src/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8"/>
-  <title>Ionic App</title>
+  <title>Q-Hop</title>
 
   <base href="/"/>