@7365admin1/layer-common 3.2.2-staging.111 → 3.2.2-staging.113

package/components/Dialog/UpdateMoreAction.vue

@@ -1,71 +1,67 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <template v-if="$slots.header">
-        <slot name="header" :title="title" :onClose="onClose" />
-      </template>
-      <template v-else>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h5 text-capitalize">{{
-            title
-          }}</span>
-        </v-row>
-      </template>
-    </v-toolbar>
+  <!-- The shared detail sheet several list screens open a row into. Its title
+       row and its footer were both `v-toolbar`s - fixed grey slabs that stay
+       grey on the dark theme - and the footer's action was a hardcoded
+       `color="black"` fill. -->
+  <v-card class="screen-modal" width="100%">
+    <template v-if="$slots.header">
+      <slot name="header" :title="title" :onClose="onClose" />
+    </template>
+    <v-card-title v-else class="text-capitalize">{{ title }}</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0" :class="contentNoPadding ? 'pa-0' : ''">
+    <v-card-text class="screen-modal__body pb-0" :class="contentNoPadding ? 'pa-0' : ''">
       <slot name="content" />
     </v-card-text>
 
-    <v-toolbar class="pa-0" density="compact">
-      <v-row no-gutters>
-        <v-col :cols="(canUpdate || canDelete) ? 6 : 12" class="pa-0">
+    <!-- The design's footer strip: equal-width buttons, ghost then primary. -->
+    <div class="screen-modal__footer">
+      <v-btn
+        variant="outlined"
+        class="screen-btn-ghost"
+        @click="emit('close')"
+      >
+        Close
+      </v-btn>
+
+      <v-menu v-if="canUpdate || canDelete" contained>
+        <template #activator="{ props }">
           <v-btn
-            block
-            variant="text"
-            class="text-none"
-            size="large"
-            @click="emit('close')"
-            height="48"
+            variant="flat"
+            class="screen-btn-primary"
+            :disabled="disabled"
+            v-bind="props"
           >
-            Close
+            More actions
           </v-btn>
-        </v-col>
-
-        <v-col v-if="canUpdate || canDelete" cols="6" class="pa-0" >
-          <v-menu contained>
-            <template #activator="{ props }">
-              <v-btn
-                block
-                variant="flat"
-                color="black"
-                class="text-none"
-                height="48"
-                :disabled="disabled"
-                v-bind="props"
-                tile
-              >
-                More actions
-              </v-btn>
-            </template>
+        </template>
 
-            <v-list class="pa-0">
-              <v-list-item v-if="canUpdate" @click="emit('edit')">
-                <v-list-item-title class="text-subtitle-2">
-                  {{ editButtonLabel }}
-                </v-list-item-title>
-              </v-list-item>
+        <!-- The dropdown itself is left as Vuetify draws it: the handoff
+             specifies the PROFILE dropdown (240px, 14px radius) and mentions a
+             per-row kebab menu without giving it a shape, and this menu opens
+             on a click the harness cannot drive, so it could not be
+             render-verified either. Only the row type and the destructive ink
+             change. -->
+        <v-list class="pa-0 update-more__list">
+          <v-list-item v-if="canUpdate" @click="emit('edit')">
+            <v-list-item-title>
+              {{ editButtonLabel }}
+            </v-list-item-title>
+          </v-list-item>
 
