UI minor brush ups
This commit is contained in:
parent
1a15409b2d
commit
67ccf91e6f
7 changed files with 303 additions and 109 deletions
|
|
@ -63,9 +63,9 @@ function SidebarSection({ title, children, className = "" }) {
|
|||
);
|
||||
}
|
||||
|
||||
function NavBadge({ value }) {
|
||||
function NavBadge({ value, variant = "coral" }) {
|
||||
if (!value || value <= 0) return null;
|
||||
return <em>{value}</em>;
|
||||
return <em className={variant === "neutral" ? "nav-badge-neutral" : "nav-badge-coral"}>{value}</em>;
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
|
|
@ -81,6 +81,7 @@ export default function DashboardPage() {
|
|||
const [mailRefreshKey, setMailRefreshKey] = useState(0);
|
||||
const [lens, setLens] = useState("all");
|
||||
const [agentNav, setAgentNav] = useState(null);
|
||||
const [labelsExpanded, setLabelsExpanded] = useState(false);
|
||||
const [mailStats, setMailStats] = useState({
|
||||
unread: 0,
|
||||
starred: 0,
|
||||
|
|
@ -223,11 +224,17 @@ export default function DashboardPage() {
|
|||
<button aria-label="Close navigation" type="button" onClick={() => setMenuOpen(false)}><X size={19} /></button>
|
||||
</div>
|
||||
|
||||
<button className="dashboard-compose" type="button" onClick={() => setComposeOpen(true)}>
|
||||
<Mail size={17} />
|
||||
<span>Compose</span>
|
||||
<ChevronDown size={14} className="dashboard-compose-caret" />
|
||||
</button>
|
||||
<div className="dashboard-compose-wrap">
|
||||
<button className="dashboard-compose" type="button" onClick={() => setComposeOpen(true)}>
|
||||
<span className="dashboard-compose-main">
|
||||
<Mail size={16} strokeWidth={1.75} />
|
||||
<span>Compose</span>
|
||||
</span>
|
||||
</button>
|
||||
<button className="dashboard-compose-menu" type="button" aria-label="Compose options">
|
||||
<ChevronDown size={14} strokeWidth={1.75} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<SidebarSection title="Mail" className="dashboard-sidebar-mail">
|
||||
<nav aria-label="Mail">
|
||||
|
|
@ -257,9 +264,17 @@ export default function DashboardPage() {
|
|||
>
|
||||
<i className={`label-dot label-dot-${tone}`} />
|
||||
<span>{name}</span>
|
||||
<NavBadge value={mailStats.labels?.[countKey]} />
|
||||
<NavBadge variant="neutral" value={mailStats.labels?.[countKey]} />
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="dashboard-nav-item dashboard-label-more"
|
||||
onClick={() => setLabelsExpanded((open) => !open)}
|
||||
>
|
||||
<ChevronDown size={14} strokeWidth={1.75} className={labelsExpanded ? "open" : ""} />
|
||||
<span>{labelsExpanded ? "Less" : "More"}</span>
|
||||
</button>
|
||||
</nav>
|
||||
</SidebarSection>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue