@7365admin1/layer-common 3.2.7 → 3.2.8-staging.200

package/components/AttendanceCheckInOutDialog.vue

@@ -1,23 +1,19 @@
 <template>
   <v-dialog v-model="showDialog" max-width="450" persistent>
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6">{{
-            action === "checkIn" ? "Check In" : "Check Out"
-          }}</span>
-        </v-row>
-      </v-toolbar>
-
-      <v-card-text class="pa-4">
+    <v-card class="screen-modal">
+      <!-- Was a bare `v-toolbar` at each end of the card, which Vuetify paints
+           from its own `surface` - two grey slabs visibly lighter than the card
+           on the dark theme - carrying a `text-h6` (20px/500) heading. The
+           design's modal heading is the card's own `v-card-title` row. -->
+      <v-card-title>
+        {{ action === "checkIn" ? "Check In" : "Check Out" }}
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
         <v-form ref="formRef" v-model="valid">
           <v-row no-gutters class="pa-0">
             <v-col cols="12" class="pa-0">
-              <v-card
-                variant="outlined"
-                class="mb-2"
-                style="height: 400px; position: relative; overflow: hidden"
-              >
+              <v-card variant="outlined" class="mb-2 attendance-capture__stage">
                 <div
                   v-if="loadingCamera"
                   class="d-flex align-center justify-center"
@@ -56,17 +52,15 @@
                   "
                 />
 
+                <!-- `background: #f5f5f5` was a literal light grey, so on the
+                     dark theme this placeholder was a white slab inside a dark
+                     card. It follows the theme now. -->
                 <div
                   v-else-if="!loadingCamera"
-                  class="d-flex align-center justify-center flex-column"
-                  style="height: 100%; background: #f5f5f5"
+                  class="d-flex align-center justify-center flex-column attendance-capture__placeholder"
                 >
-                  <v-icon size="64" color="grey" class="mb-2"
-                    >mdi-camera-off</v-icon
-                  >
-                  <span class="text-caption text-grey"
-                    >Initializing camera...</span
-                  >
+                  <v-icon size="64" class="mb-2">mdi-camera-off</v-icon>
+                  <span>Initializing camera...</span>
                 </div>
               </v-card>
             </v-col>
@@ -86,71 +80,47 @@
         </v-form>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col v-if="!capturedImage" cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="close"
-              height="56"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col v-if="!capturedImage" cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="56"
-              size="large"
-              @click="capturePhoto"
-              :disabled="!showCamera"
-            >
-              <v-icon class="mr-2">mdi-camera</v-icon>
-              Capture Photo
-            </v-btn>
-          </v-col>
-
-          <template v-else>
-            <v-col cols="6" class="pa-0">
-              <v-btn
-                block
-                variant="text"
-                class="text-none"
-                size="large"
-                @click="retakePhoto"
-                height="56"
-                :disabled="submitting"
-              >
-                <v-icon class="mr-2">mdi-camera-retake</v-icon>
-                Retake
-              </v-btn>
-            </v-col>
-
-            <v-col cols="6" class="pa-0">
-              <v-btn
-                block
-                variant="flat"
-                color="black"
-                class="text-none font-weight-bold rounded-0"
-                height="56"
-                size="large"
-                :loading="submitting"
-                @click="submit"
-              >
-                <v-icon class="mr-2">mdi-check</v-icon>
-                Submit
-              </v-btn>
-            </v-col>
-          </template>
-        </v-row>
-      </v-toolbar>
+      <!-- `color="black"` was a literal, not a token: a pure-black 56px slab
+           with `rounded-0`, on both themes. `.screen-btn-primary` is the fill
+           the design draws, and the footer gives the pair the design's 40px
+           height and 10px radius. -->
+      <div class="screen-modal__footer">
+        <template v-if="!capturedImage">
+          <v-btn class="text-none screen-btn-ghost" variant="flat" @click="close">
+            Cancel
+          </v-btn>
+          <v-btn
+            class="text-none screen-btn-primary"
+            variant="flat"
+            prepend-icon="mdi-camera"
+            :disabled="!showCamera"
+            @click="capturePhoto"
+          >
+            Capture Photo
+          </v-btn>
+        </template>
+
+        <template v-else>
+          <v-btn
+            class="text-none screen-btn-ghost"
+            variant="flat"
+            prepend-icon="mdi-camera-retake"
+            :disabled="submitting"
+            @click="retakePhoto"
+          >
+            Retake
+          </v-btn>
+          <v-btn
+            class="text-none screen-btn-primary"
+            variant="flat"
+            prepend-icon="mdi-check"
+            :loading="submitting"
+            @click="submit"
+          >
+            Submit
+          </v-btn>
+        </template>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -418,3 +388,30 @@ watch(showDialog, async (newVal) => {
   }
 });
 </script>
