From dfd768537e58ca79034625316a0c2cea97bd6330 Mon Sep 17 00:00:00 2001
From: joemarct <joemar.ct@gmail.com>
Date: Sat, 5 Nov 2022 19:55:11 +0800
Subject: [PATCH] Further styling changes for iOS

---
 .../ios/App/App.xcodeproj/project.pbxproj     |   4 +-
 src/components/qr-scanner.vue                 |   2 +-
 src/pages/apps/asset-swap.vue                 |   2 +-
 src/pages/apps/collectibles.vue               |   4 +-
 src/pages/apps/gifts/claim-gift.vue           |   2 +-
 src/pages/apps/gifts/create-gift.vue          |   2 +-
 src/pages/apps/gifts/index.vue                | 174 +++++++++---------
 src/pages/apps/point-of-sale.vue              |   2 +-
 src/pages/apps/sweep.vue                      |   2 +-
 9 files changed, 95 insertions(+), 99 deletions(-)

diff --git a/src-capacitor/ios/App/App.xcodeproj/project.pbxproj b/src-capacitor/ios/App/App.xcodeproj/project.pbxproj
index d0124bccb..180a011b9 100644
--- a/src-capacitor/ios/App/App.xcodeproj/project.pbxproj
+++ b/src-capacitor/ios/App/App.xcodeproj/project.pbxproj
@@ -352,7 +352,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 18;
+				CURRENT_PROJECT_VERSION = 19;
 				DEVELOPMENT_TEAM = 89X576BZBF;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
@@ -373,7 +373,7 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 18;
+				CURRENT_PROJECT_VERSION = 19;
 				DEVELOPMENT_TEAM = 89X576BZBF;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
diff --git a/src/components/qr-scanner.vue b/src/components/qr-scanner.vue
index cba3c9ab1..9dedcf19d 100644
--- a/src/components/qr-scanner.vue
+++ b/src/components/qr-scanner.vue
@@ -7,7 +7,7 @@
         padding="xs"
         flat
         class="scanner-close-btn"
-        :style="{'margin-top': $q.platform.is.ios ? '30px' : '0px'}"
+        :style="{'margin-top': $q.platform.is.ios ? '55px' : '0px'}"
         @click="stopScan"
       />
       <ScannerUI />
diff --git a/src/pages/apps/asset-swap.vue b/src/pages/apps/asset-swap.vue
index 9cc4b3c6c..bed396eb6 100644
--- a/src/pages/apps/asset-swap.vue
+++ b/src/pages/apps/asset-swap.vue
@@ -14,7 +14,7 @@
       class="col-12 q-px-sm q-pb-md pp-fcolor q-mx-md"
       v-model="selectedNetwork"
       style="padding-bottom: 16px;"
-      :style="{ 'margin-top': $q.platform.is.ios ? '0px' : '-35px'}"
+      :style="{ 'margin-top': $q.platform.is.ios ? '10px' : '-35px'}"
     >
       <q-tab
         name="BCH"
diff --git a/src/pages/apps/collectibles.vue b/src/pages/apps/collectibles.vue
index 7b0929070..a8b6275d1 100644
--- a/src/pages/apps/collectibles.vue
+++ b/src/pages/apps/collectibles.vue
@@ -4,7 +4,7 @@
     :class="{'pt-dark': darkMode}"
   >
     <header-nav title="Collectibles" backnavpath="/apps" style="position: fixed; top: 0; width: 100%; z-index: 150 !important;"></header-nav>
-    <q-icon id="context-menu" size="35px" name="more_vert" :style="{ 'margin-top': $q.platform.is.ios ? '30px' : '0px'}">
+    <q-icon id="context-menu" size="35px" name="more_vert" :style="{ 'margin-top': $q.platform.is.ios ? '42px' : '0px'}">
       <q-menu>
         <q-list :class="{'pt-dark-card': darkMode}" style="min-width: 100px">
           <q-item clickable v-close-popup>
@@ -20,7 +20,7 @@
       dense
       active-color="brandblue"
       class="col-12 q-px-lg pp-fcolor"
