fix colors, move add color

mcnuttandrew · Sep 19, 2024 · e67fc88 · e67fc88
1 parent 0db93ad
commit e67fc88
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 28 deletions.
diff --git a/apps/color-buddy/src/App.svelte b/apps/color-buddy/src/App.svelte
@@ -116,7 +116,7 @@
         {/if}
       </div>
       <div class="flex flex-col" id="right-col">
-        <div class="flex bg-stone-500">
+        <div class="flex bg-stone-100">
           <Nav
             className=""
             tabs={currentPalTabs}

diff --git a/apps/color-buddy/src/components/Background.svelte b/apps/color-buddy/src/components/Background.svelte
@@ -11,7 +11,7 @@
   $: bgHex = bg.toHex();
 </script>
 
-<div class="flex flex-col">
+<div class="flex flex-col ml-1">
   <div class="text-sm">Background</div>
   <Tooltip top={"20px"}>
     <div slot="content" class="flex flex-col">
@@ -45,7 +45,7 @@
         ></div>
         {bgHex}
       </div>
-      <DownChev class="text-sm" />
+      <DownChev class="text-sm ml-2" />
     </button>
   </Tooltip>
 </div>
diff --git a/apps/color-buddy/src/components/Tooltip.svelte b/apps/color-buddy/src/components/Tooltip.svelte
@@ -11,7 +11,7 @@
   export let customClass: string = "";
   export let buttonName: string = "";
   export let targetBody: boolean = true;
-  export let bg: string = "bg-stone-100";
+  export let bg: string = "bg-white";
   import { buttonStyle } from "../lib/styles";
   let tooltipOpen: boolean = initiallyOpen;
 

diff --git a/apps/color-buddy/src/content-modules/MainColumn.svelte b/apps/color-buddy/src/content-modules/MainColumn.svelte
@@ -12,6 +12,7 @@
   import Controls from "../content-modules/Controls.svelte";
   import PalTags from "../controls/PalTags.svelte";
   import Zoom from "../controls/Zoom.svelte";
+  import Finger from "virtual:icons/fa6-solid/hand-pointer";
 
   import SetColorSpace from "../controls/SetColorSpace.svelte";
   import { cvdSim } from "color-buddy-palette";
@@ -23,7 +24,7 @@
 </script>
 
 <div class="flex flex-col h-full px-4 mt-10">
-  <div class="flex">
+  <div class="flex text-sm mb-2">
     <PalTypeConfig />
     <SetColorSpace
       colorSpace={currentPal.colorSpace}
@@ -42,15 +43,7 @@
     <PalTags />
     <SetSimulation />
   </div>
-  <div>
-    <button
-      class={`${buttonStyle} pl-0`}
-      on:click={() => configStore.setScatterplotMode("putting")}
-    >
-      Add color {#if $configStore.scatterplotMode === "putting"}(move mouse on
-        chart){/if}
-    </button>
-  </div>
+
   <ColorScatterPlot
     scatterPlotMode={$configStore.scatterplotMode}
     colorSpace={currentPal.colorSpace}
@@ -78,7 +71,16 @@
       />
       <span>Mark out-of-gamut colors with ⨂</span>
     </div>
-    <Zoom />
+    <div class="flex">
+      <Zoom />
+      <button
+        class={`${buttonStyle} text-sm flex items-center`}
+        on:click={() => configStore.setScatterplotMode("putting")}
+      >
+        <Finger class="text-xs mr-2" />
+        {#if $configStore.scatterplotMode === "putting"}Adding{:else}Add color{/if}
+      </button>
+    </div>
   </div>
 
   <div class="flex flex-col pl-2" style={`max-width: ${scatterSize + 110}px;`}>

diff --git a/apps/color-buddy/src/content-modules/Manage.svelte b/apps/color-buddy/src/content-modules/Manage.svelte
@@ -172,8 +172,8 @@
       onClose();
     }}
   >
-    <div class="bg-stone-300 p-4 text-xl font-bold">Palettes</div>
-    <div class="bg-stone-200 flex h-full py-2 px-4">
+    <div class="bg-stone-200 p-4 text-xl font-bold">Palettes</div>
+    <div class="bg-stone-100 flex h-full py-2 px-4">
       <div class="flex flex-col">
         <div class="text-sm uppercase font-bold">My Folders</div>
         <div class="flex">

diff --git a/apps/color-buddy/src/controls/PalTags.svelte b/apps/color-buddy/src/controls/PalTags.svelte
@@ -67,8 +67,8 @@
       let:toggle
       on:click={toggle}
     >
-      <div>{tags.join(", ")}</div>
-      <DownChev class="text-sm" />
+      <div>{tags.join(", ") || "None"}</div>
+      <DownChev class="ml-2 text-sm" />
     </button>
   </Tooltip>
 </div>
diff --git a/apps/color-buddy/src/controls/PalTypeConfig.svelte b/apps/color-buddy/src/controls/PalTypeConfig.svelte
@@ -30,13 +30,13 @@
       {/each}
     </div>
     <button
-      class={`${buttonStyle} flex`}
+      class={`${buttonStyle} flex items-center`}
       slot="target"
       let:toggle
       on:click={toggle}
     >
       <div>{titleCase(palType)}</div>
-      <DownChev class="text-sm" />
+      <DownChev class="ml-2 text-sm" />
     </button>
   </Tooltip>
 </div>
diff --git a/apps/color-buddy/src/controls/SetColorSpace.svelte b/apps/color-buddy/src/controls/SetColorSpace.svelte
@@ -70,12 +70,12 @@
     </div>
     <button
       slot="target"
-      class={`${buttonStyle} flex items-center`}
+      class={`${buttonStyle} flex items-center w-full justify-between`}
       let:toggle
       on:click={toggle}
     >
       {colorSpace.toUpperCase()}
-      <DownChev class="text-sm" />
+      <DownChev class="text-sm ml-2" />
     </button>
   </Tooltip>
 </div>
diff --git a/apps/color-buddy/src/controls/SetSimulation.svelte b/apps/color-buddy/src/controls/SetSimulation.svelte
@@ -4,6 +4,7 @@
   import Tooltip from "../components/Tooltip.svelte";
   import configStore from "../stores/config-store";
   import { simpleTooltipRowStyle } from "../lib/styles";
+  import { titleCase } from "../lib/utils";
   const options = [
     "none",
     "deuteranopia",
@@ -13,7 +14,7 @@
   ] as const;
 </script>
 
-<div class="w-full flex flex-col">
+<div class="flex flex-col ml-1">
   <div class="text-sm">CVD Simulation:</div>
   <Tooltip bg="bg-white">
     <div slot="content" class="flex flex-col">
@@ -34,10 +35,10 @@
       slot="target"
       let:toggle
       on:click={toggle}
-      class={`${buttonStyle} whitespace-nowrap flex items-center`}
+      class={`${buttonStyle} whitespace-nowrap flex items-center w-full justify-between`}
     >
-      {$configStore.colorSim}
-      <DownChev class="text-sm" />
+      {titleCase($configStore.colorSim)}
+      <DownChev class="ml-2 text-sm" />
     </button>
   </Tooltip>
 </div>
diff --git a/apps/color-buddy/src/scatterplot/ColorScatterPlot.svelte b/apps/color-buddy/src/scatterplot/ColorScatterPlot.svelte
@@ -320,7 +320,6 @@
     puttingPreview = false;
   }
   let svgContainer: any;
-  $: console.log($configStore.showGamutMarkers);
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->