fix: visual tweaks and polish on Cody chat panel (#6000)

This PR is an amalgamation of small CSS changes and tweaks to the Cody chat panel. **Before** | **After** -- | -- ![CleanShot 2024-10-25 at 11 32 48@2x](https://github.com/user-attachments/assets/017f9660-7d3e-4c2c-9ca4-6f91630c1bf9) | ![CleanShot 2024-10-25 at 11 31 54@2x](https://github.com/user-attachments/assets/22aa165f-825e-4563-9309-69a88c6c45a0) ## Test plan Tested locally, manually.
sourcegraph · Oct 25, 2024 · 5397655 · 5397655
1 parent bb855ae
commit 5397655
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 20 deletions.
diff --git a/vscode/webviews/chat/Transcript.tsx b/vscode/webviews/chat/Transcript.tsx
@@ -115,7 +115,7 @@ export const Transcript: FC<TranscriptProps> = props => {
 
     return (
         <div
-            className={clsx('tw-px-6 tw-pt-8 tw-pb-12 tw-flex tw-flex-col tw-gap-8', {
+            className={clsx('tw-px-8 tw-pt-8 tw-pb-6 tw-flex tw-flex-col tw-gap-8', {
                 'tw-flex-grow': transcript.length > 0,
             })}
         >

diff --git a/vscode/webviews/chat/components/WelcomeFooter.module.css b/vscode/webviews/chat/components/WelcomeFooter.module.css
@@ -2,36 +2,31 @@
     padding: 1rem 1rem;
     display: flex;
     flex-flow: column nowrap;
-    justify-content: space-between;
-    align-items: center;
     max-width: 100%;
     color: var(--vscode-input-placeholderForeground)
 }
 
 .tips {
     display: flex;
     flex-flow: column nowrap;
-    flex-shrink: 0;
+    width: 100%;
     gap: 0.5rem;
-    padding: 1.0rem;
+    padding: 1rem 0;
     border-bottom: 0.25px solid var(--vscode-dropdown-border);
 }
 
 .links {
     display: flex;
-    flex-shrink: none;
-    flex-direction: row;
-    padding: 1.0rem 1.5rem;
+    flex-flow: row wrap;
+    padding: 0.75rem 0;
     gap: 0.5rem;
-    flex-shrink: 0;
-    justify-content: space-around;
-    align-items: center;
 }
 
 .item {
     display: flex;
     flex-flow: row nowrap;
     flex-shrink: 0;
+    padding: 0 0.5rem;
     gap: 0.5rem;
     align-items: center;
 }

diff --git a/vscode/webviews/chat/components/WelcomeMessage.tsx b/vscode/webviews/chat/components/WelcomeMessage.tsx
@@ -22,7 +22,7 @@ export const WelcomeMessage: FunctionComponent<WelcomeMessageProps> = ({
     const runAction = useActionSelect()
 
     return (
-        <div className="tw-flex-1 tw-flex tw-flex-col tw-items-start tw-w-full tw-px-6 tw-gap-4 tw-transition-all">
+        <div className="tw-flex-1 tw-flex tw-flex-col tw-items-start tw-w-full tw-px-8 tw-gap-6 tw-transition-all">
             {isPromptsV2Enabled && <PromptMigrationWidget dismissible={true} className="tw-w-full" />}
             <div className="tw-flex tw-flex-col tw-gap-4 tw-w-full">
                 <PromptList
@@ -37,7 +37,7 @@ export const WelcomeMessage: FunctionComponent<WelcomeMessageProps> = ({
                     onSelect={item => runAction(item, setView)}
                 />
 
-                <div className="tw-flex tw-gap-8 tw-justify-center">
+                <div className="tw-flex tw-py-2 tw-gap-8 tw-justify-center">
                     <Button
                         variant="ghost"
                         className="tw-justify-center tw-basis-0 tw-whitespace-nowrap"

diff --git a/vscode/webviews/components/promptsMigration/PromptsMigration.module.css b/vscode/webviews/components/promptsMigration/PromptsMigration.module.css
@@ -11,19 +11,19 @@
 .icons-header {
     display: flex;
     gap: 0.5rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.625rem;
 }
 
 .heading {
-    font-size: 1rem;
+    font-size: 0.875rem;
     font-weight: 500;
-    margin-bottom: 0.25rem;
+    margin-bottom: 0.175rem;
     color: var(--vscode-dropdown-foreground);
 }
 
 .description-text {
     line-height: 1rem;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.875rem;
     color: var(--vscode-dropdown-foreground);
 }
 

diff --git a/vscode/webviews/components/promptsMigration/PromptsMigration.tsx b/vscode/webviews/components/promptsMigration/PromptsMigration.tsx
@@ -67,9 +67,9 @@ export const PromptsMigration: FC<PromptsMigrationProps> = props => {
     return (
         <div className={clsx(className, styles.root)}>
             <header className={clsx('tw-text-muted-foreground', styles.iconsHeader)}>
-                <PencilRuler size={20} />
-                <ArrowRight size={20} />
-                <BookText size={20} />
+                <PencilRuler size={18} />
+                <ArrowRight size={18} />
+                <BookText size={18} />
 
                 {dismissible && (
                     <Button