icons in occupant modals

public-typescript/lotOccupancyEdit.js

@@ -476,8 +476,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         let editCloseModalFunction;
         function editOccupant(submitEvent) {
             submitEvent.preventDefault();
-            cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyOccupant', editFormElement, (responseJSON) => {
+            cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyOccupant', editFormElement, (rawResponseJSON) => {
                 var _a;
+                const responseJSON = rawResponseJSON;
                 if (responseJSON.success) {
                     lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
                     editCloseModalFunction();
@@ -506,6 +507,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     optionElement.textContent = lotOccupantType.lotOccupantType;
                     optionElement.dataset.occupantCommentTitle =
                         lotOccupantType.occupantCommentTitle;
+                    optionElement.dataset.fontAwesomeIconClass =
+                        lotOccupantType.fontAwesomeIconClass;
                     if (lotOccupantType.lotOccupantTypeId ===
                         lotOccupancyOccupant.lotOccupantTypeId) {
                         optionElement.selected = true;
@@ -519,10 +522,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     optionElement.textContent = lotOccupancyOccupant.lotOccupantType;
                     optionElement.dataset.occupantCommentTitle =
                         lotOccupancyOccupant.occupantCommentTitle;
+                    optionElement.dataset.fontAwesomeIconClass =
+                        lotOccupancyOccupant.fontAwesomeIconClass;
                     optionElement.selected = true;
                     lotOccupantTypeSelectElement.append(optionElement);
                 }
-                ;
+                modalElement.querySelector('#lotOccupancyOccupantEdit--fontAwesomeIconClass').innerHTML = `<i class="fas fa-fw fa-${lotOccupancyOccupant.fontAwesomeIconClass}" aria-hidden="true"></i>`;
                 modalElement.querySelector('#lotOccupancyOccupantEdit--occupantName').value = lotOccupancyOccupant.occupantName;
                 modalElement.querySelector('#lotOccupancyOccupantEdit--occupantAddress1').value = lotOccupancyOccupant.occupantAddress1;
                 modalElement.querySelector('#lotOccupancyOccupantEdit--occupantAddress2').value = lotOccupancyOccupant.occupantAddress2;
@@ -542,9 +547,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 const lotOccupantTypeIdElement = modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantTypeId');
                 lotOccupantTypeIdElement.focus();
                 lotOccupantTypeIdElement.addEventListener('change', () => {
-                    var _a;
+                    var _a, _b;
-                    let occupantCommentTitle = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                    const fontAwesomeIconClass = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
-                        .occupantCommentTitle) !== null && _a !== void 0 ? _a : '';
+                        .fontAwesomeIconClass) !== null && _a !== void 0 ? _a : 'user';
+                    modalElement.querySelector('#lotOccupancyOccupantEdit--fontAwesomeIconClass').innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`;
+                    let occupantCommentTitle = (_b = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                        .occupantCommentTitle) !== null && _b !== void 0 ? _b : '';
                     if (occupantCommentTitle === '') {
                         occupantCommentTitle = 'Comment';
                     }
@@ -566,8 +574,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
             cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancyOccupant', {
                 lotOccupancyId,
                 lotOccupantIndex
-            }, (responseJSON) => {
+            }, (rawResponseJSON) => {
                 var _a;
+                const responseJSON = rawResponseJSON;
                 if (responseJSON.success) {
                     lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
                     renderLotOccupancyOccupants();
@@ -706,8 +715,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
         let searchFormElement;
         let searchResultsElement;
         function addOccupant(formOrObject) {
-            cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doAddLotOccupancyOccupant', formOrObject, (responseJSON) => {
+            cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doAddLotOccupancyOccupant', formOrObject, (rawResponseJSON) => {
                 var _a;
+                const responseJSON = rawResponseJSON;
                 if (responseJSON.success) {
                     lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
                     addCloseModalFunction();
@@ -758,8 +768,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
             }
             searchResultsElement.innerHTML =
                 los.getLoadingParagraphHTML('Searching...');
-            cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doSearchPastOccupants', searchFormElement, (responseJSON) => {
+            cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doSearchPastOccupants', searchFormElement, (rawResponseJSON) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h;
+                const responseJSON = rawResponseJSON;
                 pastOccupantSearchResults = responseJSON.occupants;
                 const panelElement = document.createElement('div');
                 panelElement.className = 'panel';
@@ -813,6 +824,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
                     optionElement.textContent = lotOccupantType.lotOccupantType;
                     optionElement.dataset.occupantCommentTitle =
                         lotOccupantType.occupantCommentTitle;
+                    optionElement.dataset.fontAwesomeIconClass =
+                        lotOccupantType.fontAwesomeIconClass;
                     lotOccupantTypeSelectElement.append(optionElement);
                     lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true));
                 }
@@ -826,9 +839,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
                 const lotOccupantTypeIdElement = modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId');
                 lotOccupantTypeIdElement.focus();
                 lotOccupantTypeIdElement.addEventListener('change', () => {
-                    var _a;
+                    var _a, _b;
-                    let occupantCommentTitle = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                    const fontAwesomeIconClass = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
-                        .occupantCommentTitle) !== null && _a !== void 0 ? _a : '';
+                        .fontAwesomeIconClass) !== null && _a !== void 0 ? _a : 'user';
+                    modalElement.querySelector('#lotOccupancyOccupantAdd--fontAwesomeIconClass').innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`;
+                    let occupantCommentTitle = (_b = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                        .occupantCommentTitle) !== null && _b !== void 0 ? _b : '';
                     if (occupantCommentTitle === '') {
                         occupantCommentTitle = 'Comment';
                     }

public-typescript/lotOccupancyEdit/lotOccupancyEditOccupants.js

@@ -14,8 +14,9 @@ function openEditLotOccupancyOccupant(clickEvent) {
     let editCloseModalFunction;
     function editOccupant(submitEvent) {
         submitEvent.preventDefault();
-        cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyOccupant', editFormElement, (responseJSON) => {
+        cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyOccupant', editFormElement, (rawResponseJSON) => {
             var _a;
+            const responseJSON = rawResponseJSON;
             if (responseJSON.success) {
                 lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
                 editCloseModalFunction();
@@ -44,6 +45,8 @@ function openEditLotOccupancyOccupant(clickEvent) {
                 optionElement.textContent = lotOccupantType.lotOccupantType;
                 optionElement.dataset.occupantCommentTitle =
                     lotOccupantType.occupantCommentTitle;
+                optionElement.dataset.fontAwesomeIconClass =
+                    lotOccupantType.fontAwesomeIconClass;
                 if (lotOccupantType.lotOccupantTypeId ===
                     lotOccupancyOccupant.lotOccupantTypeId) {
                     optionElement.selected = true;
@@ -57,10 +60,12 @@ function openEditLotOccupancyOccupant(clickEvent) {
                 optionElement.textContent = lotOccupancyOccupant.lotOccupantType;
                 optionElement.dataset.occupantCommentTitle =
                     lotOccupancyOccupant.occupantCommentTitle;
+                optionElement.dataset.fontAwesomeIconClass =
+                    lotOccupancyOccupant.fontAwesomeIconClass;
                 optionElement.selected = true;
                 lotOccupantTypeSelectElement.append(optionElement);
             }
-            ;
+            modalElement.querySelector('#lotOccupancyOccupantEdit--fontAwesomeIconClass').innerHTML = `<i class="fas fa-fw fa-${lotOccupancyOccupant.fontAwesomeIconClass}" aria-hidden="true"></i>`;
             modalElement.querySelector('#lotOccupancyOccupantEdit--occupantName').value = lotOccupancyOccupant.occupantName;
             modalElement.querySelector('#lotOccupancyOccupantEdit--occupantAddress1').value = lotOccupancyOccupant.occupantAddress1;
             modalElement.querySelector('#lotOccupancyOccupantEdit--occupantAddress2').value = lotOccupancyOccupant.occupantAddress2;
@@ -80,9 +85,12 @@ function openEditLotOccupancyOccupant(clickEvent) {
             const lotOccupantTypeIdElement = modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantTypeId');
             lotOccupantTypeIdElement.focus();
             lotOccupantTypeIdElement.addEventListener('change', () => {
-                var _a;
+                var _a, _b;
-                let occupantCommentTitle = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                const fontAwesomeIconClass = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
-                    .occupantCommentTitle) !== null && _a !== void 0 ? _a : '';
+                    .fontAwesomeIconClass) !== null && _a !== void 0 ? _a : 'user';
+                modalElement.querySelector('#lotOccupancyOccupantEdit--fontAwesomeIconClass').innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`;
+                let occupantCommentTitle = (_b = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                    .occupantCommentTitle) !== null && _b !== void 0 ? _b : '';
                 if (occupantCommentTitle === '') {
                     occupantCommentTitle = 'Comment';
                 }
@@ -104,8 +112,9 @@ function deleteLotOccupancyOccupant(clickEvent) {
         cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancyOccupant', {
             lotOccupancyId,
             lotOccupantIndex
-        }, (responseJSON) => {
+        }, (rawResponseJSON) => {
             var _a;
+            const responseJSON = rawResponseJSON;
             if (responseJSON.success) {
                 lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
                 renderLotOccupancyOccupants();
@@ -244,8 +253,9 @@ else {
     let searchFormElement;
     let searchResultsElement;
     function addOccupant(formOrObject) {
-        cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doAddLotOccupancyOccupant', formOrObject, (responseJSON) => {
+        cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doAddLotOccupancyOccupant', formOrObject, (rawResponseJSON) => {
             var _a;
+            const responseJSON = rawResponseJSON;
             if (responseJSON.success) {
                 lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
                 addCloseModalFunction();
@@ -296,8 +306,9 @@ else {
         }
         searchResultsElement.innerHTML =
             los.getLoadingParagraphHTML('Searching...');
-        cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doSearchPastOccupants', searchFormElement, (responseJSON) => {
+        cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doSearchPastOccupants', searchFormElement, (rawResponseJSON) => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
+            const responseJSON = rawResponseJSON;
             pastOccupantSearchResults = responseJSON.occupants;
             const panelElement = document.createElement('div');
             panelElement.className = 'panel';
@@ -351,6 +362,8 @@ else {
                 optionElement.textContent = lotOccupantType.lotOccupantType;
                 optionElement.dataset.occupantCommentTitle =
                     lotOccupantType.occupantCommentTitle;
+                optionElement.dataset.fontAwesomeIconClass =
+                    lotOccupantType.fontAwesomeIconClass;
                 lotOccupantTypeSelectElement.append(optionElement);
                 lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true));
             }
@@ -364,9 +377,12 @@ else {
             const lotOccupantTypeIdElement = modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId');
             lotOccupantTypeIdElement.focus();
             lotOccupantTypeIdElement.addEventListener('change', () => {
-                var _a;
+                var _a, _b;
-                let occupantCommentTitle = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                const fontAwesomeIconClass = (_a = lotOccupantTypeIdElement.selectedOptions[0].dataset
-                    .occupantCommentTitle) !== null && _a !== void 0 ? _a : '';
+                    .fontAwesomeIconClass) !== null && _a !== void 0 ? _a : 'user';
+                modalElement.querySelector('#lotOccupancyOccupantAdd--fontAwesomeIconClass').innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`;
+                let occupantCommentTitle = (_b = lotOccupantTypeIdElement.selectedOptions[0].dataset
+                    .occupantCommentTitle) !== null && _b !== void 0 ? _b : '';
                 if (occupantCommentTitle === '') {
                     occupantCommentTitle = 'Comment';
                 }

public-typescript/lotOccupancyEdit/lotOccupancyEditOccupants.ts

@@ -42,11 +42,13 @@ function openEditLotOccupancyOccupant(clickEvent: Event): void {
     cityssm.postJSON(
       los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyOccupant',
       editFormElement,
-      (responseJSON: {
+      (rawResponseJSON) => {
+        const responseJSON = rawResponseJSON as {
           success: boolean
           errorMessage?: string
           lotOccupancyOccupants?: recordTypes.LotOccupancyOccupant[]
-      }) => {
+        }
+
         if (responseJSON.success) {
           lotOccupancyOccupants = responseJSON.lotOccupancyOccupants!
           editCloseModalFunction()
@@ -86,9 +88,13 @@ function openEditLotOccupancyOccupant(clickEvent: Event): void {
         const optionElement = document.createElement('option')
         optionElement.value = lotOccupantType.lotOccupantTypeId.toString()
         optionElement.textContent = lotOccupantType.lotOccupantType
+
         optionElement.dataset.occupantCommentTitle =
           lotOccupantType.occupantCommentTitle
 
+        optionElement.dataset.fontAwesomeIconClass =
+          lotOccupantType.fontAwesomeIconClass
+
         if (
           lotOccupantType.lotOccupantTypeId ===
           lotOccupancyOccupant.lotOccupantTypeId
@@ -105,13 +111,21 @@ function openEditLotOccupancyOccupant(clickEvent: Event): void {
 
         optionElement.value = lotOccupancyOccupant.lotOccupantTypeId!.toString()
         optionElement.textContent = lotOccupancyOccupant.lotOccupantType!
+
         optionElement.dataset.occupantCommentTitle =
           lotOccupancyOccupant.occupantCommentTitle!
+
+        optionElement.dataset.fontAwesomeIconClass =
+          lotOccupancyOccupant.fontAwesomeIconClass!
+
         optionElement.selected = true
 
         lotOccupantTypeSelectElement.append(optionElement)
       }
 
+      modalElement.querySelector(
+        '#lotOccupancyOccupantEdit--fontAwesomeIconClass'
+      )!.innerHTML = `<i class="fas fa-fw fa-${lotOccupancyOccupant.fontAwesomeIconClass!}" aria-hidden="true"></i>`
       ;(
         modalElement.querySelector(
           '#lotOccupancyOccupantEdit--occupantName'
@@ -176,6 +190,14 @@ function openEditLotOccupancyOccupant(clickEvent: Event): void {
       lotOccupantTypeIdElement.focus()
 
       lotOccupantTypeIdElement.addEventListener('change', () => {
+        const fontAwesomeIconClass =
+          lotOccupantTypeIdElement.selectedOptions[0].dataset
+            .fontAwesomeIconClass ?? 'user'
+
+        modalElement.querySelector(
+          '#lotOccupancyOccupantEdit--fontAwesomeIconClass'
+        )!.innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`
+
         let occupantCommentTitle =
           lotOccupantTypeIdElement.selectedOptions[0].dataset
             .occupantCommentTitle ?? ''
@@ -213,11 +235,13 @@ function deleteLotOccupancyOccupant(clickEvent: Event): void {
         lotOccupancyId,
         lotOccupantIndex
       },
-      (responseJSON: {
+      (rawResponseJSON) => {
+        const responseJSON = rawResponseJSON as {
           success: boolean
           errorMessage?: string
           lotOccupancyOccupants: recordTypes.LotOccupancyOccupant[]
-      }) => {
+        }
+
         if (responseJSON.success) {
           lotOccupancyOccupants = responseJSON.lotOccupancyOccupants
           renderLotOccupancyOccupants()
@@ -389,11 +413,13 @@ document
       cityssm.postJSON(
         los.urlPrefix + '/lotOccupancies/doAddLotOccupancyOccupant',
         formOrObject,
-        (responseJSON: {
+        (rawResponseJSON) => {
+          const responseJSON = rawResponseJSON as {
             success: boolean
             errorMessage?: string
             lotOccupancyOccupants?: recordTypes.LotOccupancyOccupant[]
-        }) => {
+          }
+
           if (responseJSON.success) {
             lotOccupancyOccupants = responseJSON.lotOccupancyOccupants!
             addCloseModalFunction()
@@ -471,7 +497,11 @@ document
       cityssm.postJSON(
         los.urlPrefix + '/lotOccupancies/doSearchPastOccupants',
         searchFormElement,
-        (responseJSON: { occupants: recordTypes.LotOccupancyOccupant[] }) => {
+        (rawResponseJSON) => {
+          const responseJSON = rawResponseJSON as {
+            occupants: recordTypes.LotOccupancyOccupant[]
+          }
+
           pastOccupantSearchResults = responseJSON.occupants
 
           const panelElement = document.createElement('div')
@@ -542,9 +572,13 @@ document
           const optionElement = document.createElement('option')
           optionElement.value = lotOccupantType.lotOccupantTypeId.toString()
           optionElement.textContent = lotOccupantType.lotOccupantType
+
           optionElement.dataset.occupantCommentTitle =
             lotOccupantType.occupantCommentTitle
 
+          optionElement.dataset.fontAwesomeIconClass =
+            lotOccupantType.fontAwesomeIconClass
+
           lotOccupantTypeSelectElement.append(optionElement)
 
           lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true))
@@ -572,6 +606,14 @@ document
         lotOccupantTypeIdElement.focus()
 
         lotOccupantTypeIdElement.addEventListener('change', () => {
+          const fontAwesomeIconClass =
+            lotOccupantTypeIdElement.selectedOptions[0].dataset
+              .fontAwesomeIconClass ?? 'user'
+
+          modalElement.querySelector(
+            '#lotOccupancyOccupantAdd--fontAwesomeIconClass'
+          )!.innerHTML = `<i class="fas fa-fw fa-${fontAwesomeIconClass}" aria-hidden="true"></i>`
+
           let occupantCommentTitle =
             lotOccupantTypeIdElement.selectedOptions[0].dataset
               .occupantCommentTitle ?? ''

public/html/lotOccupancy-addOccupant.html

@@ -15,10 +15,20 @@
       <div class="tabs is-boxed">
         <ul>
           <li class="is-active">
-            <a href="#tab--lotOccupancyOccupantAdd-new">Create New</a>
+            <a href="#tab--lotOccupancyOccupantAdd-new">
+              <span class="icon is-small">
+                <i class="fas fa-plus" aria-hidden="true"></i>
+              </span>
+              <span>Create New</span>
+            </a>
           </li>
           <li>
-            <a href="#tab--lotOccupancyOccupantAdd-copy">Copy Previous</a>
+            <a href="#tab--lotOccupancyOccupantAdd-copy">
+              <span class="icon is-small">
+                <i class="fas fa-copy" aria-hidden="true"></i>
+              </span>
+              <span>Copy Previous</span>
+            </a>
           </li>
         </ul>
       </div>
@@ -31,23 +41,28 @@
               type="hidden"
               value=""
             />
-            <div class="field">
             <label
               class="label"
               for="lotOccupancyOccupantAdd--lotOccupantTypeId"
               ><span class="alias" data-alias="Occupant"></span> Type</label
             >
-              <div class="control">
+            <div class="field has-addons">
+              <div class="control is-expanded">
                 <div class="select is-fullwidth">
                   <select
                     id="lotOccupancyOccupantAdd--lotOccupantTypeId"
                     name="lotOccupantTypeId"
                     required
                   >
-                    <option value="">(Select a Type)</option>
+                    <option value="" data-font-awesome-icon-class="user">(Select a Type)</option>
                   </select>
                 </div>
               </div>
+              <div class="control">
+                <span class="button is-static" id="lotOccupancyOccupantAdd--fontAwesomeIconClass">
+                  <i class="fas fa-fw fa-user" aria-hidden="true"></i>
+                </span>
+              </div>
             </div>
             <div class="field">
               <label class="label" for="lotOccupancyOccupantAdd--occupantName"
@@ -156,13 +171,13 @@
             </div>
             <div class="columns">
               <div class="column">
-                <div class="field">
                 <label
                   class="label"
                   for="lotOccupancyOccupantAdd--occupantPhoneNumber"
                   >Phone Number</label
                 >
-                  <div class="control">
+                <div class="field">
+                  <div class="control has-icons-left">
                     <input
                       class="input"
                       id="lotOccupancyOccupantAdd--occupantPhoneNumber"
@@ -171,17 +186,20 @@
                       maxlength="30"
                       autocomplete="off"
                     />
+                    <span class="icon is-small is-left">
+                      <i class="fas fa-phone" aria-hidden="true"></i>
+                    </span>
                   </div>
                 </div>
               </div>
               <div class="column">
-                <div class="field">
                 <label
                   class="label"
                   for="lotOccupancyOccupantAdd--occupantEmailAddress"
                   >Email Address</label
                 >
-                  <div class="control">
+                <div class="field">
+                  <div class="control has-icons-left">
                     <input
                       class="input"
                       id="lotOccupancyOccupantAdd--occupantEmailAddress"
@@ -190,6 +208,9 @@
                       maxlength="200"
                       autocomplete="off"
                     />
+                    <span class="icon is-small is-left">
+                      <i class="fas fa-envelope" aria-hidden="true"></i>
+                    </span>
                   </div>
                 </div>
               </div>

public/html/lotOccupancy-editOccupant.html

@@ -25,11 +25,11 @@
           type="hidden"
           value=""
         />
-        <div class="field">
         <label class="label" for="lotOccupancyOccupantEdit--lotOccupantTypeId"
           ><span class="alias" data-alias="Occupant"></span> Type</label
         >
-          <div class="control">
+        <div class="field has-addons">
+          <div class="control is-expanded">
             <div class="select is-fullwidth">
               <select
                 id="lotOccupancyOccupantEdit--lotOccupantTypeId"
@@ -38,6 +38,9 @@
               ></select>
             </div>
           </div>
+          <div class="control">
+            <span class="button is-static" id="lotOccupancyOccupantEdit--fontAwesomeIconClass"></span>
+          </div>
         </div>
         <div class="field">
           <label class="label" for="lotOccupancyOccupantEdit--occupantName"
@@ -142,13 +145,13 @@
         </div>
         <div class="columns">
           <div class="column">
-            <div class="field">
             <label
               class="label"
               for="lotOccupancyOccupantEdit--occupantPhoneNumber"
               >Phone Number</label
             >
-              <div class="control">
+            <div class="field">
+              <div class="control has-icons-left">
                 <input
                   class="input"
                   id="lotOccupancyOccupantEdit--occupantPhoneNumber"
@@ -157,17 +160,20 @@
                   maxlength="30"
                   autocomplete="off"
                 />
+                <span class="icon is-small is-left">
+                  <i class="fas fa-phone" aria-hidden="true"></i>
+                </span>
               </div>
             </div>
           </div>
           <div class="column">
-            <div class="field">
             <label
               class="label"
               for="lotOccupancyOccupantEdit--occupantEmailAddress"
               >Email Address</label
             >
-              <div class="control">
+            <div class="field">
+              <div class="control has-icons-left">
                 <input
                   class="input"
                   id="lotOccupancyOccupantEdit--occupantEmailAddress"
@@ -176,6 +182,9 @@
                   maxlength="200"
                   autocomplete="off"
                 />
+                <span class="icon is-small is-left">
+                  <i class="fas fa-envelope" aria-hidden="true"></i>
+                </span>
               </div>
             </div>
           </div>