From 1b4893bbc0213210804ff40a0f78e715e8f77a77 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Wed, 4 Sep 2024 16:03:42 +0530
Subject: [PATCH] Implemented: hotwax apps-theme package and reverted custom
 size attribute from ion-spinner (#129)

---
 package-lock.json       | 11 +++++++++++
 package.json            |  1 +
 src/main.ts             |  1 +
 src/theme/variables.css | 10 ----------
 src/views/Login.vue     |  4 ++--
 5 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c799666..a70717f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "Launchpad",
       "version": "2.1.0",
       "dependencies": {
+        "@hotwax/apps-theme": "^1.2.8",
         "@hotwax/dxp-components": "^1.12.2",
         "@hotwax/oms-api": "^1.13.0",
         "@ionic/core": "^7.6.0",
@@ -2580,6 +2581,11 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@hotwax/apps-theme": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@hotwax/apps-theme/-/apps-theme-1.2.8.tgz",
+      "integrity": "sha512-6ZE2y4DKWcDdYNToPv7L6oYM71NS4zgxfoncIUvSvA9BYqi3MavfC36Z6ujHBEB/PsUhcbU8DOdpakTvyL5aGw=="
+    },
     "node_modules/@hotwax/dxp-components": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/@hotwax/dxp-components/-/dxp-components-1.12.2.tgz",
@@ -15717,6 +15723,11 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@hotwax/apps-theme": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@hotwax/apps-theme/-/apps-theme-1.2.8.tgz",
+      "integrity": "sha512-6ZE2y4DKWcDdYNToPv7L6oYM71NS4zgxfoncIUvSvA9BYqi3MavfC36Z6ujHBEB/PsUhcbU8DOdpakTvyL5aGw=="
+    },
     "@hotwax/dxp-components": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/@hotwax/dxp-components/-/dxp-components-1.12.2.tgz",
diff --git a/package.json b/package.json
index f90494f..770cbae 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@hotwax/dxp-components": "^1.12.2",
     "@hotwax/oms-api": "^1.13.0",
+    "@hotwax/apps-theme": "^1.2.8",
     "@ionic/core": "^7.6.0",
     "@ionic/vue": "^7.6.0",
     "@ionic/vue-router": "^7.6.0",
diff --git a/src/main.ts b/src/main.ts
index 69e87ef..8eed0b0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -25,6 +25,7 @@ import '@ionic/vue/css/display.css';
 
 /* Theme variables */
 import './theme/variables.css';
+import '@hotwax/apps-theme';
 
 const app = createApp(App)
   .use(IonicVue, {
diff --git a/src/theme/variables.css b/src/theme/variables.css
index b00dc83..05f685e 100644
--- a/src/theme/variables.css
+++ b/src/theme/variables.css
@@ -236,16 +236,6 @@ http://ionicframework.com/docs/theming/ */
 }
 
 body {
-  /** Spacer variables **/
-  --spacer-2xs: 0.25rem; /* 4px */
-  --spacer-xs: 0.5rem;   /* 8px */
-  --spacer-sm: 1rem;     /* 16px */
-  --spacer-base: 1.5rem; /* 24px */
-  --spacer-lg: 2rem;     /* 32px */
-  --spacer-xl: 2.5rem;   /* 40px */
-  --spacer-2xl: 5rem;    /* 80px */
-  --spacer-3xl: 10rem;   /* 160px */
-
   /** Border variable **/
   --border-medium: 1px solid var(--ion-color-medium);
 }
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 4bfb353..919a6de 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -14,7 +14,7 @@
               through the form above, causing both the form and the button to submit. -->
               <ion-button color="primary" expand="block" @click.prevent="isCheckingOms ? '' : setOms()" @keyup.enter.stop>
                 {{ $t("Next") }}
-                <ion-spinner v-if="isCheckingOms" name="crescent" data-spinner-size="medium" slot="end" />
+                <ion-spinner v-if="isCheckingOms" name="crescent" slot="end" />
                 <ion-icon v-else slot="end" :icon="arrowForwardOutline" />
               </ion-button>
             </div>
@@ -37,7 +37,7 @@
             <div class="ion-padding">
               <ion-button color="primary" expand="block" @click="isLoggingIn ? '' : login()">
                 {{ $t("Login") }}
-                <ion-spinner v-if="isLoggingIn" slot="end" name="crescent" data-spinner-size="medium" />
+                <ion-spinner v-if="isLoggingIn" slot="end" name="crescent" />
                 <ion-icon v-else slot="end" :icon="arrowForwardOutline" />
               </ion-button>
             </div>