stuff from the first ux issue

mcnuttandrew · Oct 4, 2024 · c01f8ed · c01f8ed
1 parent c97cc2f
commit c01f8ed
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 9 deletions.
diff --git a/apps/color-buddy/src/App.svelte b/apps/color-buddy/src/App.svelte
@@ -168,13 +168,28 @@
       >
         <div slot="menu" let:tab>
           {#if tab === "eval"}
-            <div
-              class="bg-red-700 text-white rounded-full w-5 h-5 text-xs text-center flex items-center justify-center mx-1 font-normal"
-            >
-              {$lintStore.currentChecks.filter(
-                (x) => x.kind === "success" && !x.passes
-              ).length}
-            </div>
+            <svg width={`${18}px`} height={`${18}px`} class="ml-1">
+              <circle
+                r={9}
+                cx={9}
+                cy={9}
+                fill={"rgb(185 28 28 / var(--tw-bg-opacity))"}
+              />
+              <!-- text aligned with center -->
+              <text
+                x={9}
+                y={13.5}
+                font-size={13}
+                fill="white"
+                text-anchor="middle"
+                font-weight="normal"
+                alignment-baseline="middle"
+              >
+                {$lintStore.currentChecks.filter(
+                  (x) => x.kind === "success" && !x.passes
+                ).length}
+              </text>
+            </svg>
           {/if}
         </div>
       </Nav>

diff --git a/apps/color-buddy/src/controls/Title.svelte b/apps/color-buddy/src/controls/Title.svelte
@@ -28,11 +28,23 @@
               on:submit|preventDefault={() =>
                 colorStore.setCurrentPalName(nameBind)}
             >
-              <input type="text" class={buttonStyle} bind:value={nameBind} />
+              <input
+                type="text"
+                class={buttonStyle}
+                bind:value={nameBind}
+                on:blur={colorStore.setCurrentPalName(nameBind)}
+              />
             </form>
           </div>
         </div>
-        <button slot="target" let:toggle on:click={toggle}>
+        <button
+          slot="target"
+          let:toggle
+          on:click={(x) => {
+            toggle();
+            nameBind = currentPal.name;
+          }}
+        >
           <Pencil class="text-sm mx-1" />
         </button>
       </Tooltip>