-              <v-list-item v-if="canDelete" @click="emit('delete')" class="text-red">
-                <v-list-item-title class="text-subtitle-2">
-                  {{ deleteButtonLabel }}
-                </v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </v-menu>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+          <!-- `text-red` was Vuetify's fixed #f44336, the same red on both
+               themes. `text-error` is Vuetify's own class over
+               `--v-theme-error`, which IS the design's `--err`. The handoff's
+               one documented destructive treatment is the profile menu's
+               Logout row: "red Logout row (err color, err-bg hover)" - ink,
+               not a filled button - so this row follows it exactly. -->
+          <v-list-item v-if="canDelete" @click="emit('delete')" class="text-error">
+            <v-list-item-title>
+              {{ deleteButtonLabel }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </div>
   </v-card>
 </template>
 
@@ -105,4 +101,11 @@ const emit = defineEmits(["close", "edit", "delete"]);
 const { canUpdate, editButtonLabel, deleteButtonLabel, title, disabled } = prop;
 </script>
 
-<style scoped></style>
+<style scoped>
+/* `text-subtitle-2` was Vuetify's 0.875rem/500; the handoff names no type for
+   a menu row, so it takes the established cell type. */
+.update-more__list :deep(.v-list-item-title) {
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+}
+</style>

package/components/DocumentForm.vue

@@ -1,13 +1,8 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
-          {{ prop.mode }} Document
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+  <v-card width="100%" class="screen-modal">
+    <v-card-title class="text-capitalize">{{ prop.mode }} Document</v-card-title>
+
+    <v-card-text class="screen-modal__body pa-0">
       <v-form v-model="validForm" :disabled="disable">
         <v-col cols="12" class="px-6">
           <InputLabel class="text-capitalize" title="Document Attachment" />
@@ -24,6 +19,7 @@
           <InputLabel class="text-capitalize" title="Document Name" />
           <v-text-field
             v-model.trim="document.name"
+            class="filter-field"
             density="comfortable"
           ></v-text-field>
         </v-col>
@@ -42,15 +38,15 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <!-- Was a `v-toolbar`: a grey slab with square (`tile`) buttons and a
+         hardcoded `color="black"` primary. The gate on Submit is unchanged. -->
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
+        <v-col cols="6" class="pr-2">
           <v-btn
-            tile
             block
-            variant="text"
-            class="text-none"
-            size="48"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="cancel"
             :disabled="disable"
           >
@@ -58,14 +54,11 @@
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
-            tile
             block
             variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
+            class="text-none screen-btn-primary"
             :disabled="
               !validForm ||
               disable ||
@@ -79,7 +72,7 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 <script setup lang="ts">

package/components/DocumentViewer.vue

@@ -1,14 +1,24 @@
 <template>
     <v-dialog :model-value="modelValue" :max-width="fileType === 'image' ? '1200' : '900'" scrollable
         @update:model-value="emit('update:modelValue', $event)">
-        <v-card>
-            <v-toolbar density="compact">
-                <v-toolbar-title class="text-subtitle-2 text-truncate">{{ fileName }}</v-toolbar-title>
-                <v-spacer />
-                <v-btn icon="mdi-open-in-new" variant="text" size="small" @click="openInNewTab()" />
-                <v-btn icon="mdi-close" variant="text" size="small" @click="emit('update:modelValue', false)" />
-            </v-toolbar>
-            <v-card-text class="pa-0"
+        <!-- The card wears `.screen-modal` for the 16px corner, the `--card`
+             surface and the modal shadow. The `v-toolbar` header was a fixed
+             grey slab that stays grey on the dark theme; the design's modal
+             header is a title and its controls on the card's own surface over
+             a 1px `--border` rule, which is what this now draws. -->
+        <v-card class="screen-modal">
+            <v-card-title class="d-flex align-center ga-1 doc-viewer__head">
+                <span class="flex-grow-1 text-truncate">{{ fileName }}</span>
+                <!-- `.screen-modal__close` is the handoff's modal control:
+                     32x32, 8px radius, borderless, `--muted` ink. The handoff
+                     draws only a close in that row; a second control beside it
+                     is a case it is silent on, so it takes the same shape. -->
+                <v-btn icon="mdi-open-in-new" variant="text" size="small" class="screen-modal__close"
+                    @click="openInNewTab()" />
+                <v-btn icon="mdi-close" variant="text" size="small" class="screen-modal__close"
+                    @click="emit('update:modelValue', false)" />
+            </v-card-title>
+            <v-card-text class="screen-modal__body pa-0"
                 :style="{ height: fileType === 'image' ? 'auto' : '75vh', 'overflow-y': fileType === 'image' ? 'auto' : 'auto' }">
                 <!-- Image Viewer -->
                 <v-img v-if="fileType === 'image'" :src="getFileUrl(fileId)" :alt="fileName" class="w-100" />
@@ -24,13 +34,12 @@
                 <iframe v-else :src="getFileUrl(fileId)" width="100%" height="100%" style="border: none;"
                     :title="fileName" />
             </v-card-text>
-            <v-card-actions>
-                <v-spacer />
-                <v-btn variant="text" class="text-none" @click="openInNewTab()">
+            <div class="screen-modal__footer">
+                <v-btn variant="outlined" class="screen-btn-ghost" @click="openInNewTab()">
                     <v-icon start>mdi-download</v-icon>
                     Open / Download
                 </v-btn>
-            </v-card-actions>
+            </div>
         </v-card>
     </v-dialog>
 </template>
@@ -73,3 +82,11 @@ function openInNewTab() {
     window.open(getFileUrl(props.fileId), '_blank', 'noopener,noreferrer');
 }
 </script>
+
+<style scoped>
+/* The handoff's modal header sits over a 1px --border rule, the same rule the
+   footer strip sits under. */
+.doc-viewer__head {
+    border-bottom: 1px solid var(--border);
+}
+</style>

package/components/InvitationClientForm.vue

@@ -1,14 +1,8 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5">
-          {{ props.title }}
-        </span>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal">
+    <v-card-title>{{ props.title }}</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
+    <v-card-text class="screen-modal__body">
       <v-form v-model="validForm" ref="form" :disabled="disable">
         <v-row no-gutters>
 
@@ -17,6 +11,7 @@
             <InputLabel title="Email" required />
             <v-text-field
               v-model="invite.email"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule, emailRule]"
               :loading="loading.verifyingEmail"
