From 5452a13e07f832ade1c2344221c040e6b466af26 Mon Sep 17 00:00:00 2001
From: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>
Date: Mon, 20 Jul 2026 23:43:41 +0000
Subject: [PATCH] fix(app): refine background contrast

---
 packages/app/src/components/prompt-project-selector.tsx   | 2 ++
 .../src/components/session/session-new-design-view.tsx    | 2 +-
 packages/app/src/index.css                                | 8 +++++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/prompt-project-selector.tsx b/packages/app/src/components/prompt-project-selector.tsx
index 45d0371fda..ff0fc920bc 100644
--- a/packages/app/src/components/prompt-project-selector.tsx
+++ b/packages/app/src/components/prompt-project-selector.tsx
@@ -446,6 +446,7 @@ export function PromptProjectAddButton(props: { controller: PromptProjectControl
   return (
     <button
       data-action="prompt-project"
+      data-background-surface="project-selector"
       type="button"
       class="flex h-7 min-w-0 max-w-[160px] items-center gap-1.5 rounded-sm px-2 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
       onClick={() => props.controller.add()}
@@ -464,6 +465,7 @@ function ProjectTrigger(props: ComponentProps<"button"> & { controller: PromptPr
     <button
       {...rest}
       data-action="prompt-project"
+      data-background-surface="project-selector"
       type="button"
       class="flex h-7 min-w-0 max-w-[203px] items-center gap-1.5 rounded-sm px-1.5 transition-colors focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
       classList={{
diff --git a/packages/app/src/components/session/session-new-design-view.tsx b/packages/app/src/components/session/session-new-design-view.tsx
index 3925d568c5..35862a75f5 100644
--- a/packages/app/src/components/session/session-new-design-view.tsx
+++ b/packages/app/src/components/session/session-new-design-view.tsx
@@ -11,7 +11,7 @@ export function NewSessionDesignView(props: { children: JSX.Element }) {
     >
       <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
         <div class={NEW_SESSION_CONTENT_WIDTH}>
-          <WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse" />
+          <WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse [&>g>g>g]:!opacity-30" />
           <div class="mt-8">{props.children}</div>
         </div>
       </div>
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index afcfbcb7b9..5af8603296 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -4,7 +4,7 @@
 @import "tw-animate-css";
 
 html[data-background-image] body {
-  background-image: linear-gradient(rgb(0 0 0 / 12%), rgb(0 0 0 / 12%)), var(--app-background-image);
+  background-image: linear-gradient(rgb(0 0 0 / 20%), rgb(0 0 0 / 20%)), var(--app-background-image);
   background-color: transparent !important;
   background-position: center;
   background-repeat: no-repeat;
@@ -32,6 +32,12 @@ html[data-background-image] [data-background-surface="prompt"] {
   backdrop-filter: blur(16px);
 }
 
+html[data-background-image] [data-background-surface="project-selector"] {
+  background-color: color-mix(in srgb, var(--v2-background-bg-base) 68%, transparent) !important;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v2-border-border-base) 70%, transparent);
+  backdrop-filter: blur(16px);
+}
+
 @font-face {
   font-family: "JetBrainsMono Nerd Font Mono";
   src: url("/assets/JetBrainsMonoNerdFontMono-Regular.woff2") format("woff2");