feat: update zola brand (#193)

* feat: update cover

* feat: add new logo

* feat: update favicon/logo darkmode

Author: ibelick

README.md

@@ -2,11 +2,9 @@
 
 [zola.chat](https://zola.chat)
 
-**Zola** is the open-source interface for AI chat.
+**Zola** is the open-source chat interface for all your models.
 
-[![Chat with this repo](https://zola.chat/button/github.svg)](https://zola.chat/?agent=github/ibelick/zola)
-
-![zola screenshot](./public/cover_zola.webp)
+![zola cover](./public/cover_zola.jpg)
 
 ## Features
 

app/components/layout/header-sidebar-trigger.tsx

@@ -7,15 +7,15 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
-import { SidebarSimple } from "@phosphor-icons/react"
+import { SidebarSimpleIcon } from "@phosphor-icons/react"
 
 type HeaderSidebarTriggerProps = React.HTMLAttributes<HTMLButtonElement>
 
 export function HeaderSidebarTrigger({
   className,
   ...props
 }: HeaderSidebarTriggerProps) {
-  const { toggleSidebar, open, isMobile } = useSidebar()
+  const { toggleSidebar, open } = useSidebar()
 
   return (
     <Tooltip>
@@ -26,13 +26,12 @@ export function HeaderSidebarTrigger({
           className={cn(
             "pointer-events-auto",
             "text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors",
-            "-ml-5 inline-flex size-9 items-center justify-center focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
-            isMobile ? "ml-0" : "-ml-5",
+            "inline-flex size-9 items-center justify-center focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
             className
           )}
           {...props}
         >
-          <SidebarSimple size={20} />
+          <SidebarSimpleIcon size={20} />
           <span className="sr-only">Toggle sidebar</span>
         </button>
       </TooltipTrigger>

app/components/layout/header.tsx

@@ -6,13 +6,13 @@ import { ButtonNewChat } from "@/app/components/layout/button-new-chat"
 import { UserMenu } from "@/app/components/layout/user-menu"
 import { useBreakpoint } from "@/app/hooks/use-breakpoint"
 import type { Agent } from "@/app/types/agent"
+import { ZolaIcon } from "@/components/icons/zola"
 import { Button } from "@/components/ui/button"
 import { useAgent } from "@/lib/agent-store/provider"
 import { APP_NAME } from "@/lib/config"
 import { useUser } from "@/lib/user-store/provider"
 import { Info } from "@phosphor-icons/react"
 import Link from "next/link"
-
 import { DialogPublish } from "./dialog-publish"
 import { HeaderSidebarTrigger } from "./header-sidebar-trigger"
 
@@ -32,18 +32,17 @@ export function Header({ hasSidebar }: { hasSidebar: boolean }) {
     <header className="h-app-header pointer-events-none fixed top-0 right-0 left-0 z-50">
       <div className="relative mx-auto flex h-full max-w-full items-center justify-between bg-transparent px-4 sm:px-6 lg:bg-transparent lg:px-8">
         <div className="flex flex-1 items-center justify-between">
-          <div className="flex flex-1 items-center gap-2 pl-0 md:pl-0.5">
-            {hasSidebar && <HeaderSidebarTrigger />}
-            {Boolean(!currentAgent || !isMobile) && (
-              <div className="flex-1">
-                <Link
-                  href="/"
-                  className="pointer-events-auto text-xl font-medium tracking-tight"
-                >
-                  {APP_NAME}
-                </Link>
-              </div>
-            )}
+          <div className="-ml-0.5 flex flex-1 items-center gap-2 lg:-ml-2.5">
+            <div className="flex flex-1 items-center gap-2">
+              <Link
+                href="/"
+                className="pointer-events-auto inline-flex items-center text-xl font-medium tracking-tight"
+              >
+                <ZolaIcon className="mr-1 size-4" />
+                {APP_NAME}
+              </Link>
+              {hasSidebar && isMobile && <HeaderSidebarTrigger />}
+            </div>
           </div>
           <div />
           {!isLoggedIn ? (

app/favicon.ico

@@ -0,0 +1,40 @@
+import * as React from "react"
+import type { SVGProps } from "react"
+
+export function ZolaIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={80}
+      height={80}
+      viewBox="0 0 80 80"
+      className="bg-primary"
+      fill="none"
+      {...props}
+    >
+      <g clipPath="url(#zola)">
+        <mask
+          id="zola"
+          width={80}
+          height={80}
+          x={0}
+          y={0}
+          maskUnits="userSpaceOnUse"
+          style={{
+            maskType: "luminance",
+          }}
+        >
+          <path fill="currentColor" d="M80 0H0v80h80z" />
+        </mask>
+        <g fill="currentColor" mask="url(#b)">
+          <path d="M8 52a4 4 0 1 0-8 0 4 4 0 0 0 8 0M8 40a4 4 0 1 0-8 0 4 4 0 0 0 8 0M8 28a4 4 0 1 0-8 0 4 4 0 0 0 8 0M20 40a4 4 0 1 0-8 0 4 4 0 0 0 8 0M20 28a4 4 0 1 0-8 0 4 4 0 0 0 8 0M20 16a4 4 0 1 0-8 0 4 4 0 0 0 8 0M44 76a4 4 0 1 0-8 0 4 4 0 0 0 8 0M44 64a4 4 0 1 0-8 0 4 4 0 0 0 8 0M44 52a4 4 0 1 0-8 0 4 4 0 0 0 8 0M32 52a4 4 0 1 0-8 0 4 4 0 0 0 8 0M20 52a4 4 0 1 0-8 0 4 4 0 0 0 8 0M32 40a4 4 0 1 0-8 0 4 4 0 0 0 8 0M44 28a4 4 0 1 0-8 0 4 4 0 0 0 8 0M56 16a4 4 0 1 0-8 0 4 4 0 0 0 8 0M68 16a4 4 0 1 0-8 0 4 4 0 0 0 8 0M44 16a4 4 0 1 0-8 0 4 4 0 0 0 8 0M44 4a4 4 0 1 0-8 0 4 4 0 0 0 8 0M68 64a4 4 0 1 0-8 0 4 4 0 0 0 8 0M68 52a4 4 0 1 0-8 0 4 4 0 0 0 8 0M68 40a4 4 0 1 0-8 0 4 4 0 0 0 8 0M80 40a4 4 0 1 0-8 0 4 4 0 0 0 8 0M68 28a4 4 0 1 0-8 0 4 4 0 0 0 8 0M56 28a4 4 0 1 0-8 0 4 4 0 0 0 8 0M32 76a4 4 0 1 0-8 0 4 4 0 0 0 8 0M32 64a4 4 0 1 0-8 0 4 4 0 0 0 8 0M20 64a4 4 0 1 0-8 0 4 4 0 0 0 8 0M32 28a4 4 0 1 0-8 0 4 4 0 0 0 8 0M32 16a4 4 0 1 0-8 0 4 4 0 0 0 8 0M32 4a4 4 0 1 0-8 0 4 4 0 0 0 8 0M56 76a4 4 0 1 0-8 0 4 4 0 0 0 8 0M56 64a4 4 0 1 0-8 0 4 4 0 0 0 8 0M56 52a4 4 0 1 0-8 0 4 4 0 0 0 8 0M56 40a4 4 0 1 0-8 0 4 4 0 0 0 8 0M56 4a4 4 0 1 0-8 0 4 4 0 0 0 8 0M80 52a4 4 0 1 0-8 0 4 4 0 0 0 8 0M44 40a4 4 0 1 0-8 0 4 4 0 0 0 8 0M80 28a4 4 0 1 0-8 0 4 4 0 0 0 8 0" />
+        </g>
+      </g>
+      <defs>
+        <clipPath id="zola">
+          <path fill="currentColor" d="M0 0h80v80H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}