@7365admin1/layer-common 3.2.2-staging.150 → 3.2.2-staging.151

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/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.150",
+  "version": "3.2.2-staging.151",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",