Remove gradient backgrounds and dynamic gradient sizing from StatusBar in favor of solid theme colors and VS Code list hover styling

Author: robertpiosik

packages/ui/src/components/editor/prompt/StatusBar/StatusBar.module.scss

@@ -30,63 +30,66 @@
 
 .theme-default {
   color: var(--cwc-text-color);
-  background: var(--cwc-bg-tertiary);
-  background: linear-gradient(
-    90deg,
-    var(--cwc-bg-secondary) var(--gradient-start, 40px),
-    var(--cwc-bg-tertiary) var(--gradient-end, 140px)
-  );
+  background-color: var(--cwc-bg-tertiary);
   --theme-description-color: var(--cwc-text-color-dimmed);
+
+  .action {
+    color: var(--vscode-textLink-foreground);
+  }
+
+  .action:hover {
+    background-color: var(--cwc-bg-tertiary);
+  }
 }
 
 .theme-warning {
   color: var(--cwc-yellow-foreground);
-  background: linear-gradient(
-    90deg,
-    var(--cwc-yellow-background) var(--gradient-start, 40px),
-    var(--cwc-bg-tertiary) var(--gradient-end, 140px)
-  );
+  background-color: var(--cwc-yellow-background);
   --theme-description-color: var(--cwc-yellow-foreground-dimmed);
+
+  .action:hover {
+    background-color: var(--cwc-yellow-background);
+  }
 }
 
 .theme-success {
   color: var(--cwc-green-foreground);
-  background: linear-gradient(
-    90deg,
-    var(--cwc-green-background) var(--gradient-start, 40px),
-    var(--cwc-bg-tertiary) var(--gradient-end, 140px)
-  );
+  background-color: var(--cwc-green-background);
   --theme-description-color: var(--cwc-green-foreground-dimmed);
+
+  .action:hover {
+    background-color: var(--cwc-green-background);
+  }
 }
 
 .theme-error {
   color: var(--cwc-red-foreground);
-  background: linear-gradient(
-    90deg,
-    var(--cwc-red-background) var(--gradient-start, 40px),
-    var(--cwc-bg-tertiary) var(--gradient-end, 140px)
-  );
+  background-color: var(--cwc-red-background);
   --theme-description-color: var(--cwc-red-foreground-dimmed);
+
+  .action:hover {
+    background-color: var(--cwc-red-background);
+  }
 }
 
 .theme-blue {
   color: var(--cwc-blue-foreground);
-  background: linear-gradient(
-    90deg,
-    var(--cwc-blue-background) var(--gradient-start, 40px),
-    var(--cwc-bg-tertiary) var(--gradient-end, 140px)
-  );
+  background-color: var(--cwc-blue-background);
   --theme-description-color: var(--cwc-blue-foreground-dimmed);
+
+  .action:hover {
+    background-color: var(--cwc-blue-background);
+  }
 }
 
 .theme-purple {
   color: var(--cwc-purple-foreground);
-  background: linear-gradient(
-    90deg,
-    var(--cwc-purple-background) var(--gradient-start, 40px),
-    var(--cwc-bg-tertiary) var(--gradient-end, 140px)
-  );
+  background-color: var(--cwc-purple-background);
   --theme-description-color: var(--cwc-purple-foreground-dimmed);
+
+  .action:hover {
+    background-color: var(--cwc-purple-background);
+  }
 }
 
 .content {
@@ -139,9 +142,8 @@
   cursor: pointer;
   white-space: nowrap;
   padding: 0 7px 0 4px;
-  color: var(--cwc-text-color-dimmed);
 
   &:hover {
-    background-color: var(--cwc-bg-tertiary);
+    background-color: var(--vscode-list-hoverBackground);
   }
 }

packages/ui/src/components/editor/prompt/StatusBar/StatusBar.tsx

@@ -13,7 +13,7 @@ export type StatusBarAction = {
 }
 
 export type Props = {
-  label: React.ReactNode
+  label: string
   theme?: 'default' | 'warning' | 'success' | 'error' | 'blue' | 'purple'
   placement?: 'top' | 'bottom'
   icon?: string
@@ -26,16 +26,6 @@ export type Props = {
 export const StatusBar: React.FC<Props> = (props) => {
   const theme = props.theme ?? 'default'
 
-  let char_count = 0
-  if (typeof props.label === 'string') {
-    char_count = props.label.length
-  } else if (typeof props.label === 'number') {
-    char_count = props.label.toString().length
-  }
-
-  const gradient_start = char_count * 3 + 20
-  const gradient_end = gradient_start + 100
-
   return (
     <div
       className={cn(
@@ -46,12 +36,6 @@ export const StatusBar: React.FC<Props> = (props) => {
           : styles.rounded,
         props.className
       )}
-      style={
-        {
-          '--gradient-start': `${gradient_start}px`,
-          '--gradient-end': `${gradient_end}px`
-        } as React.CSSProperties
-      }
     >
       <div className={styles.content}>
         {props.icon && (