Merge branch 'dev'

Author: robertpiosik

packages/ui/src/components/editor/common/Input/Input.module.scss

@@ -1,5 +1,5 @@
 .input {
-  border: 1px solid var(--cwc-stroke-primary);
+  border: 1px solid var(--cwc-border-color);
   background: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
   padding: var(--padding-4px) var(--padding-8px);

packages/ui/src/components/editor/panel/Dropdown/Dropdown.module.scss

@@ -8,14 +8,14 @@
   gap: var(--padding-4px);
   padding: 0 var(--padding-5px) 0 var(--padding-7px);
   height: 24px;
-  border: 1px solid var(--vscode-dropdown-border);
+  border: 1px solid var(--cwc-border-color-dimmed);
   border-radius: var(--border-radius-4px);
   cursor: pointer;
   color: var(--vscode-foreground);
   width: 100%;
 
   &:hover {
-    border-color: var(--vscode-commandCenter-activeBorder);
+    border-color: var(--cwc-border-color);
   }
 
   &--open {

packages/ui/src/components/editor/panel/Page/Page.module.scss

@@ -28,5 +28,5 @@
 .footer {
   gap: var(--padding-8px);
   padding: var(--padding-12px);
-  border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
+  border-top: 1px solid var(--cwc-border-color-dimmed);
 }

packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.module.scss

@@ -22,25 +22,33 @@
 
 .instructions {
   position: relative;
-  padding: var(--padding-5px) 15px var(--padding-5px) var(--padding-7px);
-  border: 1px solid var(--vscode-sideBarSectionHeader-border);
   margin: 0 var(--padding-12px);
-  border-radius: var(--border-radius-10px);
   word-wrap: break-word;
-  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 14px;
+  line-height: 1.3;
+  font-weight: 600;
 
-  &::after {
-    position: absolute;
-    content: '';
-    width: 100%;
-    height: 4px;
-    bottom: 0;
-    left: 0;
-    background: var(--vscode-sideBar-background);
+  &--large {
+    font-size: 16px;
   }
+
+  &--small {
+    font-size: 13px;
+  }
+
+  // &::after {
+  //   position: absolute;
+  //   content: '';
+  //   width: 100%;
+  //   height: 4px;
+  //   bottom: 0;
+  //   left: 0;
+  //   background: var(--vscode-sideBar-background);
+  // }
 }
 
 .list {

packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.stories.tsx

@@ -145,3 +145,24 @@ export const WithText = () => (
     ]}
   />
 )
+
+export const WithShortInstructions = () => (
+  <InteractiveResponsePreview
+    items={base_files}
+    raw_instructions="This is a short instruction."
+  />
+)
+
+export const WithMediumInstructions = () => (
+  <InteractiveResponsePreview
+    items={base_files}
+    raw_instructions="This is a medium length instruction, it should have the default font size and it's here to demonstrate the behavior."
+  />
+)
+
+export const WithLongInstructions = () => (
+  <InteractiveResponsePreview
+    items={base_files}
+    raw_instructions="This is a very long instruction, it is designed to be very long to test the small font size. It should wrap and clamp to three lines. We need to make sure this text is long enough to trigger the smaller font size. This should be more than 160 characters for sure."
+  />
+)

packages/ui/src/components/editor/panel/ResponsePreview/ResponsePreview.tsx

@@ -72,6 +72,16 @@ export const ResponsePreview: FC<Props> = (props) => {
   ) as FileInPreview[]
   const fallback_count = files_in_preview.filter((f) => f.is_fallback).length
 
+  const get_instructions_font_size_class = (text: string): string => {
+    const length = text.length
+    if (length < 80) {
+      return styles['instructions--large']
+    } else if (length > 160) {
+      return styles['instructions--small']
+    }
+    return ''
+  }
+
   return (
     <Scrollable
       ref={scrollable_ref}
@@ -85,7 +95,13 @@ export const ResponsePreview: FC<Props> = (props) => {
     >
       <div className={styles.container}>
         {props.raw_instructions && (
-          <div className={styles.instructions} title={props.raw_instructions}>
+          <div
+            className={cn(
+              styles.instructions,
+              get_instructions_font_size_class(props.raw_instructions)
+            )}
+            title={props.raw_instructions}
+          >
             {props.raw_instructions}
           </div>
         )}

packages/ui/src/components/editor/panel/ResponsePreview/components/TextItem.module.scss

@@ -1,23 +1,21 @@
 .text {
-  color: var(--vscode-descriptionForeground);
-
   margin: var(--padding-6px) var(--padding-12px);
-  background: var(--vscode-list-hoverBackground);
-  padding: var(--padding-5px) var(--padding-7px);
-  border-radius: var(--border-radius-8px);
   word-wrap: break-word;
 
   > * {
     margin: 0;
     font-size: var(--font-size-13px);
   }
+
   > * + * {
     margin-top: 0.5em;
   }
+
   ul,
   ol {
     padding-left: 20px;
   }
+
   code {
     font-size: var(--font-size-11px);
     background-color: var(--vscode-textCodeBlock-background);
@@ -29,17 +27,13 @@
     max-height: 50px;
     overflow: hidden;
     position: relative;
+    color: var(--vscode-descriptionForeground);
 
-    > * {
-      margin: 0;
-      font-size: var(--font-size-12px);
+    &:hover {
+      color: inherit;
     }
   }
 
-  &--expandable {
-    cursor: pointer;
-  }
-
   &--overflowing::after {
     content: '';
     position: absolute;
@@ -50,7 +44,7 @@
     background: linear-gradient(
       to bottom,
       transparent,
-      var(--vscode-list-hoverBackground)
+      var(--vscode-sideBar-background)
     );
   }
 }

packages/ui/src/components/editor/panel/ResponsePreview/components/TextItem.tsx

@@ -25,7 +25,6 @@ export const TextItem: FC<Props> = ({ content, is_expanded, on_toggle }) => {
     <div
       ref={ref}
       className={cn(styles.text, {
-        [styles['text--expandable']]: is_expanded || is_overflowing,
         [styles['text--collapsed']]: !is_expanded,
         [styles['text--overflowing']]: !is_expanded && is_overflowing
       })}

packages/ui/src/components/editor/panel/modals/CommitMessageModal/CommitMessageModal.module.scss

@@ -1,15 +1,15 @@
 .textarea {
   display: flex;
   width: 100%;
-  background-color: var(--vscode-input-background);
-  color: var(--vscode-input-foreground);
-  border: 1px solid var(--vscode-input-border);
   border-radius: var(--border-radius-5px);
   padding: var(--padding-5px) var(--padding-6px);
   resize: none;
   font-family: var(--vscode-font-family);
   font-size: var(--vscode-font-size);
   overflow: hidden;
+  border: 1px solid var(--cwc-border-color);
+  background: var(--vscode-input-background);
+  color: var(--vscode-input-foreground);
 
   &:focus {
     outline: 1px solid var(--vscode-focusBorder);

packages/ui/src/components/editor/panel/modals/Modal/Modal.module.scss

@@ -49,25 +49,24 @@
   display: flex;
   gap: var(--padding-8px);
   padding: var(--padding-12px);
-  border-top: 1px solid var(--cwc-border-color);
+  border-top: 1px solid var(--cwc-border-color-dimmed);
 
   > button {
     flex: 1;
   }
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
   position: relative;
   z-index: 1;
   border-radius: var(--border-radius-12px);
-  border: 1px solid var(--cwc-border-color);
+  border: 1px solid var(--cwc-border-color-dimmed);
   width: 100%;
   max-width: 320px;
   background-color: var(--vscode-quickInput-background);
   color: var(--vscode-quickInput-foreground);
-  border: 1px solid var(--vscode-widget-border);
-  display: flex;
-  flex-direction: column;
 
   &--full-width {
     max-width: none;