-      :style="{ 'margin-top': $q.platform.is.ios ? '25px' : '0px'}"
+      :style="{ 'margin-top': $q.platform.is.ios ? '45px' : '0px'}"
       :modelValue="selectedNetwork"
       @update:modelValue="changeNetwork"
     >
diff --git a/src/pages/apps/gifts/claim-gift.vue b/src/pages/apps/gifts/claim-gift.vue
index 73d661da6..06c4cfef2 100644
--- a/src/pages/apps/gifts/claim-gift.vue
+++ b/src/pages/apps/gifts/claim-gift.vue
@@ -7,7 +7,7 @@
     <div id="app-container" style="background-color: #ECF3F3; min-height: 100vh;" :class="{'pt-dark': darkMode}">
       <div>
         <header-nav :title="action + ' Gift'" backnavpath="/apps/gifts" style="position: fixed; top: 0; background: #ECF3F3; width: 100%; z-index: 100 !important;"></header-nav>
-        <div style="padding-top: 60px;">
+        <div :style="{ 'padding-top': $q.platform.is.ios ? '85px' : '60px'}">
           <div id="app" ref="app" :class="{'text-black': !darkMode}">
             <div v-if="processing" style="text-align: center; padding-top: 25px;">
               <p><span class="text-capitalize">{{ action }}</span>ing gift...</p>
diff --git a/src/pages/apps/gifts/create-gift.vue b/src/pages/apps/gifts/create-gift.vue
index 97ddaf68b..30c3f6a11 100644
--- a/src/pages/apps/gifts/create-gift.vue
+++ b/src/pages/apps/gifts/create-gift.vue
@@ -11,7 +11,7 @@
         style="position: fixed; top: 0; background: #ECF3F3; width: 100%; z-index: 100 !important;"
         class="q-px-sm"
       />
-      <div class="q-pa-lg" style="width: 100%; color: black;">
+      <div class="q-pa-lg" style="width: 100%; color: black;" :style="{ 'padding-top': $q.platform.is.ios ? '65px' : '0px'}">
         <div class="text-center" v-if="processing" style="margin-top: 80px;">
           <p :class="{'text-white': darkMode}" >Creating gift...</p>
           <progress-loader />
diff --git a/src/pages/apps/gifts/index.vue b/src/pages/apps/gifts/index.vue
index 0e903a692..287536f1e 100644
--- a/src/pages/apps/gifts/index.vue
+++ b/src/pages/apps/gifts/index.vue
@@ -12,103 +12,99 @@
         style="position: fixed; top: 0; background: #ECF3F3; width: 100%; z-index: 100 !important;"
         class="q-px-sm"
       />
-      <div class="row" style="margin-top: 50px;" >
-        <div class="col q-mt-sm q-pl-lg q-pr-lg q-pb-none flex" style="font-size: 16px; color: #444655;">
-          <p :class="{'text-white': darkMode}">Choose one</p>
-          <!-- {{ this.walletHash }} -->
+      <div :style="{ 'margin-top': $q.platform.is.ios ? '80px' : '50px'}">
+        <div class="row justify-center">
+          <div @click="$router.push({ name: 'create-gift'})" role="button" class="col-6 q-pl-lg q-mb-sm round" style="height: 50px; width: 150px">
+            <q-btn color="primary">Create Gift</q-btn>
+          </div>
+          <div @click="$router.push({ name: 'claim-gift'})" role="button" class="col-6 q-pr-lg q-mb-sm" style="height: 50px; width: 150px">
+            <q-btn color="primary">Claim Gift</q-btn>
+          </div>
         </div>
