@7365admin1/layer-common 3.2.2-staging.123 → 3.2.2-staging.125

package/components/UnitPersonCard.vue

@@ -3,26 +3,26 @@
     <v-row>
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Name" />
-        <v-text-field :model-value="person.name" density="compact" :readonly="readOnly"
-          :class="{ 'no-pointer': readOnly }" />
+        <v-text-field :model-value="person.name" class="filter-field" density="comfortable"
+          :readonly="readOnly" :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Email Address" />
-        <v-text-field :model-value="person.email" density="compact" :readonly="readOnly"
-          :class="{ 'no-pointer': readOnly }" />
+        <v-text-field :model-value="person.email" class="filter-field" density="comfortable"
+          :readonly="readOnly" :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="NRIC" />
-        <v-text-field :model-value="person.nric" density="compact" :readonly="readOnly"
-          :class="{ 'no-pointer': readOnly }" />
+        <v-text-field :model-value="person.nric" class="filter-field" density="comfortable"
+          :readonly="readOnly" :class="{ 'no-pointer': readOnly }" />
       </v-col>
 
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Mobile Number" />
-        <v-text-field :model-value="person.contact" density="compact" :readonly="readOnly"
-          :class="{ 'no-pointer': readOnly }" />
+        <v-text-field :model-value="person.contact" class="filter-field" density="comfortable"
+          :readonly="readOnly" :class="{ 'no-pointer': readOnly }" />
       </v-col>
     </v-row>
 
@@ -30,11 +30,14 @@
       <v-col cols="12" md="4" class="mt-2">
         <InputLabel class="font-weight-bold" title="Other Documents and Files" :viewMode="readOnly" />
 
-        <p v-if="!person.files?.length" class="text-blue-darken-2 font-weight-thin text-caption ml-2 mt-5">
+        <!-- Was `text-blue-darken-2`, a fixed Vuetify blue that stays the same
+             on the dark theme. An empty note is `--muted`; a file link is
+             `--accent-text`, the design's link ink. -->
+        <p v-if="!person.files?.length" class="screen-hint unit-person__empty ml-2 mt-5">
           **No documents to display**
         </p>
-        <v-list v-else dense nav class="mt-2">
-          <v-list-item v-for="file in person.files" :key="file.id" class="text-blue-darken-2"
+        <v-list v-else dense nav class="mt-2 unit-person__files">
+          <v-list-item v-for="file in person.files" :key="file.id" class="unit-person__file"
             :href="getFileUrl(file.id)" target="_blank">
             <v-list-item-content>
               <v-list-item-title class="d-flex align-center">
@@ -53,11 +56,14 @@
       <v-col v-if="prop.showOwnerOption" cols="12" md="4">
         <v-checkbox :model-value="person.isOwner" readonly hide-details density="compact" @click="handleClick">
           <template #label>
-            <span class="font-weight-bold text-subtitle-2 ml-2">Is Owner?</span>
+            <span class="unit-person__check-label ml-2">Is Owner?</span>
           </template>
         </v-checkbox>
 
-        <span class="d-flex text-caption text-gray-5 ml-7">As owner, you will be receiving emails and updates
+        <!-- `text-gray-5` is not a Vuetify class and not a token - it resolved
+             to nothing, so this sat on the body ink. `.screen-hint` is the
+             design's sub-line. -->
+        <span class="d-flex screen-hint ml-7">As owner, you will be receiving emails and updates
                 related to this unit.</span>
       </v-col>
     </v-row>
@@ -120,4 +126,27 @@ const handleClick = () => {
 .no-pointer {
   pointer-events: none;
 }
+
+/* `.screen-hint` carries the ink; only the size is stated here, and it is the
+   cell size, not Vuetify's `text-caption` (12px/400 Roboto). */
+.unit-person__empty {
+  font-size: var(--fs-cell);
+}
+
+/* A `v-list` paints Vuetify's own `surface` - a square-cornered lighter slab
+   sitting on the card, measured on the dark theme. The files are links on the
+   card, so the list carries no surface of its own. */
+.unit-person__files {
+  background: transparent;
+}
+
+.unit-person__file {
+  color: var(--accent-text);
+}
+
+.unit-person__check-label {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
 </style>