some more

mcnuttandrew · Oct 1, 2024 · ef0d90e · ef0d90e
1 parent 9628804
commit ef0d90e
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 34 deletions.
diff --git a/apps/color-buddy/src/components/ColorBall.svelte b/apps/color-buddy/src/components/ColorBall.svelte
@@ -84,35 +84,33 @@
       {/if}
     </span>
   </div>
-  <div class="flex justify-between w-full px-2 items-center z-10">
-    <div class="text-right">
-      {#if $configStore.showIssuesOnLeft}
-        <span>
-          {#if colorsToIssues[idx].length}
-            Issues
-          {:else}
-            &nbsp
+  <div class="text-right flex items-end flex-col justify-end w-16">
+    {#if $configStore.showIssuesOnLeft}
+      <span>
+        {#if colorsToIssues[idx].length}
+          Issues
+        {:else}
+          &nbsp
+        {/if}
+      </span>
+      <span class="flex flex-wrap flex-row-reverse min-h-4">
+        {#each colorsToIssues[idx] as check}
+          {#if !evalConfig[check.lintProgram.name]?.ignore}
+            <EvalResponse
+              lintResult={check}
+              positionAlongRightEdge={false}
+              customWord={typeToImg[check.lintProgram.group]}
+              customWordIsImg={true}
+            />
           {/if}
-        </span>
-        <span class="flex flex-wrap flex-row-reverse min-h-4">
-          {#each colorsToIssues[idx] as check}
-            {#if !evalConfig[check.lintProgram.name]?.ignore}
-              <EvalResponse
-                lintResult={check}
-                positionAlongRightEdge={false}
-                customWord={typeToImg[check.lintProgram.group]}
-                customWordIsImg={true}
-              />
-            {/if}
-          {/each}
-        </span>
-      {/if}
-      {#if stats[idx] && !statsTypeIsDelta && $configStore.evalDeltaDisplay !== "none"}
-        <div class=" text-black text-right text-xs whitespace-nowrap">
-          Contrast: {Math.round(stats[idx])}
-        </div>
-      {/if}
-    </div>
+        {/each}
+      </span>
+    {/if}
+    {#if stats[idx] && !statsTypeIsDelta && $configStore.evalDeltaDisplay !== "none"}
+      <div class=" text-black text-right text-xs whitespace-nowrap">
+        Contrast: {Math.round(stats[idx])}
+      </div>
+    {/if}
   </div>
 </div>
 

diff --git a/apps/color-buddy/src/content-modules/LeftPanel.svelte b/apps/color-buddy/src/content-modules/LeftPanel.svelte
@@ -36,6 +36,9 @@
     colors: Color[],
     metric: typeof $configStore.evalDeltaDisplay
   ) {
+    if (metric === "none") {
+      return [];
+    }
     // is contrast metric
     if (!new Set(deltaMetrics).has(metric as any)) {
       return colors.map((color) => color.contrast(bg, metric));

diff --git a/apps/color-buddy/src/linting/Eval.svelte b/apps/color-buddy/src/linting/Eval.svelte
@@ -87,7 +87,7 @@
     </button>
   </Tooltip>
   <div class="flex flex-col">
-    <div class="text-sm">Check Config</div>
+    <div class="text-xs">Check Config</div>
     <div class="flex">
       <div class="">
         <GlobalLintConfig />

diff --git a/apps/color-buddy/src/linting/EvalResponse.svelte b/apps/color-buddy/src/linting/EvalResponse.svelte
@@ -75,7 +75,7 @@
     });
   }
   function generateFixes() {
-    // proposeFix("ai", "LLMs");
+    proposeFix("ai", "LLMs");
     if (lintProgram && lintProgram.program.length) {
       proposeFix("monte", "Monte Carlo");
     }

diff --git a/apps/color-buddy/src/linting/LintDisplay.svelte b/apps/color-buddy/src/linting/LintDisplay.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
   import type { LintResult } from "color-buddy-palette-lint";
 
+  import Times from "virtual:icons/fa6-solid/xmark";
   import IgnoreIcon from "virtual:icons/fa6-solid/eye-slash";
+  import Triangle from "virtual:icons/fa6-solid/triangle-exclamation";
+  import Check from "virtual:icons/fa6-solid/check";
 
   import colorStore from "../stores/color-store";
 
@@ -49,20 +52,21 @@
           {#if lintResult?.passes}<div
               class="text-bf text-sm italic mr-2 text-green-500"
             >
-              Pass
+              <Check />
             </div>
           {/if}
           {#if !lintResult.passes && lintProgram.level === "error"}
-            <div class="text-bf text-sm italic mr-2 text-red-500">Fail</div>
+            <div class="text-bf text-sm italic mr-2 text-red-500">
+              <Times />
+            </div>
           {/if}
           {#if !lintResult.passes && lintProgram.level === "warning"}
             <div class="text-bf text-sm italic mr-2 text-yellow-400">
-              Warning
+              <Triangle />
             </div>
           {/if}
         {/if}
         <button
-          class:font-bold={lintResult.kind === "success" && !lintResult.passes}
           class:hover:bg-stone-300={lintResult.kind === "success"}
           on:click={() => {
             showMessage = !showMessage;