@@ -37,6 +32,7 @@
               multiple
               chips
               closable-chips
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
               @update:model-value="handleUpdateApp"
@@ -50,8 +46,9 @@
                     <v-checkbox-btn
                       :model-value="invite.app.includes(item.raw.value)"
                       :disabled="item.raw.disabled"
-                      color="black"
-                      density="comfortable"
+                      color="primary"
+                      class="filter-field"
+              density="comfortable"
                     />
                   </template>
 
@@ -79,6 +76,7 @@
               :items="roles"
               item-title="name"
               item-value="_id"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
             />
@@ -90,6 +88,7 @@
             <v-autocomplete
               v-model="invite.site"
               :items="sites"
+              class="filter-field"
               density="comfortable"
               :rules="[requiredRule]"
               @update:model-value="handleUpdateSite"
@@ -109,21 +108,24 @@
     </v-card-text>
 
     <!-- ACTION -->
-    <v-toolbar density="compact">
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn block variant="text" class="text-none" size="48" @click="cancel">
+        <v-col cols="6" class="pr-2">
+          <v-btn
+            block
+            variant="outlined"
+            class="text-none screen-btn-ghost"
+            @click="cancel"
+          >
             Cancel
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
             block
             variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
+            class="text-none screen-btn-primary"
             :disabled="!validForm"
             :loading="loading.submittingForm"
             @click="submit"
@@ -132,7 +134,7 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 

package/components/InvitationForm.vue

@@ -1,13 +1,8 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5">
-          {{ props.title }}
-        </span>
-      </v-row>
-    </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
+  <v-card width="100%" class="screen-modal">
+    <v-card-title>{{ props.title }}</v-card-title>
+
+    <v-card-text class="screen-modal__body">
       <v-form v-model="validForm" ref="form" :disabled="disable">
         <v-row no-gutters>
           <v-col cols="12" class="mt-2">
@@ -16,6 +11,7 @@
               <v-col cols="12">
                 <v-text-field
                   v-model="invite.email"
+                  class="filter-field"
                   density="comfortable"
                   :rules="[requiredRule, emailRule]"
                   :loading="loading.verifyingEmail"
@@ -34,6 +30,7 @@
               <v-col cols="12">
                 <v-autocomplete
                   v-model="invite.app"
+                  class="filter-field"
                   density="comfortable"
                   :rules="[requiredRule]"
                   :items="apps"
@@ -53,6 +50,7 @@
                   item-title="name"
                   item-value="_id"
                   :rules="[requiredRule]"
