address book ui fixes

src/components/retailer/address/MeVerifyAddressComponent.vue

@@ -5,33 +5,33 @@
         <v-progress-circular :size="40" color="primary" indeterminate></v-progress-circular>
       </v-col>
       <v-col cols="12" v-else-if="verifyAddress.countryId">
-        <div class="error-box">
+        <div class="error-box my-3 alert-outline">
           <v-alert
             class="alert-box-outline body"
             type="success"
             text             
-            dense
+            density="compact"
             v-if="geoCodedAddressFlag"
           >{{geoCodedAddress}}</v-alert>
           <v-alert
-            class="alert-box-outline grey lighten-4 body"
-            dense
+            class="alert-box-outline grey lighten-4 body alert-outline"             
+            density="compact"
             v-if="!geoCodedAddressFlag"
           >{{geoCodedAddress}}</v-alert>
         </div>
         <div class="success-box">
-         <p class="body">
+         <p class="body textColor">
             If the address below is correct then you don’t need to do anything. To change your address,
-            <v-hover v-slot:default="{ hover }">
+            <v-hover v-slot:default="{ isHovering }">
               <router-link
                 to="#"
                 class="text-decoration-none"
                 target="_self"
-                :class="hover ? 'primary--text':'black--text'"
+                :class="isHovering ? 'text-primary':'text-black'"
               >Click here</router-link>
             </v-hover>
           </p>
-          <v-alert class="alert-box-outline grey lighten-4" dense>
+          <v-alert class="alert-box-outline grey lighten-4 alert-outline my-3" dense>
             <p class="mb-2 body">{{verifyAddress.firstname}} {{verifyAddress.lastname}}</p>
             <p class="mb-2 body">{{verifyAddress.streetNoOne}}</p>
             <p class="mb-2 body">{{verifyAddress.streetNoTwo}}</p>
@@ -108,3 +108,13 @@ export default {
   }
 };
 </script>
+<style>
+.alert-outline{
+  border: thin solid rgb(218, 209, 209);
+  border-radius: 5px;
+}
+.textColor{
+  color: #6d6565;
+}
+
+</style>

src/routes/retailer/address_book.scss

@@ -16,3 +16,8 @@
     background-color: red !important;
     color:#ffffff !important;
 }
+.alert-box-outline{
+    color: #fb8c00 !important;
+    background-color: #fdede8;
+    border:thin solid #c5c4c4;
+}

src/routes/retailer/address_book.vue

@@ -264,7 +264,7 @@
                         @input="validateNumber"
                         ></vue-tel-input>
                        <span
-                        class="red--text caption ml-3"
+                        class="text-red caption ml-3"
                         v-show="phoneNumberError"
                         >This field is required</span
                       >
@@ -296,7 +296,8 @@
                   class="alert-box-outline"
                   type="warning"
                   text
-                  dense
+                  density="compact"
+                  variant="outlined"
                   v-if="addressId == basicInfo.defaultBilling"
                   
                   >This is default billing address</v-alert
@@ -309,10 +310,11 @@
                    color="primary"
                 ></v-checkbox>
                 <v-alert
-                  class="alert-box-outline"
+                  class="alert-box-outline mt-4"
                   type="warning"
                   text
-                  dense
+                  density="compact"
+                  variant="outlined"
                   v-if="addressId == basicInfo.defaultShipping"
                   >This is default shipping address</v-alert
                 >
@@ -333,10 +335,10 @@
             </v-hover>
             <v-dialog v-model="dialog" persistent max-width="1100px">
               <v-card class="pb-2">
-                <v-card-title class="pb-2">
+                <v-card-title >
                   <v-row no-gutters>
                     <v-col cols="11">
-                      <p class="h2 mb-1 body-font text-uppercase primary--text">
+                      <p class="text-h4 pt-4 body-font text-uppercase text-primary">
                         Verify Your Address
                       </p>
                     </v-col>
@@ -344,7 +346,7 @@
                     <v-col cols="1" class="text-right">
                       <router-link
                         to
-                        class="text-decoration-none black--text fontcolor-black-light"
+                        class="text-decoration-none text-black fontcolor-black-light"
                       >
                         <div @click="dialog = false">X</div>
                       </router-link>
@@ -397,7 +399,7 @@
                           v-bind="props"
                           :variant="isHovering ? 'outlined' : 'outlined'"
                           :class="
-                            isHovering ? ' bg-white text-primary' : 'bg-primary'
+                            isHovering ? ' bg-white text-success' : 'bg-success'
                           "
                           rounded="0"
                           size="large"
@@ -442,7 +444,7 @@ import MeVerifyAddressComponent from "@/components/retailer/address/MeVerifyAddr
 import { loginInterrupt } from "@/services/nav";
 import SnackbarComponent from "@/components/common/SnackbarComponent.vue";
 import ConfirmationDialog from "@/components/common/ConfirmationDialog.vue";
-import VueTelInput from 'vue-tel-input';
+import VueTelInput from 'vue3-tel-input'
 //import BillingAddressComponent from "@/components/retailer/address/BillingAddressComponent.vue";
 
 import { createHelpers } from "vuex-map-fields";