@7365admin1/layer-common 3.2.2-staging.120 → 3.2.2-staging.122

package/components/HidServiceSettingsPanel.vue

@@ -1,43 +1,58 @@
+<!--
+  HID SERVICE SETTINGS - the row that turns the whole HID module on for a site.
+
+  The handoff has no HID screen of its own, but it does not leave this
+  undecided: the Settings screen draws the ANPR Camera module in full and then
+  states, in the prototype's own words, that every other module's "toggles,
+  form fields and tables use the same styling as the ANPR Camera section". This
+  panel is mounted inside exactly that accordion, so the ANPR section IS its
+  spec - toggle 38x22 on `--accent`, label 13.5px/700, explanatory line 13px/600
+  `--muted`, and a 38px `--accent` action button.
+
+  Behaviour is untouched: the same `saveHidService` on the same event, the same
+  `navigateTo`, the same snackbar.
+-->
 <template>
   <v-row align="center" class="py-2">
     <v-col cols="12" md="8">
-      <div class="text-subtitle-1 font-weight-bold">
+      <!-- The prototype's module label: 14px/800. -->
+      <div class="hid-settings-label">
         Enable HID biometric reader for this site
       </div>
-      <div class="text-body-2 text-medium-emphasis mt-1">
+      <!-- Its explanatory line: 13px/600 in `--muted`. -->
+      <div class="screen-hint hid-settings-note mt-1">
         When enabled, admins can register HID Amico devices and manage reader sync from Access Management.
       </div>
     </v-col>
 
     <v-col cols="12" md="4" class="d-flex justify-md-end">
+      <!--
+        `color="success"` is gone: the design's ON track is `--accent`, and the
+        green came with three lines of hardcoded hex that were the same colour
+        in both themes. `.app-switch` in primitives.css draws the handoff's
+        toggle for all three HID panels that have one.
+      -->
       <v-switch
         v-model="hidEnabled"
-        class="hid-service-switch"
-        color="success"
+        class="app-switch"
         hide-details
-        inset
         :loading="isSaving"
         @update:model-value="saveHidService"
       >
         <template #label>
-          <span class="text-body-2">
-            {{ hidEnabled ? "Enabled" : "Disabled" }}
-          </span>
+          {{ hidEnabled ? "Enabled" : "Disabled" }}
         </template>
       </v-switch>
     </v-col>
 
     <v-col cols="12" class="d-flex justify-end ga-2">
-      <v-btn
-        class="text-none"
-        color="primary"
-        variant="flat"
-        prepend-icon="mdi-card-account-details-star"
+      <AppButton
+        icon="mdi-card-account-details-star"
         :disabled="!hidEnabled"
         @click="goToHidReaders"
       >
         Manage HID Readers
-      </v-btn>
+      </AppButton>
     </v-col>
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
@@ -151,19 +166,16 @@ function goToHidReaders() {
 </script>
 
 <style scoped>
-.hid-service-switch :deep(.v-switch__track) {
-  background-color: #8b9297;
-  opacity: 1;
+/* The prototype's settings module label and its explanatory line. */
+.hid-settings-label {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--text);
 }
 
-.hid-service-switch :deep(.v-selection-control--dirty .v-switch__track) {
-  background-color: #2eaf55 !important;
-  color: #2eaf55 !important;
-  opacity: 1;
-}
-
-.hid-service-switch :deep(.v-switch__thumb) {
-  background-color: #fff !important;
-  color: #fff !important;
+.hid-settings-note {
+  font-size: 13px;
+  font-weight: 600;
 }
 </style>