Button colour & size change

src/components/shared/footerSection.vue

@@ -22,10 +22,12 @@
               <div class="w-footer-a">
                 <ul class="list-unstyled">
                   <li class="color-a">
-                    <span class="color-text-a">Phone .</span> +27 (0)12 492 1238
+                    <eva-icon name="phone-call-outline" fill="#60CBEB"></eva-icon>
+                    <span class="color-text-a"></span> +27 (0)12 492 1238
                   </li>
                   <li class="color-a">
-                    <span class="color-text-a">Email .</span> info@univateproperties.co.za
+                    <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
+                    <span class="color-text-a"></span> info@univateproperties.co.za
                   </li>
                 </ul>
               </div>
@@ -56,8 +58,8 @@
                     </li>
                     <br />
                     <li class="list-inline-item">
-                      <a href="www.https://www.facebook.com/univateproperties/">
-                        <i class="fa fa-facebook color-b font-weight-bold" aria-hidden="true"></i>
+                      <a href="https://www.facebook.com/univateproperties/">
+                        <eva-icon name="facebook-outline" fill="#60CBEB"></eva-icon>
                       </a>
                     </li>
                   </ul>

src/components/timeshare/buy/buyPage.vue

@@ -40,15 +40,15 @@
               <div class="accordion" id="accordionExample">
                 <div class="card" v-for="(region, r) in detailedRegion" :key="r">
                   <a
-                    class="btn-link"
+                    class="btn btn-b-n"
                     type="button"
                     data-toggle="collapse"
                     :data-target="'#collapse' + region.id"
                     aria-expanded="false"
                     :aria-controls="'collapse' + region.id"
                   >
-                    <div class="card-header" :id="'header' + region.id">
-                      <h4 class="mb-0">{{ region.regionName }}</h4>
+                    <div :id="'header' + region.id">
+                      <h5 class="mb-0">{{ region.regionName }}</h5>
                     </div>
                   </a>
                   <div
@@ -74,18 +74,18 @@
   </section>
 </template>
 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions } from "vuex";
 
 export default {
-  name: 'TimeshareToBuy',
+  name: "TimeshareToBuy",
   mounted() {
     this.getRegions();
   },
   computed: {
-    ...mapState('timeshareBuy', ['detailedRegion']),
+    ...mapState("timeshareBuy", ["detailedRegion"])
   },
   methods: {
-    ...mapActions('timeshareBuy', ['getRegions']),
-  },
+    ...mapActions("timeshareBuy", ["getRegions"])
+  }
 };
 </script>