marketing-shibata50/multica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add brand icon and artistic font to sidebar header

Browse source 
- Display Multica icon alongside brand name in sidebar header
- Use Playfair Display serif font for an artistic brand feel
- Expose --font-brand CSS variable from layout

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Naiyuan Qing 2026-01-30 22:35:48 +08:00
parent db9d7ab2d7
commit cdcce47141
2 changed files with 18 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
apps/web/app/layout.tsx
View file

@ -1,5 +1,5 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono, Inter } from "next/font/google";
import { Geist, Geist_Mono, Inter, Playfair_Display } from "next/font/google";
import "@multica/ui/globals.css";
import {
SidebarProvider,
@ -22,6 +22,12 @@ const geistMono = Geist_Mono({
subsets: ["latin"],
});
const playfair = Playfair_Display({
variable: "--font-brand",
subsets: ["latin"],
weight: ["400"],
});
export const metadata: Metadata = {
title: "Multica",
description: "Distributed AI agent framework",
@ -41,7 +47,7 @@ export default function RootLayout({
return (
<html lang="en" className={inter.variable} suppressHydrationWarning>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
className={`${geistSans.variable} ${geistMono.variable} ${playfair.variable} antialiased`}
>
<ThemeProvider
attribute="class"

11
packages/ui/src/components/app-sidebar.tsx
View file

@ -25,7 +25,16 @@ export function AppSidebar({ items }: AppSidebarProps) {
return (
<Sidebar>
<SidebarHeader>
<span className="text-lg font-semibold px-2 py-1">Multica</span>
<div className="flex items-center gap-2.5 px-2 py-1">
<img
src="/icon.png"
alt="Multica"
className="size-7 rounded-md"
/>
<span className="text-sm tracking-wide font-[family-name:var(--font-brand)]">
Multica
</span>
</div>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>