From 5dd2c59a12d3439a9e48946c7ccad9aade3e75c7 Mon Sep 17 00:00:00 2001
From: reaper <kris.parish@icloud.com>
Date: Fri, 14 Aug 2026 14:06:13 -0500
Subject: [PATCH] fix: refine setup and project overview surfaces

---
 .../components/create/CreateProjectModal.tsx  |  6 +--
 .../src/components/projects/ProjectDetail.tsx | 54 +++++++++----------
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/renderer/src/components/create/CreateProjectModal.tsx b/src/renderer/src/components/create/CreateProjectModal.tsx
index a92fa02..c14e23a 100644
--- a/src/renderer/src/components/create/CreateProjectModal.tsx
+++ b/src/renderer/src/components/create/CreateProjectModal.tsx
@@ -139,8 +139,8 @@ export function CreateProjectModal({ onClose }: { onClose: () => void }): React.
           </div>
         </aside>
 
-        <div className="min-h-0 min-w-0 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]">
-          <div className="sticky top-0 z-20 flex items-center justify-between border-b border-neutral-200/80 bg-white/95 px-5 py-4 backdrop-blur dark:border-white/10 dark:bg-neutral-950/95">
+        <div className="min-h-0 min-w-0 overflow-y-auto overscroll-contain bg-[radial-gradient(circle_at_100%_0%,rgba(6,182,212,0.10),transparent_34%),linear-gradient(180deg,#f8fafc_0%,#ffffff_52%,#f0f9fa_100%)] [scrollbar-gutter:stable] dark:bg-[radial-gradient(circle_at_100%_0%,rgba(34,211,238,0.10),transparent_36%),linear-gradient(180deg,#0a0f16_0%,#090c12_58%,#071417_100%)]">
+          <div className="sticky top-0 z-20 flex items-center justify-between border-b border-slate-200/80 bg-slate-50/90 px-5 py-4 backdrop-blur-xl dark:border-white/10 dark:bg-neutral-950/90">
             <div>
               <h2 className="text-base font-semibold">
                 {step === 'site' ? 'New Project' : `Set up ${getTypeLabel(projectType)}`}
@@ -305,7 +305,7 @@ export function CreateProjectModal({ onClose }: { onClose: () => void }): React.
             </div>
           </div>
 
-          <div className="sticky bottom-0 z-20 flex items-center justify-between gap-3 border-t border-neutral-200/80 bg-neutral-50/95 p-4 backdrop-blur dark:border-white/10 dark:bg-neutral-950/95">
+          <div className="sticky bottom-0 z-20 flex items-center justify-between gap-3 border-t border-slate-200/80 bg-slate-50/90 p-4 backdrop-blur-xl dark:border-white/10 dark:bg-neutral-950/90">
             <button
               type="button"
               onClick={step === 'site' ? onClose : () => setStep('site')}
diff --git a/src/renderer/src/components/projects/ProjectDetail.tsx b/src/renderer/src/components/projects/ProjectDetail.tsx
index e40306d..af4b17b 100644
--- a/src/renderer/src/components/projects/ProjectDetail.tsx
+++ b/src/renderer/src/components/projects/ProjectDetail.tsx
@@ -74,7 +74,7 @@ const DATABASE_OPTIONS = [
 ]
 
 const heroFieldClass =
-  'w-full rounded-lg border border-neutral-200 bg-white/90 px-2.5 py-1.5 text-sm font-semibold text-neutral-900 shadow-sm transition hover:border-cyan-300 focus:border-cyan-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:border-cyan-300/40 dark:hover:bg-white/10'
+  'w-full rounded-lg border border-white/10 bg-white/5 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm transition hover:border-cyan-300/40 hover:bg-white/10 focus:border-cyan-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50'
 
 export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
   const { data: project, isLoading, isError, error } = useProjectDetail(name)
