Skip to content

Commit b37b6ac

Browse files
harshitsinghbhandarigithub-actions[bot]
harshitsinghbhandari
and
github-actions[bot]
authored
feat(frontend): refresh dashboard, orchestrator, and AO logos (#317)
* feat(frontend): refresh dashboard, orchestrator, and AO logos Replaces the dashboard and orchestrator glyphs and the AO brand logo per issue #315. - Dashboard buttons (sidebar action + Open Kanban) now use the asymmetric LayoutDashboard icon instead of the equal-cell LayoutGrid. - Orchestrator buttons (sidebar action + every topbar badge/button) use a new org-chart OrchestratorIcon (parent fanning to three children), authored in lucide's stroke style since lucide has no matching glyph. - The AO brand logo (sidebar header mark, landing nav, docs header) is now the pixel-mascot image; the old ao-logo.svg monogram is removed. Closes #315 * chore: format with prettier [skip ci] * fix(landing): use next/image and next/link for the AO logo and docs link Addresses react-doctor review on #317: the Next.js landing app should use next/image for the brand logo (optimized formats, responsive srcset, lazy loading) and next/link for the internal /docs navigation (client-side routing + prefetch) instead of plain <img>/<a>. --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 93123ed commit b37b6ac

8 files changed

Lines changed: 70 additions & 44 deletions

File tree

‎frontend/src/landing/app/docs/layout.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { ReactNode } from "react";
2+
import Image from "next/image";
23
import { DocsLayout } from "fumadocs-ui/layouts/docs";
34
import { RootProvider } from "fumadocs-ui/provider";
45
import type { LinkItemType } from "fumadocs-ui/layouts/shared";
@@ -82,7 +83,14 @@ export default function Layout({ children }: { children: ReactNode }) {
8283
nav={{
8384
title: (
8485
<span className="flex items-center gap-2 font-semibold">
85-
<img src="/ao-logo.svg" alt="" aria-hidden="true" width={22} height={22} className="h-[22px] w-[22px]" />
86+
<Image
87+
src="/ao-logo.png"
88+
alt=""
89+
aria-hidden
90+
width={22}
91+
height={22}
92+
className="h-[22px] w-[22px] rounded-[5px] object-cover"
93+
/>
8694
<span className="text-[var(--color-text-primary)]">AO</span>
8795
</span>
8896
),

‎frontend/src/landing/components/LandingNav.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
"use client";
22

3+
import Image from "next/image";
4+
import Link from "next/link";
5+
36
function XIcon() {
47
return (
58
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
@@ -31,17 +34,24 @@ export function LandingNav() {
3134
href="#"
3235
className="inline-flex items-center gap-2 text-base font-semibold text-white no-underline font-sans font-[680] tracking-tight"
3336
>
34-
<img src="/ao-logo.svg" alt="" aria-hidden="true" width={28} height={28} className="h-7 w-7" />
37+
<Image
38+
src="/ao-logo.png"
39+
alt=""
40+
aria-hidden
41+
width={28}
42+
height={28}
43+
className="h-7 w-7 rounded-md object-cover"
44+
/>
3545
Agent Orchestrator
3646
</a>
3747
<ul className="hidden md:flex items-center gap-8 list-none">
3848
<li>
39-
<a
49+
<Link
4050
href="/docs"
4151
className="text-sm text-[var(--landing-muted)] no-underline hover:text-white transition-colors"
4252
>
4353
Docs
44-
</a>
54+
</Link>
4555
</li>
4656
<li>
4757
<a

‎frontend/src/landing/public/ao-logo.png‎

54.9 KB
Loading

‎frontend/src/landing/public/ao-logo.svg‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎frontend/src/renderer/assets/ao-logo.png‎

54.9 KB
Loading

‎frontend/src/renderer/components/ShellTopbar.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useMutation, useQueryClient } from "@tanstack/react-query";
22
import { useNavigate, useParams } from "@tanstack/react-router";
3-
import { GitBranch, LayoutGrid, PanelRightClose, PanelRightOpen, Square, Waypoints } from "lucide-react";
3+
import { GitBranch, LayoutDashboard, PanelRightClose, PanelRightOpen, Square } from "lucide-react";
44
import { useState } from "react";
55
import {
66
findProjectOrchestrator,
@@ -14,6 +14,7 @@ import { useWorkspaceQuery, workspaceQueryKey } from "../hooks/useWorkspaceQuery
1414
import { apiClient, apiErrorMessage } from "../lib/api-client";
1515
import { spawnOrchestrator } from "../lib/spawn-orchestrator";
1616
import { useUiStore } from "../stores/ui-store";
17+
import { OrchestratorIcon } from "./icons";
1718
import { cn } from "../lib/utils";
1819

1920
const isMac = typeof navigator !== "undefined" && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
@@ -105,7 +106,7 @@ export function ShellTopbar() {
105106
·
106107
</span>
107108
<span className="session-detail-mode-badge session-detail-mode-badge--neutral">
108-
<Waypoints className="size-3 shrink-0" aria-hidden="true" />
109+
<OrchestratorIcon className="size-3 shrink-0" aria-hidden="true" />
109110
Orchestrator
110111
</span>
111112
</div>
@@ -138,7 +139,7 @@ export function ShellTopbar() {
138139
style={noDragStyle}
139140
type="button"
140141
>
141-
<LayoutGrid className="h-3.5 w-3.5" aria-hidden="true" />
142+
<LayoutDashboard className="h-3.5 w-3.5" aria-hidden="true" />
142143
Open Kanban
143144
</button>
144145
) : (
@@ -150,7 +151,7 @@ export function ShellTopbar() {
150151
style={noDragStyle}
151152
type="button"
152153
>
153-
<Waypoints className="h-3.5 w-3.5" aria-hidden="true" />
154+
<OrchestratorIcon className="h-3.5 w-3.5" aria-hidden="true" />
154155
{isSpawning ? "Spawning…" : "Open orchestrator"}
155156
</button>
156157
)}
@@ -190,7 +191,7 @@ export function ShellTopbar() {
190191
style={noDragStyle}
191192
type="button"
192193
>
193-
<Waypoints className="h-3.5 w-3.5" aria-hidden="true" />
194+
<OrchestratorIcon className="h-3.5 w-3.5" aria-hidden="true" />
194195
Orchestrator
195196
</button>
196197
) : (
@@ -202,7 +203,7 @@ export function ShellTopbar() {
202203
style={noDragStyle}
203204
type="button"
204205
>
205-
<Waypoints className="h-3.5 w-3.5" aria-hidden="true" />
206+
<OrchestratorIcon className="h-3.5 w-3.5" aria-hidden="true" />
206207
{isSpawning ? "Spawning…" : "Spawn Orchestrator"}
207208
</button>
208209
)

‎frontend/src/renderer/components/Sidebar.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@ import { useNavigate, useParams, useRouterState } from "@tanstack/react-router";
33
import {
44
ChevronRight,
55
GitPullRequest,
6-
LayoutGrid,
6+
LayoutDashboard,
77
Moon,
88
MoreVertical,
99
Plus,
1010
Search,
1111
Settings,
1212
Sun,
1313
Trash2,
14-
Waypoints,
1514
} from "lucide-react";
1615
import { useState } from "react";
1716
import {
@@ -53,6 +52,8 @@ import {
5352
useSidebar,
5453
} from "./ui/sidebar";
5554
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
55+
import { OrchestratorIcon } from "./icons";
56+
import aoLogo from "../assets/ao-logo.png";
5657
import { cn } from "../lib/utils";
5758
import { useUiStore } from "../stores/ui-store";
5859

@@ -158,18 +159,16 @@ export function Sidebar({ daemonStatus, workspaceError, workspaces, onCreateProj
158159
<button
159160
aria-label="Orchestrator board"
160161
className={cn(
161-
"grid h-[22px] w-[22px] shrink-0 place-items-center rounded-[6px] bg-accent text-accent-foreground",
162-
"group-data-[collapsible=icon]:size-9 group-data-[collapsible=icon]:rounded-lg group-data-[collapsible=icon]:bg-transparent group-data-[collapsible=icon]:text-current",
162+
"grid h-[22px] w-[22px] shrink-0 place-items-center",
163+
"group-data-[collapsible=icon]:size-9 group-data-[collapsible=icon]:rounded-lg",
163164
selection.isHome
164165
? "group-data-[collapsible=icon]:bg-interactive-active"
165166
: "group-data-[collapsible=icon]:hover:bg-interactive-hover",
166167
)}
167168
onClick={selection.goHome}
168169
type="button"
169170
>
170-
<span className="contents group-data-[collapsible=icon]:grid group-data-[collapsible=icon]:h-[22px] group-data-[collapsible=icon]:w-[22px] group-data-[collapsible=icon]:place-items-center group-data-[collapsible=icon]:rounded-[6px] group-data-[collapsible=icon]:bg-accent group-data-[collapsible=icon]:text-accent-foreground">
171-
<Waypoints className="h-3.5 w-3.5" aria-hidden="true" />
172-
</span>
171+
<img src={aoLogo} alt="" aria-hidden="true" className="h-[22px] w-[22px] rounded-[6px] object-cover" />
173172
</button>
174173
</TooltipTrigger>
175174
<TooltipContent side="right" hidden={state !== "collapsed"}>
@@ -493,7 +492,7 @@ function ProjectItem({
493492
onClick={() => selection.goProject(workspace.id)}
494493
type="button"
495494
>
496-
<LayoutGrid aria-hidden="true" />
495+
<LayoutDashboard aria-hidden="true" />
497496
</button>
498497
</TooltipTrigger>
499498
<TooltipContent>Dashboard</TooltipContent>
@@ -507,7 +506,7 @@ function ProjectItem({
507506
onClick={() => void openOrchestrator()}
508507
type="button"
509508
>
510-
<Waypoints aria-hidden="true" />
509+
<OrchestratorIcon aria-hidden="true" />
511510
</button>
512511
</TooltipTrigger>
513512
<TooltipContent>

‎frontend/src/renderer/components/icons.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { SVGProps } from "react";
2+
3+
// Orchestrator mark: a parent node fanning out to three child nodes, drawn in
4+
// lucide's 24x24 stroke style so it drops into the same slots as the lucide
5+
// icons (size comes from `className`/the parent's `[&_svg]:size-*`). Lucide has
6+
// no 1-parent / 3-child hierarchy glyph, so we author this one to match the
7+
// org-chart icon called for in the design.
8+
export function OrchestratorIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
9+
return (
10+
<svg
11+
xmlns="http://www.w3.org/2000/svg"
12+
width="24"
13+
height="24"
14+
viewBox="0 0 24 24"
15+
fill="none"
16+
stroke="currentColor"
17+
strokeWidth="2"
18+
strokeLinecap="round"
19+
strokeLinejoin="round"
20+
className={className}
21+
{...props}
22+
>
23+
<circle cx="12" cy="4" r="2" />
24+
<circle cx="5" cy="20" r="2" />
25+
<circle cx="12" cy="20" r="2" />
26+
<circle cx="19" cy="20" r="2" />
27+
<path d="M12 6v12" />
28+
<path d="M5 11h14" />
29+
<path d="M5 11v7" />
30+
<path d="M19 11v7" />
31+
</svg>
32+
);
33+
}

0 commit comments

Comments
 (0)