-      </div>
-      <div class="row justify-center" >
-        <div @click="$router.push({ name: 'create-gift'})" role="button" class="col-6 q-pl-lg q-mb-sm round" style="height: 50px; width: 150px">
-          <q-btn color="primary">Create Gift</q-btn>
-        </div>
-        <div @click="$router.push({ name: 'claim-gift'})" role="button" class="col-6 q-pr-lg q-mb-sm" style="height: 50px; width: 150px">
-          <q-btn color="primary">Claim Gift</q-btn>
-        </div>
-      </div>
-      <div v-if="rows.length > 0" class="row q-pa-md" :class="{'text-black': !darkMode}" style="margin-top: -20px;">
-        <q-table
-          grid
-          title="Gifts you created"
-          :rows="rows"
-          :columns="columns"
-          row-key="name"
-          style="width: 100%"
-          :dark="darkMode"
-          :pagination="pageNumber"
-        >
-          <template v-slot:top-right>
-            <q-btn-dropdown color="primary" :label="label" dense class="q-pl-sm" :dark="darkMode" content-style="color: black;">
-              <q-list dense>
-              <q-item clickable v-close-popup @click="claim"  >
-                <q-item-section>
-                  <q-item-label>Claimed</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup @click="unclaim" >
-                <q-item-section>
-                  <q-item-label>Unclaimed</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup @click="getRows" active>
-                <q-item-section>
-                  <q-item-label>All</q-item-label>
-                </q-item-section>
-              </q-item>
-              </q-list>
-            </q-btn-dropdown>
-          </template>
-          <template v-slot:item="props">
-            <div
-              class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition text-black"
-              :style="props.selected ? 'transform: scale(0.95);' : ''"
-            >
-              <q-card>
+        <div v-if="rows.length > 0" class="row q-pa-md" :class="{'text-black': !darkMode}" style="margin-top: -10px;">
+          <q-table
+            grid
+            title="Gifts you created"
+            :rows="rows"
+            :columns="columns"
+            row-key="name"
+            style="width: 100%"
+            :dark="darkMode"
+            :pagination="pageNumber"
+          >
+            <template v-slot:top-right>
+              <q-btn-dropdown color="primary" :label="label" dense class="q-pl-sm" :dark="darkMode" content-style="color: black;">
                 <q-list dense>
-                  <q-item v-for="col in props.cols" :key="col.name">
-                    <template v-if="col.name === 'claimed'">
-                      <template v-if="col.value !== 'Unclaimed'">
-                        <q-item-section>
-                          <q-item-label>
-                            <q-separator inset />
-                            <q-badge color="green" class="q-mt-sm q-mb-sm">Claimed {{ col.value }}</q-badge>
-                          </q-item-label>
-                        </q-item-section>
+                <q-item clickable v-close-popup @click="claim"  >
+                  <q-item-section>
+                    <q-item-label>Claimed</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="unclaim" >
+                  <q-item-section>
+                    <q-item-label>Unclaimed</q-item-label>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="getRows" active>
+                  <q-item-section>
+                    <q-item-label>All</q-item-label>
+                  </q-item-section>
+                </q-item>
+                </q-list>
+              </q-btn-dropdown>
+            </template>
+            <template v-slot:item="props">
+              <div
+                class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition text-black"
+                :style="props.selected ? 'transform: scale(0.95);' : ''"
+              >
+                <q-card>
+                  <q-list dense>
+                    <q-item v-for="col in props.cols" :key="col.name">
+                      <template v-if="col.name === 'claimed'">
+                        <template v-if="col.value !== 'Unclaimed'">
+                          <q-item-section>
+                            <q-item-label>
+                              <q-separator inset />
+                              <q-badge color="green" class="q-mt-sm q-mb-sm">Claimed {{ col.value }}</q-badge>
+                            </q-item-label>
+                          </q-item-section>
+                        </template>
+                        <template v-else>
+                          <q-item-section>
+                            <q-item-label>
+                              <q-separator inset />
+                              <q-badge color="grey" class="q-mt-sm q-mb-sm">Unclaimed</q-badge>
+                            </q-item-label>
+                          </q-item-section>
+                          <q-item-section v-if="getGiftShare(props.row.gift_code_hash)" side style="padding: 10px 0px;">
+                            <q-item-label caption>
+                              <q-btn size="sm" @click="recoverGift(props.row.gift_code_hash)" dense>Recover</q-btn>
+                            </q-item-label>
+                          </q-item-section>
+                          <q-item-section side style="padding: 10px 0px;" v-if="getQrShare(props.row.gift_code_hash)">
+                            <q-item-label caption>
+                              <!-- <q-btn size="sm" @click="$router.push({ name: 'show-qr'})" dense>Show QR</q-btn> -->
+                              <q-btn size="sm" @click="showQr(props.row.gift_code_hash)" dense>Show QR</q-btn>
+                            </q-item-label>
+                          </q-item-section>
+                        </template>
                       </template>
                       <template v-else>
                         <q-item-section>
