From 7889eceea45dba8c40c4e175ae33ac5f21865172 Mon Sep 17 00:00:00 2001
From: vishnuraghavb <design@vishnuraghav.com>
Date: Fri, 18 Jun 2021 18:22:03 +0530
Subject: [PATCH] ready for v2.0.0

---
 app/app.scss                               | 267 ++++++--------
 app/components/CookingTimer.vue            |  52 ++-
 app/components/EditRecipe.vue              | 105 +++---
 app/components/EnRecipes.vue               | 261 +++++++-------
 app/components/MealPlanner.vue             | 318 ++++++++++-------
 app/components/ViewRecipe.vue              | 129 +++----
 app/components/modals/Action.vue           |  17 +-
 app/components/modals/ActionWithSearch.vue |  34 +-
 app/components/modals/Confirm.vue          |   6 +-
 app/components/modals/DMYPicker.vue        |   6 +-
 app/components/modals/Filter.vue           |  54 ++-
 app/components/modals/Prompt.vue           |   6 +-
 app/components/modals/TimePickerHM.vue     |   6 +-
 app/components/modals/TimePickerHMS.vue    |  17 +-
 app/components/settings/About.vue          |  17 +-
 app/components/settings/AppSettings.vue    |   7 +
 app/components/settings/CTSettings.vue     |  10 +
 app/components/settings/Database.vue       |  11 +-
 app/components/settings/Interface.vue      |  22 +-
 app/components/settings/MPSettings.vue     |  13 +-
 app/components/settings/Options.vue        |  39 ++-
 app/components/settings/Reset.vue          |   9 +-
 app/components/sub/OptionsList.vue         |  12 +-
 app/components/sub/SnackBar.vue            |   4 +-
 app/components/sub/Timer.vue               |  22 +-
 app/components/sub/Toast.vue               |   2 +-
 app/fonts/{enrecipes.ttf => EnRecipes.ttf} | Bin 17940 -> 18568 bytes
 app/main.ts                                |  75 ++--
 app/rtl-ui/dock-layout/index.android.ts    |  52 ---
 app/rtl-ui/dock-layout/index.d.ts          |   1 -
 app/rtl-ui/index.ts                        |   1 -
 app/shared/mixins.ts                       |  30 +-
 app/shared/utils.ts                        |   6 +-
 app/store.ts                               |  78 +++--
 package-lock.json                          | 382 +++++++++++++++------
 package.json                               |   4 +-
 translations/store-listing/hi/title.txt    |   1 +
 translations/store-listing/nb-NO/title.txt |   1 +
 38 files changed, 1133 insertions(+), 944 deletions(-)
 rename app/fonts/{enrecipes.ttf => EnRecipes.ttf} (89%)
 delete mode 100644 app/rtl-ui/dock-layout/index.android.ts
 delete mode 100644 app/rtl-ui/dock-layout/index.d.ts
 create mode 100644 translations/store-listing/hi/title.txt
 create mode 100644 translations/store-listing/nb-NO/title.txt

diff --git a/app/app.scss b/app/app.scss
index ddb33624..a0baa493 100644
--- a/app/app.scss
+++ b/app/app.scss
@@ -17,7 +17,7 @@ $t1: 25;
 $t2: 21;
 $t3: 17;
 $t4: 14;
