Main search feature updated

src/components/shared/searchTab.vue

           </div>
           {{selectedPropertyType}}
           <div class="col-md-12">
-            <button type="submit" class="btn btn-b" @click="Search">Search</button>
+            <button type="submit" class="btn btn-b-n" @click="Search">Search</button>
           </div>
         </div>
       </form>

src/components/timeshare/searchTimeshare.vue

     >
       {{filter}}
       <div class="form-group text-left">
-        <label>Region</label>
-        <select class="form-control" name="region" id="region" v-model="filter.region">
-          <option v-for="(item, i) in regions" :key="i" :value="item">{{item.regionName}}</option>
-        </select>
+        <label>Province</label>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>P</b>
+            </span>
+          </div>
+          <select class="form-control" name="region" id="region" v-model="filter.region">
+            <option v-for="(item, i) in regions" :key="i" :value="item">{{item.regionName}}</option>
+          </select>
+        </div>
       </div>
       <div class="form-group text-left">
         <label>Resort Name</label>
-        <select class="form-control" name="resort" id="resort" v-model="filter.resort">
-          <option v-for="(item, i) in filteredResorts" :key="i" :value="item">{{item.resortName}}</option>
-        </select>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>RN</b>
+            </span>
+          </div>
+          <select class="form-control" name="resort" id="resort" v-model="filter.resort">
+            <option v-for="(item, i) in filteredResorts" :key="i" :value="item">{{item.resortName}}</option>
+          </select>
+        </div>
       </div>
       <div class="form-group text-left">
         <label>Bedrooms</label>
-        <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
-          <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
-        </select>
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>Bed</b>
+            </span>
+          </div>
+          <select class="form-control" name="bedrooms" v-model="filter.bedrooms">
+            <option v-for="(item, i) in resortBedrooms" :key="i">{{item}}</option>
+          </select>
+        </div>
       </div>
       <hr />
       <div class="form-group text-left">
         <label>Date</label>
-        <input type="date" class="form-control" name="arrivaldate" v-model="filter.date" />
+        <div class="input-group mb-3">
+          <div class="input-group-prepend">
+            <span class="input-group-text" style="color: #60CBEB">
+              <b>D</b>
+            </span>
+          </div>
+          <input type="date" class="form-control" name="arrivaldate" v-model="filter.date" />
+        </div>
       </div>
       <hr />
       <div class="form-group">
             <label>Minimum Price</label>
             <div class="input-group mb-3">
               <div class="input-group-prepend">
-                <span class="input-group-text">R</span>
+                <span class="input-group-text" style="color: #60CBEB">
+                  <b>R</b>
+                </span>
               </div>
               <input
                 class="form-control"
             <label>Maximum Price</label>
             <div class="input-group mb-3">
               <div class="input-group-prepend">
-                <span class="input-group-text">R</span>
+                <span class="input-group-text" style="color: #60CBEB">
+                  <b>R</b>
+                </span>
               </div>
               <input
                 class="form-control"