From 4111af25fa510e703136df1f74c3867fab6b47b4 Mon Sep 17 00:00:00 2001
From: Marco Villeneuve <arcshiftsolutions@gmail.com>
Date: Mon, 30 Oct 2023 14:54:54 -0700
Subject: [PATCH] Changes for UI tighten

---
 .../components/institute/AuthorityDetails.vue |   4 +-
 .../components/institute/DistrictDetails.vue  |   4 +-
 .../institute/authority/AuthorityContact.vue  | 292 ++++++++---------
 .../institute/authority/Details.vue           |   4 +-
 .../institute/common/SchoolContact.vue        | 295 ++++++++---------
 .../institute/district/DistrictContact.vue    | 302 ++++++++----------
 6 files changed, 422 insertions(+), 479 deletions(-)

diff --git a/frontend/src/components/institute/AuthorityDetails.vue b/frontend/src/components/institute/AuthorityDetails.vue
index e21596d97..c2036db14 100644
--- a/frontend/src/components/institute/AuthorityDetails.vue
+++ b/frontend/src/components/institute/AuthorityDetails.vue
@@ -377,8 +377,8 @@ export default {
 }
 
 .containerSetup {
-    padding-right: 20em !important;
-    padding-left: 20em !important;
+    padding-right: 12em !important;
+    padding-left: 12em !important;
 }
 
 .editField {
diff --git a/frontend/src/components/institute/DistrictDetails.vue b/frontend/src/components/institute/DistrictDetails.vue
index 4dbf99634..33f91a62d 100644
--- a/frontend/src/components/institute/DistrictDetails.vue
+++ b/frontend/src/components/institute/DistrictDetails.vue
@@ -395,8 +395,8 @@ export default {
 }
 
 .containerSetup {
-    padding-right: 20em !important;
-    padding-left: 20em !important;
+    padding-right: 12em !important;
+    padding-left: 12em !important;
 }
 
 .editField {
diff --git a/frontend/src/components/institute/authority/AuthorityContact.vue b/frontend/src/components/institute/authority/AuthorityContact.vue
index 9ec1bdbb5..7cb7ac922 100644
--- a/frontend/src/components/institute/authority/AuthorityContact.vue
+++ b/frontend/src/components/institute/authority/AuthorityContact.vue
@@ -1,152 +1,140 @@
 <template>
-  <span>
-    <v-card height="100%">
-      <v-card-title class="pb-0 text-wrap">
-        <v-row no-gutters>
-          <v-col>
-            <v-row no-gutters>
-              <v-col cols="10">
-                <v-icon
-                  class="pb-1"
-                  size="x-small"
-                  :color="getStatusColor(contact)"
-                  left
-                  dark
-                >
-                  mdi-circle
-                </v-icon>
-                <strong
-                  id="authorityContactName"
-                >{{
-                  formatContactName(contact)
-                }}</strong>
-              </v-col>
-              <v-col
-                cols="2"
-                class="d-flex justify-end"
-              >
-                <v-btn
-                  v-if="canEditAuthorityContact"
-                  id="editContactButton"
-                  title="Edit"
-                  color="white"
-                  width="0.5em"
-                  variant="flat"
-                  min-width="0.5em"
-                  small
-                  class="mr-2"
-                  @click="callDoShowEditAuthorityContactForm()"
-                >
-                  <v-icon
-                    size="x-large"
-                    color="#003366"
-                    dark
-                  >mdi-pencil</v-icon>
-                </v-btn>
-                <v-btn
-                  v-if="canEditAuthorityContact"
-                  id="removeContactButton"
-                  title="Remove"
-                  color="white"
-                  width="0.5em"
-                  variant="flat"
-                  min-width="0.5em"
-                  small
-                  class="mr-2"
-                  @click="callShowRemoveContactConfirmation"
-                >
-                  <v-icon
-                    size="x-large"
-                    color="#003366"
-                    dark
-                  >mdi-delete</v-icon>
-                </v-btn>
-              </v-col>
-            </v-row>
-            <v-row no-gutters>
-              <v-col
-                v-if="!contact.email && !contact.phoneNumber"
-                cols="12"
-                class="pt-1"
-              >
-                <p class="missing-highlight"><v-icon
-                  size="small"
-                  color="#ff5252"
-                  dark
-                >mdi-alert</v-icon> Missing contact details</p>
-                <a
-                  v-if="canEditAuthorityContact"
-                  class="editField"
-                  @click="callDoShowEditAuthorityContactForm()"
-                >+ email or phone</a>
-              </v-col>
-              <v-col
-                v-if="contact.email"
-                cols="12"
-                class="pt-1"
-              >
-                <span id="contactEmail"> {{
-                  contact.email
-                }}</span>
-              </v-col>
-              <v-col
-                v-if="contact.phoneNumber"
-                cols="12"
-                class="pt-1"
-              >
-                <span id="contactPhoneNumber">{{
-                  formatPhoneNumber(contact.phoneNumber)
-                }}</span><span v-if="contact.phoneExtension"> ext. {{
-                  contact.phoneExtension
-                }}</span>
-              </v-col>
-              <v-col
-                v-if="contact.alternatePhoneNumber"
-                cols="12"
-                class="pt-1"
-              >
-                <span id="contactAlternatePhoneNumber">{{
-                  formatPhoneNumber(contact.alternatePhoneNumber)
-                }} (alt.)</span> <span v-if="contact.alternatePhoneExtension"> ext. {{
-                  contact.alternatePhoneExtension
-                }}</span>
-              </v-col>
-            </v-row>
-          </v-col>
-        </v-row>
-      </v-card-title>
-      <v-card-text class="pt-2">
-        <v-row no-gutters>
-          <v-col
-            v-if="contact.expiryDate"
-            cols="12"
-            class="pt-1"
+  <v-card
+    :id="`auhtorityContactCard-${contact.schoolContactId}`"
+    class="d-flex flex-column"
+    height="100%"
+  >
+    <v-card-title class="text-wrap pb-0">
+      <v-row no-gutters>
+        <v-col>
+          <v-icon
+            icon="mdi-circle"
+            class="pb-1"
+            size="x-small"
+            :color="getStatusColor(contact)"
+            start
+          />
+          <strong class="contactName">{{ formatContactName(contact) }}</strong>
+        </v-col>
+      </v-row>
+    </v-card-title>
+    <v-card-subtitle>
+      <span
+        v-if="contact.expiryDate"
+        id="contactEffectiveAndExpiryDate"
+        class="dateSubText"
+      >
+        {{ formatDate(contact.effectiveDate) }} - {{ formatDate(contact.expiryDate) }}
+      </span>
+      <span
+        v-else
+        id="contactEffectiveDate"
+        class="dateSubText"
+      >
+        {{ formatDate(contact.effectiveDate) }}
+      </span>
+    </v-card-subtitle>
+    <v-card-text class="pb-0">
+      <v-list class="pt-0">
+        <v-list-item
+          v-if="!contact.email && !contact.phoneNumber && canEditSchoolContact"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <a
+            class="missing-highlight"
+            @click="callDoShowEditAuthorityContactForm()"
           >
-            <v-icon aria-hidden="false">
-              mdi-calendar-today
-            </v-icon>
-            <span id="contactEffectiveAndExpiryDate"> {{
-              formatDate(contact.effectiveDate)
-            }} - {{
-              formatDate(contact.expiryDate)
-            }}</span>
-          </v-col>
-          <v-col
-            v-else
-            cols="12"
-            class="pt-1"
-          >
-            <v-icon aria-hidden="false">
-              mdi-calendar-today
-            </v-icon>
-            <span id="contactEffectiveDate"> {{
-              formatDate(contact.effectiveDate)
-            }}</span>
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
-  </span>
+            <v-icon
+              icon="mdi-alert"
+              size="x-large"
+              color="#ff5252"
+              start
+            />
+            <span>Add missing email or phone</span>
+          </a>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.jobTitle"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <v-row>
+            <v-col cols="1">
+              <v-icon
+                icon="mdi-account"
+              />
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactJobTitle"> {{ contact.jobTitle }}</span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.email"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <v-row>
+            <v-col cols="1">
+              <v-icon
+                icon="mdi-email"
+                start
+              />
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactEmail"> {{ contact.email }}</span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.phoneNumber"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <v-row>
+            <v-col cols="1">
+              <v-icon
+                icon="mdi-phone"
+                start
+              />
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactPhoneNumber">{{ formatPhoneNumber(contact.phoneNumber) }}</span>
+              <span v-if="contact.phoneExtension">&nbsp;ext. {{ contact.phoneExtension }}</span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.alternatePhoneNumber"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <v-row>
+            <v-col cols="1">
+              <v-icon
+                icon="mdi-phone"
+                start
+              />
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactAlternatePhoneNumber">
+                {{ formatPhoneNumber(contact.alternatePhoneNumber) }} (alt.)
+              </span>
+              <span v-if="contact.alternatePhoneExtension">
+                &nbsp;ext. {{ contact.alternatePhoneExtension }}
+              </span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+      </v-list>
+    </v-card-text>
+    <v-spacer></v-spacer>
+    <v-card-actions class="justify-start">
+      <v-btn color="#003366" variant="text" @click="callDoShowEditAuthorityContactForm()">Edit</v-btn>
+      <v-btn color="red" variant="text" @click="callShowRemoveContactConfirmation">Remove</v-btn>
+    </v-card-actions>
+  </v-card>
 </template>
 
 <script>
@@ -185,13 +173,13 @@ export default {
 };
 </script>
 <style scoped>
-.editField {
-    font-size: 16px;
-    color: rgb(0, 51, 102);
+.dateSubText{
+  font-style: italic;
+  font-size: 0.95em;
 }
 
-.editField:hover {
-    text-decoration: underline;
+.contactName{
+  font-size: 0.85em;
 }
 
 .missing-highlight {
diff --git a/frontend/src/components/institute/authority/Details.vue b/frontend/src/components/institute/authority/Details.vue
index b1450e0de..4dc681495 100644
--- a/frontend/src/components/institute/authority/Details.vue
+++ b/frontend/src/components/institute/authority/Details.vue
@@ -1169,8 +1169,8 @@ export default {
 }
 
 .containerSetup {
-    padding-right: 24em !important;
-    padding-left: 24em !important;
+    padding-right: 12em !important;
+    padding-left: 12em !important;
 }
 
 .editField {
diff --git a/frontend/src/components/institute/common/SchoolContact.vue b/frontend/src/components/institute/common/SchoolContact.vue
index 80fe82cc8..2c6a21d73 100644
--- a/frontend/src/components/institute/common/SchoolContact.vue
+++ b/frontend/src/components/institute/common/SchoolContact.vue
@@ -1,173 +1,140 @@
 <template>
-  <span>
-    <v-card
-      :id="`schoolContactCard-${contact.schoolContactId}`"
-      class="schoolContactCard"
-      height="100%"
-    >
-      <v-card-title class="pb-0 text-wrap">
-        <v-row no-gutters>
-          <v-col cols="10">
+  <v-card
+    :id="`schoolContactCard-${contact.schoolContactId}`"
+    class="d-flex flex-column"
+    height="100%"
+  >
+    <v-card-title class="text-wrap pb-0">
+      <v-row no-gutters>
+        <v-col>
+          <v-icon
+            icon="mdi-circle"
+            class="pb-1"
+            size="x-small"
+            :color="getStatusColor(contact)"
+            start
+          />
+          <strong class="contactName">{{ formatContactName(contact) }}</strong>
+        </v-col>
+      </v-row>
+    </v-card-title>
+    <v-card-subtitle>
+      <span
+        v-if="contact.expiryDate"
+        id="contactEffectiveAndExpiryDate"
+        class="dateSubText"
+      >
+        {{ formatDate(contact.effectiveDate) }} - {{ formatDate(contact.expiryDate) }}
+      </span>
+      <span
+        v-else
+        id="contactEffectiveDate"
+        class="dateSubText"
+      >
+        {{ formatDate(contact.effectiveDate) }}
+      </span>
+    </v-card-subtitle>
+    <v-card-text class="pb-0">
+      <v-list class="pt-0">
+        <v-list-item
+          v-if="!contact.email && !contact.phoneNumber && canEditSchoolContact"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <a
+            class="missing-highlight"
+            @click="callDoShowEditSchoolContactForm()"
+          >
             <v-icon
-              icon="mdi-circle"
-              class="pb-1"
-              size="x-small"
-              :color="getStatusColor(contact)"
+              icon="mdi-alert"
+              size="x-large"
+              color="#ff5252"
               start
             />
-            <strong>{{ formatContactName(contact) }}</strong>
-          </v-col>
-          <v-col
-            cols="2"
-            class="d-flex justify-end"
-          >
-            <v-btn
-              v-if="canEditSchoolContact"
-              id="editContactButton"
-              class="mr-2"
-              title="Edit"
-              width="0.5em"
-              color="white"
-              min-width="0.5em"
-              variant="flat"
-              @click="callDoShowEditSchoolContactForm()"
-            >
+            <span>Add missing email or phone</span>
+          </a>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.jobTitle"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <v-row>
+            <v-col cols="1">
               <v-icon
-                icon="mdi-pencil"
-                size="x-large"
-                color="#003366"
-                dark
+                icon="mdi-account"
               />
-            </v-btn>
-            <v-btn
-              v-if="canEditSchoolContact"
-              id="removeContactButton"
-              title="Remove"
-              color="white"
-              width="0.5em"
-              min-width="0.5em"
-              variant="flat"
-              depressed
-              small
-              @click="callShowRemoveContactConfirmation"
-            >
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactJobTitle"> {{ contact.jobTitle }}</span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.email"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <v-row>
+            <v-col cols="1">
               <v-icon
-                size="x-large"
-                color="#003366"
-                dark
-              >
-                mdi-delete
-              </v-icon>
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-card-title>
-      <v-card-text class="pb-0">
-        <v-list
-          density="compact"
-          class="pt-0"
+                icon="mdi-email"
+                start
+              />
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactEmail"> {{ contact.email }}</span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.phoneNumber"
+          min-height="inherit"
+          class="pl-0"
         >
-          <v-list-item
-            v-if="contact.jobTitle"
-            class="pl-0"
-          >
-            <v-icon
-              icon="mdi-account"
-              start
-            />
-            <span id="contactEmail"> {{ contact.jobTitle }}</span>
-          </v-list-item>
-          <v-list-item
-            v-if="!contact.email && !contact.phoneNumber && canEditSchoolContact"
-            class="pl-0"
-          >
-            <a
-              class="missing-highlight"
-              @click="handleOpenEditor"
-            >
+          <v-row>
+            <v-col cols="1">
               <v-icon
-                icon="mdi-alert"
-                size="x-large"
-                color="#ff5252"
+                icon="mdi-phone"
                 start
               />
-              <span>Add missing email or phone</span>
-            </a>
-          </v-list-item>
-          <v-list-item
-            v-if="contact.email"
-            class="pl-0"
-          >
-            <v-icon
-              icon="mdi-email"
-              start
-            />
-            <span id="contactEmail"> {{ contact.email }}</span>
-          </v-list-item>
-          <v-list-item
-            v-if="contact.phoneNumber"
-            class="pl-0"
-          >
-            <v-icon
-              icon="mdi-phone"
-              start
-            />
-            <span id="contactPhoneNumber">{{ formatPhoneNumber(contact.phoneNumber) }}</span>
-            <span v-if="contact.phoneExtension"> ext. {{ contact.phoneExtension }}</span>
-          </v-list-item>
-          <v-list-item
-            v-if="contact.alternatePhoneNumber"
-            class="pl-0"
-          >
-            <v-icon
-              icon="mdi-phone"
-              start
-            />
-            <span id="contactAlternatePhoneNumber">
-              {{ formatPhoneNumber(contact.alternatePhoneNumber) }} (alt.)
-            </span>
-            <span v-if="contact.alternatePhoneExtension">
-              ext. {{ contact.alternatePhoneExtension }}
-            </span>
-          </v-list-item>
-          <v-list-item
-            v-if="contact.expiryDate"
-            class="pl-0 text-left"
-          >
-            <v-icon
-              icon="mdi-calendar-today"
-              size="small"
-              aria-hidden="false"
-              start
-            />
-            <span
-              id="contactEffectiveAndExpiryDate"
-              class="text-caption"
-            >
-              {{ formatDate(contact.effectiveDate) }} - {{ formatDate(contact.expiryDate) }}
-            </span>
-          </v-list-item>
-          <v-list-item
-            v-else
-            class="pl-0 text-left"
-          >
-            <v-icon
-              icon="mdi-calendar-today"
-              size="small"
-              aria-hidden="false"
-              start
-            />
-            <span
-              id="contactEffectiveDate"
-              class="text-caption"
-            >
-              {{ formatDate(contact.effectiveDate) }}
-            </span>
-          </v-list-item>
-        </v-list>
-      </v-card-text>
-    </v-card>
-  </span>
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactPhoneNumber">{{ formatPhoneNumber(contact.phoneNumber) }}</span>
+              <span v-if="contact.phoneExtension">&nbsp;ext. {{ contact.phoneExtension }}</span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.alternatePhoneNumber"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <v-row>
+            <v-col cols="1">
+              <v-icon
+                icon="mdi-phone"
+                start
+              />
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactAlternatePhoneNumber">
+                {{ formatPhoneNumber(contact.alternatePhoneNumber) }} (alt.)
+              </span>
+              <span v-if="contact.alternatePhoneExtension">
+                &nbsp;ext. {{ contact.alternatePhoneExtension }}
+              </span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+      </v-list>
+    </v-card-text>
+    <v-spacer></v-spacer>
+    <v-card-actions class="justify-start">
+      <v-btn color="#003366" variant="text" @click="callDoShowEditSchoolContactForm()">Edit</v-btn>
+      <v-btn color="red" variant="text" @click="callShowRemoveContactConfirmation">Remove</v-btn>
+    </v-card-actions>
+  </v-card>
 </template>
 
 <script>
@@ -202,7 +169,15 @@ export default {
 };
 </script>
 <style scoped>
-.schoolContactCard { position: relative; }
+.dateSubText{
+  font-style: italic;
+  font-size: 0.95em;
+}
+
+.contactName{
+  font-size: 0.85em;
+}
+
 .missing-highlight {
     color: #ff5252;
     word-break: break-word;
diff --git a/frontend/src/components/institute/district/DistrictContact.vue b/frontend/src/components/institute/district/DistrictContact.vue
index eea5ff416..947d7d4c7 100644
--- a/frontend/src/components/institute/district/DistrictContact.vue
+++ b/frontend/src/components/institute/district/DistrictContact.vue
@@ -1,161 +1,140 @@
 <template>
-  <span>
-    <v-card height="100%">
-      <v-card-title class="pb-0 text-wrap">
-        <v-row no-gutters>
-          <v-col>
-            <v-row no-gutters>
-              <v-col
-                cols="8"
-                class="justify-start"
-              >
-                <v-icon
-                  class="pb-1 pr-1"
-                  size="x-small"
-                  :color="getStatusColor(contact)"
-                  left
-                  dark
-                >
-                  mdi-circle
-                </v-icon>
-                <strong>{{
-                  formatContactName(contact)
-                }}</strong>
-              </v-col>
-              <v-col
-                cols="4"
-                class="d-flex justify-end"
-              >
-                <v-btn
-                  v-if="canEditDistrictContact"
-                  id="editContactButton"
-                  title="Edit"
-                  color="white"
-                  width="0.5em"
-                  min-width="0.5em"
-                  variant="flat"
-                  small
-                  class="mr-2"
-                  @click="callDoShowEditDistrictContactForm()"
-                >
-                  <v-icon
-                    size="x-large"
-                    color="#003366"
-                    dark
-                  >mdi-pencil</v-icon>
-                </v-btn>
-                <v-btn
-                  v-if="canEditDistrictContact"
-                  id="removeContactButton"
-                  title="Remove"
-                  color="white"
-                  width="0.5em"
-                  min-width="0.5em"
-                  variant="flat"
-                  small
-                  class="mr-2"
-                  @click="callShowRemoveContactConfirmation"
-                >
-                  <v-icon
-                    size="x-large"
-                    color="#003366"
-                    dark
-                  >mdi-delete</v-icon>
-                </v-btn>
-              </v-col>
-            </v-row>
-            <v-row no-gutters>
-              <v-col
-                cols="12"
-                class="pt-1"
-              >
-                <strong style="word-break: break-word;">{{
-                  contact.jobTitle
-                }}</strong>
-              </v-col>
-              <v-col
-                v-if="!contact.email && !contact.phoneNumber"
-                cols="12"
-                class="pt-1"
-              >
-                <p class="missing-highlight"><v-icon
-                  size="small"
-                  color="#ff5252"
-                  dark
-                >mdi-alert</v-icon> Missing contact details</p>
-                <a
-                  v-if="canEditDistrictContact"
-                  class="editField"
-                  @click="callDoShowEditDistrictContactForm()"
-                >+ email or phone</a>
-              </v-col>
-              <v-col
-                v-if="contact.email"
-                cols="12"
-                class="pt-1"
-              >
-                <span id="contactEmail"> {{
-                  contact.email
-                }}</span>
-              </v-col>
-              <v-col
-                v-if="contact.phoneNumber"
-                cols="12"
-                class="pt-1"
-              >
-                <span id="contactPhoneNumber">{{
-                  formatPhoneNumber(contact.phoneNumber)
-                }}</span><span v-if="contact.phoneExtension"> ext. {{
-                  contact.phoneExtension
-                }}</span>
-              </v-col>
-              <v-col
-                v-if="contact.alternatePhoneNumber"
-                cols="12"
-                class="pt-1"
-              >
-                <span id="contactAlternatePhoneNumber">{{
-                  formatPhoneNumber(contact.alternatePhoneNumber)
-                }} (alt.)</span> <span v-if="contact.alternatePhoneExtension"> ext. {{
-                  contact.alternatePhoneExtension
-                }}</span>
-              </v-col>
-            </v-row>
-          </v-col>
-        </v-row>
-      </v-card-title>
-      <v-card-text class="pt-2">
-        <v-row no-gutters>
-          <v-col
-            v-if="contact.expiryDate"
-            cols="12"
-            class="pt-1"
+  <v-card
+    :id="`districtContactCard-${contact.districtContactId}`"
+    class="d-flex flex-column"
+    height="100%"
+  >
+    <v-card-title class="text-wrap pb-0">
+      <v-row no-gutters>
+        <v-col>
+          <v-icon
+            icon="mdi-circle"
+            class="pb-1"
+            size="x-small"
+            :color="getStatusColor(contact)"
+            start
+          />
+          <strong class="contactName">{{ formatContactName(contact) }}</strong>
+        </v-col>
+      </v-row>
+    </v-card-title>
+    <v-card-subtitle>
+      <span
+        v-if="contact.expiryDate"
+        id="contactEffectiveAndExpiryDate"
+        class="dateSubText"
+      >
+        {{ formatDate(contact.effectiveDate) }} - {{ formatDate(contact.expiryDate) }}
+      </span>
+      <span
+        v-else
+        id="contactEffectiveDate"
+        class="dateSubText"
+      >
+        {{ formatDate(contact.effectiveDate) }}
+      </span>
+    </v-card-subtitle>
+    <v-card-text class="pb-0">
+      <v-list class="pt-0">
+        <v-list-item
+          v-if="!contact.email && !contact.phoneNumber && canEditDistrictContact"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <a
+            class="missing-highlight"
+            @click="callDoShowEditDistrictContactForm()"
           >
-            <v-icon aria-hidden="false">
-              mdi-calendar-today
-            </v-icon>
-            <span id="contactEffectiveAndExpiryDate"> {{
-              formatDate(contact.effectiveDate)
-            }} - {{
-              formatDate(contact.expiryDate)
-            }}</span>
-          </v-col>
-          <v-col
-            v-else
-            cols="12"
-            class="pt-1"
-          >
-            <v-icon aria-hidden="false">
-              mdi-calendar-today
-            </v-icon>
-            <span id="contactEffectiveDate"> {{
-              formatDate(contact.effectiveDate)
-            }}</span>
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
-  </span>
+            <v-icon
+              icon="mdi-alert"
+              size="x-large"
+              color="#ff5252"
+              start
+            />
+            <span>Add missing email or phone</span>
+          </a>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.jobTitle"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <v-row>
+            <v-col cols="1">
+              <v-icon
+                icon="mdi-account"
+              />
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactJobTitle"> {{ contact.jobTitle }}</span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.email"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <v-row>
+            <v-col cols="1">
+              <v-icon
+                icon="mdi-email"
+                start
+              />
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactEmail"> {{ contact.email }}</span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.phoneNumber"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <v-row>
+            <v-col cols="1">
+              <v-icon
+                icon="mdi-phone"
+                start
+              />
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactPhoneNumber">{{ formatPhoneNumber(contact.phoneNumber) }}</span>
+              <span v-if="contact.phoneExtension"> ext. {{ contact.phoneExtension }}</span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+        <v-list-item
+          v-if="contact.alternatePhoneNumber"
+          min-height="inherit"
+          class="pl-0"
+        >
+          <v-row>
+            <v-col cols="1">
+              <v-icon
+                icon="mdi-phone"
+                start
+              />
+            </v-col>
+            <v-col class="d-flex ml-1">
+              <span id="contactAlternatePhoneNumber">
+                {{ formatPhoneNumber(contact.alternatePhoneNumber) }} (alt.)
+              </span>
+              <span v-if="contact.alternatePhoneExtension">
+                ext. {{ contact.alternatePhoneExtension }}
+              </span>
+            </v-col>
+          </v-row>
+        </v-list-item>
+      </v-list>
+    </v-card-text>
+    <v-spacer></v-spacer>
+    <v-card-actions class="justify-start">
+      <v-btn color="#003366" variant="text" @click="callDoShowEditDistrictContactForm()">Edit</v-btn>
+      <v-btn color="red" variant="text" @click="callShowRemoveContactConfirmation">Remove</v-btn>
+    </v-card-actions>
+  </v-card>
 </template>
 
 <script>
@@ -190,14 +169,15 @@ export default {
   }
 };
 </script>
+
 <style scoped>
-.editField {
-    font-size: 16px;
-    color: rgb(0, 51, 102);
+.dateSubText{
+  font-style: italic;
+  font-size: 0.95em;
 }
 
-.editField:hover {
-    text-decoration: underline;
+.contactName{
+  font-size: 0.85em;
 }
 
 .missing-highlight {