Suyash091/agentic.email
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui improvements

Browse source
This commit is contained in:
debu-2 2026-10-03 21:46:03 +05:30
parent cce9a8c9ba
commit 78aac5a925
7 changed files with 769 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

123
frontend/src/styles.css
View file

@ -450,4 +450,127 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
.dns-value-cell { display:flex; align-items:flex-start; gap:8px; }
.dns-copy { width:28px; height:28px; flex:0 0 auto; display:grid; place-items:center; border:1px solid #ece7e3; border-radius:8px; background:white; color:#67677a; }
.link-button { border:0; background:transparent; color:var(--coral); font:inherit; font-weight:600; cursor:pointer; padding:0; }
.dashboard { grid-template-columns:248px minmax(0,1fr); background:#f4f3f1; }
.dashboard-sidebar { padding:22px 14px 16px; overflow:auto; border-right:0; color:#d7d3e2; background:linear-gradient(180deg,#1c1730 0%,#161226 55%,#221833 100%); box-shadow:none; }
.dashboard-brand-row>button { color:#c8c3d4; }
.dashboard-sidebar .brand { color:#fff; font-size:18px; }
.dashboard-sidebar .brand-mark { background:#fff; }
.dashboard-sidebar .robot-eyes i { background:#1c1730; }
.dashboard-sidebar .robot-smile { border-color:#1c1730; }
.dashboard-compose { margin:22px 4px 18px; color:#fff; background:linear-gradient(180deg,#ff8d72,#ff6a52); box-shadow:0 10px 22px #ff6a5240; border-radius:12px; }
.dashboard-compose:hover { background:linear-gradient(180deg,#ff9a82,#ff735c); }
.dashboard-nav-group h2 { color:#8d879c; }
.dashboard-nav-group button { min-height:36px; color:#c8c3d4; border-radius:10px; font-size:13px; }
.dashboard-nav-group button em,.dashboard-labels button em { margin-left:auto; min-width:18px; height:18px; padding:0 6px; display:grid; place-items:center; border-radius:99px; background:#ff6a52; color:#fff; font-size:10px; font-style:normal; font-weight:700; }
.dashboard-nav-group button:hover { background:#ffffff12; color:#fff; }
.dashboard-nav-group button.active { background:#ffffff14; color:#fff; font-weight:600; box-shadow:none; }
.dashboard-labels { margin:2px 0 18px; }
.dashboard-labels-toggle,.dashboard-labels button { width:100%; min-height:36px; padding:0 11px; display:flex; align-items:center; gap:11px; border:0; border-radius:10px; background:transparent; color:#c8c3d4; font-size:13px; text-align:left; }
.dashboard-labels-toggle svg:last-child { margin-left:auto; transition:transform .15s ease; }
.dashboard-labels-toggle svg.open { transform:rotate(180deg); }
.dashboard-labels nav { display:grid; gap:2px; margin-top:2px; }
.dashboard-labels button:hover,.dashboard-labels button.active { background:#ffffff12; color:#fff; }
.label-dot { width:8px; height:8px; border-radius:50%; }
.label-dot-rose { background:#ff8b78; }
.label-dot-violet { background:#a78bfa; }
.label-dot-blue { background:#7eb6ff; }
.label-dot-amber { background:#f0c14a; }
.label-dot-green { background:#7dcea0; }
.dashboard-profile { border-top-color:#ffffff14; }
.dashboard-profile>span { background:#ff8b78; color:#2a2038; }
.dashboard-profile strong { color:#fff; }
.dashboard-profile small,.dashboard-profile button { color:#a39eb2; }
.dashboard-profile button:hover { background:#ffffff12; color:#fff; }
.dashboard-content { padding:14px 16px 16px; background:#f7f6f4; }
.dashboard-content-heading h1 { font-size:clamp(28px,3vw,36px); letter-spacing:-1.4px; }
.mailbox-workspace { min-height:calc(100vh - 28px); display:flex; flex-direction:column; gap:12px; }
.workspace-header { min-height:58px; display:flex; align-items:center; gap:8px; }
.workspace-search { height:42px; min-width:0; flex:1; padding:0 8px 0 14px; display:flex; align-items:center; gap:8px; border:1px solid #e6e1dc; border-radius:14px; background:#fff; color:#9a958f; box-shadow:0 1px 2px #08082108; }
.workspace-search input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:#241f2b; font-size:13px; }
.workspace-search kbd { padding:3px 7px; border:1px solid #eee8e3; border-radius:7px; background:#faf8f6; color:#8d8792; font:600 10px "DM Sans"; white-space:nowrap; }
.workspace-filter,.workspace-icon { width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:12px; background:transparent; color:#6f6a74; }
.workspace-filter.active,.workspace-icon:hover,.workspace-filter:hover { background:#fff; color:#241f2b; }
.workspace-ask { height:38px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; border:1px solid #ffd3c8; border-radius:12px; background:#fff7f4; color:#d26552; font-size:13px; font-weight:700; white-space:nowrap; }
.workspace-ask:hover { background:#fff1eb; }
.workspace-account { margin-left:4px; padding:4px 8px 4px 4px; display:flex; align-items:center; gap:8px; border:0; border-radius:14px; background:transparent; color:#6d6872; }
.workspace-account:hover { background:#fff; }
.workspace-account>span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#6d4aff; color:#fff; font-size:11px; font-weight:700; }
.workspace-account div { min-width:0; display:grid; text-align:left; }
.workspace-account strong,.workspace-account small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-account strong { color:#241f2b; font-size:12px; }
.workspace-account small { color:#8d8792; font-size:10px; max-width:150px; }
.mailbox-stage { min-height:0; flex:1; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:14px; align-items:start; }
.mailbox-shell { min-height:calc(100vh - 110px); margin-top:0; border-radius:16px; box-shadow:0 1px 2px #08082106,0 10px 30px #08082108; }
.mailbox-list-pane { min-height:calc(100vh - 110px); }
.mailbox-categories { min-height:48px; padding:0 8px; display:flex; align-items:center; gap:2px; border-bottom:1px solid #efeae6; overflow:auto; }
.mailbox-categories button { height:48px; padding:0 12px; position:relative; display:inline-flex; align-items:center; gap:7px; border:0; background:transparent; color:#6e6974; font-size:13px; font-weight:600; white-space:nowrap; }
.mailbox-categories button span { min-width:16px; height:16px; padding:0 5px; display:grid; place-items:center; border-radius:99px; background:#ff6a52; color:#fff; font-size:10px; }
.mailbox-categories button.active { color:#e15b45; }
.mailbox-categories button.active:after { content:""; position:absolute; left:12px; right:12px; bottom:0; height:2px; border-radius:2px; background:#ff6a52; }
.mailbox-range { margin-left:auto; padding-right:10px; color:#9a948e; font-size:11px; white-space:nowrap; }
.mailbox-row { min-height:52px; padding:6px 12px; grid-template-columns:18px 22px 34px minmax(120px,180px) minmax(0,1fr) auto; gap:8px 10px; border-left:0; font-size:13px; }
.mailbox-row.unread { background:#fff; }
.mailbox-row:not(.unread) { background:#fbfaf8; }
.mailbox-row:not(.unread) .mailbox-sender,.mailbox-row:not(.unread) .mailbox-summary strong { font-weight:500; color:#5c5764; }
.mailbox-check { width:15px; height:15px; margin:0; accent-color:#ff6a52; }
.mailbox-unread-pip { width:7px; height:7px; margin-right:6px; display:inline-block; border-radius:50%; background:#ff6a52; vertical-align:middle; }
.mailbox-sender { display:flex; align-items:center; font-size:13px; }
.mailbox-summary { gap:8px; align-items:center; }
.mailbox-summary span { color:#8a847e; }
.mail-label,.mail-attachment { padding:2px 7px; border-radius:99px; font-size:10px; font-style:normal; font-weight:700; white-space:nowrap; }
.mail-label-rose { background:#ffe8e3; color:#c45a48; }
.mail-label-violet { background:#efe9ff; color:#6d54b8; }
.mail-label-blue { background:#e7f1ff; color:#3d6eae; }
.mail-label-amber { background:#fff4d8; color:#9a7420; }
.mail-label-green { background:#e7f6ee; color:#2f7a52; }
.mail-attachment { display:inline-flex; align-items:center; gap:3px; background:#f3f1ef; color:#6d6872; }
.mailbox-hover-actions { display:none; align-items:center; gap:2px; }
.mailbox-row:hover .mailbox-hover-actions,.mailbox-row:focus-within .mailbox-hover-actions { display:flex; }
.mailbox-row:hover time,.mailbox-row:focus-within time { display:none; }
.mailbox-hover-actions button { width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:8px; background:#fff; color:#6d6872; box-shadow:0 1px 2px #08082110; }
.mailbox-hover-actions button:hover { color:#e15b45; background:#fff4f1; }
.mailbox-star { width:22px; height:22px; }
.sender-avatar.mailbox-avatar { width:32px; height:32px; font-size:11px; }
.mailbox-rail { min-width:0; display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 96px); position:sticky; top:14px; }
.agent-panel { padding:16px; border:1px solid #ece7e2; border-radius:16px; background:#fff; box-shadow:0 8px 24px #08082108; }
.agent-panel-head { display:flex; align-items:center; gap:10px; }
.agent-panel-mark { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:#fff1eb; color:#e15b45; }
.agent-panel-head h2 { margin:0; font:700 15px "Manrope"; letter-spacing:-.3px; }
.agent-panel-head p { margin:1px 0 0; color:#8d8792; font-size:11px; }
.agent-panel-hello { margin:14px 0 12px; display:grid; gap:3px; }
.agent-panel-hello strong { font-size:15px; letter-spacing:-.2px; }
.agent-panel-hello span,.agent-panel-hello p { margin:0; color:#7a746e; font-size:12px; line-height:1.45; }
.agent-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.agent-stat { min-height:92px; padding:10px; display:grid; align-content:start; gap:2px; border:0; border-radius:12px; text-align:left; }
.agent-stat strong { font:700 20px "Manrope"; letter-spacing:-.6px; color:#241f2b; }
.agent-stat span { color:#3d3944; font-size:11px; font-weight:700; }
.agent-stat small { color:#7d7872; font-size:10px; }
.agent-stat-rose { background:#fff1ee; color:#e15b45; }
.agent-stat-blue { background:#eef4ff; color:#4d74c4; }
.agent-stat-green { background:#eef8f2; color:#3d8a5d; }
.agent-stat-amber { background:#fff8ea; color:#b7892d; }
.agent-quick { margin-top:14px; }
.agent-quick h3 { margin:0 0 8px; color:#8d8792; font-size:11px; letter-spacing:.4px; text-transform:uppercase; }
.agent-quick div { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.agent-quick button { min-height:36px; padding:0 8px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid #eee8e3; border-radius:10px; background:#fff; color:#4d4852; font-size:11px; font-weight:600; }
.agent-quick button:hover { border-color:#ffd3c8; color:#e15b45; background:#fff8f5; }
.mailbox-notes-pane.compact { min-height:0; max-height:240px; border-radius:16px; }
.mailbox-notes-pane.compact .sticky-notes-header { min-height:44px; padding:8px 12px; }
.mailbox-notes-pane.compact .sticky-notes-body { padding:10px; gap:8px; }
.mailbox-notes-pane.compact .sticky-note { height:92px; min-height:92px; padding:12px 12px 8px; }
.mailbox-notes-pane.compact .sticky-note-add { min-height:64px; }
@media(max-width:1100px) {
.workspace-account div,.workspace-account svg { display:none; }
.mailbox-stage { grid-template-columns:minmax(0,1fr); }
.mailbox-rail { position:static; max-height:none; }
}
@media(max-width:900px) {
.dashboard-sidebar { background:linear-gradient(180deg,#1c1730,#161226); }
.mailbox-notes-pane { display:flex; }
.mailbox-row { grid-template-columns:16px 20px 32px minmax(0,1fr) auto; }
.mailbox-summary { grid-column:3/5; }
.mailbox-sender { grid-column:3; }
.mailbox-hover-actions { display:none!important; }
.mailbox-row:hover time { display:block; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }