Save button color & size change

src/components/property/propertyeditPage.vue

@@ -41,19 +41,21 @@
                 </select>
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
-                <label>Property Name</label>
+                <label for="Property Name"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
                   type="text"
+                  placeholder="Property Name"
                   name="propertyName"
                   id="propertyName"
                   v-model="property.propertyName"
                 />
               </div>
               <div v-if="propertyType === 'Commercial'" class="col-md-4">
-                <label>Unit</label>
+                <label for="Unit"></label>
                 <input
-                  class="form-control form-control-lg form-control-a"
+                  class="form-control"
+                  placeholder="Unit"
                   type="text"
                   name="unit"
                   id="unit"
@@ -220,7 +222,12 @@
               </div>
             </div>
             <ImageLoad :loadedImages="loadedImages" />
-            <button type="button" @click="SubmitData()" class="btn btn-a">Save</button>
+            <button
+              type="button"
+              @click="SubmitData()"
+              class="btn btn-b-n"
+              style="width: 85px; height:40px;"
+            >Save</button>
             <!-- <router-link
               to="/property/search"
               @click.stop.prevent="SubmitData()"
@@ -235,48 +242,48 @@
 </template>
 
 <script>
-import UserField from "./propertyUserField.vue";
-import ImageLoad from "./propertyImage.vue";
+import UserField from './propertyUserField.vue';
+import ImageLoad from './propertyImage.vue';
 // https://vuejsexamples.com/a-vue-wrapper-around-the-trix-rich-text-editor/
 export default {
-  name: "PropertyEdit",
+  name: 'PropertyEdit',
   components: {
     UserField,
-    ImageLoad
+    ImageLoad,
   },
   data() {
     return {
       ApiRunning: true,
-      propertyType: "Residential",
-      salesType: "Rental",
-      imageFile: "",
+      propertyType: 'Residential',
+      salesType: 'Rental',
+      imageFile: '',
       provinces: [],
       cities: [],
       suburbs: [],
       propertyValues: [],
       propValuesProp: [],
       propertyTypes: [],
-      selectedProvince: "",
-      selectedCity: "",
+      selectedProvince: '',
+      selectedCity: '',
       property: {
         propertyTypeId: 0,
-        propertyName: "",
-        unit: "",
-        addressLine1: "",
-        addressLine2: "",
-        addressLine3: "",
+        propertyName: '',
+        unit: '',
+        addressLine1: '',
+        addressLine2: '',
+        addressLine3: '',
         suburbId: 0,
         cityId: 0,
         provinceId: 0,
-        price: "",
-        per: "",
-        description: "",
+        price: '',
+        per: '',
+        description: '',
         isSale: false,
         propertyUserFields: [],
-        propertyImages: []
+        propertyImages: [],
       },
       images: [],
-      propertyFieldValues: []
+      propertyFieldValues: [],
     };
   },
   methods: {
@@ -302,8 +309,8 @@ export default {
 
       // this.$router.push("/property/search");
       this.$router.push({
-        path: "/property/search",
-        query: { type: this.salesType, propertyType: this.propertyType }
+        path: '/property/search',
+        query: { type: this.salesType, propertyType: this.propertyType },
       });
     },
     ProvinceSelected(item) {
@@ -311,10 +318,10 @@ export default {
         this.selectedProvince = this.provinces[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require("axios");
+        const axios = require('axios');
         axios
           .get(
-            `http://localhost:57260/region/city/getby/${this.selectedProvince}`
+            `http://localhost:57260/region/city/getby/${this.selectedProvince}`,
           )
           .then(response => (this.cities = response.data));
       }
@@ -324,10 +331,10 @@ export default {
         this.selectedCity = this.cities[
           item.target.options.selectedIndex - 1
         ].description;
-        const axios = require("axios");
+        const axios = require('axios');
         axios
           .get(
-            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`
+            `http://localhost:57260/region/Suburb/${this.selectedProvince}/${this.selectedCity}`,
           )
           .then(response => (this.suburbs = response.data));
       }
@@ -337,7 +344,7 @@ export default {
     },
     UpdateUserDefinedFields(item) {
       let update = false;
-      this.propertyFieldValues.forEach(element => {
+      this.propertyFieldValues.forEach((element) => {
         if (element.userDefinedFieldId === item.userDefinedFieldId) {
           element.value = item.value;
           update = true;
@@ -346,31 +353,31 @@ export default {
       if (!update) {
         this.propertyFieldValues.push(item);
       }
-    }
+    },
   },
   mounted() {
     this.propertyType = this.$route.params.propType;
     this.salesType = this.$route.params.saleType;
 
-    const axios = require("axios");
+    const axios = require('axios');
     axios
-      .get("http://localhost:57260/Property/PropertyFields/Property Overview")
+      .get('http://localhost:57260/Property/PropertyFields/Property Overview')
       .then(response => (this.propValuesProp = response.data));
 
     axios
       .get(
-        `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`
+        `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`,
       )
       .then(response => (this.propertyValues = response.data));
 
     axios
       .get(
-        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
+        `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
       )
       .then(response => (this.propertyTypes = response.data));
 
     axios
-      .get("http://localhost:57260/region/province")
+      .get('http://localhost:57260/region/province')
       .then(response => (this.provinces = response.data));
   },
   computed: {
@@ -378,24 +385,24 @@ export default {
       this.propertyType = this.$route.params.propType;
       this.salesType = this.$route.params.saleType;
 
-      const axios = require("axios");
+      const axios = require('axios');
       axios
         .get(
-          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`
+          `http://localhost:57260/Property/PropertyType/type/${this.propertyType}`,
         )
         .then(response => (this.propertyTypes = response.data));
 
       axios
         .get(
-          `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`
+          `http://localhost:57260/property/propertyfields/Propertytype/${this.propertyType}`,
         )
         .then(response => (this.propertyValues = response.data));
-    }
+    },
   },
   watch: {
     SalesTypeChanged() {
       console.log(this.salesType);
-    }
-  }
+    },
+  },
 };
-</script>
+</script>