fix: tweak styles (#645)

components/app-sidebar.tsx

@@ -11,8 +11,6 @@ import {
   Sidebar,
   SidebarContent,
   SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
   SidebarHeader,
   SidebarMenu,
   useSidebar,

components/document-preview.tsx

@@ -167,7 +167,13 @@ const PureHitboxLayer = ({
       onClick={handleClick}
       role="presentation"
       aria-hidden="true"
-    />
+    >
+      <div className="w-full p-4 flex justify-end items-center">
+        <div className="absolute right-[9px] top-[13px] p-2 hover:dark:bg-zinc-700 rounded-md hover:bg-zinc-100">
+          <FullscreenIcon />
+        </div>
+      </div>
+    </div>
   );
 };
 
@@ -196,9 +202,7 @@ const PureDocumentHeader = ({
       </div>
       <div className="-translate-y-1 sm:translate-y-0 font-medium">{title}</div>
     </div>
-    <div>
-      <FullscreenIcon />
-    </div>
+    <div className="w-8" />
   </div>
 );
 

components/message.tsx

@@ -62,7 +62,9 @@ const PurePreviewMessage = ({
         >
           {message.role === 'assistant' && (
             <div className="size-8 flex items-center rounded-full justify-center ring-1 shrink-0 ring-border bg-background">
-              <SparklesIcon size={14} />
+              <div className="translate-y-px">
+                <SparklesIcon size={14} />
+              </div>
             </div>
           )}
 

components/multimodal-input.tsx

@@ -23,7 +23,7 @@ import { useLocalStorage, useWindowSize } from 'usehooks-ts';
 
 import { sanitizeUIMessages } from '@/lib/utils';
 
-import { ArrowUpIcon, ImageIcon, PaperclipIcon, StopIcon } from './icons';
+import { ArrowUpIcon, PaperclipIcon, StopIcon } from './icons';
 import { PreviewAttachment } from './preview-attachment';
 import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
@@ -293,7 +293,7 @@ function PureAttachmentsButton({
       disabled={isLoading}
       variant="ghost"
     >
-      <ImageIcon size={14} />
+      <PaperclipIcon size={14} />
     </Button>
   );
 }
@@ -349,6 +349,6 @@ function PureSendButton({
 const SendButton = memo(PureSendButton, (prevProps, nextProps) => {
   if (prevProps.uploadQueue.length !== nextProps.uploadQueue.length)
     return false;
-  if (!prevProps.input !== !nextProps.input) return false;
+  if (prevProps.input !== nextProps.input) return false;
   return true;
 });

components/sidebar-history.tsx

@@ -197,8 +197,8 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
     return (
       <SidebarGroup>
         <SidebarGroupContent>
-          <div className="text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
-            <div>Login to save and revisit previous chats!</div>
+          <div className="px-2 text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
+            Login to save and revisit previous chats!
           </div>
         </SidebarGroupContent>
       </SidebarGroup>
@@ -238,10 +238,8 @@ export function SidebarHistory({ user }: { user: User | undefined }) {
     return (
       <SidebarGroup>
         <SidebarGroupContent>
-          <div className="text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
-            <div>
-              Your conversations will appear here once you start chatting!
-            </div>
+          <div className="px-2 text-zinc-500 w-full flex flex-row justify-center items-center text-sm gap-2">
+            Your conversations will appear here once you start chatting!
           </div>
         </SidebarGroupContent>
       </SidebarGroup>

components/suggested-actions.tsx

@@ -22,13 +22,13 @@ function PureSuggestedActions({ chatId, append }: SuggestedActionsProps) {
     },
     {
       title: 'Write code that',
-      label: `demonstrates djikstra's algorithm!`,
-      action: `Write code that demonstrates djikstra's algorithm!`,
+      label: `demonstrates djikstra's algorithm`,
+      action: `Write code that demonstrates djikstra's algorithm`,
     },
     {
       title: 'Help me write an essay',
-      label: `about silicon valley!`,
-      action: `Help me write an essay about silicon valley!`,
+      label: `about silicon valley`,
+      action: `Help me write an essay about silicon valley`,
     },
     {
       title: 'What is the weather',

components/toolbar.tsx

@@ -353,7 +353,7 @@ export const Tools = ({
 
   return (
     <motion.div
-      className="flex flex-col"
+      className="flex flex-col gap-1.5"
       initial={{ opacity: 0, scale: 0.95 }}
       animate={{ opacity: 1, scale: 1 }}
       exit={{ opacity: 0, scale: 0.95 }}
@@ -469,7 +469,7 @@ const PureToolbar = ({
               : {
                   opacity: 1,
                   y: 0,
-                  height: toolsByBlockKind[blockKind].length * 47,
+                  height: toolsByBlockKind[blockKind].length * 50,
                   transition: { delay: 0 },
                   scale: 1,
                 }