[ui]: General ui polish to more closely match designs (#532)

Co-authored-by: bwrage <bwrage@squareup.com>

ui/desktop/src/components/Input.tsx

@@ -81,7 +81,7 @@ export default function Input({
   };
 
   return (
-    <form onSubmit={onFormSubmit} className="flex relative bg-white dark:bg-gray-800 h-auto px-[16px] pr-[68px] py-[1rem]">
+    <form onSubmit={onFormSubmit} className="flex relative h-auto px-[16px] pr-[68px] py-[1rem]">
       <textarea
         autoFocus
         id="dynamic-textarea"

ui/desktop/src/components/Splash.tsx

@@ -10,7 +10,7 @@ export default function Splash({ append }) {
         <GooseSplashLogo />
         <span className="ask-goose-type goose-text dark:goose-text-dark ml-[8px]">ask<br />goose</span>
       </div>
-      <div className={`mt-[10px] w-[198px] h-[17px] py-2 flex-col justify-center items-start inline-flex`}>
+      <div className={`mt-[24px] mb-[24px] w-[198px] h-[17px] py-2 flex-col justify-center items-start inline-flex`}>
         <div className="self-stretch h-px bg-black/5 dark:bg-white/5 rounded-sm" />
       </div>
       <div
@@ -26,12 +26,9 @@ export default function Splash({ append }) {
         What can goose do?
       </div>
       <div className="flex flex-1" />
-      <div className={`mt-[10px] w-[198px] h-[17px] py-2 flex-col justify-center items-start inline-flex`}>
-        <div className="self-stretch h-px bg-black/5 dark:bg-white/5 rounded-sm" />
-      </div>
       <div className="flex items-center p-4">
         <SplashPills append={append} />
       </div>
     </div>
   )
-}
+}

ui/desktop/src/components/SplashPills.tsx

@@ -3,7 +3,10 @@ import React from "react"
 function SplashPill({ content, append }) {
   return (
     <div
-      className="px-16 py-8 text-14 text-center dark:text-splash-pills-text-dark text-splash-pills-text whitespace-nowrap cursor-pointer bg-splash-pills dark:bg-splash-pills-dark  hover:bg-splash-pills/90 hover:scale-[1.02] rounded-lg inline-block transition-all duration-150"
+      className="px-16 py-8 text-14 text-center text-black/60 dark:text-white/60 
+                 cursor-pointer bg-black/5 dark:bg-white/5 
+                 hover:bg-black/10 dark:hover:bg-white/10 
+                 rounded-[1000px] inline-block transition-all duration-150"
       onClick={async () => {
         const message = {
           content,
@@ -12,18 +15,18 @@ function SplashPill({ content, append }) {
         await append(message);
       }}
     >
-      {content}
+      <div className="line-clamp-2">{content}</div>
     </div>
   )
 }
 
 export default function SplashPills({ append }) {
   return (
-    <div className="grid grid-cols-2 gap-4 mb-[8px]">
+    <div className="grid grid-cols-2 gap-4 mb-[8px] max-w-full">
       <SplashPill content="Demo writing and reading files" append={append} />
       <SplashPill content="Make a snake game in a new folder" append={append} />
       <SplashPill content="List files in my current directory" append={append} />
       <SplashPill content="Take a screenshot and summarize" append={append} />
     </div>
   )
-}
+}

ui/desktop/src/index.css

@@ -80,16 +80,13 @@
   }
 
   body {
-    background-color: white;
     color: black;
   }
 
   .dark body {
-    background-color: black;
     color: white;
   }
 
-
   .bg-inline-code {
     border-radius: 4px;
     color: rgba(255, 130, 130, 0.85);
@@ -111,7 +108,6 @@
     .bg-inline-code {
       padding: 2px 4px;
     }
-
   }
 
   .bg-inline-code:after {
@@ -121,5 +117,4 @@
   .dark .bg-inline-code {
     color: rgba(248, 155, 89, 0.7);
   }
-
-}
+}

ui/desktop/src/main.ts

@@ -122,7 +122,7 @@ const createChat = async (app, query?: string, dir?: string) => {
   const mainWindow = new BrowserWindow({
     titleBarStyle: 'hidden',
     trafficLightPosition: { x: 16, y: 10 },
-    vibrancy: 'under-window',
+    vibrancy: 'window',
     width: 750,
     height: 800,
     minWidth: 650,