+                  class="filter-field"
                   density="comfortable"
                 ></v-autocomplete>
               </v-col>
@@ -66,6 +64,7 @@
                 <v-autocomplete
                   v-model="invite.site"
                   :items="sites"
+                  class="filter-field"
                   density="comfortable"
                   :rules="[requiredRule]"
                   @update:model-value="handleUpdateSite"
@@ -99,29 +98,24 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar density="compact">
+    <v-card-actions class="screen-modal__footer">
       <v-row no-gutters>
-        <v-col cols="6">
+        <v-col cols="6" class="pr-2">
           <v-btn
-            tile
             block
-            variant="text"
-            class="text-none"
-            size="48"
+            variant="outlined"
+            class="text-none screen-btn-ghost"
             @click="cancel"
           >
             {{ props.cancelText }}
           </v-btn>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="6" class="pl-2">
           <v-btn
-            tile
             block
             variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
+            class="text-none screen-btn-primary"
             :disabled="!validForm"
             :loading="loading.submittingForm"
             @click="submit"
@@ -130,7 +124,7 @@
           </v-btn>
         </v-col>
       </v-row>
-    </v-toolbar>
+    </v-card-actions>
   </v-card>
 </template>
 

package/components/OrgViewDialog.vue

@@ -1,24 +1,28 @@
 <template>
+  <!-- 760px is kept: the handoff draws exactly one modal and it is the 520px
+       Create Role form, so a multi-section detail dialog is a case it is
+       silent on, and narrowing this one would wrap fifteen label/value rows
+       rather than follow anything. What changes is the chrome. -->
   <v-dialog v-model="model" max-width="760" scrollable>
-    <v-card rounded="lg">
-      <v-toolbar density="compact" color="grey-lighten-4">
-        <v-toolbar-title class="text-subtitle-1 font-weight-bold">
-          View Organization Information
-        </v-toolbar-title>
-      </v-toolbar>
+    <v-card class="screen-modal">
+      <!-- Was a `v-toolbar color="grey-lighten-4"` - a literal light grey that
+           stays light grey on the dark theme, i.e. a white bar across the top
+           of a dark card. A `v-card-title` is the same row on the card's own
+           surface. -->
+      <v-card-title>View Organization Information</v-card-title>
 
-      <v-card-text class="py-4">
+      <v-card-text class="screen-modal__body py-4">
         <template v-for="section in sections" :key="section.title">
-          <div class="text-subtitle-2 font-weight-bold mb-2">
+          <div class="screen-card-title mb-2">
             {{ section.title }}
           </div>
           <div
             v-for="row in section.rows"
             :key="row.label"
-            class="d-flex justify-space-between py-1"
+            class="d-flex justify-space-between py-1 org-view__row"
           >
-            <span class="text-body-2 text-medium-emphasis">{{ row.label }}</span>
-            <span class="text-body-2 font-weight-medium text-right">
+            <span class="screen-hint">{{ row.label }}</span>
+            <span class="text-right org-view__value">
               {{ row.value || "--" }}
             </span>
           </div>
@@ -26,13 +30,13 @@
         </template>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="justify-center py-3">
-        <v-btn variant="text" class="text-none" @click="model = false">
+      <!-- The design's bordered footer strip. `v-divider` plus a padded
+           actions row was the same thing drawn by hand. -->
+      <div class="screen-modal__footer">
+        <v-btn variant="outlined" class="screen-btn-ghost" @click="model = false">
           Close
         </v-btn>
-      </v-card-actions>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -116,3 +120,17 @@ const sections = computed(() => {
   ];
 });
 </script>
