Clean up of footer Code

Navbar ammend
SellPage changes
UnitPage changes

src/App.vue

     <NavBar @routerGoTo="routerGoTo" />
     <div class="pushDown"></div>
     <router-view />
-    <FooterSection />
+    <FooterSection class="margin-top" />
   </div>
 </template>
 
 <script>
-// import HomePage from './components/home/homePage.vue';
-import SearchTab from "./components/shared/searchTab.vue";
-import NavBar from "./components/shared/navBar.vue";
-import FooterSection from "./components/shared/footerSection.vue";
+import SearchTab from './components/shared/searchTab.vue';
+import NavBar from './components/shared/navBar.vue';
+import FooterSection from './components/shared/footerSection.vue';
 
 export default {
-  name: "app",
+  name: 'app',
   components: {
     SearchTab,
     NavBar,
-    FooterSection
+    FooterSection,
   },
-  // created() {
-  //   this.$http.interceptors.response.use(undefined, (err) => {
-  //     return new Promise(function(resolve, reject) {
-  //       if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
-  //         this.$store.dispatch(logout);
-  //       }
-  //       throw err;
-  //     });
-  //   });
-  // },
   methods: {
     routerGoTo(goTo) {
       this.$router.push(goTo);
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style>
+.myFill {
+  fill: #60cbeb;
+}
 a {
   cursor: pointer;
 }
   text-align: center;
   color: #2c3e50;
 }
+.cursor-pointer {
+  cursor: pointer;
+}
+</style>
+
+<style scoped>
 .pushDown {
   height: 70px;
 }
-.cursor-pointer {
-  cursor: pointer;
+.margin-top {
+  margin-top: 50px;
 }
 </style>

src/components/shared/footerSection.vue

                   </router-link>
                 </h4>
               </div>
-              <div class="w-body-a"></div>
               <div class="w-footer-a">
                 <ul class="list-unstyled">
                   <li class="color-a">
-                    <eva-icon name="phone-call-outline" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="phone-call-outline" class="myFill"></eva-icon>
                     <span class="color-text-a"></span> +27 (0)12 492 1238
                   </li>
                   <li class="color-a">
-                    <eva-icon name="email-outline" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="email-outline" class="myFill"></eva-icon>
                     <span class="color-text-a"></span> info@univateproperties.co.za
                   </li>
-                  <br />
                   <li class="item-list-a">
-                    <eva-icon name="message-square-outline" fill="#60CBEB"></eva-icon>
+                    <eva-icon name="message-square-outline" class="myFill"></eva-icon>
                     <router-link to="/contactUs">Contact Us</router-link>
                   </li>
                 </ul>
               </div>
             </div>
           </div>
-          <div class="col-sm-12 col-md-4 section-md-t3">
+          <div class="col-sm-12 col-md-4">
             <div class="widget-a">
               <div class="w-header-a">
                 <h4 class="w-title-a">
                 <div class="w-body-a">
                   <ul class="list-unstyled">
                     <li class="item-list-a">
-                      <eva-icon name="slash-outline" fill="#60CBEB"></eva-icon>
+                      <eva-icon name="slash-outline" class="myFill"></eva-icon>
                       <router-link to="/privacypolicy">Privacy Policy</router-link>
                     </li>
                     <br />
                     <li class="list-inline-item">
                       <a href="https://www.facebook.com/univateproperties/">
-                        <eva-icon name="facebook-outline" fill="#60CBEB"></eva-icon>
+                        <eva-icon name="facebook-outline" class="myFill"></eva-icon>Facebook
                       </a>
                     </li>
                   </ul>
               </div>
             </div>
           </div>
-          <div class="col-sm-12 col-md-4 section-md-t3">
+          <div class="col-sm-12 col-md-4">
             <div class="w-header-a">
               <h4 class="w-title-a">
                 <b>Our Partners</b>
             </div>
             <div class="w-body-a">
               <ul class="list-unstyled">
-                <li class="item-list-a" style="margin-bottom: 1em">
+                <li class="item-list-a">
                   <a href="https:\\www.daelive.com">
                     <img
-                      class="img-fluid"
+                      class="img-fluid dae-Logo"
                       src="/img/logos/DAE_logo_notag.png"
-                      alt="DAE Logo"
-                      style="width:50px;height:30px;"
                       align="left"
                     />
                   </a>
                   <a href="https:\\www.gomelo.co.za">
-                    <img
-                      class="img-fluid"
-                      src="/img/logos/gomelo.png"
-                      alt="GoMelo Logo"
-                      style="width:35px;height:35px;"
-                      align="right"
-                    />
+                    <img class="img-fluid gomelo-Logo" src="/img/logos/gomelo.png" align="right" />
                   </a>
                 </li>
-
-                <li class="item-list-a" style="margin-bottom: 1em">
+                <li class="item-list-a">
                   <a href="https:\\www.rci.co.za">
-                    <img
-                      class="img-fluid"
-                      src="/img/logos/rci.png"
-                      alt="RCI Logo"
-                      style="width:40px;height:20px;"
-                    />
+                    <img class="img-fluid rci-Logo" src="/img/logos/rci.png" />
                   </a>
                 </li>
-                <li class="item-list-a" style="margin-bottom: 1em">
+                <li class="item-list-a">
                   <a href="https:\\www.voasa.co.za">
-                    <img
-                      class="img-fluid"
-                      src="/img/logos/voasa.png"
-                      alt="Voasa Logo"
-                      style="width:90px;height:45px;"
-                    />
+                    <img class="img-fluid voasa-Logo" src="/img/logos/voasa.png" />
                   </a>
                 </li>
               </ul>
             <div class="credits">
               Site created by
               <a href="http://www.provision-sa.co.za/">
-                <img
-                  src="img/logos/provision-logocropped.png"
-                  alt
-                  class="Provision Logo"
-                  style="width: 250px; height:15px;"
-                />
+                <img src="img/logos/provision-logocropped.png" class="pv-Logo" />
               </a>
             </div>
           </div>
   },
 };
 </script>
+<style scoped>
+.pv-Logo {
+  width: 250px;
+  height: 15px;
+}
+.voasa-Logo {
+  width: 90px;
+  height: 45px;
+}
+.rci-Logo {
+  width: 40px;
+  height: 20px;
+}
+.gomelo-Logo {
+  width: 35px;
+  height: 35px;
+}
+.dae-Logo {
+  width: 50px;
+  height: 30px;
+}
+</style>

src/components/shared/navBar.vue

             <!-- <li class="nav-item">
             <a class="nav-link active" @click="routerGoTo('/')">Home</a>
             </li>-->
-            <li class="nav-item dropdowsn">
+            <li class="nav-item dropdown">
               <a
                 class="nav-link dropdown-toggle"
                 href="#"

src/components/timeshare/buy/buyPage.vue

                   <iframe
                     :src="mapUrl"
                     width="100%"
-                    height="450"
+                    height="600"
                     frameborder="0"
                     style="border-radius:10px"
                     allowfullscreen

src/components/timeshare/resort/unitPage.vue

 <template>
   <!-- eslint-disable max-len -->
   <div class="container">
-    <br />
-    <br />
-    <br />
-    <br />
     <div class="row">
       <div class="col-md-12 col-lg-8">
         <div class="title-box-d">
             <div class="title-box-d">
               <h3 class="title-d">Facilities</h3>
             </div>
-            <ul v-if="resort.prUnitFacilities">
-              <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
-            </ul>
+            <div class="row" v-if="resort.prUnitFacilities">
+              <div
+                class="col-md-4"
+                v-for="(item, i) in resort.prUnitFacilities.split('\n')"
+                :key="i"
+              >{{item}}</div>
+            </div>
           </div>
         </div>
         <div class="col-md-6" v-if="week">

src/components/timeshare/sell/sellPage.vue

               <div class="form-group row">
                 <div class="col-md-6">
                   <p>Has your week been spacebanked for the current year?</p>
-                  <div class="form-check">
+                  <div class="custom-control custom-switch">
                     <input
-                      class="form-check-input"
-                      type="radio"
-                      name="spacebankedyear"
-                      id="spacebankedyearyes"
-                      value="Yes"
-                      @change="changeCurrentBanked"
+                      type="checkbox"
+                      class="custom-control-input"
+                      id="customSwitch2"
                       :checked="sellItem.currentYearBanked"
-                    />
-                    <label class="form-check-label" for="spacebankedyearyes">Yes</label>
-                  </div>
-                  <div class="form-check">
-                    <input
-                      class="form-check-input"
-                      type="radio"
-                      name="spacebankedyear"
-                      id="spacebankedyearno"
-                      value="No"
-                      :checked="!sellItem.currentYearBanked"
                       @change="changeCurrentBanked"
                     />
-                    <label class="form-check-label" for="spacebankedyearno">No</label>
+                    <label
+                      class="custom-control-label"
+                      for="customSwitch2"
+                    >{{sellItem.currentYearBanked ? 'Yes' : 'No'}}</label>
                   </div>
                 </div>
                 <div class="col-md-6">
               class="col-form-label col-md-8"
             >1.1 All levy amounts for the current cycle have been paid in full</label>
             <div class="col-md-4">
-              <div class="form-check form-check-inline">
+              <div class="custom-control custom-switch">
                 <input
-                  class="form-check-input"
-                  type="radio"
-                  name="paid"
-                  value="Yes"
+                  type="checkbox"
+                  class="custom-control-input"
+                  id="customSwitch3"
                   :checked="sellItem.leviesPaidInFull"
-                  @change="changeLeviesPaidInFull()"
-                />
-                <label class="form-check-label" for="paid">Yes</label>
-              </div>
-              <div class="form-check form-check-inline">
-                <input
-                  class="form-check-input"
-                  type="radio"
-                  name="paid"
-                  value="No"
-                  :checked="!sellItem.leviesPaidInFull"
-                  @change="changeLeviesPaidInFull()"
+                  @change="changeLeviesPaidInFull"
                 />
-                <label class="form-check-label" for="paid">No</label>
+                <label
+                  class="custom-control-label"
+                  for="customSwitch3"
+                >{{sellItem.leviesPaidInFull ? 'Yes' : 'No'}}</label>
               </div>
             </div>
           </div>
               class="col-form-label col-md-8"
             >1.2 My week is placed for rental this year</label>
             <div class="col-md-4">
-              <div class="form-check form-check-inline">
+              <div class="custom-control custom-switch">
                 <input
-                  class="form-check-input"
-                  type="radio"
-                  name="rental"
-                  value="Yes"
+                  type="checkbox"
+                  class="custom-control-input"
+                  id="customSwitch4"
                   :checked="sellItem.weekPlacedForRental"
-                  @change="changeWeekPlacedForRental()"
-                />
-                <label class="form-check-label" for="paidyes">Yes</label>
-              </div>
-              <div class="form-check form-check-inline">
-                <input
-                  class="form-check-input"
-                  type="radio"
-                  name="rental"
-                  value="No"
-                  :checked="!sellItem.weekPlacedForRental"
-                  @change="changeWeekPlacedForRental()"
+                  @change="changeWeekPlacedForRental"
                 />
-                <label class="form-check-label" for="paidno">No</label>
+                <label
+                  class="custom-control-label"
+                  for="customSwitch4"
+                >{{sellItem.weekPlacedForRental ? 'Yes' : 'No'}}</label>
               </div>
             </div>
           </div>
   </div>
 </template>
 <script>
-import { mapState, mapActions } from "vuex";
-import DetailIndividual from "../../user/timeshareIndividual.vue";
-import BankDetails from "../../shared/bankAccount.vue";
-import Address from "../../misc/address.vue";
+import { mapState, mapActions } from 'vuex';
+import DetailIndividual from '../../user/timeshareIndividual.vue';
+import BankDetails from '../../shared/bankAccount.vue';
+import Address from '../../misc/address.vue';
 
 export default {
-  name: "TimeshareToSell",
+  name: 'TimeshareToSell',
   components: { DetailIndividual, BankDetails, Address },
   created() {
     this.initTimeshare();
   },
   computed: {
-    ...mapState("timeshare", [
-      "resorts",
-      "regions",
-      "detailedRegion",
-      "seasons",
-      "result",
-      "resortBedrooms",
-      "maxSleep",
-      "bankedEntities",
-      "sellItem",
-      "agencies",
-      "agents"
+    ...mapState('timeshare', [
+      'resorts',
+      'regions',
+      'detailedRegion',
+      'seasons',
+      'result',
+      'resortBedrooms',
+      'maxSleep',
+      'bankedEntities',
+      'sellItem',
+      'agencies',
+      'agents',
     ]),
     refAgent() {
       return this.sellItem && this.sellItem.referedByAgent;
-    }
+    },
   },
   methods: {
     submitSale() {
     resortChange() {
       this.onResortChange({
         resortName: this.sellItem.resort.resortName,
-        resortCode: this.sellItem.resort.resortCode
+        resortCode: this.sellItem.resort.resortCode,
       });
 
-      if (this.sellItem && this.sellItem.resort === "Other") {
+      if (this.sellItem && this.sellItem.resort === 'Other') {
         this.sellItem.otherResortName = undefined;
         this.sellItem.otherResort = true;
       } else {
         ? this.sellItem.region.id
         : 1;
     },
-    ...mapActions("timeshare", ["initTimeshare", "onResortChange", "saveWeek"])
-  }
+    ...mapActions('timeshare', ['initTimeshare', 'onResortChange', 'saveWeek']),
+  },
 };
 </script>
 <style>

vue.config.js

   devServer: {
     proxy: {
       '/api': {
-        target: 'http://localhost:57260',
+        target: 'http://192.168.6.188:5000',
         changeOrigin: true,
       },
     },