From 89be504abcb74093342e1ead17d0b7bce5a44ba8 Mon Sep 17 00:00:00 2001
From: David Hill <iamdavidhill@gmail.com>
Date: Mon, 19 Jan 2026 15:43:50 +0000
Subject: [PATCH] update: align edit project dialog padding and avatar styles

---
 .../app/src/components/dialog-edit-project.tsx    | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/components/dialog-edit-project.tsx b/packages/app/src/components/dialog-edit-project.tsx
index 2f0f7db1f..8160821b2 100644
--- a/packages/app/src/components/dialog-edit-project.tsx
+++ b/packages/app/src/components/dialog-edit-project.tsx
@@ -78,7 +78,7 @@ export function DialogEditProject(props: { project: LocalProject }) {
 
   return (
     <Dialog title="Edit project">
-      <form onSubmit={handleSubmit} class="flex flex-col gap-6 px-2.5 pb-3">
+      <form onSubmit={handleSubmit} class="flex flex-col gap-6 p-6">
         <div class="flex flex-col gap-4">
           <TextField
             autofocus
@@ -145,15 +145,20 @@ export function DialogEditProject(props: { project: LocalProject }) {
                   {(color) => (
                     <button
                       type="button"
-                      class="relative size-8 rounded-md transition-all"
                       classList={{
-                        "ring-2 ring-offset-2 ring-offset-surface-base ring-text-interactive-base":
+                        "flex items-center justify-center size-10 p-0.5 rounded-lg overflow-hidden transition-colors cursor-default": true,
+                        "bg-transparent border-2 border-icon-strong-base hover:bg-surface-base-hover":
                           store.color === color,
+                        "bg-transparent border border-transparent hover:bg-surface-base-hover hover:border-border-weak-base":
+                          store.color !== color,
                       }}
-                      style={{ background: getAvatarColors(color).background }}
                       onClick={() => setStore("color", color)}
                     >
-                      <Avatar fallback={store.name || defaultName()} {...getAvatarColors(color)} class="size-full" />
+                      <Avatar
+                        fallback={store.name || defaultName()}
+                        {...getAvatarColors(color)}
+                        class="size-full rounded"
+                      />
                     </button>
                   )}
                 </For>