-                          <q-item-label>
-                            <q-separator inset />
-                            <q-badge color="grey" class="q-mt-sm q-mb-sm">Unclaimed</q-badge>
-                          </q-item-label>
-                        </q-item-section>
-                        <q-item-section v-if="getGiftShare(props.row.gift_code_hash)" side style="padding: 10px 0px;">
-                          <q-item-label caption>
-                            <q-btn size="sm" @click="recoverGift(props.row.gift_code_hash)" dense>Recover</q-btn>
-                          </q-item-label>
+                          <q-item-label>{{ col.label }}</q-item-label>
                         </q-item-section>
-                        <q-item-section side style="padding: 10px 0px;" v-if="getQrShare(props.row.gift_code_hash)">
-                          <q-item-label caption>
-                            <!-- <q-btn size="sm" @click="$router.push({ name: 'show-qr'})" dense>Show QR</q-btn> -->
-                            <q-btn size="sm" @click="showQr(props.row.gift_code_hash)" dense>Show QR</q-btn>
-                          </q-item-label>
+                        <q-item-section side>
+                          <q-item-label caption>{{ col.value }}</q-item-label>
                         </q-item-section>
                       </template>
-                    </template>
-                    <template v-else>
-                      <q-item-section>
-                        <q-item-label>{{ col.label }}</q-item-label>
-                      </q-item-section>
-                      <q-item-section side>
-                        <q-item-label caption>{{ col.value }}</q-item-label>
-                      </q-item-section>
-                    </template>
-                  </q-item>
-                </q-list>
-              </q-card>
-            </div>
-          </template>
-        </q-table>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
+          </q-table>
+        </div>
       </div>
      </div>
     </div>
diff --git a/src/pages/apps/point-of-sale.vue b/src/pages/apps/point-of-sale.vue
index 0ce1cf779..1bf3eac42 100644
--- a/src/pages/apps/point-of-sale.vue
+++ b/src/pages/apps/point-of-sale.vue
@@ -11,7 +11,7 @@
 
     <q-card
       class="br-15 q-pt-sm q-mx-md"
-      :style="{ 'margin-top': $q.platform.is.ios ? '40px' : '0'}"
+      :style="{ 'margin-top': $q.platform.is.ios ? '55px' : '0'}"
       :class="[
         darkMode ? 'text-white pt-dark-card' : 'text-black',
       ]"
diff --git a/src/pages/apps/sweep.vue b/src/pages/apps/sweep.vue
index f0a86a3a4..f0f1fb4ab 100644
--- a/src/pages/apps/sweep.vue
+++ b/src/pages/apps/sweep.vue
@@ -7,7 +7,7 @@
     <div id="app-container" style="background-color: #ECF3F3; min-height: 100vh;" :class="{'pt-dark': darkMode}">
       <div>
         <header-nav title="Sweep" backnavpath="/apps" style="position: fixed; top: 0; background: #ECF3F3; width: 100%; z-index: 100 !important;"></header-nav>
-        <div style="margin-top: 60px;">
+        <div style="margin-top: 60px;" :style="{ 'padding-top': $q.platform.is.ios ? '30px' : '0px'}">
           <div id="app" ref="app" :class="{'text-black': !darkMode}">
             <div v-if="fetching && tokens.length === 0" style="text-align: center; margin-top: 25px;">
               <p>Scanning...</p>