From e57556977e3ae963bd4f7899ef1428a5d74f259e Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Tue, 31 Oct 2023 11:44:22 -0500
Subject: [PATCH] Tweak button styles

---
 src/admin/DeleteButton.tsx                | 3 ++-
 src/auth/SignInForm.tsx                   | 6 +++++-
 src/components/ImageInput.tsx             | 4 ++--
 src/components/SubmitButtonWithStatus.tsx | 8 +++++---
 src/site/FooterAuth.tsx                   | 2 +-
 src/site/globals.css                      | 7 ++++---
 6 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/admin/DeleteButton.tsx b/src/admin/DeleteButton.tsx
index 4709a58e..99307aea 100644
--- a/src/admin/DeleteButton.tsx
+++ b/src/admin/DeleteButton.tsx
@@ -1,9 +1,10 @@
 import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
+import { FaTimes } from 'react-icons/fa';
 
 export default function DeleteButton () {
   return <SubmitButtonWithStatus
     title="Delete"
-    icon={<span className="inline-flex text-[18px]">×</span>}
+    icon={<FaTimes size={13} className="translate-y-[1px]" />}
   >
     Delete
   </SubmitButtonWithStatus>;
diff --git a/src/auth/SignInForm.tsx b/src/auth/SignInForm.tsx
index 0cca6c9f..c7f840b4 100644
--- a/src/auth/SignInForm.tsx
+++ b/src/auth/SignInForm.tsx
@@ -19,6 +19,10 @@ export default function SignInForm() {
     emailRef.current?.focus();
   }, []);
 
+  const isFormValid =
+    email.length > 0 &&
+    password.length > 0;
+
   return (
     <InfoBlock>
       <form action={action}>
@@ -44,7 +48,7 @@ export default function SignInForm() {
               onChange={setPassword}
             />
           </div>
-          <SubmitButtonWithStatus>
+          <SubmitButtonWithStatus disabled={!isFormValid}>
             Sign in
           </SubmitButtonWithStatus>
         </div>
diff --git a/src/components/ImageInput.tsx b/src/components/ImageInput.tsx
index 3c9d8ca9..f3b2c70f 100644
--- a/src/components/ImageInput.tsx
+++ b/src/components/ImageInput.tsx
@@ -4,9 +4,9 @@ import { blobToImage } from '@/utility/blob';
 import { useRef, useState } from 'react';
 import { CopyExif } from '@/lib/CopyExif';
 import { cc } from '@/utility/css';
-import { AiOutlineCloudUpload } from 'react-icons/ai';
 import Spinner from './Spinner';
 import { ACCEPTED_PHOTO_FILE_TYPES } from '@/photo';
+import { FiUploadCloud } from 'react-icons/fi';
 
 const INPUT_ID = 'file';
 
@@ -50,7 +50,7 @@ export default function ImageInput({
             <span className="w-4 inline-flex items-center">
               {loading
                 ? <Spinner color="text" />
-                : <AiOutlineCloudUpload
+                : <FiUploadCloud
                   size={18}
                   className="translate-y-[0.5px]"
                 />}
diff --git a/src/components/SubmitButtonWithStatus.tsx b/src/components/SubmitButtonWithStatus.tsx
index 52e767c5..bb9d661e 100644
--- a/src/components/SubmitButtonWithStatus.tsx
+++ b/src/components/SubmitButtonWithStatus.tsx
@@ -8,13 +8,13 @@ import { cc } from '@/utility/css';
 
 interface Props extends HTMLProps<HTMLButtonElement> {
   icon?: JSX.Element
-  naked?: boolean
+  styleAsLink?: boolean
 }
 
 export default function SubmitButtonWithStatus(props: Props) {
   const {
     icon,
-    naked,
+    styleAsLink,
     children,
     disabled,
     className,
@@ -31,15 +31,17 @@ export default function SubmitButtonWithStatus(props: Props) {
       className={cc(
         className,
         'inline-flex items-center gap-2',
-        naked && 'naked',
+        styleAsLink && 'link',
       )}
       {...buttonProps}
     >
       {(icon || pending) &&
         <span className={cc(
+          'h-4',
           'min-w-[1rem]',
           'inline-flex justify-center sm:justify-normal',
           '-mx-0.5',
+          'translate-y-[1px]',
         )}>
           {pending
             ? <Spinner size={14} />
diff --git a/src/site/FooterAuth.tsx b/src/site/FooterAuth.tsx
index 3bdef328..5a6fc589 100644
--- a/src/site/FooterAuth.tsx
+++ b/src/site/FooterAuth.tsx
@@ -39,7 +39,7 @@ export default function FooterAuth() {
                 <form action={signOutAction}>
                   <SubmitButtonWithStatus
                     className={LINK_STYLE}
-                    naked
+                    styleAsLink
                   >
                     Sign Out
                   </SubmitButtonWithStatus>
diff --git a/src/site/globals.css b/src/site/globals.css
index 9dc9a043..7a080dc2 100644
--- a/src/site/globals.css
+++ b/src/site/globals.css
@@ -72,10 +72,11 @@
       px-4
       text-base
       shadow-sm
-      disabled:bg-gray-100 dark:disabled:bg-gray-900 disabled:cursor-not-allowed
       active:bg-gray-100 dark:active:bg-gray-900
       hover:border-gray-300 dark:hover:border-gray-600
-      hover:disabled:border-gray-200
+      disabled:cursor-not-allowed
+      disabled:bg-gray-100 dark:disabled:bg-gray-900
+      disabled:border-gray-200 disabled:dark:border-gray-700
   }
   button.subtle, .button.subtle {
     @apply
@@ -97,7 +98,7 @@
     @apply
       text-medium
   }
-  button.naked {
+  button.link {
     @apply
       p-0 min-h-0
       border-none active:bg-transparent shadow-none