Partial commit

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

@@ -20,23 +20,21 @@
     </div>
 
     <div class="upfold-holder">
-        <img src="{{ mall_details.image_url }}">
+		<img [src]="mall_details.image_url">
         <div class="icons-holder">
             <div>
                 <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
             </div>
-            <div>
+            <div class="action-buttons-holder">
                 <button [ngClass]="{'active' : mall_details.is_bookmarked }" (click)="toggleBookmark(mall_details)">
                     <ion-icon name="bookmark"></ion-icon>
                 </button>
                 <button> <ion-icon name="share"></ion-icon> </button>
+				<a target="_blank" href="https://maps.google.com/?q={{ mall_details.location.latitude }},{{ mall_details.location.longitude }}">
+	                <ion-icon name="navigate"></ion-icon>
+	            </a>
             </div>
         </div>
-        <div class="icons-holder navigate-button">
-            <a target="_blank" href="https://maps.google.com/?q={{ mall_details.location.latitude }},{{ mall_details.location.longitude }}">
-                <ion-icon name="navigate"></ion-icon>
-            </a>
-        </div>
     </div>
     <div class="card-holder">
         <div class="card">

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

@@ -81,10 +81,10 @@
 
 .upfold-holder {
     position: relative;
-    height: 45vh;
+    height: 30vh;
     width: 100%;
-    padding-top: 30px;
-    margin-bottom: -25px;
+    padding: 30px 0;
+	margin-bottom: calc(-30vh + 90px);
 
     .icons-holder {
         position: relative;
@@ -93,6 +93,17 @@
         margin: 0 auto;
         justify-content: space-between;
 
+		.action-buttons-holder {
+			display: flex;
+			align-items: center;
+			width: 50%;
+			justify-content: flex-end;
+
+			button {
+				margin-right: 15px;
+			}
+		}
+
         &.navigate-button {
             position: absolute;
             left: 86%;
@@ -115,7 +126,6 @@
             height: 30px;
             width: 30px;
             display: block;
-            margin-bottom: 10px;
             box-shadow: 0px 0px 5px var(--brand-grey);
 
             &.active {
@@ -148,12 +158,14 @@
         overflow: hidden;
         padding: 20px;
         background-color: white;
+		opacity: 0.95;
 
         h3 {
             color: var(--brand-dark-grey);
             font-size: 20px;
             letter-spacing: 0.5px;
             font-weight: 600;
+			margin: 0;
         }
 
         .stats-holder {
@@ -212,9 +224,8 @@
         color: var(--brand-blue);
         font-size: 12px;
         letter-spacing: 0.5px;
-        height: 40px;
+        height: 35px;
         width: 50%;
-        font-weight: 500;
         transition: color 0.3s;
 
         &.active {
@@ -250,6 +261,7 @@
             border-top: 1px solid #efefef;
 
             .offer {
+				padding: 7px 0;
                 ion-icon {
                     color: var(--brand-grey);
                     transform: scale(1.1);
@@ -259,8 +271,13 @@
 
         .description {
             margin: 5px 0;
+			padding-right: 20px;
+			position: relative;
+
             .share-button {
-                float: right;
+				position: absolute;
+                right: 0px;
+				top: 5px;
                 font-size: 14px;
                 background-color: transparent;
                 border: 0px;

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

@@ -45,6 +45,7 @@ export class MallDetailsPage implements OnInit {
 
     toggleBookmark(mall_details: IMall) {
         mall_details.is_bookmarked = !mall_details.is_bookmarked;
+		this.mallService.updateMall(mall_details);
     }
 
     onScroll(event: any) {

src/app/malls/malls.page.html

@@ -15,6 +15,18 @@
         </div>
     </div>
 
+	<div class="results-utilities-holder no-padding">
+        <h5> Food Types </h5>
+        <ion-button color="default" fill="clear"> SEE ALL </ion-button>
+    </div>
+
+    <div class="food-types-holder">
+        <button> <ion-icon src="assets/custom/food-3.svg"></ion-icon> <span> Breakfast </span> </button>
+        <button> <ion-icon src="assets/custom/food-1.svg"></ion-icon> <span> Pizza </span> </button>
+        <button> <ion-icon src="assets/custom/food-2.svg"></ion-icon> <span> Doughnuts </span> </button>
+        <button> <ion-icon src="assets/custom/food-4.svg"></ion-icon> <span> Cake </span> </button>
+    </div>
+
     <div class="results-utilities-holder">
         <h5 *ngIf="malls"> {{ malls.length }} MALLS </h5>
         <ion-button color="default" fill="clear" (click)="togglePopup()"> SORT / FILTER </ion-button>
@@ -27,8 +39,13 @@
                 <h3> {{ mall.name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mall.is_bookmarked }"></ion-icon> </h3>
                 <p class="description"> {{ mall.description }} </p>
                 <div class="offers-holder">
-                    <div class="offer" *ngFor="let offer of mall.offer_collection">
-                        {{ offer.name }}: <strong> {{ offer.offers.length }}  </strong>
+                    <div class="offer">
+                        <ion-icon src="assets/custom/restaurant.svg"></ion-icon>
+						Food Offers: <strong> {{ mall.offers.length }}  </strong>
+                    </div>
+					<div class="offer">
+                        <ion-icon src="assets/custom/shopping-purse-icon.svg"></ion-icon> 
+						Shopping Offers: <strong> {{ mall.offers.length }}  </strong>
                     </div>
                 </div>
                 <div class="utilities-holder">
@@ -70,53 +87,6 @@
         <a> Know More </a>
     </section>
 
-    <div class="results-utilities-holder no-padding">
-        <h5> Food Types </h5>
-        <ion-button color="default" fill="clear"> SEE ALL </ion-button>
-    </div>
-
-    <div class="food-types-holder">
-        <button> <ion-icon src="assets/custom/food-3.svg"></ion-icon> <span> Breakfast </span> </button>
-        <button> <ion-icon src="assets/custom/food-1.svg"></ion-icon> <span> Pizza </span> </button>
-        <button> <ion-icon src="assets/custom/food-2.svg"></ion-icon> <span> Doughnuts </span> </button>
-        <button> <ion-icon src="assets/custom/food-4.svg"></ion-icon> <span> Cake </span> </button>
-    </div>
-
-    <ion-list lines="none" class="result-list">
-        <ion-item *ngFor="let mall of malls" (click)="showMallDetails(mall)">
-            <img src="{{ mall.image_url }}" slot="start">
-            <ion-label>
-                <h3> {{ mall.name }}  <ion-icon name="bookmark" [ngClass]="{'active' : mall.is_bookmarked }"></ion-icon> </h3>
-                <p class="description"> {{ mall.description }} </p>
-                <div class="offers-holder">
-                    <div class="offer" *ngFor="let offer of mall.offer_collection">
-                        {{ offer.name }}: <strong> {{ offer.offers.length }}  </strong>
-                    </div>
-                </div>
-                <div class="utilities-holder">
-                    <div class="container">
-                        <div class="utility">
-                            <ion-icon name="star"></ion-icon> {{ mall.rating }}
-                        </div>
-                        <div class="utility">
-                            <ion-icon name="pin"></ion-icon> {{ mall.distance }} km
-                        </div>
-                    </div>
-
-                    <div class="container">
-                        <button class="utility-button">
-                            <ion-icon name="share"></ion-icon>
-                        </button>
-                        <a class="utility-button" target="_blank"
-                        href="https://maps.google.com/?q={{ mall.location.latitude }},{{ mall.location.longitude }}">
-                            <ion-icon name="navigate"></ion-icon>
-                        </a>
-                    </div>
-                </div>
-            </ion-label>
-        </ion-item>
-    </ion-list>
-
     <div class="sort-filter-holder" [ngClass]="{'active' : show_sort_popup }">
         <header>
             Sort / Filter <button (click)="togglePopup()"> Done </button>

src/app/malls/malls.page.ts

@@ -25,6 +25,7 @@ export class MallsPage implements OnInit {
     ionViewDidEnter() {
         this.mallService.getAllMalls().then((data: Array<IMall>) => {
             this.malls = data;
+			console.log(this.malls);
         });
     }
 

src/app/mocks/malls.ts

@@ -8,7 +8,7 @@ export const MALLS: Mall[] = [new Mall({
     is_bookmarked: true,
     is_archived: false,
     image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg',
-    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
     outlets: OUTLETS.map((outlet) => outlet.id),
     offers: [],
     rating: 4.1,
@@ -24,7 +24,7 @@ export const MALLS: Mall[] = [new Mall({
     is_bookmarked: false,
     is_archived: false,
     image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg',
-    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
     outlets: [],
     offers: [],
     rating: 4.5,
@@ -40,7 +40,7 @@ export const MALLS: Mall[] = [new Mall({
     is_bookmarked: false,
     is_archived: false,
     image_url: 'https://www.gopalanmall.com/images/mall-arcade-01.jpg',
-    description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
     outlets: [],
     offers: [],
     rating: 4.3,

src/app/mocks/outlets.ts

@@ -6,7 +6,7 @@ export const OUTLETS: Outlet[] = [new Outlet({
     id: '0001',
     image_url: 'https://images.markets.businessinsider.com/image/5a74835585cdd489228b47be-900/shutterstock643079686.jpg',
     name: 'McDonalds',
-    description: 'Veg / Non-Veg Food Restaurant',
+    description: 'Veg / Non-Veg Food Restaurant, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
     tags: ['dinner', 'spicy', 'chicken', 'pork'],
     menu_items: MENU_ITEMS_1.map((menu_item) => menu_item.id),
     offers: OFFERS.map((offer) => offer.id),
@@ -16,7 +16,7 @@ export const OUTLETS: Outlet[] = [new Outlet({
 }), new Outlet({
     id: '0002',
     image_url: 'https://pbs.twimg.com/profile_images/354890582/symbol.jpg',
-    name: 'Shopper\'s stop',
+    name: 'Shopper\'s stop, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
     description: 'Clothing store',
     offers: [],
     tags: [],
@@ -28,7 +28,7 @@ export const OUTLETS: Outlet[] = [new Outlet({
     id: '0003',
     image_url: 'https://www.mbarendezvous.com/images/top-stories-img/bannerimage_1463407053.jpg',
     name: 'Cafe Coffee Day',
-    description: 'Veg / Non-Veg Cafe',
+    description: 'Veg / Non-Veg Cafe, Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
     tags: ['hot', 'cold', 'pizza', 'beverage'],
     menu_items: MENU_ITEMS_2.map((menu_item) => menu_item.id),
     offers: [],

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

@@ -21,47 +21,43 @@
             <div>
                 <button (click)="back()"> <ion-icon name="arrow-back"></ion-icon> </button>
             </div>
-            <div>
+            <div class="action-buttons-holder">
                 <button [ngClass]="{'active' : outlet_details.is_bookmarked }" (click)="toggleBookmark()">
                     <ion-icon name="bookmark"></ion-icon>
                 </button>
                 <button> <ion-icon name="share"></ion-icon> </button>
             </div>
         </div>
-        <div class="icons-holder navigate-button">
-            <a target="_blank" href="https://maps.google.com/?q={{ mall_details.location.latitude }},{{ mall_details.location.longitude }}">
-                <ion-icon name="navigate"></ion-icon>
-            </a>
-        </div>
     </div>
 
     <div class="card-holder">
         <div class="card">
             <h3> {{ outlet_details.name }} </h3>
+			<p> {{ outlet_details.description }} </p>
             <div class="stats-holder">
                 <div class="stat"> <ion-icon name="star"></ion-icon> {{ outlet_details.rating }} </div>
             </div>
-            <p> {{ outlet_details.description }} </p>
         </div>
     </div>
 
     <div class="menu-card-holder">
         <header>
-            <h3> MENU </h3>
+            <div>
+				<button color="default" fill="clear" (click)="togglePopup()"> FILTER </button>
+				<button color="default" fill="clear" (click)="togglePopup()"> SORT </button>
+            </div>
             <div class="toggle" (click)="show_only_veg = !show_only_veg"> VEG MENU <ion-toggle [(ngModel)]="show_only_veg"></ion-toggle> </div>
         </header>
-        <div class="tags-holder">
-            <button [ngClass]="{'active' : selected_tag === tag}"
-            (click)="filterByTag(tag)" *ngFor="let tag of outlet_details.tags"> {{ tag }} </button>
-        </div>
 
-        <div class="results-utilities-holder">
-            <h5 *ngIf="outlet_details"> {{ outlet_details.menu_items.length }} FOOD ITEMS </h5>
-            <ion-button color="default" fill="clear" (click)="togglePopup()"> SORT / FILTER </ion-button>
-        </div>
+		<div class="details-header">
+			<span class="count"> {{ temp_outlet_details.menu_items.length }} FOOD ITEMS </span>
+			<div class="display-formats">
+				<button> <ion-icon name="list"></ion-icon> </button>
+				<button> <ion-icon name="grid"></ion-icon> </button>
+			</div>
+		</div>
 
         <div class="items-holder">
-
             <div class="item" *ngFor="let item of temp_outlet_details.menu_items"
             [ngClass]="{'hide' : !item.is_vegeterian && show_only_veg }">
                 <div class="rating"> <ion-icon name="star"></ion-icon> {{ item.rating }} </div>
@@ -100,7 +96,7 @@
 
     <div class="sort-filter-holder" [ngClass]="{'active' : show_sort_popup }">
         <header>
-            Sort / Filter <button (click)="togglePopup()"> Done </button>
+            SORT <button (click)="togglePopup()"> Done </button>
         </header>
 
         <div class="sort-buttons-holder">

src/app/outlet-details/outlet-details.page.scss

@@ -81,10 +81,10 @@
 
 .upfold-holder {
     position: relative;
-    height: 45vh;
+    height: 30vh;
     width: 100%;
-    padding-top: 30px;
-    margin-bottom: -25px;
+    padding: 30px 0;
+	margin-bottom: calc(-30vh + 90px);
 
     .icons-holder {
         position: relative;
@@ -93,6 +93,17 @@
         margin: 0 auto;
         justify-content: space-between;
 
+		.action-buttons-holder {
+			display: flex;
+			align-items: center;
+			width: 50%;
+			justify-content: flex-end;
+
+			button {
+				margin-right: 15px;
+			}
+		}
+
         &.navigate-button {
             position: absolute;
             left: 86%;
@@ -115,7 +126,6 @@
             height: 30px;
             width: 30px;
             display: block;
-            margin-bottom: 10px;
             box-shadow: 0px 0px 5px var(--brand-grey);
 
             &.active {
@@ -162,7 +172,6 @@
             color: var(--brand-blue);
             font-size: 10px;
             font-weight: bold;
-            margin: 15px 0;
 
             span {
                 color: var(--brand-grey);
@@ -170,7 +179,7 @@
         }
 
         p {
-            margin: 0 auto;
+            margin: 5px auto;
             font-size: 11px;
             line-height: 1.5;
             color: var(--brand-grey);
@@ -182,17 +191,29 @@
     margin: 25px 0;
 
     header {
+		position: sticky;
+		top: 75px;
+		z-index: 1;
         display: flex;
         align-items: center;
         justify-content: space-between;
         width: 100%;
-        background-color: #efefef;
+        background-color: white;
+		box-shadow: 0px 2px 5px rgba(#000000, 0.15);
         color: var(--brand-dark-grey);
-        padding: 5px 0 5px 15px;
-    }
-
-    h3 {
-        font-size: 12px;
+        padding: 10px 0 5px 15px;
+
+		button {
+			color: var(--brand-blue);
+			background-color: white;
+			border: 1px solid var(--brand-blue);
+			border-radius: 20px;
+			padding: 6px 15px;
+			font-weight: 500;
+			font-size: 11px;
+			letter-spacing: 1px;
+			margin-right: 10px;
+		}
     }
 
     .toggle {
@@ -209,39 +230,42 @@
         }
     }
 
-    .tags-holder {
-        display: flex;
-        flex-wrap: wrap;
-        padding: 25px 15px 0;
-
-        button {
-            border: 1px solid var(--brand-blue);
-            border-radius: 30px;
-            color: var(--brand-blue);
-            font-size: 12px;
-            padding: 7px 15px;
-            background-color: white;
-            margin-right: 10px;
-            margin-bottom: 15px;
-
-            &.active {
-                background-color: var(--brand-blue);
-                color: white;
-            }
-        }
-    }
-
-    .results-utilities-holder {
-        margin-top: 0;
-        padding-left: 10px;
-        padding-right: 10px;
-    }
+	.details-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 17px;
+		height: 60px;
+
+		.count {
+			color: var(--brand-dark-grey);
+			font-size: 11px;
+			font-weight: 500;
+			letter-spacing: 1px;
+		}
+	}
+
+	.display-formats {
+		display: flex;
+
+		button {
+			width: 50px;
+			height: 50px;
+			font-size: 20px;
+			background-color: white;
+			color: var(--brand-dark-grey);
+
+			&.active {
+				color: var(--brand-blue);
+			}
+		}
+	}
 }
 
 .items-holder {
     display: flex;
     width: 100%;
-    padding: 12px 17px 0;
+    padding: 0px 17px;
     margin: 0 auto -30px;
     justify-content: space-between;
     flex-wrap: wrap;
@@ -310,6 +334,7 @@
         display: flex;
         width: 100%;
         align-items: center;
+		padding-top: 10px;
 
         span {
             font-size: 10px;

src/app/services/mall.service.ts

@@ -27,12 +27,21 @@ export class MallService {
     }
 
     public async getAllMalls() {
-        this.malls = await Promise.all(MALLS.map(this.getDenormalizedMall));
+		this.malls = await Promise.all(MALLS.map(this.getDenormalizedMall));
         return this.malls;
     }
 
     public async getMallByID(id: string) {
-        this.malls = await Promise.all(MALLS.map(this.getDenormalizedMall));
+		this.malls = await Promise.all(MALLS.map(this.getDenormalizedMall));
         return this.malls.find((mall) => mall.id === id);
     }
+
+	async updateMall(data: IMall) {
+		this.malls = await Promise.all(MALLS.map(this.getDenormalizedMall));
+		for (let i = 0; i < this.malls.length; i += 1) {
+			if (data.id === this.malls[i].id) {
+				this.malls[i] = data;
+			}
+		}
+	}
 }

src/assets/custom/restaurant.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 489.773 489.773" style="enable-background:new 0 0 489.773 489.773;" xml:space="preserve">
+<g id="XMLID_95_">
+	<path id="XMLID_98_" d="M155.183,305.646c-2.081,0.175-4.157,0.265-6.238,0.265c-5.693,0-11.23-0.826-16.652-2.081L6.834,429.293
+		c-6.158,6.149-6.158,16.137,0,22.287l32.47,32.478c6.158,6.15,16.135,6.15,22.276,0l150.785-150.757l-27.944-30.15L155.183,305.646
+		z"/>
+	<path id="XMLID_97_" d="M485.345,104.649c-5.888-5.885-15.417-5.885-21.304,0l-81.303,81.301c-7.693,7.685-20.154,7.685-27.847,0
+		c-7.659-7.679-7.659-20.13,0-27.807l80.901-80.884c6.112-6.118,6.112-16.036,0-22.168c-6.141-6.11-16.055-6.11-22.167,0
+		l-80.868,80.876c-7.693,7.693-20.14,7.693-27.833,0c-7.677-7.676-7.677-20.136,0-27.806l81.286-81.293
+		c5.904-5.894,5.904-15.441,0-21.343c-5.888-5.895-15.434-5.895-21.338,0l-91.458,91.463
+		c-21.989,22.003-28.935,52.888-21.816,80.991l61.31,61.314c28.101,7.093,59.001,0.144,80.965-21.841l91.471-91.458
+		C491.249,120.1,491.249,110.543,485.345,104.649z"/>
+	<path id="XMLID_96_" d="M41.093,13.791c-3.134-3.135-7.372-4.854-11.724-4.854c-0.926,0-1.857,0.079-2.766,0.231
+		c-5.295,0.896-9.838,4.295-12.172,9.133c-26.79,55.373-15.594,121.631,27.894,165.121l77.801,77.791
+		c7.676,7.685,18.055,11.939,28.819,11.939c1.151,0,2.305-0.048,3.456-0.143l45.171-3.855l196.971,212.489
+		c3.058,3.303,7.342,5.221,11.855,5.31c0.093,0,0.19,0,0.288,0c4.412,0,8.636-1.743,11.771-4.855l33.734-33.741
+		c3.117-3.11,4.859-7.331,4.859-11.73c0-4.398-1.742-8.622-4.846-11.732L41.093,13.791z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/assets/custom/shopping-purse-icon.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="48px" height="48px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M15.733,20.125c1.104,0,2-0.896,2-2v-7.8C17.733,6.838,20.57,4,24.058,4c3.487,0,6.325,2.838,6.325,6.325v7.8
+				c0,1.104,0.896,2,2,2c1.104,0,2-0.896,2-2v-7.8C34.383,4.632,29.751,0,24.058,0c-5.692,0-10.324,4.632-10.324,10.325v7.8
+				C13.733,19.229,14.629,20.125,15.733,20.125z"/>
+			<path d="M47,15.631H36.383v2.494c0,2.206-1.794,4-4,4c-2.205,0-4-1.794-4-4v-2.494h-8.649v2.494c0,2.206-1.794,4-4,4
+				s-4-1.794-4-4v-2.494H1c-0.552,0-0.893,0.435-0.762,0.971L7.235,45.1C7.658,46.702,9.343,48,11,48h26
+				c1.658,0,3.342-1.299,3.767-2.9l6.996-28.498C47.893,16.065,47.553,15.631,47,15.631z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/global.scss

@@ -36,6 +36,10 @@ ion-button, button, a, p, div, input {
     outline: none;
 }
 
+h1, h2, h3, h4, h5 {
+	margin: 0;
+}
+
 figure {
     margin: 0;
 }
@@ -117,11 +121,16 @@ figure {
         color: var(--brand-yellow);
         letter-spacing: 0.5px;
         border-bottom: 1px solid #efefef;
-        padding: 7px 0;
+        padding: 0 0 7px;
         margin-bottom: 7px;
+		align-items: center;
+
+		ion-icon {
+			color: var(--brand-grey);
+		}
 
         .offer {
-            font-size: 10px;
+            font-size: 11px;
             width: 50%;
         }
     }