UI finish
This commit is contained in:
parent
b469a09cde
commit
6e295dd4b3
3 changed files with 1162 additions and 472 deletions
|
|
@ -1,4 +1,19 @@
|
||||||
import { ChevronRight, LockKeyhole, MessageSquareText, Network, Phone, ShieldCheck } from 'lucide-react'
|
import {
|
||||||
|
BarChart3,
|
||||||
|
ChevronRight,
|
||||||
|
Contact,
|
||||||
|
LayoutTemplate,
|
||||||
|
LockKeyhole,
|
||||||
|
Megaphone,
|
||||||
|
MessageSquareText,
|
||||||
|
Network,
|
||||||
|
Phone,
|
||||||
|
ScrollText,
|
||||||
|
Send,
|
||||||
|
Settings,
|
||||||
|
ShieldCheck,
|
||||||
|
Workflow,
|
||||||
|
} from 'lucide-react'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import type { FormEvent } from 'react'
|
import type { FormEvent } from 'react'
|
||||||
import {
|
import {
|
||||||
|
|
@ -390,9 +405,23 @@ function AdminCompliance() {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const WORKSPACE_NAV = [
|
||||||
|
{ id: 'conversations', label: 'Conversations', icon: MessageSquareText },
|
||||||
|
{ id: 'compose', label: 'Send message', icon: Send },
|
||||||
|
{ id: 'templates', label: 'Templates', icon: LayoutTemplate },
|
||||||
|
{ id: 'contacts', label: 'Contacts', icon: Contact },
|
||||||
|
{ id: 'campaigns', label: 'Campaigns', icon: Megaphone },
|
||||||
|
{ id: 'automations', label: 'Automations', icon: Workflow },
|
||||||
|
{ id: 'analytics', label: 'Analytics', icon: BarChart3 },
|
||||||
|
{ id: 'logs', label: 'Webhook logs', icon: ScrollText },
|
||||||
|
{ id: 'numbers', label: 'Phone numbers', icon: Phone },
|
||||||
|
] as const
|
||||||
|
|
||||||
export function AdminApp() {
|
export function AdminApp() {
|
||||||
const [authenticated, setAuthenticated] = useState<boolean | null>(null)
|
const [authenticated, setAuthenticated] = useState<boolean | null>(null)
|
||||||
const [section, setSection] = useState<'compliance' | 'whatsapp'>('whatsapp')
|
const [section, setSection] = useState<'compliance' | 'whatsapp'>('whatsapp')
|
||||||
|
const [focus, setFocus] = useState<'inbox' | 'templates' | 'compose'>('inbox')
|
||||||
|
const [nav, setNav] = useState<string>('conversations')
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
adminApi.me().then(() => setAuthenticated(true)).catch(() => setAuthenticated(false))
|
adminApi.me().then(() => setAuthenticated(true)).catch(() => setAuthenticated(false))
|
||||||
|
|
@ -403,39 +432,74 @@ export function AdminApp() {
|
||||||
setAuthenticated(false)
|
setAuthenticated(false)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (authenticated === null) return <div className="auth-loading">Checking admin session…</div>
|
function openWorkspace(id: string) {
|
||||||
|
setSection('whatsapp')
|
||||||
|
setNav(id)
|
||||||
|
if (id === 'templates') setFocus('templates')
|
||||||
|
else if (id === 'compose') setFocus('compose')
|
||||||
|
else setFocus('inbox')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (authenticated === null) return <div className="auth-loading">Checking admin session…</div>
|
||||||
|
if (!authenticated) {
|
||||||
return (
|
return (
|
||||||
<div className="admin-shell">
|
<div className="admin-shell">
|
||||||
<header className="admin-topbar">
|
<header className="admin-topbar">
|
||||||
<div><img src="/urmi-logo.png" alt="Urmi" /><strong>Admin portal</strong></div>
|
<div><img src="/urmi-logo.png" alt="Urmi" /><strong>Admin portal</strong></div>
|
||||||
{authenticated && (
|
|
||||||
<div className="admin-topbar-actions">
|
|
||||||
<nav className="admin-main-nav">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={section === 'whatsapp' ? 'active' : ''}
|
|
||||||
onClick={() => setSection('whatsapp')}
|
|
||||||
>
|
|
||||||
WhatsApp Business
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={section === 'compliance' ? 'active' : ''}
|
|
||||||
onClick={() => setSection('compliance')}
|
|
||||||
>
|
|
||||||
Compliance
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
<button className="secondary-button" onClick={logout}>Log out</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
{authenticated
|
<AdminLogin onSuccess={() => setAuthenticated(true)} />
|
||||||
? (section === 'whatsapp' ? <AdminWhatsAppPage /> : <AdminCompliance />)
|
|
||||||
: <AdminLogin onSuccess={() => setAuthenticated(true)} />}
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="wa-shell">
|
||||||
|
<aside className="wa-nav">
|
||||||
|
<div className="wa-nav-brand"><img src="/urmi-logo.png" alt="Urmi" /></div>
|
||||||
|
<nav>
|
||||||
|
{WORKSPACE_NAV.map((item) => {
|
||||||
|
const Icon = item.icon
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
type="button"
|
||||||
|
className={section === 'whatsapp' && nav === item.id ? 'active' : ''}
|
||||||
|
onClick={() => openWorkspace(item.id)}
|
||||||
|
>
|
||||||
|
<Icon size={16} />
|
||||||
|
{item.label}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={section === 'compliance' ? 'active' : ''}
|
||||||
|
onClick={() => { setSection('compliance'); setNav('settings') }}
|
||||||
|
>
|
||||||
|
<Settings size={16} />
|
||||||
|
Settings
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
<div className="wa-nav-foot">
|
||||||
|
<strong>Business line</strong>
|
||||||
|
<span>WhatsApp connected</span>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<div className="wa-shell-main">
|
||||||
|
{section === 'whatsapp'
|
||||||
|
? <AdminWhatsAppPage onLogout={logout} focus={focus} />
|
||||||
|
: (
|
||||||
|
<>
|
||||||
|
<header className="wa-topbar plain">
|
||||||
|
<strong>Settings</strong>
|
||||||
|
<button className="wa-ghost" type="button" onClick={logout}>Log out</button>
|
||||||
|
</header>
|
||||||
|
<AdminCompliance />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1651,3 +1651,170 @@ main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
|
||||||
.otp-map-branches { grid-template-columns: repeat(2, 1fr); }
|
.otp-map-branches { grid-template-columns: repeat(2, 1fr); }
|
||||||
.otp-parameter-list > div { grid-template-columns: 1fr; }
|
.otp-parameter-list > div { grid-template-columns: 1fr; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wa-shell { min-height: 100vh; display: grid; grid-template-columns: 228px minmax(0, 1fr); background: #f4f7fb; }
|
||||||
|
.wa-shell-main { min-width: 0; min-height: 100vh; }
|
||||||
|
.wa-nav { display: flex; flex-direction: column; background: #07172f; color: #c5d2e4; padding: 18px 12px 16px; }
|
||||||
|
.wa-nav-brand { padding: 4px 8px 18px; }
|
||||||
|
.wa-nav-brand img { width: 132px; height: 42px; object-fit: contain; object-position: left center; }
|
||||||
|
.wa-nav nav { display: grid; gap: 2px; }
|
||||||
|
.wa-nav button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: #c5d2e4; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 500; text-align: left; }
|
||||||
|
.wa-nav button.active { background: #1475ff; color: white; }
|
||||||
|
.wa-nav-foot { margin-top: auto; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.04); }
|
||||||
|
.wa-nav-foot strong, .wa-nav-foot span { display: block; }
|
||||||
|
.wa-nav-foot strong { font-size: 12px; color: white; }
|
||||||
|
.wa-nav-foot span { margin-top: 3px; color: #8ea0b8; font-size: 11px; }
|
||||||
|
.wa-workspace { min-height: 100vh; display: flex; flex-direction: column; }
|
||||||
|
.wa-topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 22px; background: rgba(255,255,255,.92); border-bottom: 1px solid #e7edf5; }
|
||||||
|
.wa-topbar.plain { position: sticky; top: 0; }
|
||||||
|
.wa-product, .wa-ghost, .wa-tool, .wa-account-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e6edf5; background: white; color: #31445f; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 600; }
|
||||||
|
.wa-topbar-actions { display: flex; align-items: center; gap: 8px; }
|
||||||
|
.wa-connected { display: inline-flex; align-items: center; gap: 6px; color: #0f7a49; background: #e8f8ef; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; }
|
||||||
|
.wa-connected i, .wa-dot { width: 7px; height: 7px; border-radius: 50%; background: #18a36a; }
|
||||||
|
.wa-connected.pending { color: #8a5b00; background: #fff7df; }
|
||||||
|
.wa-connected.pending i { background: #d78219; }
|
||||||
|
.wa-icon-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #607089; }
|
||||||
|
.wa-icon-btn:hover, .wa-tool:hover { background: #f4f7fb; }
|
||||||
|
.wa-account { position: relative; }
|
||||||
|
.wa-account-btn { border-radius: 999px; padding-right: 14px; }
|
||||||
|
.wa-account-btn span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1475ff; color: white; font-size: 9px; }
|
||||||
|
.wa-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 160px; padding: 6px; background: white; border: 1px solid #e6edf5; border-radius: 12px; box-shadow: 0 12px 30px rgba(18,31,54,.08); }
|
||||||
|
.wa-menu button { display: block; width: 100%; border: 0; background: transparent; text-align: left; border-radius: 8px; padding: 8px 10px; color: #24344c; font-size: 12px; }
|
||||||
|
.wa-menu button:hover { background: #f4f7fb; }
|
||||||
|
.wa-page { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 22px; min-height: 0; flex: 1; }
|
||||||
|
.wa-page-title h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 22px; letter-spacing: -.03em; color: #14233b; }
|
||||||
|
.wa-page-title p { margin: 4px 0 0; color: #7d8ba0; font-size: 13px; }
|
||||||
|
.wa-setup { padding: 16px; background: white; border: 1px solid #e7edf5; border-radius: 14px; }
|
||||||
|
.wa-setup h2 { margin: 0 0 12px; font-size: 14px; }
|
||||||
|
.wa-setup form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
|
||||||
|
.wa-setup label { display: grid; gap: 6px; }
|
||||||
|
.wa-setup span { color: #607089; font-size: 11px; font-weight: 600; }
|
||||||
|
.wa-setup input, .wa-extra input, .wa-extra select, .wa-fields select, .wa-new-peer, .wa-tag-add input, .wa-profile-hero input { width: 100%; border: 1px solid #e6edf5; border-radius: 10px; padding: 9px 11px; font: inherit; font-size: 12px; color: #1c2b42; background: white; }
|
||||||
|
.wa-inbox { display: grid; grid-template-columns: 320px minmax(0, 1fr) 300px; min-height: calc(100vh - 168px); background: white; border: 1px solid #e7edf5; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(18, 31, 54, .04); }
|
||||||
|
.wa-list, .wa-profile { background: #fff; min-height: 0; }
|
||||||
|
.wa-list { display: flex; flex-direction: column; border-right: 1px solid #eef2f6; }
|
||||||
|
.wa-list-head, .wa-chat-head, .wa-profile-hero { display: flex; align-items: center; gap: 10px; }
|
||||||
|
.wa-list-head { justify-content: space-between; padding: 16px 14px 8px; }
|
||||||
|
.wa-list-head h2, .wa-quick h3 { margin: 0; font-size: 15px; color: #17253e; }
|
||||||
|
.wa-list-tools { display: flex; gap: 2px; }
|
||||||
|
.wa-search { display: flex; align-items: center; gap: 8px; margin: 0 12px 10px; padding: 0 12px; border: 1px solid #e7edf5; border-radius: 999px; color: #8b97a8; background: #f8fafc; }
|
||||||
|
.wa-search input { width: 100%; border: 0; background: transparent; padding: 9px 0; outline: none; font: inherit; font-size: 12px; color: #1c2b42; }
|
||||||
|
.wa-filters { display: flex; gap: 6px; padding: 0 12px 10px; }
|
||||||
|
.wa-filters button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #607089; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 600; }
|
||||||
|
.wa-filters button.active { background: #1475ff; color: white; }
|
||||||
|
.wa-filters em { font-style: normal; font-size: 10px; }
|
||||||
|
.wa-thread-list { flex: 1; min-height: 0; overflow: auto; padding: 0 6px 10px; }
|
||||||
|
.wa-thread { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; border: 0; background: transparent; text-align: left; border-radius: 10px; padding: 8px 10px; }
|
||||||
|
.wa-thread:hover { background: #f7f9fc; }
|
||||||
|
.wa-thread.active { background: #f3f7ff; box-shadow: inset 3px 0 0 #1475ff; }
|
||||||
|
.wa-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: white; font-size: 11px; font-weight: 700; flex: none; }
|
||||||
|
.wa-avatar.icon { background: #e8eef8; color: #5d7190; }
|
||||||
|
.wa-avatar.large { width: 52px; height: 52px; font-size: 16px; }
|
||||||
|
.wa-thread-copy { display: grid; min-width: 0; }
|
||||||
|
.wa-thread-copy strong, .wa-chat-id strong { color: #17253e; font-size: 13px; font-weight: 650; }
|
||||||
|
.wa-thread-copy span { color: #7d8ba0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||||
|
.wa-thread-meta { display: grid; justify-items: end; gap: 6px; }
|
||||||
|
.wa-thread-meta small { color: #8b97a8; font-size: 11px; }
|
||||||
|
.wa-thread-meta em { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #1475ff; color: white; font-style: normal; font-size: 10px; line-height: 16px; text-align: center; }
|
||||||
|
.wa-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; background: #f7f9fc; }
|
||||||
|
.wa-chat-head { justify-content: flex-start; padding: 12px 14px; background: white; border-bottom: 1px solid #eef2f6; }
|
||||||
|
.wa-chat-id { display: grid; }
|
||||||
|
.wa-chat-id small { color: #7d8ba0; font-size: 12px; }
|
||||||
|
.wa-chat-id small.online { color: #12805c; }
|
||||||
|
.wa-chat-id small.online::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #18a36a; }
|
||||||
|
.wa-chat-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
|
||||||
|
.wa-tool { border-color: transparent; background: transparent; color: #607089; border-radius: 8px; }
|
||||||
|
.wa-tool.on { color: #1475ff; }
|
||||||
|
.wa-assigned { color: #1475ff; font-size: 11px; font-weight: 700; }
|
||||||
|
.wa-pop { position: relative; }
|
||||||
|
.wa-canvas { overflow: auto; padding: 16px 18px 8px; }
|
||||||
|
.wa-day { width: fit-content; margin: 8px auto; padding: 3px 10px; border-radius: 999px; background: white; color: #7d8ba0; font-size: 11px; font-weight: 700; }
|
||||||
|
.wa-bubble-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
|
||||||
|
.wa-bubble-row.out { flex-direction: row-reverse; }
|
||||||
|
.wa-bubble { position: relative; max-width: min(440px, 78%); padding: 8px 10px 6px; border-radius: 12px; background: white; border: 1px solid #e7edf5; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
|
||||||
|
.wa-bubble.out { background: #e7f6ee; border-color: #d7efe3; border-bottom-right-radius: 4px; }
|
||||||
|
.wa-bubble.in { border-bottom-left-radius: 4px; }
|
||||||
|
.wa-bubble p { margin: 0; white-space: pre-wrap; color: #1c2b42; font-size: 13px; line-height: 1.45; }
|
||||||
|
.wa-bubble footer { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; color: #8b97a8; }
|
||||||
|
.wa-bubble time { font-size: 10px; }
|
||||||
|
.wa-bubble svg.read { color: #1475ff; }
|
||||||
|
.wa-kind { display: block; margin-bottom: 2px; color: #1475ff; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
|
||||||
|
.wa-choice-row { display: grid; gap: 4px; margin-top: 8px; }
|
||||||
|
.wa-choice-row span { padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.72); color: #1475ff; font-size: 12px; font-weight: 650; text-align: center; }
|
||||||
|
.wa-media { max-width: 220px; border-radius: 8px; margin-bottom: 6px; }
|
||||||
|
.wa-hover { display: flex; align-items: center; gap: 4px; opacity: 0; position: relative; }
|
||||||
|
.wa-bubble-row:hover .wa-hover, .wa-bubble.open + .wa-hover { opacity: 1; }
|
||||||
|
.wa-hover > button { border: 0; background: white; color: #607089; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 650; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
|
||||||
|
.wa-reacts { position: absolute; left: 0; bottom: calc(100% + 4px); display: flex; gap: 2px; padding: 4px; background: white; border: 1px solid #e7edf5; border-radius: 999px; box-shadow: 0 8px 20px rgba(18,31,54,.08); }
|
||||||
|
.wa-reacts.static { position: static; }
|
||||||
|
.wa-reacts button { border: 0; background: transparent; font-size: 14px; padding: 2px 4px; }
|
||||||
|
.wa-inspector { display: grid; gap: 3px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(20, 40, 70, .08); }
|
||||||
|
.wa-inspector strong { font-size: 11px; color: #17253e; }
|
||||||
|
.wa-inspector span { color: #607089; font-size: 11px; word-break: break-all; }
|
||||||
|
.wa-composer { padding: 10px 12px 12px; background: white; border-top: 1px solid #eef2f6; }
|
||||||
|
.wa-modes { display: flex; gap: 4px; margin-bottom: 8px; }
|
||||||
|
.wa-modes button { border: 0; background: transparent; color: #607089; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 650; }
|
||||||
|
.wa-modes button.active { background: #1475ff; color: white; }
|
||||||
|
.wa-quote { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 8px 10px; border-left: 3px solid #1475ff; border-radius: 8px; background: #f3f7ff; }
|
||||||
|
.wa-quote strong { display: block; color: #1475ff; font-size: 11px; }
|
||||||
|
.wa-quote p { margin: 2px 0 0; color: #31445f; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||||||
|
.wa-quote button { border: 0; background: transparent; color: #607089; }
|
||||||
|
.wa-extra { display: flex; gap: 8px; margin-bottom: 8px; }
|
||||||
|
.wa-extra > * { flex: 1; }
|
||||||
|
.wa-compose-box { position: relative; }
|
||||||
|
.wa-compose-box textarea { width: 100%; min-height: 64px; max-height: 140px; border: 1px solid #e7edf5; border-radius: 12px; padding: 10px 108px 10px 12px; resize: vertical; font: inherit; font-size: 13px; color: #1c2b42; background: #fbfcfe; }
|
||||||
|
.wa-ai { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 5px 8px; background: #f3e8ff; color: #7c3aed; font-size: 11px; font-weight: 700; }
|
||||||
|
.wa-compose-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
|
||||||
|
.wa-compose-icons { position: relative; display: flex; gap: 2px; }
|
||||||
|
.wa-compose-icons > button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #607089; }
|
||||||
|
.wa-compose-icons > button:hover { background: #f4f7fb; color: #1475ff; }
|
||||||
|
.wa-send { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 9px 14px; background: #1475ff; color: white; font-size: 13px; font-weight: 700; }
|
||||||
|
.wa-send:disabled { opacity: .55; }
|
||||||
|
.wa-error { margin: 0; color: #b42318; font-size: 12px; }
|
||||||
|
.wa-profile { display: flex; flex-direction: column; border-left: 1px solid #eef2f6; background: #fff; overflow: auto; }
|
||||||
|
.wa-profile-hero { align-items: center; gap: 12px; padding: 18px 16px 8px; }
|
||||||
|
.wa-name { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 0; color: #17253e; font-size: 14px; font-weight: 700; }
|
||||||
|
.wa-profile-hero small { display: block; margin-top: 2px; color: #7d8ba0; font-size: 12px; }
|
||||||
|
.wa-tabs { display: flex; gap: 4px; margin: 8px 12px 0; border-bottom: 1px solid #eef2f6; }
|
||||||
|
.wa-tabs button { border: 0; background: transparent; color: #7d8ba0; padding: 8px 8px 10px; font-size: 12px; font-weight: 650; }
|
||||||
|
.wa-tabs button.active { color: #1475ff; box-shadow: inset 0 -2px 0 #1475ff; }
|
||||||
|
.wa-fields { margin: 0; padding: 8px 16px; }
|
||||||
|
.wa-fields div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 0; }
|
||||||
|
.wa-fields dt { color: #8b97a8; font-size: 12px; }
|
||||||
|
.wa-fields dd { margin: 0; color: #1c2b42; font-size: 13px; }
|
||||||
|
.wa-fields dd select { padding: 6px 8px; }
|
||||||
|
.wa-dot { display: inline-block; margin-right: 6px; }
|
||||||
|
.wa-tag-line { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||||
|
.wa-tag-line em, .wa-tag-line .muted { font-style: normal; }
|
||||||
|
.wa-tag-line em { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #eef5ff; color: #1475ff; font-size: 11px; font-weight: 700; }
|
||||||
|
.wa-tag-line button { display: grid; place-items: center; border: 0; background: transparent; color: #1475ff; padding: 0; }
|
||||||
|
.wa-tag-line .muted { color: #8b97a8; font-size: 12px; }
|
||||||
|
.wa-notes, .wa-tag-editor, .wa-events { padding: 14px 16px; }
|
||||||
|
.wa-notes { display: grid; gap: 8px; color: #607089; }
|
||||||
|
.wa-notes textarea, .wa-events { width: 100%; }
|
||||||
|
.wa-notes textarea { min-height: 120px; border: 1px solid #e7edf5; border-radius: 12px; padding: 10px; font: inherit; font-size: 13px; resize: vertical; }
|
||||||
|
.wa-tag-add { display: flex; gap: 6px; margin-top: 10px; }
|
||||||
|
.wa-tag-add button { display: grid; place-items: center; width: 34px; border: 0; border-radius: 10px; background: #1475ff; color: white; }
|
||||||
|
.wa-events { list-style: none; margin: 0; display: grid; gap: 10px; }
|
||||||
|
.wa-events li { display: flex; justify-content: space-between; gap: 10px; }
|
||||||
|
.wa-events strong { color: #17253e; font-size: 12px; }
|
||||||
|
.wa-events span { color: #8b97a8; font-size: 11px; white-space: nowrap; }
|
||||||
|
.wa-quick { display: grid; gap: 4px; margin-top: auto; padding: 8px 10px 14px; }
|
||||||
|
.wa-quick h3 { padding: 8px 6px; }
|
||||||
|
.wa-quick > button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; border-radius: 8px; padding: 8px; color: #24344c; font-size: 13px; font-weight: 600; text-align: left; }
|
||||||
|
.wa-quick > button:hover { background: #f4f7fb; }
|
||||||
|
.wa-quick > button.danger { color: #d92d20; }
|
||||||
|
.wa-quick p { margin: 4px 6px 0; color: #12805c; font-size: 12px; }
|
||||||
|
.wa-empty { margin: 12px; color: #8b97a8; font-size: 12px; }
|
||||||
|
@media (max-width: 1180px) {
|
||||||
|
.wa-shell { grid-template-columns: 72px minmax(0, 1fr); }
|
||||||
|
.wa-nav button { font-size: 0; justify-content: center; padding: 10px; }
|
||||||
|
.wa-nav-brand, .wa-nav-foot { display: none; }
|
||||||
|
.wa-inbox { grid-template-columns: 280px minmax(0, 1fr); }
|
||||||
|
.wa-profile { display: none; }
|
||||||
|
}
|
||||||
|
@media (max-width: 860px) {
|
||||||
|
.wa-inbox { grid-template-columns: 1fr; }
|
||||||
|
.wa-list { max-height: 280px; }
|
||||||
|
.wa-setup form { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue