From 90535b53d46d403234334007c72521ff9b302533 Mon Sep 17 00:00:00 2001
From: Brandon Willett <bcwillett1@gmail.com>
Date: Sat, 10 Jul 2021 23:08:39 -0400
Subject: [PATCH] give a little indication of what those boxes do

---
 src/components/Checkbox.svelte | 10 +++++++---
 src/components/Icon.svelte     |  3 +++
 tailwind.config.js             |  4 ++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/Checkbox.svelte b/src/components/Checkbox.svelte
index 29a597e..5cacdaf 100644
--- a/src/components/Checkbox.svelte
+++ b/src/components/Checkbox.svelte
@@ -16,8 +16,6 @@
     ? "text-black bg-grey-300 border-grey-300 dark:text-white dark:bg-grey-500 dark:border-grey-500"
     : "text-sage-700 bg-white border-desk-300 dark:text-sage-300 dark:bg-grey-700 dark:border-grey-500";
 
-  $: opacity = (checked) ? "100" : "0";
-
   function handle_check_change() {
     if (object_store != null) {
       if (checked) {
@@ -35,9 +33,15 @@
 <label class="flex justify-start items-start">
   <div class="{colors} border-2 rounded w-5 h-5 flex flex-shrink-0 justify-center items-center">
     <input type="checkbox" class="opacity-0 absolute" bind:checked={checked} on:change={handle_check_change}>
-    <div class="pointer-events-none opacity-{opacity}">
+    {#if checked}
+    <div class="pointer-events-none">
       <Icon kind="check" size={16} width={3.0}/>
     </div>
+    {:else if tag_style}
+    <div class="pointer-events-none opacity-15">
+      <Icon kind="circle" size={12} width={3.0}/>
+    </div>
+    {/if}
   </div>
   <div class="select-none">{label}</div>
 </label>
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
index 43691ba..4b5bafb 100644
--- a/src/components/Icon.svelte
+++ b/src/components/Icon.svelte
@@ -101,6 +101,9 @@
     <line x1="7.75" y1="16.25" x2="5.6" y2="18.4" />
     <line x1="6" y1="12" x2="3" y2="12" />
     <line x1="7.75" y1="7.75" x2="5.6" y2="5.6" />
+  {:else if kind == "circle"}
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <circle cx="12" cy="12" r="9" />
   {:else}
     {console.log(`Unknown icon: ${kind}`)}
   {/if}
diff --git a/tailwind.config.js b/tailwind.config.js
index d6888d5..296e3a8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -24,6 +24,10 @@ module.exports = {
       'xl': '1.25rem',
       '2xl': '1.75rem',
     },
+    opacity: {
+      '0': '0',
+      '15': '.15',
+    },
     extend: {
       colors: {
         grey: {