Well added to sell page

src/components/misc/address.vue

@@ -3,7 +3,9 @@
   <div>
     <br />
     <div class="col-md-12" style="text-align:centre">
-      <h4>Address</h4>
+      <div class="myWell">
+        <h4>Address</h4>
+      </div>
       <div class="form-group row"></div>
       <div class="row" style="text-align:left">
         <div class="col-md-6" style="margin-bottom: 1em">

src/components/shared/bankAccount.vue

@@ -3,7 +3,9 @@
   <div>
     <br />
     <div class="col-md-12" style="text-align:centre">
-      <h4>Banking Details</h4>
+      <div class="myWell">
+        <h4>Banking Details</h4>
+      </div>
       <div class="form-group row"></div>
       <div class="row" style="text-align:left">
         <div class="col-md-6" style="margin-bottom: 1em">

src/components/timeshare/sell/sellPage.vue

@@ -21,17 +21,22 @@
         </div>
         <br />
         <div>
-          <div style="float: right;" class="btn btn-link color-b">
-            <router-link to="LinkToBeSelected">
-              Bulk Weeks Upload
-              <span class="ion-ios-arrow-forward" style="color:#60CBEB"></span>
-            </router-link>
+          <div class="container col-md-10">
+            <div class="myWell">
+              <h4>Week Information</h4>
+            </div>
+            <div style="float: right;" class="btn btn-link color-b">
+              <router-link to="LinkToBeSelected">
+                Bulk Weeks Upload
+                <span class="ion-ios-arrow-forward" style="color:#60CBEB"></span>
+              </router-link>
+            </div>
           </div>
+          <br />
+          <br />
+          <p>* You need to be logged in to submit your listing. Please register and log in if you have not done so already.</p>
+          <hr />
         </div>
-        <br />
-        <br />
-        <p>* You need to be logged in to submit your listing. Please register and log in if you have not done so already.</p>
-        <hr />
       </div>
     </div>
     <div class="row mb-4">
@@ -82,9 +87,9 @@
             </div>
           </div>
           <div class="container">
-            <div class="offset-md-1 col-md-12">
+            <div class="col-md-12" style="text-align:left">
               <div class="form-group row">
-                <div class="col-md-5">
+                <div class="col-md-6">
                   <label for="Resort Name">Resort Name</label>
                   <div class="input-group mb-3">
                     <div class="input-group-prepend">
@@ -108,29 +113,41 @@
                     </select>
                   </div>
                 </div>
-                <div class="col-md-5">
+                <div class="col-md-6">
                   <label for="* If other" v-if="sellItem.otherResort">Name of resort</label>
-                  <input
-                    class="form-control"
-                    v-if="sellItem.otherResort"
-                    placeholder="* If other"
-                    type="text"
-                    name="other"
-                    v-model="sellItem.otherResortName"
-                  />
-                </div>
-              </div>
-              <div class="form-group row">
-                <div class="col-md-3">
-                  <label for="Region">Province</label>
                   <div class="input-group mb-3">
                     <div class="input-group-prepend">
-                      <span class="input-group-text" style="color: #60CBEB">
+                      <span
+                        class="input-group-text"
+                        style="color: #60CBEB"
+                        v-if="sellItem.otherResort"
+                      >
+                        <b>RN</b>
+                      </span>
+                    </div>
+                    <input
+                      class="form-control"
+                      v-if="sellItem.otherResort"
+                      placeholder="* If other"
+                      type="text"
+                      name="other"
+                      v-model="sellItem.otherResortName"
+                    />
+                  </div>
+                  <label for="Region" v-if="sellItem.otherResort">Province</label>
+                  <div class="input-group mb-3">
+                    <div class="input-group-prepend">
+                      <span
+                        class="input-group-text"
+                        style="color: #60CBEB"
+                        v-if="sellItem.otherResort"
+                      >
                         <b>P</b>
                       </span>
                     </div>
                     <select
                       class="form-control"
+                      v-if="sellItem.otherResort"
                       name="region"
                       id="region"
                       v-model="sellItem.region"
@@ -139,21 +156,26 @@
                     </select>
                   </div>
                 </div>
-                <div class="col-md-3">
-                  <label for="Season">Season</label>
+              </div>
+              <div class="form-group row">
+                <div class="col-md-6">
+                  <label for="Unit number">Unit Number</label>
                   <div class="input-group mb-3">
                     <div class="input-group-prepend">
                       <span class="input-group-text" style="color: #60CBEB">
-                        <b>S</b>
+                        <b>U#</b>
                       </span>
                     </div>
