Tweak button styles

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>;

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>

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]"
                 />}

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} />

src/site/FooterAuth.tsx

@@ -39,7 +39,7 @@ export default function FooterAuth() {
                 <form action={signOutAction}>
                   <SubmitButtonWithStatus
                     className={LINK_STYLE}
-                    naked
+                    styleAsLink
                   >
                     Sign Out
                   </SubmitButtonWithStatus>

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