From 11989b2a00c629da529e473a10ca3578f63c8d1e Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Mon, 22 May 2023 13:24:09 +0200
Subject: [PATCH] fix mobile header and logo color

---
 app/chat-list.tsx               |  2 +-
 components/ui/nextchat-logo.tsx | 55 +++++++++++++++++----------------
 2 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/app/chat-list.tsx b/app/chat-list.tsx
index d344b5b..22ddbc4 100644
--- a/app/chat-list.tsx
+++ b/app/chat-list.tsx
@@ -13,7 +13,7 @@ export interface ChatList {
 export function ChatList({ messages }: ChatList) {
   return (
     <div className="relative h-full dark:bg-zinc-900">
-      <div className="sticky top-0 border-b w-full bg-black sm:hidden text-white font-semibold">
+      <div className="sticky top-0 border-b w-full bg-black md:hidden text-white font-semibold">
         <div className="px-4 py-2 flex items-center justify-between">
           <div className="flex flex-row gap-1 whitespace-nowrap items-center">
             <NextChatLogo className="h-6 w-6" />
diff --git a/components/ui/nextchat-logo.tsx b/components/ui/nextchat-logo.tsx
index 75e7466..37266a5 100644
--- a/components/ui/nextchat-logo.tsx
+++ b/components/ui/nextchat-logo.tsx
@@ -1,4 +1,7 @@
+import { useId } from "react";
+
 export function NextChatLogo(props: JSX.IntrinsicElements["svg"]) {
+  const id = useId();
   return (
     <svg
       width={17}
@@ -8,6 +11,30 @@ export function NextChatLogo(props: JSX.IntrinsicElements["svg"]) {
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
+      <defs>
+        <linearGradient
+          id={`gradient-${id}-1`}
+          x1="10.6889"
+          y1="10.3556"
+          x2="13.8445"
+          y2="14.2667"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="black" />
+          <stop offset={1} stopColor="black" stopOpacity={0} />
+        </linearGradient>
+        <linearGradient
+          id={`gradient-${id}-2`}
+          x1="11.7555"
+          y1="4.8"
+          x2="11.7376"
+          y2="9.50002"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="black" />
+          <stop offset={1} stopColor="black" stopOpacity={0} />
+        </linearGradient>
+      </defs>
       <path
         d="M1 16L2.58314 11.2506C1.83084 9.74642 1.63835 8.02363 2.04013 6.39052C2.4419 4.75741 3.41171 3.32057 4.776 2.33712C6.1403 1.35367 7.81003 0.887808 9.4864 1.02289C11.1628 1.15798 12.7364 1.8852 13.9256 3.07442C15.1148 4.26363 15.842 5.83723 15.9771 7.5136C16.1122 9.18997 15.6463 10.8597 14.6629 12.224C13.6794 13.5883 12.2426 14.5581 10.6095 14.9599C8.97637 15.3616 7.25358 15.1692 5.74942 14.4169L1 16Z"
         fill="white"
@@ -31,40 +58,16 @@ export function NextChatLogo(props: JSX.IntrinsicElements["svg"]) {
         <circle cx={9} cy={8} r={8} fill="white" />
         <path
           d="M14.2896 14.0018L7.146 4.8H5.80005V11.1973H6.87681V6.16743L13.4444 14.6529C13.7407 14.4545 14.0231 14.2369 14.2896 14.0018Z"
-          fill="url(#paint0_linear_91_2047)"
+          fill={`url(#gradient-${id}-1)`}
         />
         <rect
           x="11.2222"
           y="4.8"
           width="1.06667"
           height="6.4"
-          fill="url(#paint1_linear_91_2047)"
+          fill={`url(#gradient-${id}-2)`}
         />
       </g>
-      <defs>
-        <linearGradient
-          id="paint0_linear_91_2047"
-          x1="10.6889"
-          y1="10.3556"
-          x2="13.8445"
-          y2="14.2667"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="black" />
-          <stop offset={1} stopColor="black" stopOpacity={0} />
-        </linearGradient>
-        <linearGradient
-          id="paint1_linear_91_2047"
-          x1="11.7555"
-          y1="4.8"
-          x2="11.7376"
-          y2="9.50002"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="black" />
-          <stop offset={1} stopColor="black" stopOpacity={0} />
-        </linearGradient>
-      </defs>
     </svg>
   );
 }