-                    <select class="form-control" name="season" v-model="sellItem.season">
-                      <option v-for="(season, r) in seasons" :key="r">{{season.name}}</option>
-                    </select>
+                    <input
+                      class="form-control"
+                      type="text"
+                      name="unit"
+                      v-model="sellItem.unitNumber"
+                    />
                   </div>
                 </div>
-                <div class="col-md-2">
-                  <label for="Module">Module</label>
+                <div class="col-md-6">
+                  <label for="Module">Module / Week Number</label>
                   <div class="input-group mb-3">
                     <div class="input-group-prepend">
                       <span class="input-group-text" style="color: #60CBEB">
@@ -163,25 +185,22 @@
                     <input class="form-control" type="text" name="module" v-model="sellItem.module" />
                   </div>
                 </div>
-                <div class="col-md-2">
-                  <label for="Week number">Week Number</label>
+              </div>
+              <div class="form-group row">
+                <div class="col-md-6">
+                  <label for="Season">Season</label>
                   <div class="input-group mb-3">
                     <div class="input-group-prepend">
                       <span class="input-group-text" style="color: #60CBEB">
-                        <b>W#</b>
+                        <b>S</b>
                       </span>
                     </div>
-                    <input
-                      class="form-control"
-                      type="text"
-                      name="week"
-                      v-model="sellItem.weekNumber"
-                    />
+                    <select class="form-control" name="season" v-model="sellItem.season">
+                      <option v-for="(season, r) in seasons" :key="r">{{season.name}}</option>
+                    </select>
                   </div>
                 </div>
-              </div>
-              <div class="form-group row">
-                <div class="col-md-4">
+                <div class="col-md-6">
                   <label for="Bedrooms">Bedrooms</label>
                   <div class="input-group mb-3">
                     <div class="input-group-prepend">
@@ -194,7 +213,7 @@
                     </select>
                   </div>
                 </div>
-                <div class="col-md-3">
+                <div class="col-md-6">
                   <label for="Sleeps maximum">Sleep max</label>
                   <div class="input-group mb-3">
                     <div class="input-group-prepend">
@@ -207,25 +226,26 @@
                     </select>
                   </div>
                 </div>
-                <div class="col-md-3">
-                  <label for="Unit number">Unit Number</label>
+                <div class="col-md-6">
+                  <label for="Levy">Levy Amount</label>
                   <div class="input-group mb-3">
                     <div class="input-group-prepend">
                       <span class="input-group-text" style="color: #60CBEB">
-                        <b>U#</b>
+                        <b>R</b>
                       </span>
                     </div>
                     <input
                       class="form-control"
-                      type="text"
-                      name="unit"
-                      v-model="sellItem.unitNumber"
+                      type="number"
+                      step="any"
+                      name="levy"
+                      v-model="sellItem.levyAmount"
                     />
                   </div>
                 </div>
               </div>
               <div class="form-group row">
-                <div class="col-md-7">
+                <div class="col-md-12">
                   <label for="Owner">Owner</label>
                   <div class="input-group mb-3">
                     <div class="input-group-prepend">
@@ -236,23 +256,6 @@
                     <input class="form-control" type="text" name="owner" v-model="sellItem.owner" />
                   </div>
                 </div>
-                <div class="col-md-3">
-                  <label for="Levy">Levy Amount</label>
-                  <div class="input-group mb-3">
-                    <div class="input-group-prepend">
-                      <span class="input-group-text" style="color: #60CBEB">
-                        <b>R</b>
-                      </span>
-                    </div>
-                    <input
-                      class="form-control"
-                      type="number"
-                      step="any"
-                      name="levy"
-                      v-model="sellItem.levyAmount"
-                    />
-                  </div>
-                </div>
               </div>
 
               <div class="form-group row">
@@ -322,7 +325,9 @@
           </div>
           <hr />
           <br />
-          <h3>Share transfer information</h3>
+          <div class="myWell">
+            <h4>Share transfer information</h4>
+          </div>
           <br />
           <tr>
             <td>1. With respect to my timeshare module/week, I confirm that:</td>
@@ -595,3 +600,12 @@ export default {
   },
 };
 </script>
+<style>
+.myWell {
+  width: 100%;
+  background-color: #60cbeb;
+  border-radius: 6px;
+  padding: 5px;
+  margin: 3px;
+}
+</style>

src/components/user/timeshareIndividual.vue

@@ -4,7 +4,9 @@
     <hr />
     <br />
     <div class="col-md-12" style="text-align:centre">
-      <h4>Detailed Individual Information</h4>
+      <div class="myWell">
+        <h4>Detailed Individual Information</h4>
+      </div>
       <div class="form-group row"></div>
       <div class="row" style="text-align:left">
         <div class="col-md-6">