Merge pull request #130 from amansinghbais/#129

Implemented: hotwax apps-theme package and reverted custom size attribute from ion-spinner (#129)

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",

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, {

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);
 }

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>