fix: bg-blur at header

Technoculture · Nov 21, 2023 · 55d4e49 · 55d4e49
1 parent 15247ab
commit 55d4e49
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 6 deletions.
diff --git a/src/app/usr/[uid]/page.tsx b/src/app/usr/[uid]/page.tsx
@@ -42,7 +42,7 @@ export default async function Page({ params }: { params: { uid: string } }) {
         </div>
       ) : (
         <div className="relative">
-          <div className="sticky z-20 bg-background py-1.5 top-[72px] flex justify-between">
+          <div className="sticky z-20 bg-black/40 backdrop-blur-md py-1.5 top-[94px] flex justify-between">
             <Startnewchatbutton
               org_id={sessionClaims?.org_id as string}
               org_slug={sessionClaims?.org_slug as string}

diff --git a/src/app/usr/layout.tsx b/src/app/usr/layout.tsx
@@ -27,13 +27,13 @@ export default function LoggedInLayout({
 
   return (
     <div className="relative">
-      <Header>
+      <Header className="bg-black/40 backdrop-blur-md">
         <audio
           ref={audioRef}
           src={store.audioSrc}
           controls
           controlsList="nodownload noplaybackrate"
-          className="ml-2 px-1 h-4"
+          className="max-h-[60px]"
         ></audio>
       </Header>
       <div className="pl-5 pr-5 z-10 relative">{children}</div>

diff --git a/src/components/chat.tsx b/src/components/chat.tsx
@@ -72,7 +72,7 @@ export default function Chat(props: ChatProps) {
   }, [messages]);
 
   return (
-    <div className="flex flex-col gap-1">
+    <div className="flex flex-col gap-1 max-w-[700px] mx-auto">
       <div className="grid grid-cols-1">
         {props.liveChat
           ? props.liveChat.map((entry, index) => {

diff --git a/src/components/chatmessage.tsx b/src/components/chatmessage.tsx
@@ -41,6 +41,8 @@ const ChatMessage = (props: ChatMessageProps) => {
   } else {
     if (props.chat.role === "user") {
       userName = props.name;
+    } else if (props.chat.role === "assistant") {
+      userName = "Echo";
     } else {
       userName = props.chat.role;
     }

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -31,7 +31,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(
       <header
         className={cn(
           headerVariants({ variant, className }),
-          "z-50 bg-background sticky top-0",
+          "z-50 sticky top-0",
         )}
         ref={ref}
         {...props}

diff --git a/src/components/rendermarkdown.tsx b/src/components/rendermarkdown.tsx
@@ -99,7 +99,7 @@ const components: Components = {
   code({ node, inline, className, style, children, ...props }) {
     const match = /language-(\w+)/.exec(className || "");
     return (
-      <ScrollArea className="w-[90vw]">
+      <ScrollArea className="max-w-[90vw]">
         {!inline && match ? (
           <div style={dark}>
             <SyntaxHighlighter