+
+<style scoped>
+/* The handoff names no type for a label/value detail row, so both take the
+   established cell type: the label on `--muted` (it was `text-medium-emphasis`,
+   Vuetify's own 60%-alpha ink) and the value on the cell weight. */
+.org-view__row {
+  font-size: var(--fs-cell);
+}
+
+.org-view__value {
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+</style>

package/components/PasswordConfirmation.vue

@@ -1,40 +1,54 @@
 <template>
-    <v-card width="100%" :disabled="loading || processingPassword" :loading="loading || processingPassword">
-        <v-toolbar density="compact">
-            <v-row no-gutters class="pa-3 text-h6 font-weight-bold">
-                <span>{{ promptTitle }}</span>
-            </v-row>
-        </v-toolbar>
-        <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5 px-7 text-center">
+    <!--
+      A dialog card, so it wears `.screen-modal` (16px corner, the modal shadow,
+      the `--card` surface). The two `v-toolbar`s it used to have were grey
+      slabs standing in for a title row and a footer - a `v-toolbar` keeps that
+      grey on the dark theme, so this dialog dropped a light slab onto a dark
+      card at both ends. A `v-card-title` and a `v-card-actions` are the same
+      two rows without the slab, and they follow the theme.
+    -->
+    <v-card class="screen-modal" width="100%" :disabled="loading || processingPassword" :loading="loading || processingPassword">
+        <v-card-title>{{ promptTitle }}</v-card-title>
+
+        <v-card-text class="screen-modal__body pa-5 my-5 px-7 text-center">
             <v-row no-gutters class="w-100">
                 <v-col cols="12">
-                    <v-icon icon="mdi-lock-outline" :color="'gray'" class="text-h2" />
+                    <!-- Was `:color="'gray'"`, a fixed Vuetify grey that is the
+                         same grey on both themes. `--muted` is the design's
+                         secondary ink and follows the theme. -->
+                    <v-icon icon="mdi-lock-outline" class="text-h2 screen-lock-icon" />
                 </v-col>
                 <v-col cols="12" v-if="message" class="mt-2">
                     {{ message }}
                 </v-col>
                 <v-col cols="12" class="mt-5 text-start">
-                    <v-text-field v-model="passwordInput" label="Password" type="password" density="compact" :error-messages="errorMessage"></v-text-field>
+                    <!-- Still a `v-text-field`, not an `AppField`: it carries
+                         the `:error-messages` surface that `handleConfirm`
+                         writes the server's reply into, which `AppField` has
+                         no equivalent for. `.filter-field` gives it the
+                         design's 40px / 10px / 13.5px shape without taking
+                         that away. -->
+                    <v-text-field v-model="passwordInput" class="filter-field" label="Password" type="password" density="compact" :error-messages="errorMessage"></v-text-field>
                 </v-col>
             </v-row>
         </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" tile @click="emit('cancel')" height="48">
-                        Cancel
-                    </v-btn>
-                </v-col>
+        <!-- The design's footer: two equal-width buttons, ghost then primary,
+             on a bordered strip. The confirming button was a hardcoded
+             `color="red"` fill; the handoff draws no destructive button, so it
+             takes the primary shape like every other modal's confirm, and the
+             destructive-variant gap is raised for a design decision rather than
+             invented here. -->
+        <div class="screen-modal__footer">
+            <v-btn class="screen-btn-ghost" variant="outlined" @click="emit('cancel')">
+                Cancel
+            </v-btn>
 
-                <v-col cols="6" class="pa-0">
-                    <v-btn block tile variant="flat" class="text-none" size="large" height="48" color="red" :disabled="!passwordInput"
-                        @click="handleConfirm">
-                        Confirm
-                    </v-btn>
-                </v-col>
-            </v-row>
-        </v-toolbar>
+            <v-btn class="screen-btn-primary" variant="flat" :disabled="!passwordInput"
+                @click="handleConfirm">
+                Confirm
+            </v-btn>
+        </div>
     </v-card>
 </template>
 
@@ -75,7 +89,7 @@ async function handleConfirm() {
     const userId = currentUser.value?._id;
     if (!userId) {
         throw new Error('User not found. Please login again.');
-    }   
+    }
     const res = await confirmPassword({ userId, password: passwordInput.value });
     if (res) {
       emit('confirm');
@@ -92,4 +106,8 @@ async function handleConfirm() {
 
 </script>
 
-<style scoped></style>
+<style scoped>
+.screen-lock-icon {
+    color: var(--muted);
+}
+</style>