From c2f208da31892e601b7dffc73a5cfe419810d4f0 Mon Sep 17 00:00:00 2001
From: caoxiaozhu <caoxiaozhu@users.noreply.github.com>
Date: Tue, 12 May 2026 06:38:45 +0000
Subject: [PATCH] style(web): update view styles

- settings-view.css: update settings view styling
- travel-reimbursement-create-view.css: update travel reimbursement form styles
---
 web/src/assets/styles/views/settings-view.css | 188 ++++++++++++++++--
 .../travel-reimbursement-create-view.css      | 185 +++++++++++++++++
 2 files changed, 353 insertions(+), 20 deletions(-)

diff --git a/web/src/assets/styles/views/settings-view.css b/web/src/assets/styles/views/settings-view.css
index 74cd20d..56c2469 100644
--- a/web/src/assets/styles/views/settings-view.css
+++ b/web/src/assets/styles/views/settings-view.css
@@ -321,12 +321,11 @@
   font-style: normal;
 }
 
-.field input,
-.field select {
-  width: 100%;
-  min-height: 44px;
-  padding: 0 14px;
-  border: 1px solid #d7e0ea;
+.field input {
+  width: 100%;
+  min-height: 44px;
+  padding: 0 14px;
+  border: 1px solid #d7e0ea;
   border-radius: 16px;
   background: #fff;
   color: #0f172a;
@@ -334,20 +333,169 @@
   line-height: 1.45;
   transition:
     border-color 180ms var(--ease),
-    box-shadow 180ms var(--ease),
-    background 180ms var(--ease);
-}
-
-.field input::placeholder {
-  color: #94a3b8;
-}
-
-.field input:focus,
-.field select:focus {
-  outline: none;
-  border-color: rgba(16, 185, 129, 0.55);
-  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
-}
+    box-shadow 180ms var(--ease),
+    background 180ms var(--ease);
+}
+
+.field select {
+  width: 100%;
+  min-height: 44px;
+  padding: 0 14px;
+  border: 1px solid #d7e0ea;
+  border-radius: 16px;
+  background: #fff;
+  color: #0f172a;
+  font-size: 13px;
+  line-height: 1.45;
+  transition:
+    border-color 180ms var(--ease),
+    box-shadow 180ms var(--ease),
+    background 180ms var(--ease);
+}
+
+.field input::placeholder {
+  color: #94a3b8;
+}
+
+.field input:focus,
+.field select:focus {
+  outline: none;
+  border-color: rgba(16, 185, 129, 0.55);
+  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
+}
+
+.session-picker-filter {
+  position: relative;
+}
+
+.session-picker-trigger {
+  width: 100%;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 0 40px 0 14px;
+  border: 1px solid #d7e0ea;
+  border-radius: 16px;
+  background: #fff;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 760;
+  text-align: left;
+  transition:
+    border-color 180ms var(--ease),
+    box-shadow 180ms var(--ease),
+    background 180ms var(--ease),
+    color 180ms var(--ease);
+}
+
+.session-picker-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.session-picker-trigger .mdi {
+  position: absolute;
+  right: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #64748b;
+  font-size: 18px;
+  pointer-events: none;
+}
+
+.session-picker-trigger:hover,
+.session-picker-filter.open .session-picker-trigger {
+  border-color: rgba(16, 185, 129, 0.34);
+  background: #f6fffb;
+  color: #0f9f78;
+}
+
+.session-picker-filter.open .session-picker-trigger {
+  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
+}
+
+.session-picker-filter.open .session-picker-trigger .mdi,
+.session-picker-trigger:hover .mdi {
+  color: #0f9f78;
+}
+
+.session-picker-popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  width: 100%;
+  z-index: 40;
+  display: grid;
+  gap: 14px;
+  padding: 16px;
+  border: 1px solid #d7e0ea;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
+}
+
+.session-picker-popover header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.session-picker-popover header strong {
+  color: #0f172a;
+  font-size: 15px;
+}
+
+.session-picker-popover header button {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  color: #64748b;
+}
+
+.session-picker-popover header button:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+.session-picker-option-list {
+  display: grid;
+  gap: 8px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.session-picker-option {
+  min-height: 38px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0 12px;
+  border: 1px solid #d7e0ea;
+  border-radius: 12px;
+  background: #fff;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 750;
+  text-align: left;
+  transition:
+    border-color 180ms var(--ease),
+    background 180ms var(--ease),
+    color 180ms var(--ease);
+}
+
+.session-picker-option:hover,
+.session-picker-option.active {
+  border-color: rgba(16, 185, 129, 0.32);
+  background: rgba(16, 185, 129, 0.08);
+  color: #059669;
+}
 
 .secret-bound-state {
   min-height: 24px;
diff --git a/web/src/assets/styles/views/travel-reimbursement-create-view.css b/web/src/assets/styles/views/travel-reimbursement-create-view.css
index 2b29ec4..a09754b 100644
--- a/web/src/assets/styles/views/travel-reimbursement-create-view.css
+++ b/web/src/assets/styles/views/travel-reimbursement-create-view.css
@@ -759,6 +759,185 @@
   display: block;
 }
 
+.review-summary {
+  margin: 0;
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.review-mini-grid,
+.review-slot-grid,
+.review-doc-field-grid {
+  display: grid;
+  gap: 10px;
+}
+
+.review-mini-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.review-slot-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.review-slot-card,
+.review-doc-field-card,
+.review-brief-card,
+.review-claim-card,
+.review-document-card {
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  background: #f8fbff;
+}
+
+.review-slot-card {
+  display: grid;
+  gap: 8px;
+  padding: 12px 14px;
+}
+
+.review-slot-card.compact {
+  gap: 4px;
+  padding: 10px 12px;
+}
+
+.review-slot-card header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.review-slot-card span,
+.review-doc-field-card span,
+.review-brief-card strong,
+.review-document-card header span {
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.review-slot-card strong,
+.review-doc-field-card strong,
+.review-claim-card strong,
+.review-document-card header strong {
+  color: #0f172a;
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.review-slot-card p,
+.review-brief-card p,
+.review-claim-card p,
+.review-document-card p {
+  margin: 0;
+  color: #64748b;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.review-slot-card.missing {
+  border-color: #fecdd3;
+  background: #fff7f7;
+}
+
+.review-slot-card.inferred {
+  border-color: #dbeafe;
+  background: #f8fbff;
+}
+
+.review-brief-list,
+.review-claim-list,
+.review-document-list {
+  display: grid;
+  gap: 10px;
+}
+
+.review-brief-card,
+.review-claim-card,
+.review-document-card {
+  padding: 12px 14px;
+}
+
+.review-brief-card.warning {
+  background: #fff7ed;
+  border-color: #fed7aa;
+}
+
+.review-brief-card.high {
+  background: #fff1f2;
+  border-color: #fecdd3;
+}
+
+.review-claim-card header,
+.review-document-card header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.review-document-card {
+  display: grid;
+  gap: 10px;
+}
+
+.document-preview {
+  min-height: 124px;
+  overflow: hidden;
+  border-radius: 14px;
+  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
+  border: 1px dashed #dbe3ec;
+}
+
+.document-preview.image img {
+  display: block;
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+}
+
+.document-preview-placeholder {
+  min-height: 124px;
+  display: grid;
+  place-items: center;
+  gap: 6px;
+  color: #64748b;
+  text-align: center;
+}
+
+.document-preview-placeholder i {
+  font-size: 28px;
+}
+
+.review-doc-field-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.review-doc-field-card {
+  padding: 10px 12px;
+}
+
+.action-list.compact {
+  grid-template-columns: 1fr;
+}
+
+.action-card.primary {
+  border-color: #bbf7d0;
+  background: #f0fdf4;
+}
+
+.action-card.secondary {
+  background: #fff;
+}
+
+.action-card.warning {
+  border-color: #fed7aa;
+  background: #fff7ed;
+}
+
 .note-block {
   display: grid;
   gap: 8px;
@@ -907,4 +1086,10 @@
   .metric-grid {
     grid-template-columns: 1fr;
   }
+
+  .review-slot-grid,
+  .review-doc-field-grid,
+  .review-mini-grid {
+    grid-template-columns: 1fr;
+  }
 }