@@ -178,13 +178,13 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
 
   return (
     <div className="mx-auto flex w-full max-w-6xl flex-col gap-5 p-6">
-      <header className="overflow-hidden rounded-2xl border border-cyan-200/80 bg-gradient-to-br from-white via-slate-50 to-cyan-50 text-neutral-950 shadow-[0_20px_55px_rgba(15,23,42,0.10)] dark:border-white/10 dark:bg-neutral-950 dark:bg-none dark:text-white dark:shadow-[0_24px_70px_rgba(0,0,0,0.28)]">
+      <header className="overflow-hidden rounded-2xl border border-white/10 bg-neutral-950 text-white shadow-[0_24px_70px_rgba(0,0,0,0.28)]">
         <div className="relative p-5">
           <div className="absolute inset-0 bg-[linear-gradient(rgba(8,145,178,0.07)_1px,transparent_1px),linear-gradient(90deg,rgba(8,145,178,0.07)_1px,transparent_1px)] bg-[size:36px_36px] dark:bg-[linear-gradient(rgba(45,212,191,0.09)_1px,transparent_1px),linear-gradient(90deg,rgba(45,212,191,0.09)_1px,transparent_1px)]" />
           <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-cyan-200/30 to-transparent dark:from-cyan-500/10" />
           <div className="relative flex flex-wrap items-start justify-between gap-4">
             <div className="min-w-0">
-              <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-cyan-200 bg-white/80 px-3 py-1 text-xs font-semibold text-cyan-800 shadow-sm dark:border-white/10 dark:bg-white/10 dark:text-cyan-100">
+              <div className="mb-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/10 px-3 py-1 text-xs font-semibold text-cyan-100 shadow-sm">
                 <Gauge size={13} />
                 {runningServices} of {services.length} services running
               </div>
@@ -192,7 +192,7 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
                 <h2 className="truncate text-3xl font-semibold">{project.name}</h2>
                 <StatusBadge status={project.status} />
               </div>
-              <p className="mt-2 max-w-3xl truncate text-sm text-neutral-500 dark:text-neutral-300">{project.approot}</p>
+              <p className="mt-2 max-w-3xl truncate text-sm text-neutral-300">{project.approot}</p>
             </div>
             <div className="flex flex-wrap justify-end gap-2">
               <button
@@ -207,7 +207,7 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
                 type="button"
                 disabled={!isRunning || isBusy}
                 onClick={() => stopProject.mutate(project.name)}
-                className="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white/80 px-3 py-1.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/[0.15]"
+                className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/10 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-white/[0.15] disabled:cursor-not-allowed disabled:opacity-40"
               >
                 <Square size={14} /> Stop
               </button>
@@ -223,7 +223,7 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
                 type="button"
                 disabled={!isRunning}
                 onClick={() => setIsLogsOpen(true)}
-                className="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white/80 px-3 py-1.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50 disabled:cursor-not-allowed disabled:opacity-40 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/[0.15]"
+                className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/10 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-white/[0.15] disabled:cursor-not-allowed disabled:opacity-40"
               >
                 <FileText size={14} /> Logs
               </button>
@@ -232,13 +232,13 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
                   href={`${project.primary_url.replace(/\/$/, '')}${applicationManifest.project.adminPath}`}
                   target="_blank"
                   rel="noreferrer"
-                  className="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white/80 px-3 py-1.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/[0.15]"
+                  className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/10 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-white/[0.15]"
                 >
                   <KeyRound size={14} /> Application Admin
                 </a>
               )}
               {applicationManifest?.project?.adminPath && isRunning && project.wordpress_network_admin_url && (
-                <a href={project.wordpress_network_admin_url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1.5 rounded-md border border-neutral-200 bg-white/80 px-3 py-1.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50 dark:border-white/10 dark:bg-white/10 dark:text-white dark:hover:bg-white/[0.15]">
+                <a href={project.wordpress_network_admin_url} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/10 px-3 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-white/[0.15]">
                   <Globe2 size={14} /> Network Admin
                 </a>
               )}
@@ -246,24 +246,24 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
                 type="button"
                 disabled={isBusy}
                 onClick={() => setIsDeleteOpen(true)}
-                className="inline-flex items-center gap-1.5 rounded-md border border-red-200 bg-red-50/80 px-3 py-1.5 text-sm font-medium text-red-700 transition hover:bg-red-100 disabled:cursor-not-allowed disabled:opacity-40 dark:border-red-300/20 dark:bg-red-400/10 dark:text-red-100 dark:hover:bg-red-400/[0.15]"
+                className="inline-flex items-center gap-1.5 rounded-md border border-red-300/20 bg-red-400/10 px-3 py-1.5 text-sm font-medium text-red-100 transition hover:bg-red-400/[0.15] disabled:cursor-not-allowed disabled:opacity-40"
               >
                 <Trash2 size={14} /> Delete
               </button>
             </div>
           </div>
           <div className="relative mt-6 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-            <div className="rounded-xl border border-neutral-200/80 bg-white/80 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/[0.08]">
-              <Boxes size={17} className="mb-3 text-cyan-600 dark:text-cyan-200" />
-              <p className="text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+            <div className="rounded-xl border border-white/10 bg-white/[0.08] p-4 shadow-sm backdrop-blur">
+              <Boxes size={17} className="mb-3 text-cyan-200" />
+              <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">
                 Project type
               </p>
-              <p className="mt-1 truncate text-sm font-semibold text-neutral-900 dark:text-white">{applicationManifest?.name ?? project.type}</p>{applicationManifest?.project?.adminPath && <p className="mt-1 text-[11px] text-neutral-500 dark:text-neutral-400">{project.wordpress_multisite === 'subdomain' ? 'Multisite · Subdomain' : project.wordpress_multisite === 'subdirectory' ? 'Multisite · Subdirectory' : 'Single site'}</p>}
+              <p className="mt-1 truncate text-sm font-semibold text-white">{applicationManifest?.name ?? project.type}</p>{applicationManifest?.project?.adminPath && <p className="mt-1 text-[11px] text-neutral-400">{project.wordpress_multisite === 'subdomain' ? 'Multisite · Subdomain' : project.wordpress_multisite === 'subdirectory' ? 'Multisite · Subdirectory' : 'Single site'}</p>}
             </div>
 
-            <div className="rounded-xl border border-neutral-200/80 bg-white/80 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/[0.08]">
-              <Code2 size={17} className="mb-3 text-cyan-600 dark:text-cyan-200" />
-              <p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+            <div className="rounded-xl border border-white/10 bg-white/[0.08] p-4 shadow-sm backdrop-blur">
+              <Code2 size={17} className="mb-3 text-cyan-200" />
+              <p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-400">
                 PHP
               </p>
               <select
@@ -280,17 +280,17 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
               </select>
             </div>
 
-            <div className="rounded-xl border border-neutral-200/80 bg-white/80 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/[0.08]">
-              <Code2 size={17} className="mb-3 text-cyan-600 dark:text-cyan-200" />
-              <p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Node.js</p>
+            <div className="rounded-xl border border-white/10 bg-white/[0.08] p-4 shadow-sm backdrop-blur">
+              <Code2 size={17} className="mb-3 text-cyan-200" />
+              <p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-400">Node.js</p>
               <select value={project.nodejs_version ?? '24'} disabled={isEnvUpdating} onChange={(e) => void applyEnvironmentChange({ nodeVersion: e.target.value })} className={heroFieldClass}>
                 {NODE_VERSIONS.map((v) => <option key={v} value={v} className="text-neutral-900">{v}</option>)}
               </select>
             </div>
 
-            <div className="rounded-xl border border-neutral-200/80 bg-white/80 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/[0.08]">
-              <Server size={17} className="mb-3 text-cyan-600 dark:text-cyan-200" />
-              <p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+            <div className="rounded-xl border border-white/10 bg-white/[0.08] p-4 shadow-sm backdrop-blur">
+              <Server size={17} className="mb-3 text-cyan-200" />
+              <p className="mb-1 text-xs font-medium uppercase tracking-wide text-neutral-400">
                 Web server
               </p>
               <select
@@ -307,9 +307,9 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
               </select>
             </div>
 
-            <div className="rounded-xl border border-neutral-200/80 bg-white/80 p-4 shadow-sm backdrop-blur dark:border-white/10 dark:bg-white/[0.08]">
+            <div className="rounded-xl border border-white/10 bg-white/[0.08] p-4 shadow-sm backdrop-blur">
               <div className="mb-3 flex items-center justify-between">
-                <Zap size={17} className="text-cyan-600 dark:text-cyan-200" />
+                <Zap size={17} className="text-cyan-200" />
                 <button
                   type="button"
                   role="switch"
@@ -321,7 +321,7 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
                   }
                   className={clsx(
                     'relative inline-flex h-5 w-9 flex-shrink-0 items-center rounded-full transition disabled:cursor-not-allowed disabled:opacity-50',
-                    project.xdebug_enabled ? 'bg-cyan-500' : 'bg-neutral-300 dark:bg-white/15'
+                    project.xdebug_enabled ? 'bg-cyan-500' : 'bg-white/15'
                   )}
                 >
                   <span
@@ -332,8 +332,8 @@ export function ProjectDetail({ name }: { name: string }): React.JSX.Element {
                   />
                 </button>
               </div>
-              <p className="text-xs font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Xdebug</p>
-              <p className="mt-1 truncate text-sm font-semibold text-neutral-900 dark:text-white">
+              <p className="text-xs font-medium uppercase tracking-wide text-neutral-400">Xdebug</p>
+              <p className="mt-1 truncate text-sm font-semibold text-white">
                 {project.xdebug_enabled ? 'Enabled' : 'Off'}
               </p>
             </div>