UI bug fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "q-hop",
-  "version": "1.0",
+  "version": "0.0.1",
   "author": "Nikhil KJ",
   "homepage": "https://webtrigon.com/",
   "scripts": {

src/app/malls/malls.page.html

@@ -11,7 +11,7 @@
     <div class="overlay" [ngClass]="{ 'active' : show_sort_popup }"></div>
 
     <section class="header-bar">
-        <h2 *ngIf="!showSearchBar"> Find malls near you </h2>
+        <h2 *ngIf="!showSearchBar"> <img src="assets/custom/logo.png"> Find malls near you </h2>
         <input type="text" *ngIf="showSearchBar" placeholder="Search Malls" [(ngModel)]="searchTerm" (input)="searchAllMalls()" autocomplete="off" #searchbar>
         <button (click)="toggleSearchBar()">
             <ion-icon *ngIf="!showSearchBar" src="assets/custom/search.svg"></ion-icon>
@@ -19,14 +19,14 @@
         </button>
     </section>
 
-    <div class="top-bar-holder">
+    <!-- <div class="top-bar-holder">
         <div class="tabs-holder">
             <button (click)="selected_tab = 'you'" class="tab" [ngClass]="{'active' : selected_tab === 'you'}"> For you </button>
             <button (click)="selected_tab = 'recomended'" class="tab" [ngClass]="{'active' : selected_tab === 'recomended'}"> Recommended </button>
             <button (click)="selected_tab = 'trendy'" class="tab" [ngClass]="{'active' : selected_tab === 'trendy'}"> Trendy </button>
             <button (click)="selected_tab = 'recent'" class="tab" [ngClass]="{'active' : selected_tab === 'recent'}"> Recent </button>
         </div>
-    </div>
+    </div> -->
 
 	<div class="results-utilities-holder no-padding">
         <h5> Categories </h5>
@@ -34,6 +34,12 @@
     </div>
 
     <div class="food-types-holder">
+        <ng-container *ngIf="selectedFoodType">
+            <button (click)="selectedFoodType=''; getMallsByLocation()">
+                <img src="assets/custom/001-house.svg">
+                <span> ALL </span>
+            </button>
+        </ng-container>
         <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> 

src/app/malls/malls.page.scss

@@ -1,10 +1,10 @@
-.top-bar-holder {
-    background-image: url('../../assets/custom/background-5.svg');
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: left top;
-    padding-top: 80px;
-}
+// .top-bar-holder {
+//     background-image: url('../../assets/custom/background-5.svg');
+//     background-size: cover;
+//     background-repeat: no-repeat;
+//     background-position: left top;
+//     padding-top: 80px;
+// }
 
 .header-bar {
     color: white;
@@ -21,6 +21,14 @@
     top: 0;
     z-index: 2;
     width: 100%;
+    
+    img {
+        width: 40px;
+        height: 40px;
+        vertical-align: middle;
+        object-fit: contain;
+        margin-right: 10px;
+    }
 
     h2 {
         font-size: 20px;
@@ -78,10 +86,14 @@
 }
 
 .food-types-holder{
-    display: flex;
+    display: inline-block;
     width: 100%;
     justify-content: space-between;
     padding: 10px;
+    white-space: nowrap;
+    overflow-x: auto;
+    overflow-y: none;
+    padding-top: 55px;
 
     button {
         background-color: transparent;