From 25de5460ad6277c704e78a9aeefab04e9a9b4935 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 19 Mar 2024 17:08:06 -0700
Subject: [PATCH] Tweak checkbox and autocomplete styles

---
 src-web/components/ExportDataDialog.tsx   | 24 +++++++++++------------
 src-web/components/core/Checkbox.tsx      | 19 +-----------------
 src-web/components/core/Editor/Editor.css | 11 ++++++-----
 tailwind.config.cjs                       |  2 +-
 4 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/src-web/components/ExportDataDialog.tsx b/src-web/components/ExportDataDialog.tsx
index 4118ef25..1a3be623 100644
--- a/src-web/components/ExportDataDialog.tsx
+++ b/src-web/components/ExportDataDialog.tsx
@@ -50,7 +50,7 @@ export function ExportDataDialog({ onHide, activeWorkspace, workspaces: allWorks
     <VStack space={3} className="w-full mb-3 px-4">
       <table className="w-full mb-auto min-w-full max-w-full divide-y">
         <thead>
-          <tr onClick={handleToggleAll}>
+          <tr>
             <th className="w-6 min-w-0 py-2 text-left pl-1">
               <Checkbox
                 checked={allSelected}
@@ -60,28 +60,28 @@ export function ExportDataDialog({ onHide, activeWorkspace, workspaces: allWorks
                 onChange={handleToggleAll}
               />
             </th>
-            <th className="py-2 text-left pl-4">Workspace</th>
+            <th className="py-2 text-left pl-4" onClick={handleToggleAll}>
+              Workspace
+            </th>
           </tr>
         </thead>
         <tbody className="divide-y">
           {workspaces.map((w) => (
-            <tr
-              key={w.id}
-              onClick={() => {
-                setSelectedWorkspaces((prev) => ({ ...prev, [w.id]: !prev[w.id] }));
-              }}
-            >
+            <tr key={w.id}>
               <td className="min-w-0 py-1 pl-1">
                 <Checkbox
                   checked={selectedWorkspaces[w.id] ?? false}
                   title={w.name}
                   hideLabel
-                  onChange={() => {
-                    setSelectedWorkspaces((prev) => ({ ...prev, [w.id]: !prev[w.id] }));
-                  }}
+                  onChange={() =>
+                    setSelectedWorkspaces((prev) => ({ ...prev, [w.id]: !prev[w.id] }))
+                  }
                 />
               </td>
-              <td className="py-1 pl-4 text-gray-700 whitespace-nowrap overflow-x-auto hide-scrollbars">
+              <td
+                className="py-1 pl-4 text-gray-700 whitespace-nowrap overflow-x-auto hide-scrollbars"
+                onClick={() => setSelectedWorkspaces((prev) => ({ ...prev, [w.id]: !prev[w.id] }))}
+              >
                 {w.name} {w.id === activeWorkspace.id ? '(current workspace)' : ''}
               </td>
             </tr>
diff --git a/src-web/components/core/Checkbox.tsx b/src-web/components/core/Checkbox.tsx
index 0a781423..a7344b47 100644
--- a/src-web/components/core/Checkbox.tsx
+++ b/src-web/components/core/Checkbox.tsx
@@ -35,7 +35,7 @@ export function Checkbox({
           aria-hidden
           className={classNames(
             'opacity-50 appearance-none w-4 h-4 flex-shrink-0 border border-[currentColor]',
-            'rounded focus:border-focus focus:opacity-100 outline-none ring-0',
+            'rounded hocus:border-focus hocus:bg-focus/[5%] hocus:opacity-100 outline-none ring-0',
           )}
           type="checkbox"
           disabled={disabled}
@@ -45,23 +45,6 @@ export function Checkbox({
           <Icon size="sm" icon={indeterminate ? 'minus' : checked ? 'check' : 'empty'} />
         </div>
       </div>
-      {/*<button*/}
-      {/*  role="checkbox"*/}
-      {/*  aria-checked={checked ? 'true' : 'false'}*/}
-      {/*  disabled={disabled}*/}
-      {/*  onClick={handleClick}*/}
-      {/*  title={title}*/}
-      {/*  className={classNames(*/}
-      {/*    className,*/}
-      {/*    'flex-shrink-0 w-4 h-4 border border-gray-200 rounded',*/}
-      {/*    'focus:border-focus',*/}
-      {/*    'disabled:opacity-disabled',*/}
-      {/*    checked && 'bg-gray-200/10',*/}
-      {/*    // Remove focus style*/}
-      {/*    'outline-none',*/}
-      {/*  )}*/}
-      {/*>*/}
-      {/*</button>*/}
       {!hideLabel && title}
     </HStack>
   );
diff --git a/src-web/components/core/Editor/Editor.css b/src-web/components/core/Editor/Editor.css
index 7333dc89..442d15a9 100644
--- a/src-web/components/core/Editor/Editor.css
+++ b/src-web/components/core/Editor/Editor.css
@@ -185,18 +185,18 @@
 }
 
 .cm-tooltip.cm-tooltip-hover {
-  @apply shadow-lg bg-gray-200 rounded text-gray-700 border border-gray-500 z-50 pointer-events-auto text-xs;
+  @apply shadow-lg bg-gray-100 rounded text-gray-700 border border-gray-500 z-50 pointer-events-auto text-xs;
   @apply px-2 py-1;
 
   a {
-    @apply text-yellow-500 font-bold;
+    @apply text-gray-800;
 
     &:hover {
       @apply underline;
     }
 
     &::after {
-      @apply text-yellow-600 bg-yellow-600 h-3 w-3 ml-1;
+      @apply text-gray-800 bg-gray-800 h-3 w-3 ml-1;
       content: '';
       -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='black' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
       -webkit-mask-size: contain;
@@ -206,8 +206,9 @@
 }
 
 /* NOTE: Extra selector required to override default styles */
-.cm-tooltip.cm-tooltip-autocomplete {
-  @apply shadow-lg bg-gray-50 rounded text-gray-700 border border-gray-300 z-50 pointer-events-auto text-xs;
+.cm-tooltip.cm-tooltip-autocomplete,
+.cm-tooltip.cm-completionInfo {
+  @apply shadow-lg bg-gray-100 rounded text-gray-700 border border-gray-300 z-50 pointer-events-auto text-xs;
 
   .cm-completionIcon {
     @apply italic font-mono;
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index d30614ff..2a57e0cd 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -61,7 +61,7 @@ module.exports = {
     },
     colors: {
       selection: 'hsl(var(--color-violet-500) / 0.3)',
-      focus: 'hsl(var(--color-blue-500) / 0.6)',
+      focus: 'hsl(var(--color-blue-500) / 0.7)',
       invalid: 'hsl(var(--color-red-500))',
       highlight: 'hsl(var(--color-gray-300) / 0.35)',
       highlightSecondary: 'hsl(var(--color-gray-300) / 0.2)',