Lighten background from neutral-950 to neutral-900

kylecarbs · kylecarbs · commit 5e4983db85d0 · 2025-10-23T01:53:56.000-04:00
Original used hsl(0 0% 12%) (~#1f1f1f, 12% lightness)
neutral-950 is too dark (~5% lightness)
neutral-900 (~15% lightness) is closer to original
diff --git a/src/App.tsx b/src/App.tsx
@@ -662,7 +662,7 @@ function AppInner() {
 
   return (
     <>
-      <div className="flex h-screen overflow-hidden bg-neutral-950 [@media(max-width:768px)]:flex-col">
+      <div className="flex h-screen overflow-hidden bg-neutral-900 [@media(max-width:768px)]:flex-col">
         <LeftSidebar
           projects={projects}
           workspaceMetadata={workspaceMetadata}
diff --git a/src/components/AIView.tsx b/src/components/AIView.tsx
@@ -245,7 +245,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -286,7 +286,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -302,7 +302,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
     return (
       <div
         className={cn(
-          "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+          "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
           className
         )}
         style={{ containerType: "inline-size" }}
@@ -320,7 +320,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
   return (
     <div
       className={cn(
-        "flex flex-1 flex-row bg-neutral-950 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
+        "flex flex-1 flex-row bg-neutral-900 text-neutral-300 overflow-x-auto overflow-y-hidden [@media(max-width:768px)]:flex-col",
         className
       )}
       style={{ containerType: "inline-size" }}
diff --git a/src/components/ChatInputToast.tsx b/src/components/ChatInputToast.tsx
@@ -73,7 +73,7 @@ export const ChatInputToast: React.FC<ChatInputToastProps> = ({ toast, onDismiss
               {toast.title && <div className="mb-1.5 font-semibold">{toast.title}</div>}
               <div className="mt-1.5 leading-[1.4] text-neutral-300">{toast.message}</div>
               {toast.solution && (
-                <div className="font-monospace text-code-type mt-2 rounded bg-neutral-950 px-2 py-1.5 text-[11px]">
+                <div className="font-monospace text-code-type mt-2 rounded bg-neutral-900 px-2 py-1.5 text-[11px]">
                   {toast.solution}
                 </div>
               )}
diff --git a/src/components/CommandPalette.stories.tsx b/src/components/CommandPalette.stories.tsx
@@ -174,8 +174,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <div className="flex min-h-[600px] flex-col gap-5 bg-neutral-950 p-5">
-      <div className="font-primary [&_kbd]:font-monospace rounded border border-neutral-800 bg-neutral-900 p-4 text-[13px] leading-[1.6] text-neutral-300 [&_kbd]:rounded-[3px] [&_kbd]:border [&_kbd]:border-neutral-800 [&_kbd]:bg-neutral-950 [&_kbd]:px-1.5 [&_kbd]:py-0.5 [&_kbd]:text-[11px]">
+    <div className="flex min-h-[600px] flex-col gap-5 bg-neutral-900 p-5">
+      <div className="font-primary [&_kbd]:font-monospace rounded border border-neutral-800 bg-neutral-900 p-4 text-[13px] leading-[1.6] text-neutral-300 [&_kbd]:rounded-[3px] [&_kbd]:border [&_kbd]:border-neutral-800 [&_kbd]:bg-neutral-900 [&_kbd]:px-1.5 [&_kbd]:py-0.5 [&_kbd]:text-[11px]">
         <strong>Command Palette</strong>
         <br />
         <br />
diff --git a/src/components/CommandPalette.tsx b/src/components/CommandPalette.tsx
@@ -369,7 +369,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext
         shouldFilter={shouldUseCmdkFilter}
       >
         <Command.Input
-          className="w-full border-b border-none border-neutral-900 bg-neutral-950 px-3.5 py-3 text-sm text-neutral-100 outline-none"
+          className="w-full border-b border-none border-neutral-900 bg-neutral-900 px-3.5 py-3 text-sm text-neutral-100 outline-none"
           value={query}
           onValueChange={handleQueryChange}
           placeholder={
diff --git a/src/components/CommandSuggestions.tsx b/src/components/CommandSuggestions.tsx
@@ -114,7 +114,7 @@ export const CommandSuggestions: React.FC<CommandSuggestionsProps> = ({
           </div>
         </div>
       ))}
-      <div className="shrink-0 border-t border-neutral-800 bg-neutral-950 px-2.5 py-1 text-center text-[10px] text-neutral-400 [&_span]:font-medium [&_span]:text-neutral-400">
+      <div className="shrink-0 border-t border-neutral-800 bg-neutral-900 px-2.5 py-1 text-center text-[10px] text-neutral-400 [&_span]:font-medium [&_span]:text-neutral-400">
         <span>Tab</span> to complete • <span>↑↓</span> to navigate • <span>Esc</span> to dismiss
       </div>
     </div>
diff --git a/src/components/Context1MCheckbox.tsx b/src/components/Context1MCheckbox.tsx
@@ -22,7 +22,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
           type="checkbox"
           checked={use1M}
           onChange={(e) => setUse1M(e.target.checked)}
-          className="relative m-0 h-[11px] w-3 cursor-pointer appearance-none rounded-sm border border-neutral-800 bg-neutral-950 checked:border-sky-600 checked:bg-sky-600 checked:after:absolute checked:after:top-0 checked:after:left-[3px] checked:after:h-[6px] checked:after:w-1 checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:border-solid checked:after:border-white checked:after:content-[''] hover:border-sky-600"
+          className="relative m-0 h-[11px] w-3 cursor-pointer appearance-none rounded-sm border border-neutral-800 bg-neutral-900 checked:border-sky-600 checked:bg-sky-600 checked:after:absolute checked:after:top-0 checked:after:left-[3px] checked:after:h-[6px] checked:after:w-1 checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px] checked:after:border-solid checked:after:border-white checked:after:content-[''] hover:border-sky-600"
         />
         1M Context
       </label>
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
@@ -42,7 +42,7 @@ export class ErrorBoundary extends Component<Props, State> {
       }
 
       return (
-        <div className="bg-error-bg-neutral-950 border-danger-soft text-danger-soft m-5 rounded border p-5">
+        <div className="bg-error-bg-neutral-900 border-danger-soft text-danger-soft m-5 rounded border p-5">
           <h3 className="m-0 mb-2.5 text-base">
             Something went wrong{this.props.workspaceInfo && ` in ${this.props.workspaceInfo}`}
           </h3>
diff --git a/src/components/ImageAttachments.tsx b/src/components/ImageAttachments.tsx
@@ -19,7 +19,7 @@ export const ImageAttachments: React.FC<ImageAttachmentsProps> = ({ images, onRe
       {images.map((image) => (
         <div
           key={image.id}
-          className="relative h-20 w-20 overflow-hidden rounded border border-neutral-800 bg-neutral-950"
+          className="relative h-20 w-20 overflow-hidden rounded border border-neutral-800 bg-neutral-900"
         >
           <img src={image.url} alt="Attached image" className="h-full w-full object-cover" />
           <button
diff --git a/src/components/KebabMenu.tsx b/src/components/KebabMenu.tsx
@@ -98,7 +98,7 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
         createPortal(
           <div
             ref={menuRef}
-            className="fixed z-[10000] min-w-40 overflow-hidden rounded-[3px] border border-neutral-800 bg-neutral-950 shadow-[0_4px_16px_rgba(0,0,0,0.8)]"
+            className="fixed z-[10000] min-w-40 overflow-hidden rounded-[3px] border border-neutral-800 bg-neutral-900 shadow-[0_4px_16px_rgba(0,0,0,0.8)]"
             style={{
               top: `${dropdownPosition.top}px`,
               left: `${dropdownPosition.left}px`,
@@ -113,10 +113,10 @@ export const KebabMenu: React.FC<KebabMenuProps> = ({ items, className }) => {
                   "w-full border-none border-b border-modal-bg text-xs py-2 px-3 text-left transition-all duration-150 font-primary flex items-center gap-2",
                   "last:border-b-0",
                   item.disabled
-                    ? "bg-neutral-950 text-neutral-400-light cursor-not-allowed opacity-50 hover:bg-neutral-950 hover:text-neutral-400-light"
+                    ? "bg-neutral-900 text-neutral-400-light cursor-not-allowed opacity-50 hover:bg-neutral-900 hover:text-neutral-400-light"
                     : item.active
                       ? "bg-white/15 text-neutral-300 cursor-pointer hover:bg-white/15 hover:text-white"
-                      : "bg-neutral-950 text-neutral-300 cursor-pointer hover:bg-white/15 hover:text-white"
+                      : "bg-neutral-900 text-neutral-300 cursor-pointer hover:bg-white/15 hover:text-white"
                 )}
               >
                 {item.emoji && (
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -28,7 +28,7 @@ export const ModalContent: React.FC<
 > = ({ children, maxWidth = "500px", maxHeight, className, ...props }) => (
   <div
     className={cn(
-      "bg-neutral-950 rounded-lg p-6 w-[90%] flex flex-col shadow-lg border border-neutral-800",
+      "bg-neutral-900 rounded-lg p-6 w-[90%] flex flex-col shadow-lg border border-neutral-800",
       "[&_h2]:mt-0 [&_h2]:mb-2 [&_h2]:text-white",
       className
     )}
@@ -95,7 +95,7 @@ export const ErrorCodeBlock: React.FC<{ children: React.ReactNode; className?: s
 }) => (
   <pre
     className={cn(
-      "bg-neutral-950-secondary border border-neutral-800 rounded p-3",
+      "bg-neutral-900-secondary border border-neutral-800 rounded p-3",
       "text-xs font-mono text-neutral-300 overflow-x-auto whitespace-pre-wrap break-words leading-relaxed",
       className
     )}
diff --git a/src/components/ModelSelector.tsx b/src/components/ModelSelector.tsx
@@ -203,7 +203,7 @@ export const ModelSelector = forwardRef<ModelSelectorRef, ModelSelectorProps>(
             onChange={handleInputChange}
             onKeyDown={handleKeyDown}
             placeholder="provider:model-name"
-            className="font-monospace focus:border-exec-mode w-48 rounded-sm border border-neutral-800 bg-neutral-950 px-1 py-0.5 text-[10px] leading-[11px] text-neutral-300 outline-none"
+            className="font-monospace focus:border-exec-mode w-48 rounded-sm border border-neutral-800 bg-neutral-900 px-1 py-0.5 text-[10px] leading-[11px] text-neutral-300 outline-none"
           />
           {error && (
             <div className="text-danger-soft font-monospace mt-0.5 text-[9px]">{error}</div>
diff --git a/src/components/NewWorkspaceModal.tsx b/src/components/NewWorkspaceModal.tsx
@@ -183,7 +183,7 @@ const NewWorkspaceModal: React.FC<NewWorkspaceModalProps> = ({
         {branchName.trim() && (
           <div>
             <div className="mb-2 font-sans text-xs text-neutral-400">Equivalent command:</div>
-            <div className="mt-5 rounded border border-neutral-800 bg-neutral-950 p-3 font-mono text-[13px] break-all whitespace-pre-wrap text-neutral-300">
+            <div className="mt-5 rounded border border-neutral-800 bg-neutral-900 p-3 font-mono text-[13px] break-all whitespace-pre-wrap text-neutral-300">
               {formatNewCommand(branchName.trim(), trunkBranch.trim() || undefined)}
             </div>
           </div>
diff --git a/src/components/ProjectSidebar.tsx b/src/components/ProjectSidebar.tsx
@@ -416,7 +416,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
       <DndProvider backend={HTML5Backend}>
         <ProjectDragLayer />
         <div
-          className="font-primary flex flex-1 flex-col overflow-hidden border-r border-neutral-800 bg-neutral-950"
+          className="font-primary flex flex-1 flex-col overflow-hidden border-r border-neutral-800 bg-neutral-900"
           role="navigation"
           aria-label="Projects"
         >
diff --git a/src/components/RightSidebar.tsx b/src/components/RightSidebar.tsx
@@ -220,7 +220,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
 
         <div className="flex min-w-0 flex-1 flex-col">
           <div
-            className="bg-neutral-950-secondary flex border-b border-neutral-800 [&>*]:flex-1"
+            className="bg-neutral-900-secondary flex border-b border-neutral-800 [&>*]:flex-1"
             role="tablist"
             aria-label="Metadata views"
           >
@@ -230,7 +230,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
                   "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
                   selectedTab === "costs"
                     ? "text-white bg-neutral-900 border-b-2 border-b-plan-mode"
-                    : "bg-transparent text-neutral-400 border-b-2 border-b-transparent hover:bg-neutral-950-secondary hover:text-neutral-300"
+                    : "bg-transparent text-neutral-400 border-b-2 border-b-transparent hover:bg-neutral-900-secondary hover:text-neutral-300"
                 )}
                 onClick={() => setSelectedTab("costs")}
                 id={costsTabId}
@@ -251,7 +251,7 @@ const RightSidebarComponent: React.FC<RightSidebarProps> = ({
                   "w-full py-2.5 px-[15px] border-none border-solid cursor-pointer font-primary text-[13px] font-medium transition-all duration-200",
                   selectedTab === "review"
                     ? "text-white bg-neutral-900 border-b-2 border-b-plan-mode"
-                    : "bg-transparent text-neutral-400 border-b-2 border-b-transparent hover:bg-neutral-950-secondary hover:text-neutral-300"
+                    : "bg-transparent text-neutral-400 border-b-2 border-b-transparent hover:bg-neutral-900-secondary hover:text-neutral-300"
                 )}
                 onClick={() => setSelectedTab("review")}
                 id={reviewTabId}
diff --git a/src/components/RightSidebar/CodeReview/HunkViewer.tsx b/src/components/RightSidebar/CodeReview/HunkViewer.tsx
@@ -138,7 +138,7 @@ export const HunkViewer = React.memo<HunkViewerProps>(
     return (
       <div
         className={cn(
-          "bg-neutral-950 border rounded mb-3 overflow-hidden cursor-pointer transition-all duration-200",
+          "bg-neutral-900 border rounded mb-3 overflow-hidden cursor-pointer transition-all duration-200",
           "focus:outline-none focus-visible:outline-none",
           isRead ? "border-read" : "border-neutral-800",
           isSelected && "border-review-accent shadow-[0_0_0_1px_var(--color-review-accent)]"
diff --git a/src/components/RightSidebar/CodeReview/ReviewControls.tsx b/src/components/RightSidebar/CodeReview/ReviewControls.tsx
@@ -93,7 +93,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
         onBlur={handleBaseBlur}
         onKeyDown={handleBaseKeyDown}
         placeholder="HEAD, main, etc."
-        className="w-36 rounded border border-neutral-700 bg-neutral-950 px-2 py-1 font-mono text-[11px] text-neutral-300 transition-[border-color] duration-200 placeholder:text-neutral-400 hover:border-sky-600 focus:border-sky-600 focus:outline-none"
+        className="w-36 rounded border border-neutral-700 bg-neutral-900 px-2 py-1 font-mono text-[11px] text-neutral-300 transition-[border-color] duration-200 placeholder:text-neutral-400 hover:border-sky-600 focus:border-sky-600 focus:outline-none"
       />
       <datalist id="base-suggestions">
         <option value="HEAD" />
diff --git a/src/components/RightSidebar/CodeReview/ReviewPanel.tsx b/src/components/RightSidebar/CodeReview/ReviewPanel.tsx
@@ -532,7 +532,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
       tabIndex={0}
       onFocus={() => setIsPanelFocused(true)}
       onBlur={() => setIsPanelFocused(false)}
-      className="[container-type:inline-size] flex h-full min-h-0 flex-col bg-neutral-950 outline-none [container-name:review-panel] focus-within:shadow-[inset_0_0_0_1px_rgba(0,122,204,0.2)]"
+      className="[container-type:inline-size] flex h-full min-h-0 flex-col bg-neutral-900 outline-none [container-name:review-panel] focus-within:shadow-[inset_0_0_0_1px_rgba(0,122,204,0.2)]"
     >
       {/* Always show controls so user can change diff base */}
       <ReviewControls
@@ -564,7 +564,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
             )}
 
             <div className="border-b border-neutral-800 bg-neutral-900 px-3 py-2">
-              <div className="hover:border-neutral-800-gray flex items-stretch overflow-hidden rounded border border-neutral-800 bg-neutral-950 transition-[border-color] duration-150 focus-within:border-sky-600 focus-within:hover:border-sky-600">
+              <div className="hover:border-neutral-800-gray flex items-stretch overflow-hidden rounded border border-neutral-800 bg-neutral-900 transition-[border-color] duration-150 focus-within:border-sky-600 focus-within:hover:border-sky-600">
                 <input
                   ref={searchInputRef}
                   type="text"
diff --git a/src/components/ThinkingSlider.stories.tsx b/src/components/ThinkingSlider.stories.tsx
@@ -39,7 +39,7 @@ export const Default: Story = {};
 
 export const DifferentModels: Story = {
   render: () => (
-    <div className="flex min-w-80 flex-col gap-[30px] bg-neutral-950 p-10">
+    <div className="flex min-w-80 flex-col gap-[30px] bg-neutral-900 p-10">
       <div>
         <div className="text-neutral-400-light font-primary mb-2 text-xs">Claude Sonnet 4.5</div>
         <ThinkingSliderComponent modelString="anthropic:claude-sonnete-4-5" />
@@ -60,7 +60,7 @@ export const DifferentModels: Story = {
 
 export const InteractiveDemo: Story = {
   render: () => (
-    <div className="flex min-w-80 flex-col gap-[30px] bg-neutral-950 p-10">
+    <div className="flex min-w-80 flex-col gap-[30px] bg-neutral-900 p-10">
       <div className="font-primary mb-2.5 text-[13px] text-neutral-300">
         Try moving the slider to see the purple glow effect intensify:
       </div>
@@ -95,7 +95,7 @@ export const InteractiveDemo: Story = {
 export const LockedThinking: Story = {
   args: { modelString: "openai:gpt-5-pro" },
   render: (args) => (
-    <div className="flex min-w-80 flex-col gap-[30px] bg-neutral-950 p-10">
+    <div className="flex min-w-80 flex-col gap-[30px] bg-neutral-900 p-10">
       <div className="font-primary mb-2.5 text-[13px] text-neutral-300">
         Some models have locked thinking levels based on their capabilities:
       </div>
diff --git a/src/components/TipsCarousel.stories.tsx b/src/components/TipsCarousel.stories.tsx
@@ -24,7 +24,7 @@ export const Default: Story = {
 
 export const WithExplanation: Story = {
   render: () => (
-    <div className="flex min-w-96 flex-col gap-5 bg-neutral-950 p-5">
+    <div className="flex min-w-96 flex-col gap-5 bg-neutral-900 p-5">
       <div className="font-primary text-[13px] text-neutral-300">
         Tips rotate automatically based on time. Hover to see the gradient effect:
       </div>
@@ -38,7 +38,7 @@ export const WithExplanation: Story = {
 
 export const DebugControls: Story = {
   render: () => (
-    <div className="flex min-w-96 flex-col gap-5 bg-neutral-950 p-5">
+    <div className="flex min-w-96 flex-col gap-5 bg-neutral-900 p-5">
       <div className="font-primary text-[13px] text-neutral-300">For debugging, you can use:</div>
       <TipsCarousel fixedTipIndex={1} />
       <div className="text-neutral-400-light font-monospace rounded bg-neutral-900 p-3 text-[11px]">
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
@@ -214,7 +214,7 @@ export function TitleBar() {
   const showUpdateIndicator = true;
 
   return (
-    <div className="font-primary flex shrink-0 items-center justify-between border-b border-neutral-800 bg-neutral-950 px-4 py-2 text-[11px] text-neutral-400 select-none">
+    <div className="font-primary flex shrink-0 items-center justify-between border-b border-neutral-800 bg-neutral-900 px-4 py-2 text-[11px] text-neutral-400 select-none">
       <div className="mr-4 flex min-w-0 items-center gap-2">
         {showUpdateIndicator && (
           <TooltipWrapper>
diff --git a/src/components/VimTextArea.tsx b/src/components/VimTextArea.tsx
@@ -214,7 +214,7 @@ export const VimTextArea = React.forwardRef<HTMLTextAreaElement, VimTextAreaProp
               "focus:outline-none",
               isEditing
                 ? "bg-editing-mode-alpha border-editing-mode focus:border-editing-mode"
-                : "bg-neutral-950 border-neutral-800",
+                : "bg-neutral-900 border-neutral-800",
               !isEditing && (mode === "plan" ? "focus:border-plan-mode" : "focus:border-exec-mode"),
               vimMode === "normal"
                 ? "caret-transparent selection:bg-white/50"
diff --git a/src/components/shared/DiffRenderer.tsx b/src/components/shared/DiffRenderer.tsx
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
diff --git a/src/styles/globals.css b/src/styles/globals.css

Original file line number	Diff line number	Diff line change
`@@ -369,7 +369,7 @@ export const CommandPalette: React.FC<CommandPaletteProps> = ({ getSlashContext`
`369`	`369`	`shouldFilter={shouldUseCmdkFilter}`
`370`	`370`	`>`
`371`	`371`	`<Command.Input`
`372`		`- className="w-full border-b border-none border-neutral-900 bg-neutral-950 px-3.5 py-3 text-sm text-neutral-100 outline-none"`
	`372`	`+ className="w-full border-b border-none border-neutral-900 bg-neutral-900 px-3.5 py-3 text-sm text-neutral-100 outline-none"`
`373`	`373`	`value={query}`
`374`	`374`	`onValueChange={handleQueryChange}`
`375`	`375`	`placeholder={`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ export class ErrorBoundary extends Component<Props, State> {`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`return (`
`45`		`- <div className="bg-error-bg-neutral-950 border-danger-soft text-danger-soft m-5 rounded border p-5">`
	`45`	`+ <div className="bg-error-bg-neutral-900 border-danger-soft text-danger-soft m-5 rounded border p-5">`
`46`	`46`	`<h3 className="m-0 mb-2.5 text-base">`
`47`	`47`	Something went wrong{this.props.workspaceInfo && ` in ${this.props.workspaceInfo}`}
`48`	`48`	`</h3>`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ export const ImageAttachments: React.FC<ImageAttachmentsProps> = ({ images, onRe`
`19`	`19`	`{images.map((image) => (`
`20`	`20`	`<div`
`21`	`21`	`key={image.id}`
`22`		`- className="relative h-20 w-20 overflow-hidden rounded border border-neutral-800 bg-neutral-950"`
	`22`	`+ className="relative h-20 w-20 overflow-hidden rounded border border-neutral-800 bg-neutral-900"`
`23`	`23`	`>`
`24`	`24`	`<img src={image.url} alt="Attached image" className="h-full w-full object-cover" />`
`25`	`25`	`<button`