-$t5: 12; // Base size
+$t5: 12; // Base
 $t6: 10;
 
 Page {
@@ -25,29 +25,31 @@ Page {
   font-size: $t4;
 }
 .ico {
-  font-family: 'enrecipes';
-  font-size: 24;
-  vertical-alignment: center;
-  &.sm {
+  font-family: 'EnRecipes';
+  font-size: 23;
+  &.s {
     font-size: $t3;
     opacity: 0.5;
   }
 }
+.vc {
+  vertical-align: center;
+}
 .tb {
   font-family: 'Inter-Bold', sans-serif;
 }
-.tac {
+.tc {
   text-align: center;
 }
 .tw {
   text-wrap: true;
 }
-.pageTitle {
-  @extend .tb;
-  @extend .tw;
+
+.pTitle {
   font-size: $t1;
   padding: 16 16 24;
 }
+
 .Light {
   color: $gray9;
   background: $gray1;
@@ -67,8 +69,9 @@ Page {
   .appbar,
   .modal {
     background: $gray0;
+    box-shadow: 0 2 rgba($gray10, 0.1);
   }
-  .fieldLabel,
+  .fLabel,
   .sub {
     color: $gray6;
   }
@@ -105,7 +108,7 @@ Page {
     color: $gray0;
     background: $gray8;
   }
-  .fieldLabel,
+  .fLabel,
   .sub {
     color: $gray5;
   }
@@ -142,7 +145,7 @@ Page {
     color: $gray1;
     background: $gray9;
   }
-  .fieldLabel,
+  .fLabel,
   .sub {
     color: $gray6;
   }
@@ -158,8 +161,9 @@ Page {
     color: $gray10;
   }
 }
+
 TextField.combField,
-#searchBar {
+#search {
   border-color: transparent;
 }
 
@@ -167,28 +171,24 @@ TextField.combField,
 // Elements
 TextField,
 TextView {
-  width: 100%;
+  // width: 100%;
   padding: 14 8;
   border-bottom-width: 1;
 }
 TextView {
   line-height: 4;
 }
-#searchBar {
+#search {
   padding: 13 12;
 }
-.inputField {
+.inputC {
   margin-bottom: 24;
 }
-.fieldLabel {
+.fLabel {
   font-size: $t5;
 }
-.progressContainer {
-  width: 100%;
-}
 progress {
   color: $orange;
-  width: 100%;
   height: 2;
   background-color: $gray5;
 }
@@ -197,12 +197,17 @@ Switch {
   off-background-color: $gray5;
 }
 button {
-  background-color: transparent;
   z-index: 0;
   padding: 8;
   border-radius: 12;
   min-width: 0;
   min-height: 0;
+  text-transform: none;
+  background-color: transparent;
+  &.sst {
+    width: 48;
+    height: 48;
+  }
   &.ico {
     width: 48;
     height: 48;
@@ -212,36 +217,28 @@ button {
       @extend .fade;
     }
   }
+  &.si {
+    width: 40;
+    height: 40;
+  }
   &.text {
-    @extend .tb;
     color: $orange;
-    &:active {
-      @extend .fade;
-    }
+  }
+  &.st {
+    font-size: $t5;
+    padding: 12;
   }
   &.big {
     margin-top: 8;
     padding: 16 0;
   }
-  &.sm {
-    font-size: $t5;
-    padding: 12;
-  }
-  &.min {
-    width: 40;
-    height: 40;
-    vertical-alignment: center;
-  }
-  &.fb:active {
-    @extend .fade;
-  }
   &.rate {
     margin: 0 4 0 0;
     width: 32;
     height: 32;
-    &:active {
-      @extend .fade;
-    }
+  }
+  &.fb:active {
+    @extend .fade;
   }
 }
 ActivityIndicator {
@@ -255,52 +252,44 @@ ActivityIndicator {
 // Home
 .segment {
   border-radius: 12;
-  margin: 0 4 0 0;
-  padding: 0 12;
-  .value {
-    padding: 0 0 0 8;
-    vertical-alignment: center;
-    &.r {
-      padding: 0 8 0 0;
-      transform: scaleX(-1);
-    }
+  padding: 8;
+  .v {
+    padding: 0 4;
   }
 }
 .select {
   color: $orange;
   @extend .hl;
 }
-.emptyState {
+.t3 {
+  font-size: $t3;
+}
+.empty {
   padding: 16 16 8;
-  label {
-    @extend .tw;
-  }
-  .title {
-    @extend .tb;
-    font-size: $t3;
-  }
 }
 
 // -----------------------------
 // Recipe Item
-.recipeItem {
+.recipe {
   padding: 8 16;
-  .recipeInfo {
-    vertical-alignment: center;
+  .info {
     padding: 0 8 4;
   }
   .title {
     padding: 0 0 4;
   }
 }
-.attrs {
+.oh {
   orientation: horizontal;
 }
+.t6 {
+  font-size: $t6;
+}
 .attr {
   font-size: $t6;
-  padding: 1 4;
+  padding: 0 4 2;
 }
-.simple .recipeInfo {
+.simple .info {
   padding: 8 0;
 }
 .minimal .title {
@@ -308,7 +297,7 @@ ActivityIndicator {
 }
 .grid {
   padding: 8;
-  .recipeInfo {
+  .info {
     padding: 8 0 4;
   }
   &.odd {
@@ -318,7 +307,7 @@ ActivityIndicator {
     padding: 8 16 8 8;
   }
 }
-.photogrid .recipeInfo {
+.photogrid .info {
   padding: 8 0 0;
 }
 .lastItem {
@@ -401,7 +390,7 @@ ActivityIndicator {
   margin: 24 16 0 0;
   vertical-align: top;
 }
-.photoviewer {
+.imgViewer {
   width: 96;
   height: 96;
   opacity: 0;
@@ -417,92 +406,53 @@ ActivityIndicator {
     @extend .tw;
   }
 }
-.ingredient {
+.check {
   padding: 0 16;
-  .value {
-    @extend .tw;
-    vertical-align: center;
-    padding: 14 16;
-    line-height: 4;
-  }
-}
-.instruction {
-  padding: 0 16;
-  .count {
-    @extend .tb;
-    font-size: $t3;
-  }
-  .value {
-    @extend .tw;
+  .v {
     padding: 14 16;
     line-height: 4;
   }
 }
 .done {
   opacity: 0.5;
-  .value {
+  .v {
     text-decoration: line-through;
   }
 }
-.combination {
-  @extend .tw;
-  text-align: left;
-  padding: 16;
+.comb {
+  padding: 16 24;
   line-height: 4;
 }
 .note {
-  @extend .tw;
-  line-height: 4;
-  padding: 16 0;
-}
-.dateInfo {
-  padding: 32 16 16;
-  font-size: $t5;
+  padding: 16 24;
   line-height: 4;
 }
 
 // -----------------------------
 // AppBar
+
 .appbar {
-  z-index: 4;
-  min-height: 56;
   margin: 8;
   padding: 4;
   border-radius: 16;
-  .title {
-    @extend .tb;
-    @extend .tw;
-    vertical-align: center;
-    margin: 0 12;
-    line-height: 4;
-  }
-  .msg {
-    padding: 14 16;
-    margin: 0;
-  }
   .fab {
     margin-left: 8;
   }
-  &.home {
-    margin: 8 8 0;
-  }
 }
 .sidebar {
   margin-bottom: 0;
 }
 .toolbar {
-  z-index: 4;
-  padding: 4;
-  margin: 0 0 52;
+  vertical-align: bottom;
+  height: 1;
+  transform: translateY(48);
   .tool {
     padding: 0 8;
-    label {
-      vertical-alignment: center;
-    }
-    .value,
-    .ico {
-      padding: 0 4;
-    }
+    orientation: horizontal;
+  }
+  .v,
+  .ico {
+    padding: 0 4;
   }
 }
 .fab {
@@ -512,64 +462,44 @@ ActivityIndicator {
 
 // -----------------------------
 // EditRecipe
-.sectionTitle {
-  @extend .tb;
-  @extend .tw;
-  font-size: $t2;
-  padding: 0;
+.section {
+  padding: 0 16;
   margin: 32 0 16;
 }
+.t2 {
+  font-size: $t2;
+}
 .sticky {
   width: 100%;
   padding: 0 16 16;
-  margin: 0;
-}
-.countdown {
-  font-size: $t3;
-  color: $orange;
 }
 
 // -----------------------------
 // MealPlanner
-.monthSwitcher {
-  padding: 0 16;
-  .month {
-    vertical-alignment: center;
-    text-align: center;
-    font-size: $t3;
-  }
-}
 .calendar {
   padding: 0 16;
-  .dayName {
-    vertical-alignment: center;
-    text-align: center;
-    font-size: $t5;
-  }
   .accent.sub {
-    color: rgba($orange, 0.5);
+    color: rgba($orange, 0.6);
   }
 }
 .plans {
-  padding: 8 16 80;
-  width: 100%;
+  margin: 16 16 0;
   .date {
-    font-size: $t2;
-    padding: 16 0;
+    margin: 16 0 8;
+  }
+  .type {
+    padding: 8 0;
   }
   .plan {
-    padding: 8 0;
-  }
-  .meal {
-    font-size: $t3;
-    padding: 8 0;
-  }
-  .planContent {
     min-height: 48;
-    padding: 8;
+    padding: 4 0;
   }
-  .attr {
-    padding: 0;
+  .info {
+    min-height: 40;
+    padding: 0 8;
+  }
+  .note {
+    padding: 4 0;
   }
 }
 
@@ -626,12 +556,6 @@ ActivityIndicator {
     margin: 0 0 8;
   }
 }
-.noResInfo {
-  @extend .tac;
-  @extend .tw;
-  padding: 16;
-  line-height: 4;
-}
 
 // -----------------------------
 // Transitions
@@ -646,7 +570,7 @@ ActivityIndicator {
     background-color: transparent;
   }
   100% {
-    background-color: rgba($orange, 0.2);
+    background-color: rgba($orange, 0.1);
   }
 }
 .fade {
@@ -660,7 +584,7 @@ ActivityIndicator {
     opacity: 1;
   }
   100% {
-    opacity: 0.5;
+    opacity: 0.75;
   }
 }
 
@@ -678,3 +602,12 @@ ActivityIndicator {
     horizontal-alignment: right;
   }
 }
+.har {
+  horizontal-alignment: right;
+  &.r {
+    horizontal-alignment: left;
+  }
+}
+.edge {
+  width: 16;
+}
diff --git a/app/components/CookingTimer.vue b/app/components/CookingTimer.vue
index d0e4351f..b231369c 100644
--- a/app/components/CookingTimer.vue
+++ b/app/components/CookingTimer.vue
@@ -1,5 +1,5 @@
 <template>
-  <Page @loaded="pgLoad" @unloaded="pgUnload" actionBarHidden="true">
+  <Page @loaded="pgLoad" actionBarHidden="true">
     <GridLayout rows="*, auto" columns="*">
       <ScrollView
         @scroll="svScroll($event)"
@@ -8,7 +8,7 @@
       >
         <StackLayout>
           <RGridLayout :rtl="RTL" rows="auto" columns="*, auto, 12">
-            <RLabel class="pageTitle" :text="'timer' | L" />
+            <RLabel class="pTitle tw tb" :text="'timer' | L" />
             <Button col="1" class="ico" :text="icon.cog" @tap="navigateTo" />
           </RGridLayout>
           <Timer
@@ -25,9 +25,9 @@
         </StackLayout>
       </ScrollView>
       <GridLayout v-if="!activeTimers.length" rows="*, auto">
-        <StackLayout row="1" class="emptyState">
-          <RLabel class="title" :text="'ccwt' | L" />
-          <RLabel :text="'plsAdd' | L" />
+        <StackLayout row="1" class="empty">
+          <RLabel class="tb t3 tw" :text="'ccwt' | L" />
+          <RLabel class="tw" :text="'plsAdd' | L" />
         </StackLayout>
       </GridLayout>
       <RGridLayout
@@ -50,6 +50,18 @@
         :onload="sbLoad"
       />
       <Toast :onload="tbLoad" :toast="toast" :action="hideBar" />
+      <Label
+        rowSpan="2"
+        class="edge hal"
+        :class="{ 'f r': RTL }"
+        @swipe="swipeBack($event, navigateBack)"
+      />
+      <Label
+        rowSpan="2"
+        class="edge har rtl"
+        :class="{ r: RTL, f: !RTL }"
+        @swipe="swipeBack($event, navigateBack)"
+      />
     </GridLayout>
   </Page>
 </template>
@@ -58,7 +70,6 @@
 import { localize } from "@nativescript/localize";
 import {
   Observable,
-  CoreTypes,
   Application,
   Utils,
   Device,
@@ -128,12 +139,8 @@ export default {
       object.bindingContext = new Observable();
       if (this.activeTimers.filter((e: any) => e.done).length)
         this.openReminder();
-      this.keepScreenOnCountUp();
       setNumber("isTimer", 1);
     },
-    pgUnload() {
-      utils.keepScreenOn(0);
-    },
     abLoad({ object }) {
       this.appbar = object;
     },
@@ -151,19 +158,8 @@ export default {
         scrollUp = y < this.scrollPos;
         this.scrollPos = Math.abs(y);
         let ab = this.appbar.translateY;
-        if (!scrollUp && ab == 0) {
-          this.appbar.animate({
-            translate: { x: 0, y: 64 },
-            duration: 200,
-            curve: CoreTypes.AnimationCurve.ease,
-          });
-        } else if (scrollUp && ab == 64) {
-          this.appbar.animate({
-            translate: { x: 0, y: 0 },
-            duration: 200,
-            curve: CoreTypes.AnimationCurve.ease,
-          });
-        }
+        if (!scrollUp && ab == 0) this.animateBar(this.appbar, 0);
+        else if (scrollUp && ab == 64) this.animateBar(this.appbar, 1);
       }
     },
 
@@ -210,7 +206,6 @@ export default {
       }
       if (this.FGService)
         setTimeout(() => this.activeTimers.length && show(), 250);
-      this.keepScreenOnCountUp();
       utils.wakeLock(ongoingCount);
     },
     timerAlert() {
@@ -390,7 +385,7 @@ export default {
       this.animateBar(this.appbar, 0).then(() => {
         this.showUndo = 0;
         this.toast = localize(data);
-        this.animateBar(this.toastbar, 1);
+        this.animateBar(this.toastbar, 1, 1);
         let a = 5;
         clearInterval(barTimer);
         barTimer = setInterval(() => a-- < 1 && this.hideBar(), 1000);
@@ -404,7 +399,7 @@ export default {
           this.showUndo = 1;
           this.snackMsg = message;
           this.countdown = 5;
-          this.animateBar(this.snackbar, 1).then(() => {
+          this.animateBar(this.snackbar, 1, 1).then(() => {
             let a = 5;
             clearInterval(barTimer);
             barTimer = setInterval(() => {
@@ -456,11 +451,6 @@ export default {
     },
 
     // HELPERS
-    keepScreenOnCountUp() {
-      utils.keepScreenOn(
-        this.activeTimers.filter((e: any) => !e.isPaused).length
-      );
-    },
   },
   created() {
     this.clearTimerInterval();
diff --git a/app/components/EditRecipe.vue b/app/components/EditRecipe.vue
index 0a54e8fd..d944bc63 100644
--- a/app/components/EditRecipe.vue
+++ b/app/components/EditRecipe.vue
@@ -3,7 +3,11 @@
     <GridLayout rows="*, auto" columns="auto, *, auto">
       <ScrollView rowSpan="2" colSpan="3" @scroll="!showUndo && svLoad($event)">
         <StackLayout padding="0 16 72">
-          <RLabel class="pageTitle" padding="16 0 24" :text="`${title}` | L" />
+          <RLabel
+            class="pTitle tw tb"
+            padding="16 0 24"
+            :text="`${title}` | L"
+          />
           <Image
             margin="0 0 32"
             v-if="recipe.image"
@@ -25,8 +29,8 @@
             @tap="imageHandler"
           />
           <!-- OVERVIEW -->
-          <StackLayout class="inputField">
-            <Label class="fieldLabel" :text="'title' | L" />
+          <StackLayout class="inputC">
+            <Label class="fLabel" :text="'title' | L" />
             <TextField
               :hint="'recTitle' | L"
               v-model="recipe.title"
@@ -34,8 +38,8 @@
             />
           </StackLayout>
           <RGridLayout :rtl="RTL" class="" columns="*, 8, *">
-            <StackLayout class="inputField">
-              <Label class="fieldLabel" :text="'cui' | L" />
+            <StackLayout class="inputC">
+              <Label class="fLabel" :text="'cui' | L" />
               <TextField
                 @loaded="setGravity"
                 :text="recipe.cuisine | L"
@@ -44,8 +48,8 @@
                 @tap="showCuisine(0)"
               />
             </StackLayout>
-            <StackLayout class="inputField" col="2">
-              <Label class="fieldLabel" :text="'cat' | L" />
+            <StackLayout class="inputC" col="2">
+              <Label class="fLabel" :text="'cat' | L" />
               <TextField
                 @loaded="setGravity"
                 ref="category"
@@ -56,8 +60,8 @@
               />
             </StackLayout>
           </RGridLayout>
-          <StackLayout class="inputField">
-            <Label class="fieldLabel" :text="'ts' | L" />
+          <StackLayout class="inputC">
+            <Label class="fLabel" :text="'ts' | L" />
             <TextField
               @loaded="setGravity"
               :hint="'tsInfo' | L"
@@ -69,8 +73,8 @@
             />
           </StackLayout>
           <RGridLayout :rtl="RTL" columns="*, 8, *">
-            <StackLayout class="inputField">
-              <Label class="fieldLabel" :text="'prepT' | L" />
+            <StackLayout class="inputC">
+              <Label class="fLabel" :text="'prepT' | L" />
               <TextField
                 @loaded="setGravity"
                 :text="timeRequired('prepTime')"
@@ -79,8 +83,8 @@
                 @tap="setTimeRequired(0, 'prepTime')"
               />
             </StackLayout>
-            <StackLayout class="inputField" col="2">
-              <Label class="fieldLabel" :text="'cookT' | L" />
+            <StackLayout class="inputC" col="2">
+              <Label class="fLabel" :text="'cookT' | L" />
               <TextField
                 @loaded="setGravity"
                 ref="cookTime"
@@ -92,8 +96,8 @@
             </StackLayout>
           </RGridLayout>
           <RGridLayout :rtl="RTL" columns="*, 8, *">
-            <StackLayout class="inputField">
-              <Label class="fieldLabel" :text="'yieldQ' | L" />
+            <StackLayout class="inputC">
+              <Label class="fLabel" :text="'yieldQ' | L" />
               <TextField
                 @loaded="setGravity"
                 ref="yieldQuantity"
@@ -103,8 +107,8 @@
                 returnKeyType="next"
               />
             </StackLayout>
-            <StackLayout class="inputField" col="2">
-              <Label class="fieldLabel" :text="'yieldU' | L" />
+            <StackLayout class="inputC" col="2">
+              <Label class="fLabel" :text="'yieldU' | L" />
               <TextField
                 @loaded="setGravity"
                 :text="`${recipe.yieldUnit}` | L"
@@ -115,8 +119,8 @@
             </StackLayout>
           </RGridLayout>
           <GridLayout columns="*, 8, *">
-            <StackLayout class="inputField" :col="RTL ? 2 : 0">
-              <Label class="fieldLabel" :text="'Difficulty level' | L" />
+            <StackLayout class="inputC" :col="RTL ? 2 : 0">
+              <Label class="fLabel" :text="'Difficulty level' | L" />
               <TextField
                 @loaded="setGravity"
                 ref="difficultyLevel"
@@ -130,7 +134,8 @@
           <!-- INGREDIENTS -->
           <Label
             :text="getTitleCount('ings', 'ingredients')"
-            class="sectionTitle"
+            padding="0"
+            class="section t2 tb tw"
           />
           <RGridLayout
             :rtl="RTL"
@@ -168,13 +173,13 @@
             />
             <Button
               col="5"
-              class="ico min"
+              class="ico si"
               :text="icon.x"
               @tap="removeIngredient(index)"
             />
           </RGridLayout>
           <Button
-            class="text big hal"
+            class="text tb big hal fb"
             :class="{ r: RTL }"
             :text="'aIngBtn' | L"
             @tap="addIngredient()"
@@ -182,7 +187,8 @@
           <!-- INSTRUCTIONS -->
           <Label
             :text="getTitleCount('inss', 'instructions')"
-            class="sectionTitle"
+            padding="0"
+            class="section t2 tb tw"
           />
           <RGridLayout
             :rtl="RTL"
@@ -197,13 +203,13 @@
             />
             <Button
               col="1"
-              class="ico min"
+              class="ico si"
               :text="icon.x"
               @tap="removeInstruction(index)"
             />
           </RGridLayout>
           <Button
-            class="text big hal"
+            class="text tb big hal fb"
             :class="{ r: RTL }"
             :text="'aStpBtn' | L"
             @tap="addInstruction"
@@ -211,7 +217,8 @@
           <!-- COMBINATIONS -->
           <Label
             :text="getTitleCount('cmbs', 'combinations')"
-            class="sectionTitle"
+            padding="0"
+            class="section t2 tb tw"
           />
           <RGridLayout
             :rtl="RTL"
@@ -227,19 +234,23 @@
             />
             <Button
               col="1"
-              class="ico min"
+              class="ico si"
               :text="icon.x"
               @tap="removeCombination(combination)"
             />
           </RGridLayout>
           <Button
-            class="text big hal"
+            class="text tb big hal fb"
             :class="{ r: RTL }"
             :text="'addCmbBtn' | L"
             @tap="showCombinations"
           />
           <!-- NOTES -->
-          <Label :text="getTitleCount('nos', 'notes')" class="sectionTitle" />
+          <Label
+            :text="getTitleCount('nos', 'notes')"
+            padding="0"
+            class="section t2 tb tw"
+          />
           <RGridLayout
             :rtl="RTL"
             columns="*, auto"
@@ -253,13 +264,13 @@
             />
             <Button
               col="1"
-              class="ico min"
+              class="ico si"
               :text="icon.x"
               @tap="removeNote(index)"
             />
           </RGridLayout>
           <Button
-            class="text big hal"
+            class="text tb big hal fb"
             :class="{ r: RTL }"
             :text="'aNoBtn' | L"
             @tap="addNote"
@@ -300,6 +311,19 @@
         :action="hideBar"
         :onload="sbLoad"
       />
+      <Label
+        rowSpan="2"
+        colSpan="3"
+        class="edge hal"
+        :class="{ 'f r': RTL }"
+        @swipe="swipeBack($event, navigateBack)"
+      />
+      <Label
+        rowSpan="2"
+        colSpan="3"
+        class="edge har rtl f"
+        @swipe="swipeBack($event, navigateBack)"
+      />
     </GridLayout>
   </Page>
 </template>
@@ -315,10 +339,8 @@ import {
   Screen,
   Utils,
   Observable,
-  CoreTypes,
   Frame,
   Application,
-  GridLayout,
 } from "@nativescript/core";
 import { getString, setString } from "@nativescript/core/application-settings";
 import { localize } from "@nativescript/localize";
@@ -430,19 +452,10 @@ export default {
         scrollUp = y < this.scrollPos;
         this.scrollPos = Math.abs(y);
         let ab = this.appbar.translateY;
-        if (!scrollUp && ab == 0) {
-          this.appbar.animate({
-            translate: { x: 0, y: 64 },
-            duration: 200,
-            curve: CoreTypes.AnimationCurve.ease,
-          });
-        } else if (scrollUp && ab == 64) {
+        if (!scrollUp && ab == 0) this.animateBar(this.appbar, 0);
+        else if (scrollUp && ab == 64) {
           Utils.ad.dismissSoftInput();
-          this.appbar.animate({
-            translate: { x: 0, y: 0 },
-            duration: 200,
-            curve: CoreTypes.AnimationCurve.ease,
-          });
+          this.animateBar(this.appbar, 1);
         }
       }
     },
@@ -844,7 +857,7 @@ export default {
           this.showUndo = 1;
           this.snackMsg = message;
           this.countdown = 5;
-          this.animateBar(this.snackbar, 1).then(() => {
+          this.animateBar(this.snackbar, 1, 1).then(() => {
             let a = 5;
             barTimer = setInterval(() => {
               if (this.undo) {
diff --git a/app/components/EnRecipes.vue b/app/components/EnRecipes.vue
index 3f34288f..1bb74d56 100644
--- a/app/components/EnRecipes.vue
+++ b/app/components/EnRecipes.vue
@@ -1,6 +1,6 @@
 <template>
-  <Page @loaded="pgLoad" @unloaded="onPageUnload" actionBarHidden="true">
-    <GridLayout rows="*, auto, 64, 8" columns="*">
+  <Page @loaded="pgLoad" @unloaded="pgUnload" actionBarHidden="true">
+    <GridLayout rows="*, 104, auto" columns="*">
       <CollectionView
         rowSpan="4"
         :spanSize="getSpanSize"
@@ -12,7 +12,7 @@
       >
         <v-template name="header">
           <RGridLayout :rtl="RTL" rows="auto" columns="*, auto, 12">
-            <RLabel class="pageTitle" :text="`${currentComp}` | L" />
+            <RLabel class="pTitle tw tb" :text="`${currentComp}` | L" />
             <Button
               col="1"
               class="ico"
@@ -24,39 +24,39 @@
         <v-template name="lists">
           <RStackLayout :rtl="RTL" orientation="horizontal" padding="0 16 24">
             <GridLayout
-              rows="48"
-              columns="auto, auto"
+              rows="32"
+              columns="32, auto"
               class="segment rtl"
               v-for="(item, index) in topmenu"
               :key="index"
               :class="{
-                select: currentComp === item.title,
+                select: currentComp == item.title,
               }"
               @touch="touchSelector($event, item.title, item.title)"
             >
-              <Label class="ico" :text="icon[item.icon]" />
+              <Label class="ico tc vc" :text="icon[item.icon]" />
               <Label
                 col="1"
-                class="value"
-                :class="{ r: RTL }"
+                class="v vc"
+                :class="{ f: RTL }"
                 :hidden="!getRecipeCount(item.title)"
                 :text="getRecipeCount(item.title)"
               />
             </GridLayout>
             <GridLayout
               :hidden="currentComp !== 'Filtered recipes'"
-              rows="48"
-              columns="auto, auto"
+              rows="32"
+              columns="32, auto"
               class="segment rtl"
               :class="{
                 select: currentComp === 'Filtered recipes',
               }"
             >
-              <Label class="ico" :text="icon.filter" />
+              <Label class="ico tc vc" :text="icon.filter" />
               <Label
                 col="1"
-                class="value"
-                :class="{ r: RTL }"
+                class="v vc"
+                :class="{ f: RTL }"
                 :text="getRecipeCount('filtered')"
               />
             </GridLayout>
@@ -65,7 +65,7 @@
         <v-template name="detailed">
           <RGridLayout
             :rtl="RTL"
-            class="recipeItem"
+            class="recipe"
             :class="getItemPos(recipe.id)"
             rows="auto"
             columns="96, *"
@@ -97,31 +97,27 @@
               decodeHeight="96"
               loadMode="async"
             />
-            <StackLayout class="recipeInfo" col="1">
+            <StackLayout class="info vc" col="1">
               <RLabel :text="recipe.title" class="tb title tw" />
-              <RStackLayout :rtl="RTL" class="attrs"
-                ><Label class="ico sm rtl" :text="icon.cuisine" />
+              <RStackLayout :rtl="RTL" class="oh"
+                ><Label class="ico s rtl vc" :text="icon.cuisine" />
                 <Label class="attr" :text="recipe.cuisine | L" />
-                <Label class="ico sm" :text="icon.category" />
+                <Label class="ico s vc" :text="icon.category" />
                 <Label class="attr" :text="recipe.category | L" />
               </RStackLayout>
-              <RStackLayout
-                :rtl="RTL"
-                :hidden="!recipe.tags.length"
-                class="attrs"
-              >
-                <Label class="ico sm rtl" :text="icon.tag" />
+              <RStackLayout :rtl="RTL" :hidden="!recipe.tags.length" class="oh">
+                <Label class="ico s rtl vc" :text="icon.tag" />
                 <Label class="attr" :text="getTags(recipe.tags)" />
               </RStackLayout>
-              <RStackLayout :rtl="RTL" class="attrs">
-                <Label class="ico sm" :text="icon.star" />
+              <RStackLayout :rtl="RTL" class="oh">
+                <Label class="ico s vc" :text="icon.star" />
                 <Label class="attr" :text="getLocaleN(recipe.rating)" />
-                <Label class="ico sm" :text="icon.time" />
+                <Label class="ico s vc" :text="icon.time" />
                 <Label
                   class="attr"
                   :text="`${totalTime(recipe.prepTime, recipe.cookTime).time}`"
                 />
-                <Label class="ico sm" :text="icon.diff" />
+                <Label class="ico s vc" :text="icon.diff" />
                 <Label class="attr" :text="recipe.difficulty | L" />
               </RStackLayout>
             </StackLayout>
@@ -129,7 +125,7 @@
         </v-template>
         <v-template name="grid">
           <GridLayout
-            class="recipeItem grid"
+            class="recipe grid"
             :class="getItemPos(recipe.id)"
             rows="auto, auto"
             columns="*"
@@ -159,28 +155,24 @@
               :fontSize="imgWidth / 2"
               :text="icon.img"
             />
-            <StackLayout class="recipeInfo" row="1">
+            <StackLayout class="info" row="1">
               <RLabel :text="recipe.title" class="tb title tw" />
 
               <FlexboxLayout
                 flexWrap="wrap"
                 :justifyContent="RTL ? 'flex-end' : 'flex-start'"
               >
-                <RStackLayout :rtl="RTL" class="attrs">
-                  <Label class="ico sm rtl" :text="icon.cuisine" />
+                <RStackLayout :rtl="RTL" class="oh">
+                  <Label class="ico s rtl vc" :text="icon.cuisine" />
                   <Label class="attr" :text="recipe.cuisine | L" />
                 </RStackLayout>
-                <RStackLayout :rtl="RTL" class="attrs">
-                  <Label class="ico sm" :text="icon.category" />
+                <RStackLayout :rtl="RTL" class="oh">
+                  <Label class="ico s vc" :text="icon.category" />
                   <Label class="attr" :text="recipe.category | L" />
                 </RStackLayout>
               </FlexboxLayout>
-              <RStackLayout
-                :rtl="RTL"
-                :hidden="!recipe.tags.length"
-                class="attrs"
-              >
-                <Label class="ico sm rtl" :text="icon.tag" />
+              <RStackLayout :rtl="RTL" :hidden="!recipe.tags.length" class="oh">
+                <Label class="ico s rtl vc" :text="icon.tag" />
                 <Label class="attr" :text="getTags(recipe.tags)" />
               </RStackLayout>
             </StackLayout>
@@ -189,7 +181,7 @@
         <v-template name="photogrid">
           <RGridLayout
             :rtl="RTL"
-            class="recipeItem grid photogrid"
+            class="recipe grid photogrid"
             :class="getItemPos(recipe.id)"
             rows="auto, auto"
             columns="*"
@@ -219,7 +211,7 @@
               :fontSize="imgWidth / 2"
               :text="icon.img"
             />
-            <StackLayout class="recipeInfo" row="1">
+            <StackLayout class="info" row="1">
               <RLabel :text="recipe.title" class="tb title tw" />
             </StackLayout>
           </RGridLayout>
@@ -227,7 +219,7 @@
         <v-template name="simple">
           <RGridLayout
             :rtl="RTL"
-            class="recipeItem simple"
+            class="recipe simple"
             :class="getItemPos(recipe.id)"
             columns="*"
             @longPress="
@@ -238,20 +230,16 @@
               selectMode ? addToSelection(recipe.id) : viewRecipe(recipe.id)
             "
           >
-            <StackLayout class="recipeInfo">
+            <StackLayout class="info">
               <RLabel :text="recipe.title" class="tb title tw" />
-              <RStackLayout :rtl="RTL" class="attrs">
-                <Label class="ico sm rtl" :text="icon.cuisine" />
+              <RStackLayout :rtl="RTL" class="oh">
+                <Label class="ico s rtl vc" :text="icon.cuisine" />
                 <Label class="attr" :text="recipe.cuisine | L" />
-                <Label class="ico sm" :text="icon.category" />
+                <Label class="ico s vc" :text="icon.category" />
                 <Label class="attr" :text="recipe.category | L" />
               </RStackLayout>
-              <RStackLayout
-                :rtl="RTL"
-                :hidden="!recipe.tags.length"
-                class="attrs"
-              >
-                <Label class="ico sm rtl" :text="icon.tag" />
+              <RStackLayout :rtl="RTL" :hidden="!recipe.tags.length" class="oh">
+                <Label class="ico s rtl vc" :text="icon.tag" />
                 <Label class="attr" :text="getTags(recipe.tags)" />
               </RStackLayout>
             </StackLayout>
@@ -259,7 +247,7 @@
         </v-template>
         <v-template name="minimal">
           <GridLayout
-            class="recipeItem simple minimal"
+            class="recipe simple minimal"
             :class="getItemPos(recipe.id)"
             columns="*"
             @longPress="
@@ -270,7 +258,7 @@
               selectMode ? addToSelection(recipe.id) : viewRecipe(recipe.id)
             "
           >
-            <StackLayout class="recipeInfo">
+            <StackLayout class="info">
               <RLabel :text="recipe.title" class="tb title tw" />
             </StackLayout>
           </GridLayout>
@@ -278,66 +266,55 @@
       </CollectionView>
       <GridLayout
         rowSpan="2"
-        class="emptyState"
-        v-if="emptyState"
+        class="empty"
+        :hidden="!empty"
         rows="*, auto, auto"
         columns="*"
       >
-        <RLabel row="1" class="title" :text="emptyState.title | L" />
+        <RLabel row="1" class="tb t3 tw" :text="empty.title | L" />
         <Button
           row="2"
           v-if="
-            emptyState.action &&
-            (filterFavourites || filterTrylater || selCuisine)
+            empty.action && (filterFavourites || filterTrylater || selCuisine)
           "
-          class="text big"
+          class="text tb big fb"
           @loaded="setGravity"
-          :text="emptyState.sub | L"
-          @tap="emptyState.action"
+          :text="empty.sub | L"
+          @tap="empty.action"
         />
         <RLabel
+          class="tw"
           row="2"
-          v-else-if="!emptyState.action"
-          :text="emptyState.sub | L"
+          v-else-if="!empty.action"
+          :text="empty.sub | L"
         />
       </GridLayout>
-      <StackLayout row="1" rowSpan="2" margin="12 8">
-        <GridLayout
-          @loaded="tbLoad"
-          rows="auto, auto"
-          columns="auto"
-          class="appbar toolbar hal"
-          :class="{ r: RTL }"
-          :hidden="!showTools"
+      <GridLayout
+        row="1"
+        @loaded="tbLoad"
+        :rows="tbRows"
+        columns="auto"
+        class="appbar toolbar sidebar hal"
+        :class="{ r: RTL }"
+        :visibility="showTools ? 'visible' : 'hidden'"
+      >
+        <RStackLayout
+          v-for="(item, i) in tbItems"
+          :key="i"
+          :row="i"
+          :rtl="RTL"
+          class="tool"
+          @touch="touchTool($event, item.comp, item.title)"
         >
-          <RGridLayout
-            :rtl="RTL"
-            rows="48"
-            class="tool"
-            columns="auto, *"
-            @touch="touchTool($event, CookingTimer, 'timer')"
-          >
-            <Label class="ico" :text="icon.timer" />
-            <Label col="1" class="value" :text="'timer' | L" />
-          </RGridLayout>
-          <RGridLayout
-            :rtl="RTL"
-            row="1"
-            rows="48"
-            class="tool"
-            columns="auto, *"
-            @touch="touchTool($event, MealPlanner, 'planner')"
-          >
-            <Label class="ico" :text="icon.cal" />
-            <Label col="1" class="value" :text="'planner' | L" />
-          </RGridLayout>
-        </GridLayout>
-      </StackLayout>
+          <Label class="ico vc" :text="icon[item.icon]" />
+          <Label col="1" class="v vc" :text="item.title | L" />
+        </RStackLayout>
+      </GridLayout>
       <RGridLayout
         row="2"
         @loaded="abLoad"
         :rtl="RTL"
-        class="appbar home"
+        class="appbar"
         columns="auto, *, auto, auto, auto, auto"
         @swipe="stSwipe"
         @touch="() => null"
@@ -363,7 +340,7 @@
           "
         />
         <TextField
-          id="searchBar"
+          id="search"
           :class="{ f: RTL }"
           @loaded="focusField"
           autocapitalizationType="words"
@@ -376,7 +353,7 @@
         />
         <Label
           :hidden="!selectMode"
-          class="title"
+          class="tb tw vc lh4"
           :text="`${selection.length} ${$options.filters.L('sltd')}`"
           col="1"
         />
@@ -451,7 +428,7 @@ let lastShake = 0;
 let lastForce = 0;
 let shakeCount = 0;
 let typingTimer;
-let filterTimer;
+
 export default {
   data() {
     return {
@@ -554,6 +531,23 @@ export default {
     getRecipes() {
       return [{}, {}].concat(this.filteredRecipes);
     },
+    tbItems() {
+      return [
+        {
+          title: "timer",
+          icon: "timer",
+          comp: CookingTimer,
+        },
+        {
+          title: "planner",
+          icon: "cal",
+          comp: MealPlanner,
+        },
+      ];
+    },
+    tbRows() {
+      return "48, ".repeat(this.tbItems.length) + 48;
+    },
     noResultFor() {
       if (this.filterFavourites || this.filterTrylater || this.selCuisine)
         return "noRecsInL";
@@ -562,17 +556,18 @@ export default {
     imgWidth() {
       return Screen.mainScreen.widthDIPs / 2 - 24;
     },
-    emptyState() {
+    empty() {
       let rl = this.recipes.length;
       let fr = this.filteredRecipes.length;
       let ff = this.filterFavourites;
       let ftl = this.filterTrylater;
       let sq = this.searchQuery;
-      let r: {
+      interface EmptyState {
         title: string;
         sub: string;
         action?: Function;
-      };
+      }
+      let r = <EmptyState>{};
       if (!rl && !ff && !ftl) {
         r.title = "strAdd";
         r.sub = "plsAdd";
@@ -626,9 +621,8 @@ export default {
       setTimeout(() => {
         if (this.listview) this.listview.refresh();
       }, 1000);
-      this.showTools && this.toggleTools();
     },
-    onPageUnload() {
+    pgUnload() {
       if (this.shake) stopAccelerometerUpdates();
     },
     abLoad({ object }) {
@@ -656,19 +650,11 @@ export default {
       }
     },
     showBars() {
-      this.appbar.animate({
-        translate: { x: 0, y: 0 },
-        duration: 200,
-        curve: CoreTypes.AnimationCurve.ease,
-      });
+      this.animateBar(this.appbar, 1);
     },
     hideBars() {
       this.showTools && this.toggleTools();
-      this.appbar.animate({
-        translate: { x: 0, y: 64 },
-        duration: 200,
-        curve: CoreTypes.AnimationCurve.ease,
-      });
+      this.animateBar(this.appbar, 0);
     },
     getSpanSize(index) {
       return (this.layout == "grid" || this.layout == "photogrid") &&
@@ -736,22 +722,25 @@ export default {
     // Tools
     toggleTools() {
       if (this.showTools) {
-        this.toolbar.translateY = 0;
         this.toolbar
           .animate({
-            translate: { x: 0, y: 112 },
+            height: 0,
+            translate: { x: 0, y: 48 },
             duration: 200,
-            curve: CoreTypes.AnimationCurve.ease,
+            curve: CoreTypes.AnimationCurve.easeIn,
           })
           .then(() => (this.showTools = 0));
       } else {
+        this.toolbar.height = 1;
         this.showTools = 1;
-        this.toolbar.translateY = 112;
-        this.toolbar.animate({
-          translate: { x: 0, y: 0 },
-          duration: 200,
-          curve: CoreTypes.AnimationCurve.ease,
-        });
+        setTimeout(() => {
+          this.toolbar.animate({
+            height: 104,
+            duration: 200,
+            translate: { x: 0, y: 0 },
+            curve: CoreTypes.AnimationCurve.easeOut,
+          });
+        }, 1);
       }
     },
 
@@ -1126,24 +1115,16 @@ export default {
       });
     },
     touchSelector({ object, action }, comp, title) {
-      let selected = this.currentComp == comp;
-      object.className = action.match(/down|move/)
-        ? `segment r ${selected ? "select" : "fade"}`
-        : `segment r ${selected && "select"}`;
-      if (action == "up") this.navigateTo(comp, title);
-    },
-    touchRecipe({ object, action }) {
-      let classes = object.className;
-      if (!this.selectMode) {
-        object.className = action.match(/down|move/)
-          ? !classes.includes("fade")
-            ? classes + " fade"
-            : classes
-          : classes.replace(/ fade/g, "");
+      if (this.currentComp != title) {
+        this.touchFade(object, action);
+        if (action == "up") this.navigateTo(comp, title);
       }
     },
+    touchRecipe({ object, action }) {
+      if (!this.selectMode) this.touchFade(object, action);
+    },
     touchTool({ object, action }, comp, value) {
-      object.className = action.match(/down|move/) ? `tool fade` : `tool`;
+      this.touchFade(object, action);
       if (action == "up") this.navigateTo(comp, value, 1);
     },
   },
diff --git a/app/components/MealPlanner.vue b/app/components/MealPlanner.vue
index e37bca00..681f9029 100644
--- a/app/components/MealPlanner.vue
+++ b/app/components/MealPlanner.vue
@@ -6,34 +6,35 @@
         rowSpan="3"
         scrollBarIndicatorVisible="false"
       >
-        <StackLayout>
+        <StackLayout rows="auto, auto, auto, *">
           <RGridLayout :rtl="RTL" columns="*, auto, 12">
-            <Label class="pageTitle a" :text="'planner' | L" />
+            <Label class="pTitle tw tb a" :text="'planner' | L" />
             <Button col="1" class="ico" :text="icon.cog" @tap="navigateTo" />
           </RGridLayout>
-          <GridLayout class="monthSwitcher" columns="auto, *, auto">
-            <Button class="ico min" :text="icon.left" @tap="navigate(0)" />
-            <Label
-              class="month"
+          <GridLayout row="1" padding="0 16" columns="auto, *, auto">
+            <Button class="ico si" :text="icon.left" @tap="navigate(0)" />
+            <Button
+              class="t3"
               @touch="mYPicker"
               col="1"
               :text="formattedDate(0)"
             />
             <Button
-              class="ico min"
+              class="ico si"
               col="2"
               :text="icon.right"
               @tap="navigate(1)"
             />
           </GridLayout>
           <RGridLayout
+            row="2"
             :rtl="RTL"
             class="calendar"
             columns="*, *, *, *, *, *, *"
             :rows="calRows"
           >
             <Label
-              class="dayName sub rtl"
+              class="sub rtl t5 vc tc"
               :class="{ f: RTL }"
               :col="i"
               v-for="(d, i) in getDayNames"
@@ -50,85 +51,97 @@
               @tap="setDate(cal)"
             />
           </RGridLayout>
-          <StackLayout class="plans">
-            <RLabel
-              v-if="plannerView != 'd' && mealPlans.length"
-              class="date tb"
-              :text="formattedDate(1)"
-              textWrap="true"
-            />
-            <StackLayout v-for="(meal, i) in mealTypes" :key="'meal' + i">
-              <Label
-                :hidden="!getRecipes[meal]"
-                class="meal tb"
-                :class="[meal]"
-                :text="meal | L"
-              />
-              <RGridLayout
-                :rtl="RTL"
-                v-for="(plan, i) in getRecipes[meal]"
-                :key="meal + i"
-                class="plan"
-                columns="*, auto"
-              >
+          <StackLayout row="3" class="plans">
+            <CollectionView
+              @loaded="cvLoad"
+              for="item in mpItems"
+              :height="listHeight"
+            >
+              <v-template if="item.type == 0">
+                <RLabel class="date tb t2" :text="item.date" textWrap="true" />
+              </v-template>
+              <v-template if="item.type == 1">
+                <Label
+                  class="type t3"
+                  :class="{ tb: plannerView == 'd' }"
+                  :text="item.mealType | L"
+                />
+              </v-template>
+              <v-template if="item.type == 2">
                 <RGridLayout
                   :rtl="RTL"
-                  class="rtl"
-                  :hidden="!plan.recipeID"
-                  :columns="noImg ? '*' : '48, *'"
-                  @touch="touchRecipe"
-                  @tap="viewRecipe(plan.id)"
+                  class="plan vc"
+                  columns="auto, *, auto"
+                  @touch="!edit && touchRecipe"
+                  @tap="!edit && viewRecipe(item.id)"
                 >
                   <Image
                     class="imgHolder"
                     verticalAlignment="middle"
-                    v-if="!noImg && getRecipeImage(plan.recipeID)"
-                    :src="getRecipeImage(plan.recipeID)"
+                    v-if="!noImg && item.image"
+                    :src="item.image"
                     stretch="none"
                     decodeWidth="48"
                     decodeHeight="48"
                     loadMode="async"
                   />
                   <Label
-                    v-else-if="!noImg && !getRecipeImage(plan.recipeID)"
+                    v-else-if="!noImg && !item.image"
                     verticalAlignment="middle"
                     class="ico imgHolder"
                     @loaded="centerLabel($event, 17)"
                     width="48"
                     height="48"
-                    fontSize="24"
+                    fontSize="23"
                     :text="icon.img"
                   />
-                  <StackLayout class="planContent" col="1">
+                  <GridLayout rows="auto, auto" class="info vc" col="1">
+                    <RLabel :text="item.title" />
                     <RLabel
-                      class="title"
-                      :text="getRecipeTitle(plan.recipeID)"
+                      row="1"
+                      :hidden="!item.size"
+                      class="t6"
+                      :text="item.size"
                     />
-                    <RLabel class="attr" :text="getYield(plan.id)" />
-                  </StackLayout>
+                  </GridLayout>
+                  <Button
+                    :hidden="!edit"
+                    col="2"
+                    class="ico si"
+                    :text="icon.x"
+                    @tap="removeRecipe(item.id)"
+                  />
                 </RGridLayout>
-                <Label
-                  class="planContent tw"
-                  @loaded="centerLabel($event, 16)"
-                  :hidden="!plan.note"
-                  :text="plan.note"
-                />
-                <Button
-                  :hidden="!edit"
-                  col="1"
-                  class="ico min"
-                  :text="icon.x"
-                  @tap="removeRecipe(plan.id)"
-                />
-              </RGridLayout>
-            </StackLayout>
+              </v-template>
+              <v-template if="item.type == 3">
+                <RGridLayout :rtl="RTL" class="plan vc" columns="*, auto">
+                  <Label
+                    class="info lh4 tw"
+                    :class="{ note: !noImg }"
+                    @loaded="centerLabel($event, 16)"
+                    :hidden="!item.note"
+                    :text="item.note"
+                  />
+                  <Button
+                    :hidden="!edit"
+                    col="2"
+                    class="ico si"
+                    :text="icon.x"
+                    @tap="removeRecipe(item.id)"
+                  />
+                </RGridLayout>
+              </v-template>
+              <v-template>
+                <StackLayout class="listSpace"> </StackLayout>
+              </v-template>
+            </CollectionView>
           </StackLayout>
         </StackLayout>
       </ScrollView>
       <GridLayout rowSpan="2" rows="*, auto" v-if="!mealPlans.length">
-        <StackLayout row="1" class="emptyState">
-          <RLabel class="title" :text="'ehwmp' | L" />
-          <RLabel :text="'plsCrt' | L" />
+        <StackLayout row="1" class="empty">
+          <RLabel class="tb t3 tw" :text="'ehwmp' | L" />
+          <RLabel class="tw" :text="'plsCrt' | L" />
         </StackLayout>
       </GridLayout>
       <RGridLayout
@@ -172,12 +185,24 @@
         :action="hideBar"
         :onload="sbLoad"
       />
+      <Label
+        rowSpan="3"
+        class="edge hal"
+        :class="{ 'f r': RTL }"
+        @swipe="swipeBack($event, navigateBack)"
+      />
+      <Label
+        rowSpan="3"
+        class="edge har rtl"
+        :class="{ r: RTL, f: !RTL }"
+        @swipe="swipeBack($event, navigateBack)"
+      />
     </GridLayout>
   </Page>
 </template>
 
 <script lang="ts">
-import { Frame, Observable, CoreTypes, Screen } from "@nativescript/core";
+import { Frame, Observable, Screen } from "@nativescript/core";
 import { mapState, mapActions } from "vuex";
 import ViewRecipe from "./ViewRecipe.vue";
 import EditRecipe from "./EditRecipe.vue";
@@ -200,29 +225,16 @@ export default {
   data() {
     return {
       mealTypes: ["breakfast", "lunch", "dinner", "snacks"],
-      year: 2021,
-      monthNames: [
-        "January",
-        "February",
-        "March",
-        "April",
-        "May",
-        "June",
-        "July",
-        "August",
-        "September",
-        "October",
-        "November",
-        "December",
-      ],
+      year: 0,
       month: 0,
-      date: null,
+      date: 0,
       edit: 0,
       scrollPos: 1,
-      appbar: null,
-      snackbar: null,
+      appbar: 0,
+      snackbar: 0,
+      listView: 0,
       countdown: 5,
-      snackMsg: null,
+      snackMsg: 0,
       showUndo: 0,
       undo: 0,
       temp: 0,
@@ -241,6 +253,9 @@ export default {
     todaysTime() {
       return new Date(this.year, this.month, this.date, 0).getTime();
     },
+    listHeight() {
+      return Math.floor(Screen.mainScreen.heightDIPs);
+    },
     getRecipes() {
       if (this.mealPlans.length) {
         return this.mealPlans.reduce((acc, e) => {
@@ -253,6 +268,7 @@ export default {
     },
     calRows() {
       let h = (Screen.mainScreen.widthDIPs - 32) / 8;
+      if (h < 48) h = 48;
       let pv = this.plannerView;
       return pv != "d" ? `${h}, `.repeat(pv == "wk" ? 1 : 6) + h : 0;
     },
@@ -296,7 +312,7 @@ export default {
             date.setDate(date.getDate() - date.getDay() + this.mondayFirst),
             date.setDate(date.getDate() + (pv == "mnth" ? 41 : 6))
           )
-        : 0;
+        : [];
     },
     isExactlyToday() {
       let d = new Date();
@@ -307,9 +323,7 @@ export default {
       );
     },
     hasRecipes() {
-      return this.mealTypes.filter(
-        (e) => this.getRecipes[e] && this.getRecipes[e].length
-      ).length;
+      return this.mpItems.length > 1;
     },
     noImg() {
       return /simple|minimal/.test(this.layout);
@@ -317,12 +331,65 @@ export default {
     noAttr() {
       return /minimal/.test(this.layout);
     },
+    mpItems() {
+      let pv = this.plannerView;
+      let days =
+        pv == "wk"
+          ? this.getCal.slice(0, 7)
+          : [
+              {
+                d: this.date,
+                m: this.month,
+                y: this.year,
+              },
+            ];
+      let meals = {};
+      for (let i = 0; i < (pv == "wk" ? 7 : 1); i++)
+        meals[i] = this.getRecipesOn(days[i]);
+      let plans = [];
+      for (const k1 in meals) {
+        if (Object.keys(meals[k1]).length && pv != "d")
+          plans.push({
+            type: 0,
+            date: this.formattedDate(1, days[k1]),
+            d: days[k1].d,
+          });
+        if (Object.keys(meals[k1]).length) {
+          this.mealTypes.forEach((e) => {
+            if (meals[k1][e]) {
+              plans.push({
+                type: 1,
+                mealType: e,
+              });
+              meals[k1][e].forEach(({ id, recipeID, note }) => {
+                if (recipeID) {
+                  plans.push({
+                    type: 2,
+                    id,
+                    image: this.getRecipeImage(recipeID),
+                    title: this.getRecipeTitle(recipeID),
+                    size: this.getYield(id),
+                  });
+                } else {
+                  plans.push({
+                    type: 3,
+                    id,
+                    note,
+                  });
+                }
+              });
+            }
+          });
+        }
+      }
+      plans.push({});
+      return plans;
+    },
   },
   methods: {
     ...mapActions(["addMealPlanAction", "deleteMealPlanAction"]),
     pgLoad({ object }) {
       object.bindingContext = new Observable();
-      if (!this.date || this.date === new Date().getDate()) this.goToToday();
       this.showBar();
     },
     abLoad({ object }) {
@@ -331,6 +398,9 @@ export default {
     sbLoad({ object }) {
       this.snackbar = object;
     },
+    cvLoad({ object }) {
+      this.listView = object;
+    },
     svScroll(args) {
       let scrollUp;
       let y = args.scrollY;
@@ -338,19 +408,8 @@ export default {
         scrollUp = y < this.scrollPos;
         this.scrollPos = Math.abs(y);
         let ab = this.appbar.translateY;
-        if (!scrollUp && ab == 0) {
-          this.appbar.animate({
-            translate: { x: 0, y: 64 },
-            duration: 200,
-            curve: CoreTypes.AnimationCurve.ease,
-          });
-        } else if (scrollUp && ab == 64) {
-          this.appbar.animate({
-            translate: { x: 0, y: 0 },
-            duration: 200,
-            curve: CoreTypes.AnimationCurve.ease,
-          });
-        }
+        if (!scrollUp && ab == 0) this.animateBar(this.appbar, 0);
+        else if (scrollUp && ab == 64) this.animateBar(this.appbar, 1);
       }
     },
 
@@ -359,12 +418,7 @@ export default {
       object.android.setGravity(n);
     },
     showBar() {
-      // this.appbar.translateY = 0;
-      this.appbar.animate({
-        translate: { x: 0, y: 0 },
-        duration: 200,
-        curve: CoreTypes.AnimationCurve.ease,
-      });
+      this.animateBar(this.appbar, 1);
     },
     getrow(i) {
       return Math.floor(1 + i / 7);
@@ -380,16 +434,12 @@ export default {
     },
     getRecipeTitle(id) {
       let r = this.recipes.filter((e) => e.id === id)[0];
-      return r ? r.title : `[${this.$options.filters.L("resNF")}]`;
-    },
-    getRecipeTotalTime(id) {
-      let r = this.recipes.filter((e) => e.id === id)[0];
-      return r ? this.totalTime(r.prepTime, r.cookTime).time : "00:00";
+      return r ? r.title : `[ ${this.$options.filters.L("resNF")} ]`;
     },
     getYield(id) {
       let mp = this.mealPlans.filter((e) => e.id == id)[0];
       let r = this.recipes.filter((e) => e.id === mp.recipeID)[0];
-      return r ? `${this.getLocaleN(mp.quantity)} ${localize(r.yieldUnit)}` : 1;
+      return r ? `${this.getLocaleN(mp.quantity)} ${localize(r.yieldUnit)}` : 0;
     },
 
     // NavigationHandlers
@@ -447,7 +497,7 @@ export default {
       this.date = d.getDate();
     },
     dayClasses({ d, m }) {
-      let classes = "min ";
+      let classes = "sst ";
       let dt1 = new Date();
       let dt2 = new Date(this.year, m, d, 0).getTime();
       if (
@@ -457,7 +507,7 @@ export default {
         d == dt1.getDate()
       )
         classes += "tb ";
-      classes += this.date == d && this.month == m ? "hl " : "fb ";
+      classes += this.date == d && this.month == m ? "select " : "fb ";
       if (!!this.mealPlans.filter((e) => e.date == dt2).length)
         classes += "accent ";
       if (this.month != m) classes += "sub";
@@ -471,12 +521,18 @@ export default {
     },
     toggleEditMode() {
       this.edit = !this.edit;
+      this.listView.refresh();
     },
     openMonthYearPicker() {
+      let monthNames = [...Array(12).keys()].map((m) =>
+        new Intl.DateTimeFormat("en-IN", {
+          month: "short",
+        }).format(new Date(2021, m, 1, 0))
+      );
       this.$showModal(DMYPicker, {
         props: {
           title: "gtD",
-          monthNames: this.monthNames,
+          monthNames,
           currentD: this.date,
           currentM: this.month,
           currentY: this.year,
@@ -621,7 +677,7 @@ export default {
           this.showUndo = 1;
           this.snackMsg = message;
           this.countdown = 5;
-          this.animateBar(this.snackbar, 1).then(() => {
+          this.animateBar(this.snackbar, 1, 1).then(() => {
             let a = 5;
             clearInterval(barTimer);
             barTimer = setInterval(() => {
@@ -651,9 +707,23 @@ export default {
       this.undo = 1;
     },
 
+    // ListHandlers
+    getRecipesOn(d) {
+      let date = new Date(d.y, d.m, d.d, 0, 0, 0);
+      if (this.mealPlans.length) {
+        return this.mealPlans.reduce((acc, e) => {
+          if (e.date == date.getTime()) {
+            acc[e.mealType] = [...(acc[e.mealType] || []), e];
+          }
+          return acc;
+        }, {});
+      } else return {};
+    },
+
     // Helpers
-    formattedDate(v) {
-      let d = new Date(this.year, this.month, this.date, 0, 0, 0);
+    formattedDate(v, fd) {
+      if (fd) fd = new Date(fd.y, fd.m, fd.d, 0, 0, 0);
+      let dt = new Date(this.year, this.month, this.date, 0, 0, 0);
       let today = new Date();
       let myToday = new Date(
         today.getFullYear(),
@@ -685,9 +755,9 @@ export default {
         options.day = "numeric";
         options.month = "short";
       }
-      let date = new Intl.DateTimeFormat(null, options).format(d);
+      let date = new Intl.DateTimeFormat(null, options).format(fd || dt);
       let val;
-      switch (d.getTime()) {
+      switch ((fd || dt).getTime()) {
         case ystr:
           val = "ystr";
           break;
@@ -699,18 +769,22 @@ export default {
           break;
       }
       return v
-        ? [ystr, tdy, tmrw].some((e) => e == d.getTime())
+        ? [ystr, tdy, tmrw].some((e) => e == (fd || dt).getTime())
           ? localize(val)
           : date
         : date;
     },
     mYPicker({ object, action }) {
-      object.className = action.match(/down|move/) ? "month fade" : "month";
+      this.touchFade(object, action);
       if (action == "up") this.openMonthYearPicker();
     },
     touchRecipe({ object, action }) {
-      object.className = action.match(/down|move/) ? "fade" : "";
+      this.touchFade(object, action);
     },
   },
+  created() {
+    // if (!this.date || this.date === new Date().getDate()) this.goToToday();
+    this.goToToday();
+  },
 };
 </script>
diff --git a/app/components/ViewRecipe.vue b/app/components/ViewRecipe.vue
index c89ae113..d4cc75cd 100644
--- a/app/components/ViewRecipe.vue
+++ b/app/components/ViewRecipe.vue
@@ -10,7 +10,11 @@
           paddingBottom="24"
         >
           <StackLayout>
-            <RLabel class="pageTitle" paddingBottom="8" :text="recipe.title" />
+            <RLabel
+              class="pTitle tw tb"
+              paddingBottom="8"
+              :text="recipe.title"
+            />
             <StackLayout
               :class="{ f: RTL }"
               margin="0 12"
@@ -22,10 +26,7 @@
                 v-for="n in 5"
                 :key="n"
                 :text="recipe.rating < n ? icon.star : icon.starred"
-                @tap="
-                  recipe.rating == 1 && n == 1 ? setRating(0) : setRating(n)
-                "
-                @longPress="setRating(n)"
+                @touch="touchRate($event, n)"
               />
             </StackLayout>
           </StackLayout>
@@ -108,8 +109,7 @@
               </RGridLayout>
               <StackLayout @loaded="onIngsLoad">
                 <RLabel
-                  padding="0 16"
-                  class="sectionTitle"
+                  class="section t2 tb tw"
                   :hidden="!recipe.ingredients.length"
                   :text="getTitleCount('ings', 'ingredients')"
                 />
@@ -118,18 +118,17 @@
                   orientation="horizontal"
                   v-for="(item, index) in recipe.ingredients"
                   :key="index + 'ing'"
-                  class="ingredient"
+                  class="check"
                   @touch="touchIngredient($event, index)"
                 >
-                  <Button class="ico min" :text="icon.uncheck" />
-                  <RLabel class="value tw" :text="getIngredientItem(item)" />
+                  <Button class="ico si" :text="icon.uncheck" />
+                  <RLabel class="v tw" :text="getIngredientItem(item)" />
                 </RStackLayout>
               </StackLayout>
               <StackLayout @loaded="onInsLoad">
                 <RLabel
-                  padding="0 16"
                   :hidden="!recipe.instructions.length"
-                  class="sectionTitle"
+                  class="section t2 tb tw"
                   :text="getTitleCount('inss', 'instructions')"
                 />
                 <RStackLayout
@@ -138,40 +137,43 @@
                   @touch="touchInstruction"
                   v-for="(instruction, index) in recipe.instructions"
                   :key="index + 'ins'"
-                  class="instruction"
+                  class="check"
                 >
-                  <Button class="count ico min" :text="getLocaleN(index + 1)" />
-                  <RLabel class="value tw" :text="instruction" />
+                  <Button class="tb t3 ico si" :text="getLocaleN(index + 1)" />
+                  <RLabel class="v tw" :text="instruction" />
                 </RStackLayout>
               </StackLayout>
               <RLabel
                 @loaded="onCmbLoad"
-                padding="0 16"
                 :hidden="!recipe.combinations.length"
-                class="sectionTitle"
+                class="section t2 tb tw"
                 :text="getTitleCount('cmbs', 'combinations')"
               />
               <Button
                 v-for="(combination, index) in recipe.combinations"
                 :key="index + 'comb'"
-                class="combination"
+                class="comb tw hal lh4 fb"
+                :class="{ r: RTL }"
                 :text="getCombinationTitle(combination)"
                 @tap="viewCombination(combination)"
               />
               <RLabel
                 @loaded="onNosTLoad"
-                padding="0 16"
                 :hidden="!recipe.notes.length"
-                class="sectionTitle"
+                class="section t2 tb tw"
                 :text="getTitleCount('nos', 'notes')"
               />
-              <StackLayout @loaded="onNosLoad" padding="0 16"> </StackLayout>
-              <Label class="dateInfo sub tw" :text="getDates().uc" />
+              <StackLayout @loaded="onNosLoad"> </StackLayout>
+              <Label
+                padding="32 16 16"
+                class="lh4 t5 sub tw"
+                :text="getDates().uc"
+              />
             </StackLayout>
           </ScrollView>
           <RLabel
             @loaded="onStickyLoad"
-            class="sectionTitle sticky"
+            class="t2 tb tw sticky"
             :hidden="!stickyTitle"
             :text="stickyTitle"
           />
@@ -262,10 +264,23 @@
           stretch="aspectFit"
           @loaded="onImgViewLoad"
           :src="recipe.image"
-          class="photoviewer"
+          class="imgViewer"
         />
       </AbsoluteLayout>
       <WebView @loaded="wvLoad" hidden />
+      <Label
+        rowSpan="3"
+        colSpan="3"
+        class="edge hal"
+        :class="{ 'f r': RTL }"
+        @swipe="swipeBack"
+      />
+      <Label
+        rowSpan="3"
+        colSpan="3"
+        class="edge har rtl f"
+        @swipe="swipeBack"
+      />
     </GridLayout>
   </Page>
 </template>
@@ -328,7 +343,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["icon", "recipes", "RTL"]),
+    ...mapState(["icon", "recipes", "RTL", "awakeViewer"]),
     tempYieldQuantity() {
       return Math.abs(this.yieldMultiplier) > 0
         ? Math.abs(parseFloat(this.yieldMultiplier))
@@ -363,7 +378,7 @@ export default {
       object.bindingContext = new Observable();
       if (this.yieldMultiplier == this.recipe.yieldQuantity)
         this.yieldMultiplier = this.recipe.yieldQuantity;
-      utils.keepScreenOn(1);
+      if (this.awakeViewer) utils.keepScreenOn(1);
       this.syncCombinations();
       this.view = object.page.getViewById("printview");
     },
@@ -465,27 +480,15 @@ export default {
       }
     },
     showBars() {
-      this.appbar.animate({
-        translate: { x: 0, y: 0 },
-        duration: 200,
-        curve: CoreTypes.AnimationCurve.ease,
-      });
-      this.sidebar.animate({
-        translate: { x: 0, y: 0 },
-        duration: 200,
-        curve: CoreTypes.AnimationCurve.ease,
-      });
+      this.animateBar(this.appbar, 1);
+      this.animateBar(this.sidebar, 1);
     },
     hideBars() {
-      this.appbar.animate({
-        translate: { x: 0, y: 64 },
-        duration: 200,
-        curve: CoreTypes.AnimationCurve.ease,
-      });
+      this.animateBar(this.appbar, 0);
       this.sidebar.animate({
         translate: { x: this.RTL ? -64 : 64, y: 0 },
         duration: 200,
-        curve: CoreTypes.AnimationCurve.ease,
+        curve: CoreTypes.AnimationCurve.easeIn,
       });
     },
 
@@ -554,7 +557,7 @@ export default {
           "triedInfo",
           this.niceDate(this.recipe.lastTried)
         );
-        this.animateBar(this.toastbar, 1);
+        this.animateBar(this.toastbar, 1, 1);
         let a = 10;
         clearInterval(barTimer);
         barTimer = setInterval(() => a-- < 1 && this.hideBar(), 1000);
@@ -657,9 +660,7 @@ export default {
       // });
     },
     touchIngredient({ object, action }, index) {
-      object.className = action.match(/down|move/)
-        ? "ingredient fade"
-        : "ingredient";
+      this.touchFade(object, action);
       if (action == "up") this.checkChange(object, index);
     },
     checkChange(obj, index) {
@@ -681,25 +682,23 @@ export default {
     },
     touchInstruction({ object, action }) {
       let hasDone = object.className.includes("done");
-      object.className = action.match(/down|move/)
-        ? `instruction ${hasDone ? "done" : "fade"}`
-        : `instruction ${hasDone ? "done" : ""}`;
+      if (!hasDone) this.touchFade(object, action);
       if (action == "up") this.stepDone(object);
     },
     stepDone(object) {
       let a = object;
       if (a.className.includes("done")) {
-        a.className = "instruction";
+        a.className = "check";
         this.stepsDid--;
       } else {
-        a.className = "instruction done";
+        a.className = "check done";
         this.stepsDid++;
       }
     },
     clearSteps() {
       this.stepsDid = 0;
       for (let i = 1; i < this.inscon.getChildrenCount(); i++) {
-        this.inscon.getChildAt(i).className = "instruction";
+        this.inscon.getChildAt(i).className = "check";
       }
     },
     getDates() {
@@ -838,11 +837,16 @@ export default {
       });
       if (setDate) this.$navigateBack();
     },
-    setRating(rating) {
-      if (rating !== this.recipe.rating || rating === 1) {
+    touchRate({ object, action }, r) {
+      this.touchFade(object, action);
+      if (action == "up") this.setRating(r);
+    },
+    setRating(r) {
+      if (r !== this.recipe.rating || r === 1) {
+        if (this.recipe.rating == 1 && r == 1) r = 0;
         this.setRatingAction({
           id: this.currentRecipeID,
-          rating,
+          rating: r,
         });
       }
     },
@@ -861,7 +865,7 @@ export default {
     createNote(note) {
       let regex = /(https?:\/\/[^\s]+)/g;
       const lbl = new RLabel();
-      lbl.className = "note";
+      lbl.className = "note tw";
       lbl.textWrap = true;
       let fString = new FormattedString();
       let arr = note.split(regex);
@@ -928,7 +932,7 @@ export default {
             height: sw,
             translate: { x: this.RTL ? -16 : 112 - sw, y: (sh - sw) / 3 },
             duration: 200,
-            curve: CoreTypes.AnimationCurve.ease,
+            curve: CoreTypes.AnimationCurve.easeOut,
           })
         )
         .then(() =>
@@ -936,7 +940,7 @@ export default {
             height: sh,
             translate: { x: this.RTL ? -16 : 112 - sw, y: -((sh - sw) / 6) },
             duration: 200,
-            curve: CoreTypes.AnimationCurve.ease,
+            curve: CoreTypes.AnimationCurve.easeOut,
           })
         );
     },
@@ -949,7 +953,7 @@ export default {
         height: sw,
         translate: { x: this.RTL ? -16 : 112 - sw, y: (sh - sw) / 3 },
         duration: 200,
-        curve: CoreTypes.AnimationCurve.ease,
+        curve: CoreTypes.AnimationCurve.easeIn,
       })
         .then(() =>
           pv.animate({
@@ -957,7 +961,7 @@ export default {
             height: 96,
             translate: { x: 0, y: 0 },
             duration: 200,
-            curve: CoreTypes.AnimationCurve.ease,
+            curve: CoreTypes.AnimationCurve.easeIn,
           })
         )
         .then(() =>
@@ -1112,9 +1116,8 @@ export default {
 
     // Helpers
     touchYield({ object, action }) {
-      object.className = action.match(/down|move/)
-        ? "value accent fade"
-        : "value accent";
+      this.touchFade(object, action);
+
       if (action == "up") this.changeYield();
     },
   },
diff --git a/app/components/modals/Action.vue b/app/components/modals/Action.vue
index b935cd09..0304c386 100644
--- a/app/components/modals/Action.vue
+++ b/app/components/modals/Action.vue
@@ -1,9 +1,5 @@
 <template>
-  <Page
-    @loaded="transparentPage"
-    backgroundColor="transparent"
-    :class="theme"
-  >
+  <Page @loaded="mLoad" backgroundColor="transparent" :class="theme">
     <GridLayout
       columns="*"
       :rows="`auto, auto, ${stretch ? '*' : 'auto'}, auto`"
@@ -30,13 +26,13 @@
       <RGridLayout :rtl="RTL" row="3" columns="auto, *, auto" class="actions">
         <Button
           :hidden="!action"
-          class="text sm"
+          class="text tb st fb"
           :text="action | L"
           @tap="$modal.close(action)"
         />
         <Button
           col="2"
-          class="text sm"
+          class="text tb st fb"
           :text="'cBtn' | L"
           @tap="$modal.close(0)"
         />
@@ -158,12 +154,7 @@ export default {
       }
     },
     touch({ object, action }): void {
-      let classes = object.className;
-      object.className = action.match(/down|move/)
-        ? !classes.includes("fade")
-          ? classes + " fade"
-          : classes
-        : classes.replace(/ fade/g, "");
+      this.touchFade(object, action);
     },
   },
   created() {
diff --git a/app/components/modals/ActionWithSearch.vue b/app/components/modals/ActionWithSearch.vue
index b837d020..09014e14 100644
--- a/app/components/modals/ActionWithSearch.vue
+++ b/app/components/modals/ActionWithSearch.vue
@@ -1,9 +1,5 @@
 <template>
-  <Page
-    @loaded="transparentPage"
-    backgroundColor="transparent"
-    :class="theme"
-  >
+  <Page @loaded="mLoad" backgroundColor="transparent" :class="theme">
     <GridLayout columns="*" rows="auto, auto, *, auto" class="modal">
       <RLabel class="title" :text="title | L" />
       <StackLayout
@@ -29,26 +25,22 @@
       </ListView>
       <Label
         row="2"
-        class="noResInfo"
-        :hidden="recipes.length"
-        :text="'recListEmp' | L"
-      />
-      <Label
-        row="2"
-        class="noResInfo"
-        :hidden="filteredRecipes.length || !searchQuery"
-        :text="'noRecs' | L"
+        padding="16"
+        lineHeight="4"
+        class="tc tw"
+        :hidden="!noResult"
+        :text="noResult | L"
       />
       <RGridLayout :rtl="RTL" row="3" columns="auto, *, auto" class="actions">
         <Button
           :hidden="!action"
-          class="text sm"
+          class="text tb st fb"
           :text="action | L"
           @tap="$modal.close(action)"
         />
         <Button
           col="2"
-          class="text sm"
+          class="text tb st fb"
           :text="'cBtn' | L"
           @tap="$modal.close(0)"
         />
@@ -82,6 +74,12 @@ export default {
         })
         .filter((e) => this.recipeFilter(e));
     },
+    noResult() {
+      if (!this.recipes.length) return "recListEmp";
+      else if (!this.filteredRecipes.length && this.searchQuery)
+        return "noRecs";
+      else 0;
+    },
   },
   methods: {
     tapAction(recipe) {
@@ -101,9 +99,7 @@ export default {
       );
     },
     touch({ object, action }, recipe) {
-      object.className = action.match(/down|move/)
-        ? "listItem fade"
-        : "listItem ";
+      this.touchFade(object, action);
       if (action == "up") this.tapAction(recipe);
     },
   },
diff --git a/app/components/modals/Confirm.vue b/app/components/modals/Confirm.vue
index 802ad536..b0c39776 100644
--- a/app/components/modals/Confirm.vue
+++ b/app/components/modals/Confirm.vue
@@ -1,6 +1,6 @@
 <template>
   <Page
-    @loaded="transparentPage"
+    @loaded="mLoad"
     backgroundColor="transparent"
     :class="theme"
   >
@@ -16,13 +16,13 @@
         <Button
           v-if="cancelButtonText"
           col="1"
-          class="text sm"
+          class="text tb st fb"
           :text="cancelButtonText | L"
           @tap="$modal.close(0)"
         />
         <Button
           col="2"
-          class="text sm"
+          class="text tb st fb"
           :text="okButtonText | L"
           @tap="$modal.close(1)"
         />
diff --git a/app/components/modals/DMYPicker.vue b/app/components/modals/DMYPicker.vue
index e1982df0..b057703c 100644
--- a/app/components/modals/DMYPicker.vue
+++ b/app/components/modals/DMYPicker.vue
@@ -1,6 +1,6 @@
 <template>
   <Page
-    @loaded="transparentPage"
+    @loaded="mLoad"
     backgroundColor="transparent"
     :class="theme"
   >
@@ -33,13 +33,13 @@
       <RGridLayout :rtl="RTL" row="2" columns="*, auto, auto" class="actions">
         <Button
           col="1"
-          class="text sm"
+          class="text tb st fb"
           :text="'cBtn' | L"
           @tap="$modal.close(0)"
         />
         <Button
           col="2"
-          class="text sm"
+          class="text tb st fb"
           :text="'SET' | L"
           @tap="$modal.close(selected)"
         />
diff --git a/app/components/modals/Filter.vue b/app/components/modals/Filter.vue
index 795cdb80..b342a363 100644
--- a/app/components/modals/Filter.vue
+++ b/app/components/modals/Filter.vue
@@ -5,19 +5,19 @@
       <ScrollView orientation="horizontal" row="1" @loaded="onScrollLoad">
         <RStackLayout :rtl="RTL" class="filters" orientation="horizontal">
           <GridLayout
-            rows="48"
-            columns="auto, auto"
+            rows="32"
+            columns="32, auto"
             class="segment rtl"
             v-for="(item, index) in pathList"
             :key="index"
-            :class="{ select: filterType === item.type }"
+            :class="{ select: filter === item.type }"
             @touch="touchSelector($event, item.type)"
           >
-            <Label class="ico" :text="icon[item.type]" />
+            <Label class="ico tc vc" :text="icon[item.type]" />
             <Label
               :hidden="!item.title"
-              class="value"
-              :class="{ r: RTL }"
+              class="v vc"
+              :class="{ f: RTL }"
               :text="item.title"
               col="1"
             />
@@ -41,16 +41,16 @@
         columns="auto, *, auto, auto"
         class="actions"
       >
-        <Button class="text sm" :text="'rest' | L" @tap="resetFilter" />
+        <Button class="text tb st fb" :text="'rstBtn' | L" @tap="resetFilter" />
         <Button
           col="2"
-          class="text sm"
+          class="text tb st fb"
           :text="'cBtn' | L"
           @tap="$modal.close()"
         />
         <Button
           col="3"
-          class="text sm"
+          class="text tb st fb"
           :text="'apply' | L"
           @tap="applyFilter"
         />
@@ -66,7 +66,7 @@ let filterTimer;
 export default {
   data() {
     return {
-      filterType: "cuisine",
+      filter: "cuisine",
       localCuisine: null,
       localCategory: null,
       localTag: null,
@@ -100,7 +100,7 @@ export default {
           title: localize(this.localTag),
         },
       ];
-      switch (this.filterType) {
+      switch (this.filter) {
         case "cuisine":
           return arr.slice(0, -2);
         case "category":
@@ -109,7 +109,7 @@ export default {
       return arr;
     },
     filterList() {
-      switch (this.filterType) {
+      switch (this.filter) {
         case "cuisine":
           return this.cuisineList;
         case "category":
@@ -175,19 +175,19 @@ export default {
   methods: {
     ...mapActions(["setCuisine", "setCategory", "setTag", "clearFilter"]),
     pgLoad(args) {
-      this.transparentPage(args);
+      this.mLoad(args);
       this.localCuisine = this.selCuisine;
       this.localCategory = this.selCategory;
       this.localTag = this.selTag;
-      if (this.localCuisine) this.filterType = "category";
-      if (this.localCategory && this.localTag) this.filterType = "tag";
+      if (this.localCuisine) this.filter = "category";
+      if (this.localCategory && this.localTag) this.filter = "tag";
       this.scrollToRight();
     },
     onScrollLoad(args) {
       this.scrollview = args.object;
     },
     setFilterType(type) {
-      this.filterType = type;
+      this.filter = type;
       switch (type) {
         case "cuisine":
           this.localCategory = null;
@@ -210,14 +210,14 @@ export default {
     },
     setRecipeFilter(item) {
       this.reset = 0;
-      switch (this.filterType) {
+      switch (this.filter) {
         case "cuisine":
           this.localCuisine = item;
-          this.filterType = "category";
+          this.filter = "category";
           break;
         case "category":
           this.localCategory = item;
-          if (this.tagList.length) this.filterType = "tag";
+          if (this.tagList.length) this.filter = "tag";
           break;
         default:
           this.localTag = item;
@@ -233,23 +233,19 @@ export default {
       this.$modal.close(this.reset);
     },
     resetFilter() {
-      this.filterType = "cuisine";
+      this.filter = "cuisine";
       this.localCuisine = this.localCategory = this.localTag = null;
       this.reset = 1;
     },
     touch({ object, action }, item) {
-      object.className = action.match(/down|move/)
-        ? "listItem fade"
-        : "listItem ";
+      this.touchFade(object, action);
       if (action == "up") this.setRecipeFilter(item);
     },
     touchSelector({ object, action }, type) {
-      let selected = this.filterType == type;
-      let classes = `segment ${this.RTL ? "rtl" : ""} `;
-      object.className = action.match(/down|move/)
-        ? `${classes}${selected ? "select" : "fade"}`
-        : `${classes}${selected && "select"}`;
-      if (action == "up") this.setFilterType(type);
+      if (this.filter != type) {
+        this.touchFade(object, action);
+        if (action == "up") this.setFilterType(type);
+      }
     },
   },
 };
diff --git a/app/components/modals/Prompt.vue b/app/components/modals/Prompt.vue
index 8a3c9fb9..1f6df716 100644
--- a/app/components/modals/Prompt.vue
+++ b/app/components/modals/Prompt.vue
@@ -1,6 +1,6 @@
 <template>
   <Page
-    @loaded="transparentPage"
+    @loaded="mLoad"
     backgroundColor="transparent"
     :class="theme"
   >
@@ -28,13 +28,13 @@
       <RGridLayout :rtl="RTL" row="2" columns="*, auto, auto" class="actions">
         <Button
           col="1"
-          class="text sm"
+          class="text tb st fb"
           :text="'cBtn' | L"
           @tap="$modal.close(0)"
         />
         <Button
           col="2"
-          class="text sm"
+          class="text tb st fb"
           :text="action | L"
           @tap="$modal.close(text)"
         />
diff --git a/app/components/modals/TimePickerHM.vue b/app/components/modals/TimePickerHM.vue
index a5fa110c..814d93b2 100644
--- a/app/components/modals/TimePickerHM.vue
+++ b/app/components/modals/TimePickerHM.vue
@@ -1,6 +1,6 @@
 <template>
   <Page
-    @loaded="transparentPage"
+    @loaded="mLoad"
     backgroundColor="transparent"
     :class="theme"
   >
@@ -28,13 +28,13 @@
       <RGridLayout :rtl="RTL" row="2" columns="*, auto, auto" class="actions">
         <Button
           col="1"
-          class="text sm"
+          class="text tb st fb"
           :text="'cBtn' | L"
           @tap="$modal.close(0)"
         />
         <Button
           col="2"
-          class="text sm"
+          class="text tb st fb"
           :text="'SET' | L"
           @tap="$modal.close(selectedTime)"
         />
diff --git a/app/components/modals/TimePickerHMS.vue b/app/components/modals/TimePickerHMS.vue
index 27b7f5a0..17763902 100644
--- a/app/components/modals/TimePickerHMS.vue
+++ b/app/components/modals/TimePickerHMS.vue
@@ -1,9 +1,5 @@
 <template>
-  <Page
-    @loaded="transparentPage"
-    backgroundColor="transparent"
-    :class="theme"
-  >
+  <Page @loaded="mLoad" backgroundColor="transparent" :class="theme">
     <GridLayout rows="auto, auto, auto" class="modal">
       <RLabel class="title" :text="title | L" />
       <StackLayout row="1">
@@ -47,17 +43,22 @@
       >
         <Button
           v-if="showPreset"
-          class="text sm"
+          class="text tb st fb"
           :text="'prstBtn' | L"
           @tap="$modal.close('presets')"
         />
         <Button
           col="2"
-          class="text sm"
+          class="text tb st fb"
           :text="'cBtn' | L"
           @tap="$modal.close(0)"
         />
-        <Button col="3" class="text sm" :text="action | L" @tap="sendRespose" />
+        <Button
+          col="3"
+          class="text tb st fb"
+          :text="action | L"
+          @tap="sendRespose"
+        />
       </RGridLayout>
     </GridLayout>
   </Page>
diff --git a/app/components/settings/About.vue b/app/components/settings/About.vue
index 0cc63e92..455426bb 100644
--- a/app/components/settings/About.vue
+++ b/app/components/settings/About.vue
@@ -3,15 +3,15 @@
     <RGridLayout :rtl="RTL" rows="*, auto" columns="auto, *">
       <ListView rowSpan="2" colSpan="2" class="options" for="item in items">
         <v-template if="$index == 0">
-          <Label class="pageTitle" :text="'About' | L" />
+          <Label class="pTitle tw tb" :text="'About' | L" />
         </v-template>
         <v-template if="$index == 1">
           <StackLayout class="app-info">
             <Image class="icon" src="res://logo" stretch="none" />
-            <Label class="name tb tac" :text="'EnRecipes' | L" />
-            <Label :text="getVersion" class="version tb tac" />
+            <Label class="name tb tc" :text="'EnRecipes' | L" />
+            <Label :text="getVersion" class="version tb tc" />
 
-            <Label class="info tac tw" :text="'appInfo' | L" />
+            <Label class="info tc tw" :text="'appInfo' | L" />
           </StackLayout>
         </v-template>
         <v-template if="$index == 8">
@@ -37,6 +37,13 @@
       <GridLayout row="1" class="appbar rtl" rows="*" columns="auto, *">
         <Button class="ico" :text="icon.back" @tap="$navigateBack()" />
       </GridLayout>
+      <Label rowSpan="2" class="edge hal rtl" @swipe="swipeBack" />
+      <Label
+        rowSpan="2"
+        colSpan="2"
+        class="edge har rtl f"
+        @swipe="swipeBack"
+      />
     </RGridLayout>
   </Page>
 </template>
@@ -103,7 +110,7 @@ export default {
       Utils.openUrl(url);
     },
     touch({ object, action }, url) {
-      object.className = action.match(/down|move/) ? "option fade" : "option";
+      this.touchFade(object, action);
       if (action == "up") this.openURL(url);
     },
   },
diff --git a/app/components/settings/AppSettings.vue b/app/components/settings/AppSettings.vue
index 7980c93b..94792d01 100644
--- a/app/components/settings/AppSettings.vue
+++ b/app/components/settings/AppSettings.vue
@@ -5,6 +5,13 @@
       <GridLayout row="1" class="appbar rtl" rows="*" columns="auto, *">
         <Button class="ico" :text="icon.back" @tap="$navigateBack()" />
       </GridLayout>
+      <Label rowSpan="2" class="edge hal rtl" @swipe="swipeBack" />
+      <Label
+        rowSpan="2"
+        colSpan="2"
+        class="edge har rtl f"
+        @swipe="swipeBack"
+      />
     </RGridLayout>
   </Page>
 </template>
diff --git a/app/components/settings/CTSettings.vue b/app/components/settings/CTSettings.vue
index e642efd7..42c7f266 100644
--- a/app/components/settings/CTSettings.vue
+++ b/app/components/settings/CTSettings.vue
@@ -5,6 +5,13 @@
       <GridLayout row="1" class="appbar rtl" rows="*" columns="auto, *">
         <Button class="ico" :text="icon.back" @tap="$navigateBack()" />
       </GridLayout>
+      <Label rowSpan="2" class="edge hal rtl" @swipe="swipeBack" />
+      <Label
+        rowSpan="2"
+        colSpan="2"
+        class="edge har rtl f"
+        @swipe="swipeBack"
+      />
     </RGridLayout>
   </Page>
 </template>
@@ -113,6 +120,9 @@ export default {
         props: {
           title: "tmrSnd",
           list: getTones.tones.map((e) => e.title),
+          selected: getTones.tones.findIndex(
+            (e) => e.title == this.timerSound.title
+          ),
         },
       }).then(
         (tone) =>
diff --git a/app/components/settings/Database.vue b/app/components/settings/Database.vue
index 70db2573..1f2d7185 100644
--- a/app/components/settings/Database.vue
+++ b/app/components/settings/Database.vue
@@ -22,8 +22,15 @@
         columns="auto, *"
       >
         <ActivityIndicator :busy="!!progress" />
-        <RLabel col="1" class="title" :text="progress" />
+        <RLabel margin="0 12" col="1" class="tb tw vc lh4" :text="progress" />
       </RGridLayout>
+      <Label rowSpan="2" class="edge hal rtl" @swipe="swipeBack" />
+      <Label
+        rowSpan="2"
+        colSpan="2"
+        class="edge har rtl f"
+        @swipe="swipeBack"
+      />
     </RGridLayout>
   </Page>
 </template>
@@ -474,7 +481,7 @@ export default {
     showToast(data) {
       this.animateBar(this.appbar, 0).then(() => {
         this.toast = data;
-        this.animateBar(this.toastbar, 1);
+        this.animateBar(this.toastbar, 1, 1);
         utils.timer(5, (val) => !val && this.hideBar());
       });
     },
diff --git a/app/components/settings/Interface.vue b/app/components/settings/Interface.vue
index f870f929..b604c16c 100644
--- a/app/components/settings/Interface.vue
+++ b/app/components/settings/Interface.vue
@@ -5,6 +5,13 @@
       <GridLayout row="1" class="appbar rtl" rows="*" columns="auto, *">
         <Button class="ico" :text="icon.back" @tap="$navigateBack()" />
       </GridLayout>
+      <Label rowSpan="2" class="edge hal rtl" @swipe="swipeBack" />
+      <Label
+        rowSpan="2"
+        colSpan="2"
+        class="edge har rtl f"
+        @swipe="swipeBack"
+      />
     </RGridLayout>
   </Page>
 </template>
@@ -42,9 +49,7 @@ export default {
           icon: "theme",
           rtl: 0,
           title: "Theme",
-          subTitle: localize(
-            ApplicationSettings.getString("theme", "sysDef")
-          ),
+          subTitle: localize(ApplicationSettings.getString("theme", "sysDef")),
           action: this.selectThemes,
         },
         {
@@ -71,6 +76,7 @@ export default {
         props: {
           title: "lang",
           list: [...languages],
+          selected: this.applang,
         },
       }).then((action) => {
         if (action && this.applang !== action) {
@@ -97,6 +103,7 @@ export default {
         props: {
           title: "Theme",
           list: ["Light", "Dark", "Black", "sysDef", "sysDefB"],
+          selected: ApplicationSettings.getString("theme", "sysDef"),
         },
       }).then((action) => {
         if (
@@ -116,13 +123,10 @@ export default {
         props: {
           title: "listVM",
           list: ["detailed", "grid", "photogrid", "simple", "minimal"],
+          selected: this.layout,
         },
-      }).then((action) => {
-        if (action && this.layoutMode !== action) {
-          let act = action.toLowerCase();
-          ApplicationSettings.setString("layout", act);
-          this.setLayout(act);
-        }
+      }).then((mode) => {
+        if (mode && this.layout !== mode) this.setLayout(mode.toLowerCase());
       });
     },
   },
diff --git a/app/components/settings/MPSettings.vue b/app/components/settings/MPSettings.vue
index fc0624df..898f46ed 100644
--- a/app/components/settings/MPSettings.vue
+++ b/app/components/settings/MPSettings.vue
@@ -5,6 +5,13 @@
       <GridLayout row="1" class="appbar rtl" rows="*" columns="auto, *">
         <Button class="ico" :text="icon.back" @tap="$navigateBack()" />
       </GridLayout>
+      <Label rowSpan="2" class="edge hal rtl" @swipe="swipeBack" />
+      <Label
+        rowSpan="2"
+        colSpan="2"
+        class="edge har rtl f"
+        @swipe="swipeBack"
+      />
     </RGridLayout>
   </Page>
 </template>
@@ -60,7 +67,8 @@ export default {
       this.$showModal(Action, {
         props: {
           title: "calVM",
-          list: ["mnth", "wk", "d"],
+          list: ["d", "wk", "mnth"],
+          selected: this.plannerView,
         },
       }).then((res) => {
         if (res && this.plannerView != res) this.setPlannerView(res);
@@ -70,7 +78,8 @@ export default {
       this.$showModal(Action, {
         props: {
           title: "admp",
-          list: ["otay", "otam", "otaw", "nvr"],
+          list: ["otaw", "otam", "otay", "nvr"],
+          selected: this.planDeletion,
         },
       }).then((res) => {
         if (res && this.planDeletion != res) this.setPlanDeletion(res);
diff --git a/app/components/settings/Options.vue b/app/components/settings/Options.vue
index 5a1d31a8..8cea49fb 100644
--- a/app/components/settings/Options.vue
+++ b/app/components/settings/Options.vue
@@ -13,6 +13,13 @@
         <Button class="ico" :text="icon.back" @tap="$navigateBack()" />
       </GridLayout>
       <Toast :onload="tbLoad" :toast="toast" :action="hideBar" />
+      <Label rowSpan="2" class="edge hal rtl" @swipe="swipeBack" />
+      <Label
+        rowSpan="2"
+        colSpan="2"
+        class="edge har rtl f"
+        @swipe="swipeBack"
+      />
     </RGridLayout>
   </Page>
 </template>
@@ -35,7 +42,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["icon", "shake", "RTL"]),
+    ...mapState(["icon", "shake", "RTL", "edgeSwipe", "awakeViewer"]),
     items() {
       return [
         {},
@@ -47,12 +54,28 @@ export default {
           checked: !!this.shake,
           action: this.toggleShake,
         },
+        {
+          type: "switch",
+          icon: "awake",
+          title: "ksavr",
+          subTitle: localize("ksavrInfo"),
+          checked: !!this.awakeViewer,
+          action: this.toggleAwake,
+        },
+        {
+          type: "switch",
+          icon: "edge",
+          title: "esgb",
+          subTitle: localize("esgbInfo"),
+          checked: !!this.edgeSwipe,
+          action: this.toggleSwipe,
+        },
         {},
       ];
     },
   },
   methods: {
-    ...mapActions(["setShake"]),
+    ...mapActions(["setShake", "toggleEdgeSwipe", "toggleAwakeViewer"]),
     pgLoad({ object }) {
       object.bindingContext = new Observable();
     },
@@ -63,17 +86,23 @@ export default {
       this.toastbar = object;
     },
 
-    // SHAKE VIEW RANDOM RECIPE
     toggleShake() {
       let checked = this.shake;
       if (checked && !utils.hasAccelerometer())
         this.showToast(localize("noAccSensor"));
-      else this.setShake(!checked | 0);
+      else this.setShake(+!checked);
     },
+    toggleSwipe() {
+      this.toggleEdgeSwipe(+!this.edgeSwipe);
+    },
+    toggleAwake() {
+      this.toggleAwakeViewer(+!this.awakeViewer);
+    },
+
     showToast(data) {
       this.animateBar(this.appbar, 0).then(() => {
         this.toast = data;
-        this.animateBar(this.toastbar, 1);
+        this.animateBar(this.toastbar, 1, 1);
         utils.timer(5, (val) => !val && this.hideBar());
       });
     },
diff --git a/app/components/settings/Reset.vue b/app/components/settings/Reset.vue
index 4598ae97..d81d0b92 100644
--- a/app/components/settings/Reset.vue
+++ b/app/components/settings/Reset.vue
@@ -12,6 +12,13 @@
         <Button class="ico" :text="icon.back" @tap="$navigateBack()" />
       </GridLayout>
       <Toast :onload="tbLoad" :toast="toast" :action="hideToast" />
+      <Label rowSpan="2" class="edge hal rtl" @swipe="swipeBack" />
+      <Label
+        rowSpan="2"
+        colSpan="2"
+        class="edge har rtl f"
+        @swipe="swipeBack"
+      />
     </RGridLayout>
   </Page>
 </template>
@@ -94,7 +101,7 @@ export default {
     showToast() {
       this.animateBar(this.appbar, 0).then(() => {
         this.toast = localize("restDone");
-        this.animateBar(this.toastbar, 1);
+        this.animateBar(this.toastbar, 1, 1);
       });
       utils.timer(5, (val) => !val && this.hideToast());
     },
diff --git a/app/components/sub/OptionsList.vue b/app/components/sub/OptionsList.vue
index 5193bd04..13af9827 100644
--- a/app/components/sub/OptionsList.vue
+++ b/app/components/sub/OptionsList.vue
@@ -1,7 +1,7 @@
 <template>
   <ListView colSpan="2" rowSpan="2" class="options" for="item in items">
     <v-template if="$index == 0">
-      <Label class="pageTitle" :text="title | L" />
+      <Label class="pTitle tw tb" :text="title | L" />
     </v-template>
     <v-template if="item.type == 'switch'">
       <RGridLayout
@@ -10,7 +10,7 @@
         class="option"
         @touch="touch($event, item.data, item.action)"
       >
-        <Label class="ico rtl" :text="icon[item.icon]" />
+        <Label class="ico vc rtl" :text="icon[item.icon]" />
         <StackLayout col="1" class="info">
           <RLabel :text="item.title | L" class="tw" />
           <RLabel
@@ -35,7 +35,11 @@
         class="option"
         @touch="touch($event, item.data, item.action)"
       >
-        <Label class="ico" :class="{ rtl: item.rtl }" :text="icon[item.icon]" />
+        <Label
+          class="ico vc"
+          :class="{ rtl: item.rtl }"
+          :text="icon[item.icon]"
+        />
         <StackLayout col="1" class="info">
           <RLabel :text="item.title | L" class="tw" />
           <RLabel
@@ -75,7 +79,7 @@ export default {
       );
     },
     touch({ object, action }, data, localAction) {
-      object.className = action.match(/down|move/) ? "option fade" : "option";
+      this.touchFade(object, action);
       if (action == "up") localAction ? localAction(data) : this.action(data);
     },
   },
diff --git a/app/components/sub/SnackBar.vue b/app/components/sub/SnackBar.vue
index d2e55621..a1be4083 100644
--- a/app/components/sub/SnackBar.vue
+++ b/app/components/sub/SnackBar.vue
@@ -7,8 +7,8 @@
     @swipe="action"
     @loaded="onload"
   >
-    <Button @tap="action" :text="count" class="ico countdown tb" />
-    <RLabel @tap="action" class="title" col="1" :text="msg | L" />
+    <Button @tap="action" :text="count" class="ico t3 accent tb" />
+    <RLabel @tap="action" margin="0 4" class="tb tw vc lh4" col="1" :text="msg | L" />
     <Button class="ico fab rtl" :text="icon.undo" @tap="undo" col="3" />
   </RGridLayout>
 </template>
diff --git a/app/components/sub/Timer.vue b/app/components/sub/Timer.vue
index 7caa801e..3f53e68a 100644
--- a/app/components/sub/Timer.vue
+++ b/app/components/sub/Timer.vue
@@ -6,7 +6,7 @@
     class="timer"
   >
     <Button
-      class="ico min rtl"
+      class="ico si rtl"
       :text="done ? icon.ring : timer.isPaused ? icon.start : icon.pause"
       @tap="!done && toggleProgress()"
     />
@@ -18,7 +18,7 @@
       <RLabel :text="timer.label" class="tb title tw a" />
       <RLabel
         :hidden="!timer.recipeID && done"
-        @touch="!done && touch($event)"
+        @touch="!timer.recipeID && !done && touch($event)"
         :text="getRecipeTitle"
         class="a"
         :class="timer.recipeID ? 'sub' : 'accent'"
@@ -48,7 +48,7 @@
     />
     <Button
       col="4"
-      class="ico min"
+      class="ico si"
       :text="icon.x"
       @tap="removeTimer(timer.id, done)"
     />
@@ -61,7 +61,7 @@ import { ApplicationSettings } from "@nativescript/core";
 import { localize } from "@nativescript/localize";
 import { mapState, mapActions } from "vuex";
 import ActionWithSearch from "../modals/ActionWithSearch";
-import ViewRecipe from "../ViewRecipe";
+import EditRecipe from "../EditRecipe";
 import * as utils from "~/shared/utils";
 import { EvtBus } from "~/main";
 export default {
@@ -150,13 +150,6 @@ export default {
       );
       this.initTimer();
     },
-    viewRecipe(recipeID) {
-      this.$navigateTo(ViewRecipe, {
-        props: {
-          recipeID,
-        },
-      });
-    },
     attachRecipe() {
       this.$showModal(ActionWithSearch, {
         props: {
@@ -251,12 +244,7 @@ export default {
 
     // HELPERS
     touch({ object, action }) {
-      let classes = object.className;
-      classes = action.match(/down|move/)
-        ? !classes.includes("fade")
-          ? classes + " fade"
-          : classes
-        : classes.replace(/ fade/g, "");
+      this.touchFade(object, action);
       if (action == "up") this.attachRecipe();
     },
   },
diff --git a/app/components/sub/Toast.vue b/app/components/sub/Toast.vue
index 81a0f45b..69f017ef 100644
--- a/app/components/sub/Toast.vue
+++ b/app/components/sub/Toast.vue
@@ -10,7 +10,7 @@
     @loaded="onload"
   >
     <StackLayout minHeight="48">
-      <RLabel class="title msg" :text="toast" />
+      <RLabel padding="14 20" :text="toast" />
     </StackLayout>
   </GridLayout>
 </template>
diff --git a/app/fonts/enrecipes.ttf b/app/fonts/EnRecipes.ttf
similarity index 89%
rename from app/fonts/enrecipes.ttf
rename to app/fonts/EnRecipes.ttf
index d315bebba136a8945e9a331c6d23e6681f67e333..c2573d9501b943c55a6253056bc9e67e125ba7c8 100644
GIT binary patch
delta 1146
zcmaJ=OK1~e5T0q$MC@j_yJmNrl0NciR-3h!G@GTVt!ZldT1C*L9(AqJh<yawN~L0Q
z6sZS|77-CILbXRPf<5-&!IN0<(2EG-RY4HJ;%w5!P|=0|@y$Q;eX}$Fe}5To-NgbR
z05m`mY|wq`%#jEuIC5lJr*VFA+RV!n@7@BSmvH*BIhUukk+8MyyF7LMlC$~C0m6#_
zL+)JGyy#tjeh=XIGM&eAWN_ZFHxS++9L!D6FSdejiSQSSIXE>t*=y=d=mWqok;2Nf
zxtNCx{3N_exP8W)&YpdJjRJ<>P{5P??A$yhO5bSi?yC_@-9rOYFHc}sqVV3<#B#Eo
zm88M2+RF(7*Q<sHC5g4m9NT1LB{`vn<E$XC@vxeZCH9av-Pf1)wxr|nbPIN71dm6^
zcm%=oXIJ;M#{d8P;*P-WDkafxme{0R*iXMC+SY7Wfdwyg!U&v!3y_DKundm?Iz+eB
z6N&X>G!*bV#12`C=&|S#4Edc7cLxnJ9K%>t3Hj0QWYOsm-Eu3+6r>NJ9@C;q7b>BE
z7?DJ`Bj68d(OA93<d*s{64MIATTcR7G!(|NnY=CTHY_XElNuQ~EGsGGM!_vuP6{`z
zf>;9?l?k{QnuCmMn^PIa6<}1CiwPpHDoUJhY~<sLqSo#;!_YLNU~GR>EfSUYc=)>2
z>i*YO4JCf9q5Qn7I#qS%^_uhU+Q8?33s;iJSn7sW(2R0hEzXHuVjTSkU9qZYU9&oB
zUBdRnmVj>P2RP7*R7l<TrztyaYC~TaQrVo9>WTbLOQ{t-g=$~cnv=nk3mmrSR^6DQ
z%T=_h>C(49aSJDd$>!bcDv4_bQV-2Bz3gPUQUuNVm?^nmSQY&>Va+erDup&QdLxuH
zjl|NkJLkBg-=V>7Jy(FOZ;=PPYiTs8<M_*BvK{SqfK2J}&`P5(;=5gmg>m=+`%44I
uH@MWy>Fnf{e0B~}FaxJceClxL9vfs~60Xo~&cfWDqf##A`-|dX>c(#yY0wh@

delta 526
zcmeB}$T+2kv7UjEfq{XWp@D&!!N5OQ--us`Ee$BL2Z$4ra}x{1!!Dg-U|^I1@<Y-S
ziwl6X0FV!&Inr|~)9yFTtpM_Y*kMgZYGR7as>c%;7@Smq@@5%80rnaeP9Q%9$XCh8
zEvXP=P`C)>Hvsi0<m4w?CW<z(E@NPDUI0`uDL1jAfFY3K7XyQf36QUlmzbL>{(HMM
zkRJlnFs~rLxCH1>AaMOMafdsj^CU)ZM(52wjCv0BSD7RP1SFZ*#Kqlob&dGN#Q2SL
zb=}0p*_b2+1SFW)f#N#4MgpRu0!F$zKyh|0nP3x>U>TVZ6O#}bMy*gGNlBqlNg*Lg
z1dC}ll6w5+i$X2vg&PSp{_bQxCvjy^2m^6a_MGN;ew(ih+$<m;Fx+|RKLtil-r!=+
z=&|{Qivr_h0k=s)Kyi>R4~8EM93V9eOp^;egeRYNTg{)ESCpEZS&&-Hkjjw9P&B#K
eT~`ZD3@DS#kjYR0q>Is{Cf{*a#4v)#qXqzqvUkV;

diff --git a/app/main.ts b/app/main.ts
index f44bab0c..67e20a23 100644
--- a/app/main.ts
+++ b/app/main.ts
@@ -3,47 +3,51 @@ import store from './store'
 import {
   Application,
   AndroidApplication,
-  ApplicationSettings,
   Utils,
   Frame,
 } from '@nativescript/core'
+import {
+  setNumber,
+  getNumber,
+  getString,
+} from '@nativescript/core/application-settings'
 import { localize } from '@nativescript/localize'
 import EnRecipes from './components/EnRecipes.vue'
 import EditRecipe from './components/EditRecipe.vue'
 import MealPlanner from './components/MealPlanner.vue'
 import CookingTimer from './components/CookingTimer.vue'
-
 // import GroceryList from './components/GroceryList.vue'
 
 import * as utils from '~/shared/utils'
 
 export const EvtBus = new Vue()
 
-let renderView = EnRecipes
+let renderView: any = EnRecipes
 
 import CollectionView from '@nativescript-community/ui-collectionview/vue'
 Vue.use(CollectionView)
 
-import { RGridLayout, RStackLayout, RDockLayout, RLabel } from './rtl-ui'
+import { RGridLayout, RStackLayout, RLabel } from './rtl-ui'
 Vue.registerElement('RGridLayout', () => RGridLayout)
 Vue.registerElement('RStackLayout', () => RStackLayout)
-Vue.registerElement('RDockLayout', () => RDockLayout)
 Vue.registerElement('RLabel', () => RLabel)
 
 import { myMixin } from './shared/mixins'
 Vue.mixin(myMixin)
 
+Vue.filter('L', localize)
+
 const initFrame = () => {
-  const vm = store
+  const s = store
   // MainInit
-  vm.commit('setTheme', ApplicationSettings.getString('theme', 'sysDef'))
-  vm.commit('initRecipes')
-  vm.commit('initMealPlans')
-  vm.commit('initListItems')
-  vm.commit('initTimerPresets')
-  if (!Object.keys(vm.state.timerSound).length) {
-    let hasTimerSound = ApplicationSettings.getString('timerSound', null)
-    vm.commit(
+  s.commit('setTheme', getString('theme', 'sysDef'))
+  s.commit('initRecipes')
+  s.commit('initMealPlans')
+  s.commit('initListItems')
+  s.commit('initTimerPresets')
+  if (!Object.keys(s.state.timerSound).length) {
+    let hasTimerSound = getString('timerSound', null)
+    s.commit(
       'setTimerSound',
       hasTimerSound ? JSON.parse(hasTimerSound) : utils.getTones().defaultTone
     )
@@ -51,15 +55,14 @@ const initFrame = () => {
   // InitFrame
   const window = Application.android.startActivity.getWindow()
   const decorView = window.getDecorView()
-  utils.setBarColors(window, decorView, vm.state.theme)
-  Frame.topmost().className = vm.state.theme
+  utils.setBarColors(window, decorView, s.state.theme)
+  Frame.topmost().className = s.state.theme
 }
 const showOverLockscreen = () => {
   let ctx = Utils.ad.getApplicationContext()
   const pm = ctx.getSystemService(android.content.Context.POWER_SERVICE)
   let isScreenOff = !pm.isInteractive()
   if (isScreenOff) {
-    console.log('showOverLockscreen')
     const window = Application.android.startActivity.getWindow()
     const windowMgr = android.view.WindowManager
     const flags =
@@ -82,19 +85,21 @@ const intentListener = ({ intent, android }: any) => {
         break
       case 'timer':
         renderView = CookingTimer
-        switch (ApplicationSettings.getNumber('isTimer', 0)) {
+        switch (getNumber('isTimer', 0)) {
           case 0:
             // Closing all modals if available before navigation
-            let modals = Frame.topmost()._getRootModalViews()
-            for (let i = modals.length - 1; i >= 0; i--) {
-              Frame.topmost()
-                ._getRootModalViews()
-                [i].closeModal()
+            if (Frame.topmost()) {
+              let modals = Frame.topmost()._getRootModalViews()
+              for (let i = modals.length - 1; i >= 0; i--) {
+                Frame.topmost()
+                  ._getRootModalViews()
+                  [i].closeModal()
+              }
             }
             Vue.navigateTo(CookingTimer as any, {
               animated: false,
             })
-            ApplicationSettings.setNumber('isTimer', 1)
+            setNumber('isTimer', 1)
             break
           case 2:
             Vue.navigateBack()
@@ -108,17 +113,6 @@ const intentListener = ({ intent, android }: any) => {
   }
 }
 
-Application.on(Application.resumeEvent, () => {
-  showOverLockscreen()
-  if (
-    utils.sysLocale() !==
-    ApplicationSettings.getString('sysLocale', utils.sysLocale())
-  ) {
-    Frame.reloadPage()
-    utils.updateLocale()
-  }
-})
-
 Application.on(Application.launchEvent, (args) => {
   utils.updateLocale()
   store.commit('setRTL')
@@ -130,6 +124,15 @@ Application.on(Application.launchEvent, (args) => {
   Frame.on(Frame.loadedEvent, initFrame)
 })
 
+Application.on(Application.resumeEvent, () => {
+  showOverLockscreen()
+  if (utils.sysLocale() !== getString('sysLocale', utils.sysLocale())) {
+    Frame.reloadPage()
+    utils.updateLocale()
+    store.commit('setRTL')
+  }
+})
+
 Application.on(Application.exitEvent, () => {
   renderView = EnRecipes
   Application.android.off(
@@ -140,8 +143,6 @@ Application.on(Application.exitEvent, () => {
 
 Vue.config.silent = false
 
-Vue.filter('L', localize)
-
 new Vue({
   store,
   render: (h) => h('Frame', [h(renderView)]),
diff --git a/app/rtl-ui/dock-layout/index.android.ts b/app/rtl-ui/dock-layout/index.android.ts
deleted file mode 100644
index 14a51f8e..00000000
--- a/app/rtl-ui/dock-layout/index.android.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { Property, DockLayout } from '@nativescript/core'
-
-class Common extends DockLayout {
-  public rtl: boolean
-}
-const RTLProperty = new Property({
-  name: 'rtl',
-  defaultValue: false,
-  valueConverter(v): boolean {
-    return !!v
-  },
-})
-RTLProperty.register(Common)
-
-export class RDockLayout extends Common {
-  public initNativeView(): void {
-    super.initNativeView()
-    this._updateDirection()
-  }
-  [RTLProperty.setNative](rtl: boolean): void {
-    this.rtl = rtl
-    this._updateDirection()
-  }
-  public addChild(view): void {
-    super.addChild(view)
-    if (view.nativeViewProtected) {
-      this._updateDirection()
-    }
-  }
-  public removeChild(view): void {
-    super.removeChild(view)
-    if (view.nativeViewProtected) {
-      this._updateDirection()
-    }
-  }
-  private _updateDirection(): void {
-    let v = this
-    setTimeout(() => {
-      v.nativeViewProtected.setRotationY(v.rtl ? 180 : 0)
-      for (let i = 0; i < v.getChildrenCount(); i++) {
-        let c = v.getChildAt(i).className
-        let r = /(^|\s)rtl($|\s)/.test(c)
-        let a = /(^|\s)a($|\s)/.test(c)
-        if (!v.rtl) r = !r
-        if (/(^|\s)a($|\s)/.test(c))
-          v.getChildAt(i).horizontalAlignment = a ? 'left' : 'right'
-        v.getChildAt(i).nativeView &&
-          v.getChildAt(i).nativeView.setRotationY(v.rtl ? (r ? 0 : 180) : 0)
-      }
-    }, 1)
-  }
-}
diff --git a/app/rtl-ui/dock-layout/index.d.ts b/app/rtl-ui/dock-layout/index.d.ts
deleted file mode 100644
index 3f95f04e..00000000
--- a/app/rtl-ui/dock-layout/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { RDockLayout } from './index.android'
diff --git a/app/rtl-ui/index.ts b/app/rtl-ui/index.ts
index 674bad71..6c0b5824 100644
--- a/app/rtl-ui/index.ts
+++ b/app/rtl-ui/index.ts
@@ -1,4 +1,3 @@
 export { RGridLayout } from './grid-layout'
 export { RStackLayout } from './stack-layout'
-export { RDockLayout } from './dock-layout'
 export { RLabel } from './label'
diff --git a/app/shared/mixins.ts b/app/shared/mixins.ts
index 45ea1afe..5844b35d 100644
--- a/app/shared/mixins.ts
+++ b/app/shared/mixins.ts
@@ -5,7 +5,7 @@ const Intl = require('nativescript-intl')
 
 export const myMixin = {
   methods: {
-    transparentPage({ object }) {
+    mLoad({ object }) {
       object._dialogFragment
         .getDialog()
         .getWindow()
@@ -15,16 +15,14 @@ export const myMixin = {
           )
         )
     },
-    animateBar(obj, op) {
-      if (op) {
-        obj.translateY = 64
-        obj.opacity = 0
-      }
+    animateBar(obj, x: number, y?: number) {
+      let c = CoreTypes.AnimationCurve
+      if (y) obj.translateY = 64
       return obj.animate({
-        opacity: op,
-        translate: { x: 0, y: op ? 0 : 64 },
+        opacity: 1,
+        translate: { x: 0, y: x ? 0 : 64 },
         duration: 200,
-        curve: CoreTypes.AnimationCurve.ease,
+        curve: x ? c.easeOut : c.easeIn,
       })
     },
     totalTime(prepTime, cookTime) {
@@ -47,7 +45,19 @@ export const myMixin = {
       ;(args.object || args).android.setGravity(this.RTL ? 5 : 3)
     },
     getLocaleN(n) {
-      return new Intl.NumberFormat(null).format(n)
+      return new Intl.NumberFormat(null).format(Number(n))
+    },
+    touchFade(object, action) {
+      let c = object.className
+      object.className = action.match(/down|move/)
+        ? !c.includes('fade')
+          ? c + ' fade'
+          : c
+        : c.replace(/ fade/g, '')
+    },
+    swipeBack({ direction }, method) {
+      if (this.$store.state.edgeSwipe)
+        if (direction == 1) method ? method(0) : this.$navigateBack()
     },
   },
 }
diff --git a/app/shared/utils.ts b/app/shared/utils.ts
index 6c10bf52..7d8bff9f 100644
--- a/app/shared/utils.ts
+++ b/app/shared/utils.ts
@@ -328,12 +328,12 @@ export function shareImage(image, subject, title) {
   share(intent, subject)
 }
 
-export function keepScreenOn(bool) {
+export function keepScreenOn(n: number) {
   let ctx =
     Application.android.foregroundActivity || Application.android.startActivity
   let window = ctx.getWindow()
   let flag = android.view.WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
-  bool ? window.addFlags(flag) : window.clearFlags(flag)
+  n ? window.addFlags(flag) : window.clearFlags(flag)
 }
 
 // TIMER NOTIFICATION
@@ -600,6 +600,8 @@ export function updateLocale() {
     ctx.createConfigurationContext(config)
     res.updateConfiguration(config, res.getDisplayMetrics())
     ApplicationSettings.setNumber('RTL', config.getLayoutDirection() | 0)
+  } else {
+    ApplicationSettings.setNumber('RTL', sysRTL() | 0)
   }
   ApplicationSettings.setString('sysLocale', sysLocale())
 }
diff --git a/app/store.ts b/app/store.ts
index ce64ea19..517a74b6 100644
--- a/app/store.ts
+++ b/app/store.ts
@@ -246,6 +246,8 @@ export default new Vuex.Store({
       calv: '\ue941',
       mpd: '\ue942',
       madd: '\ue943',
+      awake: '\ue944',
+      edge: '\ue945',
     },
     sortType: 'random',
     language: [
@@ -264,15 +266,15 @@ export default new Vuex.Store({
       },
       {
         locale: 'en-IN',
-        title: 'English (IN)',
+        title: 'English (India)',
       },
       {
         locale: 'en-GB',
-        title: 'English (UK)',
+        title: 'English (United Kingdom)',
       },
       {
         locale: 'en-US',
-        title: 'English (US)',
+        title: 'English (United States)',
       },
       {
         locale: 'es',
@@ -284,15 +286,15 @@ export default new Vuex.Store({
       },
       {
         locale: 'fr-BE',
-        title: 'Français (BE)',
+        title: 'Français (Belgium)',
       },
       {
         locale: 'fr-CA',
-        title: 'Français (CA)',
+        title: 'Français (Canada)',
       },
       {
         locale: 'fr-CH',
-        title: 'Français (CH)',
+        title: 'Français (Switzerland)',
       },
       {
         locale: 'hi',
@@ -306,14 +308,14 @@ export default new Vuex.Store({
         locale: 'it',
         title: 'Italiano',
       },
-      // {
-      //   locale: 'ja',
-      //   title: '日本語',
-      // },
-      // {
-      //   locale: 'ml',
-      //   title: 'മലയാളം',
-      // },
+      {
+        locale: 'ja',
+        title: '日本語',
+      },
+      {
+        locale: 'ml',
+        title: 'മലയാളം',
+      },
       {
         locale: 'nb-NO',
         title: 'Norsk bokmål',
@@ -328,7 +330,7 @@ export default new Vuex.Store({
       },
       {
         locale: 'pt-BR',
-        title: 'Português (BR)',
+        title: 'Português (Brazil)',
       },
       {
         locale: 'ru',
@@ -364,8 +366,18 @@ export default new Vuex.Store({
     RTL: getNumber('RTL', 0),
     plannerView: getString('plannerView', 'wk'),
     planDeletion: getString('planDeletion', 'nvr'),
+    edgeSwipe: getNumber('edgeSwipe', 1),
+    awakeViewer: getNumber('awakeViewer', 1),
   },
   mutations: {
+    toggleAwakeViewer(state) {
+      state.awakeViewer = +!state.awakeViewer
+      setNumber('awakeViewer', state.awakeViewer)
+    },
+    toggleEdgeSwipe(state) {
+      state.edgeSwipe = +!state.edgeSwipe
+      setNumber('edgeSwipe', state.edgeSwipe)
+    },
     setPlanDeletion(state, s) {
       state.planDeletion = s
       setString('planDeletion', s)
@@ -483,6 +495,7 @@ export default new Vuex.Store({
     },
     setLayout(state, type) {
       state.layout = type
+      setString('layout', type)
     },
     setSortType(state, sortType) {
       state.sortType = sortType
@@ -817,24 +830,21 @@ export default new Vuex.Store({
         let c = state.planDeletion
         let date = new Date()
         let d = new Date()
-        if (c != 'nvr') {
-          d.setHours(0, 0, 0, 0)
-          let ld =
-            c == 'otay'
-              ? 365
-              : c == 'otam'
-              ? new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()
-              : 7
-          d.setDate(d.getDate() - ld)
-        }
+        d.setHours(0, 0, 0, 0)
+        let ld =
+          c == 'otay'
+            ? 365
+            : c == 'otam'
+            ? new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()
+            : 7
+        d.setDate(d.getDate() - ld)
 
         db.select(`SELECT * FROM mealPlans`).then((res) =>
-          res.forEach((p: any) => {
-            if (p.date < d.getTime())
-              // DeletingOldMealPlans
-              db.execute(`DELETE FROM mealPlans WHERE id = '${p.id}'`)
-            else state.mealPlans.push(p)
-          })
+          res.forEach((p: any) =>
+            c !== 'nvr' && p.date < d.getTime()
+              ? db.execute(`DELETE FROM mealPlans WHERE id = '${p.id}'`)
+              : state.mealPlans.push(p)
+          )
         )
       }
     },
@@ -1024,6 +1034,12 @@ export default new Vuex.Store({
     },
   },
   actions: {
+    toggleAwakeViewer({ commit }) {
+      commit('toggleAwakeViewer')
+    },
+    toggleEdgeSwipe({ commit }) {
+      commit('toggleEdgeSwipe')
+    },
     setPlanDeletion({ commit }, s) {
       commit('setPlanDeletion', s)
     },
diff --git a/package-lock.json b/package-lock.json
index 16671ff8..fd3a110b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "@akylas/nativescript-sqlite": "^3.3.12",
         "@nativescript-community/ui-collectionview": "^4.0.32",
-        "@nativescript/core": "^8.0.7",
+        "@nativescript/core": "^8.0.8",
         "@nativescript/localize": "^5.0.4",
         "@triniwiz/nativescript-accelerometer": "^4.0.3",
         "nativescript-imagecropper": "^4.0.1",
@@ -25,7 +25,7 @@
         "@nativescript/webpack": "^5.0.0-beta.14",
         "@types/node": "^15.12.2",
         "nativescript-vue-template-compiler": "~2.9.0",
-        "sass": "^1.34.1",
+        "sass": "^1.35.1",
         "typescript": "^4.2.4",
         "vue": "^2.6.13"
       }
@@ -64,17 +64,17 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.5.tgz",
-      "integrity": "sha512-RN/AwP2DJmQTZSfiDaD+JQQ/J99KsIpOCfBE5pL+5jJSt7nI3nYGoAXZu+ffYSQ029NLs2DstZb+eR81uuARgg==",
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz",
+      "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.14.5",
         "@babel/generator": "^7.14.5",
         "@babel/helper-compilation-targets": "^7.14.5",
         "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helpers": "^7.14.5",
-        "@babel/parser": "^7.14.5",
+        "@babel/helpers": "^7.14.6",
+        "@babel/parser": "^7.14.6",
         "@babel/template": "^7.14.5",
         "@babel/traverse": "^7.14.5",
         "@babel/types": "^7.14.5",
@@ -294,9 +294,9 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.5.tgz",
-      "integrity": "sha512-xtcWOuN9VL6nApgVHtq3PPcQv5qFBJzoSZzJ/2c0QK/IP/gxVcoWSNQwFEGvmbQsuS9rhYqjILDGGXcTkA705Q==",
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
+      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
       "dev": true,
       "dependencies": {
         "@babel/template": "^7.14.5",
@@ -384,9 +384,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.5.tgz",
-      "integrity": "sha512-TM8C+xtH/9n1qzX+JNHi7AN2zHMTiPUtspO0ZdHflW8KaskkALhMmuMHb4bCmNdv9VAPzJX3/bXqkVLnAvsPfg==",
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz",
+      "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -463,9 +463,9 @@
       "dev": true
     },
     "node_modules/@nativescript/core": {
-      "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/@nativescript/core/-/core-8.0.7.tgz",
-      "integrity": "sha512-2OLwPa5Y+9aKLyo0zWl0YSjWS0f+EFG8SdZe+uuU2mzEhCb8q9djdICjHynuXZkmrtQsx/lKjLhbtnoYQsMRvA==",
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/@nativescript/core/-/core-8.0.8.tgz",
+      "integrity": "sha512-oeJIeHggLSXMBMwhIORW5WV3UyG4zu7M1G2VtG7Z6/Kd9JCUwglJTcP+1YPKt9emAPAz9bhGSCzMFpasNBPQzw==",
       "hasInstallScript": true,
       "dependencies": {
         "@nativescript/hook": "~2.0.0",
@@ -709,15 +709,16 @@
       "dev": true
     },
     "node_modules/@vue/component-compiler-utils": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.1.tgz",
-      "integrity": "sha512-Mci9WJYLRjyJEBkGHMPxZ1ihJ9l6gOy2Gr6hpYZUNpQoe5+nbpeb3w00aP+PSHJygCF+fxJsqp7Af1zGDITzuw==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.2.tgz",
+      "integrity": "sha512-rAYMLmgMuqJFWAOb3Awjqqv5X3Q3hVr4jH/kgrFJpiU0j3a90tnNBplqbj+snzrgZhC9W128z+dtgMifOiMfJg==",
       "dev": true,
       "dependencies": {
         "consolidate": "^0.15.1",
         "hash-sum": "^1.0.2",
         "lru-cache": "^4.1.2",
         "merge-source-map": "^1.1.0",
+        "postcss": "^7.0.36",
         "postcss-selector-parser": "^6.0.2",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
@@ -726,6 +727,86 @@
         "prettier": "^1.18.2"
       }
     },
+    "node_modules/@vue/component-compiler-utils/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@vue/component-compiler-utils/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@vue/component-compiler-utils/node_modules/chalk/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@vue/component-compiler-utils/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@vue/component-compiler-utils/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "node_modules/@vue/component-compiler-utils/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@vue/component-compiler-utils/node_modules/postcss": {
+      "version": "7.0.36",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+      "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
     "node_modules/@vue/component-compiler-utils/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -735,6 +816,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@vue/component-compiler-utils/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.0.tgz",
@@ -1344,24 +1437,24 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
       "dev": true,
       "dependencies": {
-        "anymatch": "~3.1.1",
+        "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "glob-parent": "~5.1.0",
+        "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
         "normalize-path": "~3.0.0",
-        "readdirp": "~3.5.0"
+        "readdirp": "~3.6.0"
       },
       "engines": {
         "node": ">= 8.10.0"
       },
       "optionalDependencies": {
-        "fsevents": "~2.3.1"
+        "fsevents": "~2.3.2"
       }
     },
     "node_modules/chokidar/node_modules/glob-parent": {
@@ -2279,9 +2372,9 @@
       }
     },
     "node_modules/globby": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.3.tgz",
-      "integrity": "sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==",
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+      "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
       "dev": true,
       "dependencies": {
         "array-union": "^2.1.0",
@@ -3222,9 +3315,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.2.tgz",
-      "integrity": "sha512-y1FK/AWdZlBF5lusS5j5l4/vF67+vQZt1SXPVJ32y1kRGDQyrs1zk32hG1cInRTu14P0V+orPz+ifwW/7rR4bg==",
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz",
+      "integrity": "sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==",
       "dev": true,
       "dependencies": {
         "colorette": "^1.2.2",
@@ -3528,9 +3621,9 @@
       }
     },
     "node_modules/readdirp": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -3657,9 +3750,9 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.34.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.34.1.tgz",
-      "integrity": "sha512-scLA7EIZM+MmYlej6sdVr0HRbZX5caX5ofDT9asWnUJj21oqgsC+1LuNfm0eg+vM0fCTZHhwImTiCU0sx9h9CQ==",
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.35.1.tgz",
+      "integrity": "sha512-oCisuQJstxMcacOPmxLNiLlj4cUyN2+8xJnG7VanRoh2GOLr9RqkvI4AxA4a6LHVg/rsu+PmxXeGhrdSF9jCiQ==",
       "dev": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0"
@@ -4170,9 +4263,10 @@
       "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
     },
     "node_modules/typescript": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz",
-      "integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.3.tgz",
+      "integrity": "sha512-rUvLW0WtF7PF2b9yenwWUi9Da9euvDRhmH7BLyBG4DCFfOJ850LGNknmRpp8Z8kXNUPObdZQEfKOiHtXuQHHKA==",
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4214,7 +4308,8 @@
     "node_modules/vue": {
       "version": "2.6.14",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
-      "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
+      "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
+      "dev": true
     },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
@@ -4337,9 +4432,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.38.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.38.1.tgz",
-      "integrity": "sha512-OqRmYD1OJbHZph6RUMD93GcCZy4Z4wC0ele4FXyYF0J6AxO1vOSuIlU1hkS/lDlR9CDYBz64MZRmdbdnFFoT2g==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.39.0.tgz",
+      "integrity": "sha512-25CHmuDj+oOTyteI13sUqNlCnjCnySuhiKWE/cRYPQYeoQ3ijHgyWX27CiyUKLNGq27v8S0mrksyTreT/xo7pg==",
       "dev": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.0",
@@ -4592,9 +4687,9 @@
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "node_modules/ws": {
-      "version": "7.4.6",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz",
+      "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==",
       "dev": true,
       "engines": {
         "node": ">=8.3.0"
@@ -4725,17 +4820,17 @@
       "dev": true
     },
     "@babel/core": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.5.tgz",
-      "integrity": "sha512-RN/AwP2DJmQTZSfiDaD+JQQ/J99KsIpOCfBE5pL+5jJSt7nI3nYGoAXZu+ffYSQ029NLs2DstZb+eR81uuARgg==",
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz",
+      "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.14.5",
         "@babel/generator": "^7.14.5",
         "@babel/helper-compilation-targets": "^7.14.5",
         "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helpers": "^7.14.5",
-        "@babel/parser": "^7.14.5",
+        "@babel/helpers": "^7.14.6",
+        "@babel/parser": "^7.14.6",
         "@babel/template": "^7.14.5",
         "@babel/traverse": "^7.14.5",
         "@babel/types": "^7.14.5",
@@ -4901,9 +4996,9 @@
       "dev": true
     },
     "@babel/helpers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.5.tgz",
-      "integrity": "sha512-xtcWOuN9VL6nApgVHtq3PPcQv5qFBJzoSZzJ/2c0QK/IP/gxVcoWSNQwFEGvmbQsuS9rhYqjILDGGXcTkA705Q==",
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
+      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
       "dev": true,
       "requires": {
         "@babel/template": "^7.14.5",
@@ -4975,9 +5070,9 @@
       }
     },
     "@babel/parser": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.5.tgz",
-      "integrity": "sha512-TM8C+xtH/9n1qzX+JNHi7AN2zHMTiPUtspO0ZdHflW8KaskkALhMmuMHb4bCmNdv9VAPzJX3/bXqkVLnAvsPfg==",
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz",
+      "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ==",
       "dev": true
     },
     "@babel/template": {
@@ -5036,9 +5131,9 @@
       "dev": true
     },
     "@nativescript/core": {
-      "version": "8.0.7",
-      "resolved": "https://registry.npmjs.org/@nativescript/core/-/core-8.0.7.tgz",
-      "integrity": "sha512-2OLwPa5Y+9aKLyo0zWl0YSjWS0f+EFG8SdZe+uuU2mzEhCb8q9djdICjHynuXZkmrtQsx/lKjLhbtnoYQsMRvA==",
+      "version": "8.0.8",
+      "resolved": "https://registry.npmjs.org/@nativescript/core/-/core-8.0.8.tgz",
+      "integrity": "sha512-oeJIeHggLSXMBMwhIORW5WV3UyG4zu7M1G2VtG7Z6/Kd9JCUwglJTcP+1YPKt9emAPAz9bhGSCzMFpasNBPQzw==",
       "requires": {
         "@nativescript/hook": "~2.0.0",
         "css-tree": "^1.1.2",
@@ -5227,26 +5322,99 @@
       "dev": true
     },
     "@vue/component-compiler-utils": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.1.tgz",
-      "integrity": "sha512-Mci9WJYLRjyJEBkGHMPxZ1ihJ9l6gOy2Gr6hpYZUNpQoe5+nbpeb3w00aP+PSHJygCF+fxJsqp7Af1zGDITzuw==",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.2.tgz",
+      "integrity": "sha512-rAYMLmgMuqJFWAOb3Awjqqv5X3Q3hVr4jH/kgrFJpiU0j3a90tnNBplqbj+snzrgZhC9W128z+dtgMifOiMfJg==",
       "dev": true,
       "requires": {
         "consolidate": "^0.15.1",
         "hash-sum": "^1.0.2",
         "lru-cache": "^4.1.2",
         "merge-source-map": "^1.1.0",
+        "postcss": "^7.0.36",
         "postcss-selector-parser": "^6.0.2",
         "prettier": "^1.18.2",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
       },
       "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^3.2.1",
+            "escape-string-regexp": "^1.0.5",
+            "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
         }
       }
     },
@@ -5400,8 +5568,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.4.tgz",
       "integrity": "sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@webpack-cli/info": {
       "version": "1.3.0",
@@ -5416,8 +5583,7 @@
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.5.1.tgz",
       "integrity": "sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@xtuc/ieee754": {
       "version": "1.2.0",
@@ -5450,8 +5616,7 @@
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/acorn-private-class-elements/-/acorn-private-class-elements-0.2.7.tgz",
       "integrity": "sha512-+GZH2wOKNZOBI4OOPmzpo4cs6mW297sn6fgIk1dUI08jGjhAaEwvC39mN2gJAg2lmAQJ1rBkFqKWonL3Zz6PVA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-private-methods": {
       "version": "0.3.3",
@@ -5504,8 +5669,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ansi-html": {
       "version": "0.0.7",
@@ -5709,19 +5873,19 @@
       }
     },
     "chokidar": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
       "dev": true,
       "requires": {
-        "anymatch": "~3.1.1",
+        "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.1",
-        "glob-parent": "~5.1.0",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
         "normalize-path": "~3.0.0",
-        "readdirp": "~3.5.0"
+        "readdirp": "~3.6.0"
       },
       "dependencies": {
         "glob-parent": {
@@ -6425,9 +6589,9 @@
       "dev": true
     },
     "globby": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.3.tgz",
-      "integrity": "sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==",
+      "version": "11.0.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
+      "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
       "dev": true,
       "requires": {
         "array-union": "^2.1.0",
@@ -6502,8 +6666,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ignore": {
       "version": "5.1.8",
@@ -7141,9 +7304,9 @@
       }
     },
     "postcss": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.2.tgz",
-      "integrity": "sha512-y1FK/AWdZlBF5lusS5j5l4/vF67+vQZt1SXPVJ32y1kRGDQyrs1zk32hG1cInRTu14P0V+orPz+ifwW/7rR4bg==",
+      "version": "8.3.5",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz",
+      "integrity": "sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==",
       "dev": true,
       "requires": {
         "colorette": "^1.2.2",
@@ -7216,8 +7379,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -7343,9 +7505,9 @@
       }
     },
     "readdirp": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
@@ -7437,9 +7599,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.34.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.34.1.tgz",
-      "integrity": "sha512-scLA7EIZM+MmYlej6sdVr0HRbZX5caX5ofDT9asWnUJj21oqgsC+1LuNfm0eg+vM0fCTZHhwImTiCU0sx9h9CQ==",
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.35.1.tgz",
+      "integrity": "sha512-oCisuQJstxMcacOPmxLNiLlj4cUyN2+8xJnG7VanRoh2GOLr9RqkvI4AxA4a6LHVg/rsu+PmxXeGhrdSF9jCiQ==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0"
@@ -7804,9 +7966,10 @@
       "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ=="
     },
     "typescript": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz",
-      "integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw=="
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.3.tgz",
+      "integrity": "sha512-rUvLW0WtF7PF2b9yenwWUi9Da9euvDRhmH7BLyBG4DCFfOJ850LGNknmRpp8Z8kXNUPObdZQEfKOiHtXuQHHKA==",
+      "dev": true
     },
     "universalify": {
       "version": "2.0.0",
@@ -7838,7 +8001,8 @@
     "vue": {
       "version": "2.6.14",
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
-      "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
+      "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==",
+      "dev": true
     },
     "vue-hot-reload-api": {
       "version": "2.3.4",
@@ -7922,8 +8086,7 @@
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
-      "requires": {}
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
     },
     "watchpack": {
       "version": "2.2.0",
@@ -7936,9 +8099,9 @@
       }
     },
     "webpack": {
-      "version": "5.38.1",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.38.1.tgz",
-      "integrity": "sha512-OqRmYD1OJbHZph6RUMD93GcCZy4Z4wC0ele4FXyYF0J6AxO1vOSuIlU1hkS/lDlR9CDYBz64MZRmdbdnFFoT2g==",
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.39.0.tgz",
+      "integrity": "sha512-25CHmuDj+oOTyteI13sUqNlCnjCnySuhiKWE/cRYPQYeoQ3ijHgyWX27CiyUKLNGq27v8S0mrksyTreT/xo7pg==",
       "dev": true,
       "requires": {
         "@types/eslint-scope": "^3.7.0",
@@ -8115,11 +8278,10 @@
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "ws": {
-      "version": "7.4.6",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
-      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==",
-      "dev": true,
-      "requires": {}
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz",
+      "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==",
+      "dev": true
     },
     "xmlbuilder": {
       "version": "9.0.7",
diff --git a/package.json b/package.json
index 6321d245..3bc66ac7 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@akylas/nativescript-sqlite": "^3.3.12",
     "@nativescript-community/ui-collectionview": "^4.0.32",
-    "@nativescript/core": "^8.0.7",
+    "@nativescript/core": "^8.0.8",
     "@nativescript/localize": "^5.0.4",
     "@triniwiz/nativescript-accelerometer": "^4.0.3",
     "nativescript-imagecropper": "^4.0.1",
@@ -34,7 +34,7 @@
     "@nativescript/webpack": "^5.0.0-beta.14",
     "@types/node": "^15.12.2",
     "nativescript-vue-template-compiler": "~2.9.0",
-    "sass": "^1.34.1",
+    "sass": "^1.35.1",
     "typescript": "^4.2.4",
     "vue": "^2.6.13"
   }
diff --git a/translations/store-listing/hi/title.txt b/translations/store-listing/hi/title.txt
new file mode 100644
index 00000000..d309baf5
--- /dev/null
+++ b/translations/store-listing/hi/title.txt
@@ -0,0 +1 @@
+EnRecipes
diff --git a/translations/store-listing/nb-NO/title.txt b/translations/store-listing/nb-NO/title.txt
new file mode 100644
index 00000000..d309baf5
--- /dev/null
+++ b/translations/store-listing/nb-NO/title.txt
@@ -0,0 +1 @@
+EnRecipes