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

package/components/ClientDetailForm.vue

@@ -85,7 +85,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -107,7 +107,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -132,7 +132,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -150,7 +150,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -175,7 +175,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -200,13 +200,13 @@
                 width="14"
                 height="12"
                 rx="2"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
               />
-              <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3" />
+              <path d="M1 7h14" stroke="currentColor" stroke-width="1.3" />
               <path
                 d="M5 1v3M11 1v3"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
                 stroke-linecap="round"
               />
@@ -224,13 +224,13 @@
                 width="14"
                 height="12"
                 rx="2"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
               />
-              <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3" />
+              <path d="M1 7h14" stroke="currentColor" stroke-width="1.3" />
               <path
                 d="M5 1v3M11 1v3"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
                 stroke-linecap="round"
               />
@@ -581,12 +581,12 @@ watch(
 }
 
 .form-wrap {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: var(--font-sans);
   font-size: 14px;
-  color: #111827;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
+  color: var(--text);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
   padding: 24px 28px 32px;
 }
 
@@ -596,17 +596,17 @@ watch(
   align-items: flex-start;
   justify-content: space-between;
   padding-bottom: 18px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--border);
   margin-bottom: 22px;
 }
 .header h2 {
   font-size: 20px;
   font-weight: 700;
-  color: #111827;
+  color: var(--text);
 }
 .header p {
   font-size: 13px;
-  color: #2563eb;
+  color: var(--accent-text);
   margin-top: 2px;
 }
 .actions {
@@ -618,7 +618,7 @@ watch(
 .btn-cancel,
 .btn-submit {
   border: none;
-  border-radius: 20px;
+  border-radius: var(--r-pill);
   padding: 9px 22px;
   font-size: 13px;
   font-weight: 600;
@@ -626,15 +626,18 @@ watch(
   transition: opacity 0.15s;
 }
 .btn-cancel {
-  background: #e5e7eb;
-  color: #374151;
+  background: var(--border);
+  color: var(--text2);
 }
 .btn-cancel:hover {
   opacity: 0.85;
 }
+/* `.btn-submit` was an exact copy of `.btn-cancel` - same grey fill, same ink -
+   so the form's primary action was indistinguishable from the one that throws
+   the edit away. It takes the design's accent fill and its white-safe pair. */
 .btn-submit {
-  background: #e5e7eb;
-  color: #374151;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
 }
 .btn-submit:hover {
   opacity: 0.85;
@@ -647,7 +650,7 @@ watch(
 .section h3 {
   font-size: 15px;
   font-weight: 700;
-  color: #111827;
+  color: var(--text);
   margin-bottom: 14px;
 }
 
@@ -669,29 +672,29 @@ watch(
 }
 .field label {
   font-size: 12px;
-  color: #6b7280;
+  color: var(--text2);
 }
 
 .field input[type='text'],
 .field input[type='email'] {
   height: 38px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   padding: 0 12px;
   font-size: 13px;
-  color: #111827;
-  background: #fff;
+  color: var(--text);
+  background: var(--card);
   outline: none;
 }
 .field input:focus {
-  border-color: #9ca3af;
+  border-color: var(--muted);
 }
 .field input::placeholder {
-  color: #9ca3af;
+  color: var(--muted);
 }
 .field input:disabled {
-  background: #f9fafb;
-  color: #6b7280;
+  background: var(--bg);
+  color: var(--text2);
 }
 
 /* ===== SELECT ===== */
@@ -701,18 +704,18 @@ watch(
 .select-wrap select {
   width: 100%;
   height: 38px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   padding: 0 30px 0 12px;
   font-size: 13px;
-  color: #111827;
-  background: #fff;
+  color: var(--text);
+  background: var(--card);
   appearance: none;
   cursor: pointer;
   outline: none;
 }
 .select-wrap select:focus {
-  border-color: #9ca3af;
+  border-color: var(--muted);
 }
 .select-wrap .chevron {
   position: absolute;
@@ -733,12 +736,12 @@ watch(
 .date-input input {
   width: 100%;
   height: 38px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   padding: 0 34px 0 12px;
   font-size: 13px;
-  color: #6b7280;
-  background: #f9fafb;
+  color: var(--text2);
+  background: var(--bg);
   outline: none;
 }
 .date-input svg {
@@ -750,7 +753,7 @@ watch(
 /* ===== HINT ===== */
 .hint {
   font-size: 11px;
-  color: #9ca3af;
+  color: var(--text2);
   line-height: 1.4;
 }
 .hint-below {
@@ -766,13 +769,13 @@ watch(
 }
 .app-list li {
   font-size: 13px;
-  color: #374151;
+  color: var(--text2);
 }
 
 /* ===== SITE TABLE ===== */
 .site-table {
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   overflow: hidden;
 }
 .site-table table {
@@ -784,12 +787,12 @@ watch(
   padding: 10px 16px;
   text-align: left;
   font-weight: 600;
-  color: #374151;
-  background: #f9fafb;
-  border-bottom: 1px solid #e5e7eb;
+  color: var(--text2);
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
 }
 .site-table tbody tr {
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid var(--border);
 }
 .site-table tbody tr:last-child {
   border-bottom: none;
@@ -799,14 +802,14 @@ watch(
 }
 .site-table .td-name {
   font-weight: 500;
-  color: #111827;
+  color: var(--text);
 }
 .site-table .td-muted {
-  color: #6b7280;
+  color: var(--text2);
 }
 .site-table .empty {
   text-align: center;
-  color: #9ca3af;
+  color: var(--text2);
   padding: 24px 0 !important;
 }
 .phone-input {
@@ -816,7 +819,7 @@ watch(
 
 .phone-input .prefix {
   width: 80px;
-  background: #f3f4f6;
+  background: var(--bg);
 }
 
 .phone-input .number {
@@ -826,6 +829,28 @@ watch(
 .error {
   margin-top: 4px;
   font-size: 12px;
-  color: #ef4444;
+  color: var(--err);
+}
+
+/*
+ * MEASURED at 360: the form overflowed the viewport by 147px in both themes.
+ * Its two-column grid, its 28px side padding and its header row are all fixed,
+ * and the component carries no media query at all - so on a phone the right
+ * column, the Submit button and half the site table sat off screen. One
+ * breakpoint, matching the shell's own mobile padding.
+ */
+@media (max-width: 600px) {
+  .form-wrap {
+    padding: 16px 14px 22px;
+  }
+
+  .row {
+    grid-template-columns: 1fr;
+  }
+
+  .header {
+    flex-direction: column;
+    gap: 12px;
+  }
 }
 </style>