feat(ui): add tabby style color theme (#1049)

* refactor(ui): refactor frontend css * feat(ui): style tabby-ui with tabby colors * feat(ui): add tabby dark style
TabbyML · Dec 15, 2023 · 2e5467e · 2e5467e
1 parent fa8bd67
commit 2e5467e
Show file tree

Hide file tree

Showing 14 changed files with 157 additions and 71 deletions.
diff --git a/ee/tabby-ui/app/(dashboard)/cluster/components/worker-card.tsx b/ee/tabby-ui/app/(dashboard)/cluster/components/worker-card.tsx
@@ -38,7 +38,7 @@ export default function RunnerCard({
         <Info>
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            className=" h-5 w-5 text-gray-400"
+            className=" h-5 w-5"
             width="24"
             height="24"
             viewBox="0 0 24 24"
@@ -60,7 +60,7 @@ export default function RunnerCard({
         </Info>
         <Info>
           <svg
-            className=" h-5 w-5 text-gray-400"
+            className=" h-5 w-5"
             fill="none"
             height="24"
             stroke="currentColor"
@@ -91,7 +91,7 @@ export default function RunnerCard({
           cudaDevices.map((x, i) => (
             <Info key={i}>
               <svg
-                className=" h-5 w-5 text-gray-400"
+                className=" h-5 w-5"
                 fill="none"
                 height="24"
                 stroke="currentColor"
@@ -128,7 +128,7 @@ interface InfoProps {
 
 function Info({ children }: InfoProps) {
   return (
-    <div className="mt-2 flex items-center text-sm text-gray-500">
+    <div className="mt-2 flex items-center text-sm text-card-foreground/70">
       {children}
     </div>
   )

diff --git a/ee/tabby-ui/app/(dashboard)/components/sidebar.tsx b/ee/tabby-ui/app/(dashboard)/components/sidebar.tsx
@@ -21,11 +21,11 @@ export default function Sidebar({ children, className }: SidebarProps) {
     <div
       className={cn('grid overflow-hidden lg:grid-cols-[280px_1fr]', className)}
     >
-      <div className="hidden border-r bg-zinc-100/40 dark:bg-zinc-800/40 lg:block">
+      <div className="hidden border-r lg:block">
         <div className="flex h-full flex-col gap-2">
           <div className="h-[12px]"></div>
           <div className="flex-1">
-            <nav className="grid items-start gap-4 px-4 text-sm font-medium">
+            <nav className="grid items-start gap-2 px-4 text-sm font-medium">
               <SidebarButton href="/">
                 <IconHome /> Home
               </SidebarButton>
@@ -58,11 +58,11 @@ interface SidebarButtonProps {
 }
 
 const linkVariants = cva(
-  'flex items-center gap-3 rounded-lg px-3 py-2 text-zinc-900 transition-all hover:text-zinc-900 dark:text-zinc-50 dark:hover:text-zinc-50',
+  'flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:bg-accent',
   {
     variants: {
       state: {
-        selected: 'bg-zinc-200 dark:bg-zinc-800',
+        selected: 'bg-accent',
         'not-selected': ''
       }
     },

diff --git a/ee/tabby-ui/app/(dashboard)/layout.tsx b/ee/tabby-ui/app/(dashboard)/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({ children }: DashboardLayoutProps) {
   return (
     <>
       <Header />
-      <main className="flex flex-1 flex-col bg-muted/50">
+      <main className="flex flex-1 flex-col">
         <Sidebar className="flex-1">{children}</Sidebar>
       </main>
     </>

diff --git a/ee/tabby-ui/app/globals.css b/ee/tabby-ui/app/globals.css
@@ -4,75 +4,76 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
+    --background: 38 96.55% 98.5%;
+    --foreground: 38 3.1% 1%;
 
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
+    --muted: 40 9.5% 91%;
+    --muted-foreground: 38 1.55% 42.5%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
+    --popover: 38 65.2% 92.5%;
+    --popover-foreground: 38 3.1% 1.25%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --card: 38 65.2% 92.5%;
+    --card-foreground: 38 3.1% 1.25%;
 
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
+    --border: 38 8.1% 90%;
+    --input: 38 8.1% 90%;
 
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
+    --primary: 38 31% 25%;
+    --primary-foreground: 38 0.62% 92.5%;
 
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
+    --secondary: 38 1.55% 96.25%;
+    --secondary-foreground: 38 2.86% 12.5%;
 
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: ;
+    --accent: 40 19% 91%;
+    --accent-foreground: 38 2.86% 12.5%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
 
-    --ring: 240 5% 64.9%;
+    --ring: 38 31% 25%;
 
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
+    --background: 44 22.75% 6.96%;
+    --foreground: 44 3.5% 99.35%;
 
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
+    --muted: 44 17.5% 26.1%;
+    --muted-foreground: 44 3.5% 58.7%;
 
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
+    --popover: 44 58% 11.31%;
+    --popover-foreground: 44 3.5% 99.35%;
 
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
+    --card: 44 58% 11.31%;
+    --card-foreground: 44 3.5% 99.35%;
 
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
+    --border: 44 17.5% 26.1%;
+    --input: 44 17.5% 26.1%;
 
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
+    --primary: 44 35% 87%;
+    --primary-foreground: 44 3.5% 8.7%;
 
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
+    --secondary: 44 17.5% 26.1%;
+    --secondary-foreground: 44 3.5% 99.35%;
 
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: ;
+    --accent: 44 17.5% 26.1%;
+    --accent-foreground: 44 3.5% 99.35%;
 
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
+    --destructive-foreground: 44 3.5% 99.35%;
 
-    --ring: 240 3.7% 15.9%;
+    --ring: 44 35% 87%;
   }
 }
 
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
-}
+}
diff --git a/ee/tabby-ui/app/playground/components/chat-sessions.tsx b/ee/tabby-ui/app/playground/components/chat-sessions.tsx
@@ -12,6 +12,7 @@ import { useChatStore } from '@/lib/stores/chat-store'
 import { cn, nanoid } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { IconPlus, IconTrash } from '@/components/ui/icons'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import { Separator } from '@/components/ui/separator'
 import {
   Tooltip,
@@ -50,8 +51,8 @@ export const ChatSessions = ({ className }: ChatSessionsProps) => {
   return (
     <>
       <div className={cn(className)}>
-        <div className="fixed inset-y-0 left-0 flex w-[279px] flex-col gap-2 overflow-hidden px-3 pt-16">
-          <div className="shrink-0 pb-0 pt-2">
+        <div className="fixed inset-y-0 left-0 flex w-[279px] flex-col gap-2 pt-16">
+          <div className="shrink-0 pb-0 pl-3 pt-2">
             <Button
               className="h-12 w-full justify-start"
               variant="ghost"
@@ -62,7 +63,7 @@ export const ChatSessions = ({ className }: ChatSessionsProps) => {
             </Button>
           </div>
           <Separator />
-          <div className="flex flex-1 flex-col gap-2 overflow-y-auto">
+          <ScrollArea className="flex flex-col gap-2 px-3">
             {!_hasHydrated ? (
               <ListSkeleton />
             ) : (
@@ -74,8 +75,8 @@ export const ChatSessions = ({ className }: ChatSessionsProps) => {
                       key={chat.id}
                       onClick={e => setActiveChatId(chat.id)}
                       className={cn(
-                        'flex cursor-pointer items-center justify-between gap-3 rounded-lg px-3 py-2 text-zinc-900 transition-all hover:bg-accent hover:text-zinc-900  dark:text-zinc-50 hover:dark:bg-zinc-900 dark:hover:text-zinc-50',
-                        isActive && '!bg-zinc-200 dark:!bg-zinc-800'
+                        'my-2 flex w-[254px] cursor-pointer items-center justify-between gap-3 rounded-lg px-3 py-1 text-sm transition-all hover:bg-primary/10',
+                        isActive && 'bg-primary/10'
                       )}
                     >
                       <span className="truncate leading-8">
@@ -112,7 +113,7 @@ export const ChatSessions = ({ className }: ChatSessionsProps) => {
                 })}
               </>
             )}
-          </div>
+          </ScrollArea>
           <Separator />
           <div className="shrink-0 pb-2">
             <ClearChatsButton

diff --git a/ee/tabby-ui/app/playground/components/chats.tsx b/ee/tabby-ui/app/playground/components/chats.tsx
@@ -22,7 +22,7 @@ export default function Chats() {
 
   return (
     <div className="grid flex-1 overflow-hidden lg:grid-cols-[280px_1fr]">
-      <ChatSessions className="hidden w-[280px] border-r bg-zinc-100/40 dark:bg-zinc-800/40 lg:block" />
+      <ChatSessions className="hidden w-[280px] border-r lg:block" />
       <Chat
         loading={!_hasHydrated}
         id={chatId}

diff --git a/ee/tabby-ui/app/playground/page.tsx b/ee/tabby-ui/app/playground/page.tsx
@@ -12,7 +12,7 @@ export default function IndexPage() {
   return (
     <>
       <Header />
-      <main className="flex flex-1 flex-col bg-muted/50">
+      <main className="flex flex-1 flex-col">
         <Chats />
       </main>
     </>

diff --git a/ee/tabby-ui/components/chat-message.tsx b/ee/tabby-ui/components/chat-message.tsx
@@ -30,10 +30,10 @@ export function ChatMessage({
     >
       <div
         className={cn(
-          'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border shadow',
+          'flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-md border bg-background shadow',
           message.role === 'user'
             ? 'bg-background'
-            : 'bg-primary text-primary-foreground'
+            : 'bg-accent text-accent-foreground'
         )}
       >
         {message.role === 'user' ? <IconUser /> : <IconTabby />}

diff --git a/ee/tabby-ui/components/header.tsx b/ee/tabby-ui/components/header.tsx
@@ -28,25 +28,19 @@ export function Header() {
   const newVersionAvailable = isNewVersionAvailable(version, latestRelease)
 
   return (
-    <header className="sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between border-b bg-gradient-to-b from-background/10 via-background/50 to-background/80 px-4 backdrop-blur-xl">
+    <header className="sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between border-b px-4 backdrop-blur-xl">
       <div className="flex items-center">
-        <ThemeToggle />
-        <Link href="/" className={cn(buttonVariants({ variant: 'link' }))}>
-          Dashboard
-        </Link>
-        <Link href="/api" className={cn(buttonVariants({ variant: 'link' }))}>
-          API
-        </Link>
+        <span className="hidden select-none px-2 font-logo font-semibold sm:inline-block">
+          Tabby
+        </span>
+        <HeaderLink href="/">Dashboard</HeaderLink>
+        <HeaderLink href="/api">API</HeaderLink>
         {isChatEnabled && (
-          <Link
-            href="/playground"
-            className={cn(buttonVariants({ variant: 'link' }))}
-          >
-            Playground
-          </Link>
+          <HeaderLink href="/playground">Playground</HeaderLink>
         )}
       </div>
       <div className="flex items-center justify-end space-x-2">
+        <ThemeToggle />
         {newVersionAvailable && (
           <a
             target="_blank"
@@ -83,3 +77,18 @@ function isNewVersionAvailable(version?: string, latestRelease?: ReleaseInfo) {
     return true
   }
 }
+
+const HeaderLink = ({
+  children,
+  href
+}: {
+  children: React.ReactNode
+  href: string
+}) => (
+  <Link
+    href={href}
+    className={cn(buttonVariants({ variant: 'link' }), 'text-foreground')}
+  >
+    {children}
+  </Link>
+)
diff --git a/ee/tabby-ui/components/ui/scroll-area.tsx b/ee/tabby-ui/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '@/lib/utils'
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/ee/tabby-ui/lib/fonts.ts b/ee/tabby-ui/lib/fonts.ts
@@ -1,4 +1,8 @@
-import { JetBrains_Mono as FontMono, Inter as FontSans } from 'next/font/google'
+import {
+  Azeret_Mono as FontLogo,
+  JetBrains_Mono as FontMono,
+  Inter as FontSans
+} from 'next/font/google'
 
 export const fontSans = FontSans({
   subsets: ['latin'],
@@ -9,3 +13,8 @@ export const fontMono = FontMono({
   subsets: ['latin'],
   variable: '--font-mono'
 })
+
+export const fontLogo = FontLogo({
+  subsets: ['latin'],
+  variable: '--font-logo'
+})
diff --git a/ee/tabby-ui/package.json b/ee/tabby-ui/package.json
@@ -25,6 +25,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^1.2.2",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",