From 238bd3df783b7ed04200492d0a06adaa28868a6a Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 21 Feb 2023 18:03:57 -0800
Subject: [PATCH] Refactor classname usage

---
 src-web/components/Button.tsx   | 10 +++++-----
 src-web/components/Dropdown.tsx |  4 +---
 src-web/components/Input.tsx    |  8 +++++---
 src-web/components/Stacks.tsx   | 14 ++++++++------
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src-web/components/Button.tsx b/src-web/components/Button.tsx
index 4911b2f7..c0a4f3a2 100644
--- a/src-web/components/Button.tsx
+++ b/src-web/components/Button.tsx
@@ -18,11 +18,11 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       className={classnames(
         className,
         'rounded-md text-white flex items-center',
-        { 'h-10 px-4': size === 'md' },
-        { 'h-8 px-3': size === 'sm' },
-        { 'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15]': color === undefined },
-        { 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80': color === 'primary' },
-        { 'bg-violet-500 hover:bg-violet-500/90 active:bg-violet-500/80': color === 'secondary' },
+        size === 'md' && 'h-10 px-4',
+        size === 'sm' && 'h-8 px-3',
+        color === undefined && 'hover:bg-gray-500/[0.1] active:bg-gray-500/[0.15]',
+        color === 'primary' && 'bg-blue-500 hover:bg-blue-500/90 active:bg-blue-500/80',
+        color === 'secondary' && 'bg-violet-500 hover:bg-violet-500/90 active:bg-violet-500/80',
       )}
       {...props}
     >
diff --git a/src-web/components/Dropdown.tsx b/src-web/components/Dropdown.tsx
index 0b6c4d87..5268adf8 100644
--- a/src-web/components/Dropdown.tsx
+++ b/src-web/components/Dropdown.tsx
@@ -300,9 +300,7 @@ const ItemInner = forwardRef<HTMLDivElement, ItemInnerProps>(function ItemInner(
       className={classnames(
         className,
         'outline-none px-2 py-1.5 flex items-center text-sm text-gray-700',
-        {
-          'focus:bg-gray-50 focus:text-gray-900 rounded': !noHover,
-        },
+        !noHover && 'focus:bg-gray-50 focus:text-gray-900 rounded',
       )}
       {...props}
     >
diff --git a/src-web/components/Input.tsx b/src-web/components/Input.tsx
index c94a464c..716d50c5 100644
--- a/src-web/components/Input.tsx
+++ b/src-web/components/Input.tsx
@@ -15,9 +15,11 @@ export function Input({ label, labelClassName, hideLabel, className, name, ...pr
     <VStack className="w-full">
       <label
         htmlFor={name}
-        className={classnames(labelClassName, 'font-semibold text-sm uppercase text-gray-700', {
-          'sr-only': hideLabel,
-        })}
+        className={classnames(
+          labelClassName,
+          'font-semibold text-sm uppercase text-gray-700',
+          hideLabel && 'sr-only',
+        )}
       >
         {label}
       </label>
diff --git a/src-web/components/Stacks.tsx b/src-web/components/Stacks.tsx
index 359f7971..3bb265a6 100644
--- a/src-web/components/Stacks.tsx
+++ b/src-web/components/Stacks.tsx
@@ -81,12 +81,14 @@ function BaseStack({ className, items, justify, as = 'div', ...props }: BaseStac
   const Component = as;
   return (
     <Component
-      className={classnames(className, 'flex flex-grow-0', {
-        'items-center': items === 'center',
-        'items-start': items === 'start',
-        'justify-start': justify === 'start',
-        'justify-end': justify === 'end',
-      })}
+      className={classnames(
+        className,
+        'flex flex-grow-0',
+        items === 'center' && 'items-center',
+        items === 'start' && 'items-start',
+        justify === 'start' && 'justify-start',
+        justify === 'end' && 'justify-end',
+      )}
       {...props}
     />
   );