+
+<style scoped>
+/* The camera stage. `height: 400px` and the rest were inline styles; the box is
+   the design's inner radius on the card's own border. */
+.attendance-capture__stage {
+  position: relative;
+  height: 400px;
+  overflow: hidden;
+  border-radius: var(--r-inner);
+  border-color: var(--border);
+}
+
+/* Was `background: #f5f5f5` with `text-grey` / `text-caption` on it - a literal
+   light slab that stayed light on the dark theme. Both ends follow the theme. */
+.attendance-capture__placeholder {
+  height: 100%;
+  background: var(--thead);
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.attendance-capture__placeholder .v-icon {
+  color: var(--muted);
+}
+</style>

package/components/AttendanceDetailsDialog.vue

@@ -4,16 +4,14 @@
     :max-width="attendance?.checkOut?.timestamp ? 900 : 500"
     persistent
   >
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6 text-capitalize"
-            >Attendance Details</span
-          >
-        </v-row>
-      </v-toolbar>
+    <!-- The card wears `.screen-modal` (16px corner, `--card`, the modal
+         shadow). The `v-toolbar` that stood in for the title row and the one
+         that stood in for the footer were both fixed grey slabs that stay grey
+         on the dark theme. -->
+    <v-card class="screen-modal">
+      <v-card-title class="text-capitalize">Attendance Details</v-card-title>
 
-      <v-card-text class="pa-6">
+      <v-card-text class="screen-modal__body pa-6">
         <v-row v-if="attendance" dense>
           <v-col :cols="attendance.checkOut?.timestamp ? 6 : 12">
             <v-row dense>
@@ -21,14 +19,14 @@
                 <InputLabel title="Check In" />
               </v-col>
               <v-col cols="12" class="mb-1">
-                <span class="text-body-1">{{
+                <span class="att-dlg__time">{{
                   attendance.checkIn?.timestamp
                     ? formatDate(attendance.checkIn.timestamp)
                     : "N/A"
                 }}</span>
               </v-col>
               <v-col cols="12" class="mb-2">
-                <span class="text-caption text-medium-emphasis">
+                <span class="screen-hint att-dlg__meta">
                   {{
                     attendance.checkIn?.location?.latitude &&
                     attendance.checkIn?.location?.longitude
@@ -38,29 +36,21 @@
                 </span>
               </v-col>
               <v-col cols="12">
-                <v-card
-                  v-if="attendance.checkIn?.img"
-                  variant="outlined"
-                  class="pa-0"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12)"
-                >
+                <!-- Was an inline `border: 1px solid rgba(0,0,0,.12)` - a
+                     literal black rule that is the same black on the dark
+                     theme. `--border` is that rule in each theme, and the
+                     frame takes the design's inner radius. -->
+                <div v-if="attendance.checkIn?.img" class="att-dlg__frame">
                   <v-img
                     :src="getFileUrl(attendance.checkIn.img)"
                     height="280"
                     width="100%"
                     cover
                   ></v-img>
-                </v-card>
-                <v-card
-                  v-else
-                  variant="outlined"
-                  class="pa-8 text-center"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12); height: 280px"
-                >
-                  <span class="text-caption text-medium-emphasis"
-                    >No image</span
-                  >
-                </v-card>
+                </div>
+                <div class="att-dlg__frame att-dlg__frame--empty pa-8 text-center" v-else>
+                  <span class="screen-hint att-dlg__meta">No image</span>
+                </div>
               </v-col>
             </v-row>
           </v-col>
@@ -71,12 +61,12 @@
                 <InputLabel title="Check Out" />
               </v-col>
               <v-col cols="12" class="mb-1">
-                <span class="text-body-1">{{
+                <span class="att-dlg__time">{{
                   formatDate(attendance.checkOut.timestamp)
                 }}</span>
               </v-col>
               <v-col cols="12" class="mb-2">
-                <span class="text-caption text-medium-emphasis">
+                <span class="screen-hint att-dlg__meta">
                   {{
                     attendance.checkOut?.location?.latitude &&
                     attendance.checkOut?.location?.longitude
@@ -86,29 +76,17 @@
                 </span>
               </v-col>
               <v-col cols="12">
-                <v-card
-                  v-if="attendance.checkOut?.img"
-                  variant="outlined"
-                  class="pa-0"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12)"
-                >
+                <div v-if="attendance.checkOut?.img" class="att-dlg__frame">
                   <v-img
                     :src="getFileUrl(attendance.checkOut.img)"
                     height="280"
                     width="100%"
                     cover
                   ></v-img>
-                </v-card>
-                <v-card
-                  v-else
-                  variant="outlined"
-                  class="pa-8 text-center"
-                  style="border: 1px solid rgba(0, 0, 0, 0.12); height: 280px"
-                >
-                  <span class="text-caption text-medium-emphasis"
-                    >No image</span
-                  >
-                </v-card>
+                </div>
+                <div class="att-dlg__frame att-dlg__frame--empty pa-8 text-center" v-else>
+                  <span class="screen-hint att-dlg__meta">No image</span>
+                </div>
               </v-col>
             </v-row>
           </v-col>
@@ -121,22 +99,11 @@
         </v-row>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="12" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="close"
-              height="48"
-            >
-              Close
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn variant="outlined" class="screen-btn-ghost" @click="close">
+          Close
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -183,3 +150,30 @@ watch(showDialog, (newVal) => {
   }
 });
 </script>
+
+<style scoped>
+/* `text-body-1` was 1rem/400 and `text-caption text-medium-emphasis` was
+   0.75rem on Vuetify's 60%-alpha ink. The handoff names no type for a
+   label/value detail row, so both take the established cell and hint. */
+.att-dlg__time {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+}
+
+.att-dlg__meta {
+  font-size: var(--fs-breadcrumb);
+}
+
+.att-dlg__frame {
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  overflow: hidden;
+}
+
+.att-dlg__frame--empty {
+  height: 280px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/components/AttendanceMain.vue

@@ -15,11 +15,12 @@
         @row-click="handleRowClick"
       >
         <template #actions>
+          <!-- Was `color="black"`: a black slab in both themes, and the only
+               black surface on the page. Same button, the design's ghost. -->
           <v-btn
             v-if="canManageAttendanceSettings"
-            variant="flat"
-            color="black"
-            class="text-none"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="dialogShowSettings = true"
           >
             <v-icon class="mr-2">mdi-cog</v-icon>

package/components/AttendanceMapSearchDialog.vue

@@ -1,13 +1,11 @@
 <template>
   <v-dialog v-model="showDialog" max-width="500" persistent>
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6">Search Location</span>
-        </v-row>
-      </v-toolbar>
-
-      <v-card-text class="pa-6">
+    <v-card class="screen-modal map-search">
+      <div class="map-search__head">
+        <v-card-title>Search Location</v-card-title>
+      </div>
+
+      <div class="screen-modal__body map-search__body filter-field">
         <v-form ref="formRef" @submit.prevent="handleSearch">
           <v-row dense>
             <v-col cols="12" md="6">
@@ -64,47 +62,23 @@
             </v-col>
           </v-row>
         </v-form>
-      </v-card-text>
-
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              height="56"
-              :disabled="searching"
-              @click="handleClose"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="56"
-              size="large"
-              :loading="searching"
-              :disabled="!formData.postalCode"
-              @click="handleSearch"
-            >
-              <v-icon class="mr-2">mdi-magnify</v-icon>
-              Search
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      </div>
+
+      <div class="map-search__footer">
+        <AppButton variant="ghost" :disabled="searching" @click="handleClose">Cancel</AppButton>
+        <AppButton
+          icon="mdi-magnify"
+          :disabled="searching || !formData.postalCode"
+          @click="handleSearch"
+        >
+          Search
+        </AppButton>
+      </div>
     </v-card>
   </v-dialog>
 
   <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 </template>
-That is 
 
 <script setup lang="ts">
 const showDialog = defineModel({ type: Boolean, default: false });
@@ -391,3 +365,27 @@ watch(showDialog, (newVal) => {
   }
 });
 </script>
+
+<style scoped>
+.map-search__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.map-search__body {
+  padding: 0 20px;
+}
+
+/* The design's dialog footer - ghost secondary, then one primary, right
+   aligned. Deliberately not the shared `.screen-modal__footer`: that class is
+   on the batch-D branch (#1150), not on this base, and adding a second copy of
+   it to `screens.css` here would collide with that PR. */
+.map-search__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>