From 4389eebaecedf940bf3a87d7cacdb8894873c2c8 Mon Sep 17 00:00:00 2001
From: Kyle Morel <kyle.1.morel@gov.bc.ca>
Date: Mon, 3 Jun 2024 14:40:51 -0700
Subject: [PATCH] Form text and alignment updates

---
 frontend/src/assets/images/house.png          | Bin 0 -> 3658 bytes
 .../housing/intake/ShasEnquiryForm.vue        |   8 +-
 .../housing/intake/ShasIntakeForm.vue         |  25 +++--
 frontend/src/views/HomeView.vue               |   2 +-
 frontend/src/views/housing/HousingView.vue    |  91 ++++++++++--------
 5 files changed, 72 insertions(+), 54 deletions(-)
 create mode 100644 frontend/src/assets/images/house.png

diff --git a/frontend/src/assets/images/house.png b/frontend/src/assets/images/house.png
new file mode 100644
index 0000000000000000000000000000000000000000..abba1e37d31480d574df13752cf045fe6aa1180d
GIT binary patch
literal 3658
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

literal 0
HcmV?d00001

diff --git a/frontend/src/components/housing/intake/ShasEnquiryForm.vue b/frontend/src/components/housing/intake/ShasEnquiryForm.vue
index 4e625bb57..492197817 100644
--- a/frontend/src/components/housing/intake/ShasEnquiryForm.vue
+++ b/frontend/src/components/housing/intake/ShasEnquiryForm.vue
@@ -80,7 +80,7 @@ async function confirmNext(data: any) {
   confirm.require({
     /* eslint-disable max-len */
     message:
-      'After confirming, your enquiry will get submitted, and you will be directed to the PermitConnect Navigator Service application.',
+      'After confirming, your enquiry will be submitted, and you will be directed to register your project with a Navigator.',
     /*eslint-enable max-len */
     header: 'Please confirm',
     acceptLabel: 'Confirm',
@@ -355,8 +355,8 @@ onBeforeMount(async () => {
       <Card v-if="values.basic?.isRelated === BASIC_RESPONSES.NO">
         <template #title>
           <div class="flex">
-            <span class="section-header">Would you like to register for Navigator assistance with a project?</span>
-            <div v-tooltip.right="`Consider applying if you are working or getting started on a housing project.`">
+            <span class="section-header">Would you like to register your project with a Navigator?</span>
+            <div v-tooltip.right="`Consider registering if you are working or getting started on a housing project.`">
               <font-awesome-icon icon="fa-solid fa-circle-question" />
             </div>
           </div>
@@ -375,7 +375,7 @@ onBeforeMount(async () => {
               v-if="values.basic?.applyForPermitConnect === BASIC_RESPONSES.YES"
               class="col-12 text-blue-500"
             >
-              Please proceed to the next page. It will take you to the Single Housing Application.
+              Please proceed to the next page to register your project with a Navigator.
             </div>
           </div>
         </template>
diff --git a/frontend/src/components/housing/intake/ShasIntakeForm.vue b/frontend/src/components/housing/intake/ShasIntakeForm.vue
index 0c45ae929..beb36733c 100644
--- a/frontend/src/components/housing/intake/ShasIntakeForm.vue
+++ b/frontend/src/components/housing/intake/ShasIntakeForm.vue
@@ -419,8 +419,6 @@ onBeforeMount(async () => {
             />
           </template>
           <template #content="{ prevCallback, nextCallback }">
-            <CollectionDisclaimer />
-
             <Message
               v-if="validationErrors.length"
               severity="error"
@@ -441,7 +439,7 @@ onBeforeMount(async () => {
                   <InputText
                     class="col-6"
                     name="housing.projectName"
-                    label="Type in project name - well known title like Capital Park"
+                    label="Type in project - well known title like Capital Park"
                     :bold="false"
                     :disabled="!editable"
                   />
@@ -769,8 +767,6 @@ onBeforeMount(async () => {
             />
           </template>
           <template #content="{ prevCallback, nextCallback }">
-            <CollectionDisclaimer />
-
             <Message
               v-if="validationErrors.length"
               severity="error"
@@ -784,7 +780,9 @@ onBeforeMount(async () => {
             <Card>
               <template #title>
                 <div class="flex">
-                  <span class="section-header">Has the location of the project been affected by natural disaster?</span>
+                  <span class="section-header">
+                    Has the location of this project been affected by natural disaster?
+                  </span>
                 </div>
                 <Divider type="solid" />
               </template>
@@ -926,11 +924,20 @@ onBeforeMount(async () => {
                     <Card class="no-shadow">
                       <template #content>
                         <div class="formgrid grid">
+                          <div class="col-12">
+                            <label>
+                              <a
+                                href="https://ltsa.ca/property-owners/about-land-records/property-information-resources/"
+                                target="_blank"
+                              >
+                                LTSA PID Lookup
+                              </a>
+                            </label>
+                          </div>
                           <!-- eslint-disable max-len -->
                           <InputText
                             class="col-12"
                             name="location.ltsaPIDLookup"
-                            label="LTSA PID Lookup"
                             :bold="false"
                             :disabled="!editable"
                             help-text="List the parcel IDs - if multiple PIDS, separate them with commas, e.g., 006-209-521, 007-209-522"
@@ -1056,8 +1063,6 @@ onBeforeMount(async () => {
             />
           </template>
           <template #content="{ prevCallback }">
-            <CollectionDisclaimer />
-
             <Message
               v-if="validationErrors.length"
               severity="error"
@@ -1345,7 +1350,7 @@ onBeforeMount(async () => {
       severity="success"
       :closable="false"
     >
-      Your application has been succesfully submitted.
+      Your application has been successfully submitted.
     </Message>
     <h3>Confirmation ID: {{ assignedActivityId }}</h3>
     <div>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index a27c21ff8..ea63d7a60 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -50,7 +50,7 @@ const toHousing = (): void => {
   width: 100%;
   height: 100%;
   background-color: $app-primary;
-  opacity: 0.8;
+  opacity: 0.9;
 }
 
 .p-button {
diff --git a/frontend/src/views/housing/HousingView.vue b/frontend/src/views/housing/HousingView.vue
index 7a47bd64f..c73965038 100644
--- a/frontend/src/views/housing/HousingView.vue
+++ b/frontend/src/views/housing/HousingView.vue
@@ -31,65 +31,78 @@ const items = ref([
 </script>
 
 <template>
-  <div class="flex flex-row align-items-center w-full housing">
-    <font-awesome-icon
-      icon="fa-solid fa-house"
-      class="mr-3 text-5xl app-primary-color"
-    />
-    <h1 class="app-primary-color">Housing</h1>
-  </div>
-  <div class="flex flex-column">
-    <div
-      v-for="(item, index) in items"
-      :key="index"
-      class="flex justify-content-center mb-5"
-    >
-      <router-link
-        v-slot="{ href, navigate }"
-        :to="{ name: item.route }"
-        custom
+  <div class="flex flex-column align-items-center justify-content-start h-full">
+    <div class="flex flex-row align-items-center w-full housing">
+      <img
+        class="mr-3"
+        src="@/assets/images/house.png"
+        width="147"
+        height="141"
+        alt="Housing image"
+      />
+      <h1 class="app-primary-color">Housing</h1>
+    </div>
+    <div class="flex flex-column align-items-center justify-content-start mt-8">
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        class="flex justify-content-center mb-5"
       >
-        <a
-          :href="href"
-          @click="navigate"
+        <router-link
+          v-slot="{ href, navigate }"
+          :to="{ name: item.route }"
+          custom
         >
-          <Button
-            class="p-0 m-0"
-            text
+          <a
+            :href="href"
+            @click="navigate"
           >
-            <div class="card">
-              <div class="flex align-items-center text-left h-full mx-3">
-                <div :class="['mr-2', { 'pb-4': item.bottom }]">
-                  <font-awesome-icon
-                    :icon="`fa-solid
+            <Button
+              class="p-0 m-0"
+              text
+            >
+              <div class="card">
+                <div class="flex align-items-center text-left h-full mx-3">
+                  <div :class="['mr-2 text-2xl', { 'pb-4': item.bottom }]">
+                    <font-awesome-icon
+                      :icon="`fa-solid
                   ${item.icon}`"
-                  />
-                </div>
-                <div>
-                  <div class="font-bold">{{ item.top }}</div>
-                  <div v-if="item.bottom">{{ item.bottom }}</div>
+                    />
+                  </div>
+                  <div>
+                    <div class="font-bold">{{ item.top }}</div>
+                    <div v-if="item.bottom">{{ item.bottom }}</div>
+                  </div>
                 </div>
               </div>
-            </div>
-          </Button>
-        </a>
-      </router-link>
+            </Button>
+          </a>
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.card {
+.p-button {
   border-width: 2px;
   border-style: solid;
   border-radius: 0.5rem;
   border-color: $app-primary;
   width: 550px;
   height: 80px;
+  background-color: #fff;
+  color: $app-primary;
+  box-shadow: 0 6px 6px -1px rgb(145, 145, 145);
+}
+
+.p-button:hover {
+  opacity: 1;
+  background-color: $app-primary;
+  color: $app-outline-on-primary;
 }
 
 .housing {
-  // background-color: #f8f9fa;
   padding-left: 3.5rem;
 }
 </style>