From f47f6918c063e09482cd620b1fce97643212ba65 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 15 Mar 2026 00:15:21 +0000
Subject: [PATCH 1/2] Improve treatment dialog and app responsiveness for
 narrow screens

- Treatment dialog: responsive 2-col grid on mobile for type buttons,
  min 44px touch targets, rounded inputs, safe-area padding
- Sheet: primary-colored save button, improved header with safe-area,
  narrower centered modal (480px) on desktop
- Header: primary-colored New treatment button
- Home: responsive padding (px-4 sm:px-6), section spacing
- Tabs: horizontal scroll on overflow, reduced gap on mobile
- Footer: responsive padding
- Treatment table: responsive cell padding, pagination layout

Co-authored-by: Michael Schultz <michaelwschultz@gmail.com>
---
 src/app/home/page.tsx                         |  10 +-
 src/components/home/Tabs.tsx                  |   2 +-
 src/components/home/header.tsx                |   2 +-
 src/components/home/homePage.tsx              |  12 +-
 .../sheetWithKeyboard/SheetWithKeyboard.css   |  11 +-
 src/components/home/treatmentModalContent.tsx | 192 ++++++++----------
 src/components/home/treatmentTable.tsx        |   8 +-
 src/components/shared/footer.tsx              |   2 +-
 src/lib/providers/sheet-provider.css          |  65 ++++--
 9 files changed, 161 insertions(+), 143 deletions(-)

diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index d73d8db..231fe9d 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -58,19 +58,19 @@ const Home = (): JSX.Element => {
   return (
     <ProtectRoute>
       <div className='h-full flex flex-col max-w-[80rem] w-full mx-auto'>
-        <header className='p-6'>
+        <header className='p-4 sm:p-6'>
           <Header version={version} />
         </header>
-        <main className='px-6'>
+        <main className='px-4 sm:px-6'>
           <Tabs initialValue={pathname}>
             <TabsItem label='home' value='/home'>
-              <section className='pt-10'>
+              <section className='pt-6 sm:pt-10'>
                 <HomePage />
               </section>
             </TabsItem>
 
             <TabsItem label='Profile' value='/profile'>
-              <section className='pt-10'>
+              <section className='pt-6 sm:pt-10'>
                 <ProfilePage />
               </section>
             </TabsItem>
@@ -82,7 +82,7 @@ const Home = (): JSX.Element => {
 
             {user?.isAdmin && (
               <TabsItem label='feedback' value='/feedback'>
-                <section className='pt-10'>
+                <section className='pt-6 sm:pt-10'>
                   <FeedbackPage />
                 </section>
               </TabsItem>
diff --git a/src/components/home/Tabs.tsx b/src/components/home/Tabs.tsx
index 697c6ae..f770658 100644
--- a/src/components/home/Tabs.tsx
+++ b/src/components/home/Tabs.tsx
@@ -64,7 +64,7 @@ export function Tabs({
       <div
         className={`border-b border-gray-200 dark:border-gray-700 ${className}`}
       >
-        <nav className='flex space-x-8'>
+        <nav className='flex gap-4 sm:gap-8 overflow-x-auto pb-px -mb-px'>
           {tabItems.map((item) => {
             const isActive = item.value === currentValue
 
diff --git a/src/components/home/header.tsx b/src/components/home/header.tsx
index 7c047ba..c78877a 100644
--- a/src/components/home/header.tsx
+++ b/src/components/home/header.tsx
@@ -51,7 +51,7 @@ const Header = (props: Props): JSX.Element | null => {
             <button
               type='button'
               onClick={handleOpenSheet}
-              className='bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1.5 rounded text-sm font-medium transition-colors'
+              className='bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg text-sm font-semibold shadow-sm transition-colors active:scale-[0.98]'
             >
               New treatment
             </button>
diff --git a/src/components/home/homePage.tsx b/src/components/home/homePage.tsx
index e5969ac..501293a 100644
--- a/src/components/home/homePage.tsx
+++ b/src/components/home/homePage.tsx
@@ -95,8 +95,8 @@ const HomePage = (): JSX.Element => {
         </>
       )} */}
 
-      <div className='flex justify-between items-center pb-4'>
-        <h4 className='text-xl font-semibold m-0'>Insights</h4>
+      <div className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 pb-4'>
+        <h4 className='text-lg sm:text-xl font-semibold m-0'>Insights</h4>
         <div className='flex items-center gap-2'>
           <IconFilter size={16} className='text-gray-500' />
           <select
@@ -122,15 +122,17 @@ const HomePage = (): JSX.Element => {
       <Stats filterYear={filterYear} />
       <div className='h-12' />
 
-      <h4 className='text-xl font-semibold'>Annual overview ({filterYear})</h4>
+      <h4 className='text-lg sm:text-xl font-semibold'>
+        Annual overview ({filterYear})
+      </h4>
       <p className='text-sm text-gray-600 mt-1'>
         Treatments are stacked by type (bleed, preventative, or prophy)
       </p>
       <Chart filterYear={filterYear} />
 
       <div className='h-12' />
-      <div className='flex justify-between items-center'>
-        <h4 className='text-xl font-semibold'>Treatments</h4>
+      <div className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1'>
+        <h4 className='text-lg sm:text-xl font-semibold'>Treatments</h4>
         <span className='text-sm text-gray-600' suppressHydrationWarning>
           {smallerThanSmall && 'Swipe →'}
         </span>
diff --git a/src/components/home/sheetWithKeyboard/SheetWithKeyboard.css b/src/components/home/sheetWithKeyboard/SheetWithKeyboard.css
index 6e3a465..3c3aada 100644
--- a/src/components/home/sheetWithKeyboard/SheetWithKeyboard.css
+++ b/src/components/home/sheetWithKeyboard/SheetWithKeyboard.css
@@ -37,17 +37,20 @@
   overflow: clip;
   overflow: hidden;
   background-color: white;
+  box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.05);
 }
 @media (min-width: 800px) {
   .SheetWithKeyboard-content {
     /* SELF-LAYOUT */
-    width: calc(800px - 1.25rem);
-    height: calc(100% - 2rem * 2);
+    width: min(calc(100vw - 2rem), 480px);
+    max-width: 480px;
+    height: auto;
+    max-height: calc(100vh - 2rem);
 
     /* APPEARANCE */
     box-shadow:
-      0 10px 15px -3px rgb(0 0 0 / 0.1),
-      0 4px 6px -4px rgb(0 0 0 / 0.1);
+      0 25px 50px -12px rgb(0 0 0 / 0.15),
+      0 0 0 1px rgb(0 0 0 / 0.05);
     border-radius: var(--sheetWithKeyboard-radius);
   }
 }
diff --git a/src/components/home/treatmentModalContent.tsx b/src/components/home/treatmentModalContent.tsx
index 232a0f7..41f31bb 100644
--- a/src/components/home/treatmentModalContent.tsx
+++ b/src/components/home/treatmentModalContent.tsx
@@ -96,17 +96,12 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
     // Track if we've already submitted to prevent double-submission
     const hasSubmittedRef = useRef(false)
 
-    // Reset counter and submission flag on mount
+    // Reset counter and submission flag when treatment/previousTreatment changes
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intentional - reset on treatment change
     useEffect(() => {
       renderCountRef.current = 0
       hasSubmittedRef.current = false
-      console.log('TreatmentModalContent mounted', {
-        treatment: treatment?.uid,
-        previousTreatment: previousTreatment?.uid,
-      })
       return () => {
-        console.log('TreatmentModalContent unmounting')
-        // Reset on unmount too, just in case
         hasSubmittedRef.current = false
       }
     }, [previousTreatment?.uid, treatment?.uid])
@@ -133,16 +128,11 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
     mutationsRef.current = mutations
 
     const [initialValues] = useState(() => {
-      const values = getInitialValues(
+      return getInitialValues(
         treatment,
         previousTreatment,
         user?.monoclonalAntibody
       )
-      console.log('TreatmentModalContent: Initial values calculated on mount', {
-        treatmentUid: treatment?.uid,
-        previousTreatmentUid: previousTreatment?.uid,
-      })
-      return values
     })
 
     // Store user in ref to avoid recreating handlers when user changes
@@ -253,14 +243,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
     // TODO(michael) Add formik validation
     // Memoize onSubmit with empty deps - use refs for all dependencies
     const onSubmit = useCallback((values: TreatmentValues) => {
-      console.log('onSubmit called', {
-        hasSubmitted: hasSubmittedRef.current,
-        treatmentUid: treatmentRef.current?.uid,
-      })
-      if (hasSubmittedRef.current) {
-        console.warn('onSubmit: Already submitted, ignoring')
-        return
-      }
+      if (hasSubmittedRef.current) return
       hasSubmittedRef.current = true
 
       if (treatmentRef.current) {
@@ -282,10 +265,6 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
     formikRef.current = formik
 
     const handleSubmit = useCallback(() => {
-      console.log('handleSubmit called', {
-        hasSubmitted: hasSubmittedRef.current,
-        formikValues: formikRef.current.values,
-      })
       track('Logged Treatment', {
         type: formikRef.current.values.type,
       })
@@ -294,68 +273,76 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
 
     useImperativeHandle(ref, () => ({ handleSubmit }), [handleSubmit])
 
+    const inputBase =
+      'w-full min-h-[44px] px-4 py-2.5 text-base border border-gray-200 rounded-xl bg-white shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 focus:ring-offset-1'
+
+    const typeButtonBase =
+      'rounded-xl text-sm font-medium transition-all active:scale-[0.98] min-h-[44px]'
+
     return (
-      <div className='p-6'>
-        <form onSubmit={formik.handleSubmit} className='space-y-4'>
-          {/* Treatment Type Buttons */}
-          <div className='grid grid-cols-3 gap-2'>
-            <button
-              type='button'
-              onClick={() => {
-                formik.setFieldValue('type', TreatmentTypeEnum.PROPHY)
-                // Clear antibody-specific fields when switching away from antibody
-                if (formik.values.type === TreatmentTypeEnum.ANTIBODY) {
-                  formik.setFieldValue('brand', '')
-                  formik.setFieldValue('cause', '')
-                  formik.setFieldValue('sites', '')
-                }
-              }}
-              className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                formik.values.type === TreatmentTypeEnum.PROPHY
-                  ? 'bg-yellow-100 text-yellow-800 border border-yellow-300'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-              }`}
-            >
-              Prophy
-            </button>
-            <button
-              type='button'
-              onClick={() => {
-                formik.setFieldValue('type', TreatmentTypeEnum.BLEED)
-                // Clear antibody-specific fields when switching away from antibody
-                if (formik.values.type === TreatmentTypeEnum.ANTIBODY) {
-                  formik.setFieldValue('brand', '')
-                  formik.setFieldValue('cause', '')
-                  formik.setFieldValue('sites', '')
-                }
-              }}
-              className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                formik.values.type === TreatmentTypeEnum.BLEED
-                  ? 'bg-green-100 text-green-800 border border-green-300'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-              }`}
-            >
-              Bleed
-            </button>
-            <button
-              type='button'
-              onClick={() => {
-                formik.setFieldValue('type', TreatmentTypeEnum.PREVENTATIVE)
-                // Clear antibody-specific fields when switching away from antibody
-                if (formik.values.type === TreatmentTypeEnum.ANTIBODY) {
-                  formik.setFieldValue('brand', '')
-                  formik.setFieldValue('cause', '')
-                  formik.setFieldValue('sites', '')
-                }
-              }}
-              className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
-                formik.values.type === TreatmentTypeEnum.PREVENTATIVE
-                  ? 'bg-red-100 text-red-800 border border-red-300'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-              }`}
-            >
-              Preventative
-            </button>
+      <div className='p-4 sm:p-6 pb-[max(1rem,env(safe-area-inset-bottom))]'>
+        <form onSubmit={formik.handleSubmit} className='space-y-5'>
+          {/* Treatment Type Buttons - responsive: 2 cols on mobile, 3 on larger */}
+          <div>
+            <p className='text-xs font-medium text-gray-500 uppercase tracking-wide mb-3'>
+              Treatment type
+            </p>
+            <div className='grid grid-cols-2 sm:grid-cols-3 gap-2 sm:gap-3'>
+              <button
+                type='button'
+                onClick={() => {
+                  formik.setFieldValue('type', TreatmentTypeEnum.PROPHY)
+                  if (formik.values.type === TreatmentTypeEnum.ANTIBODY) {
+                    formik.setFieldValue('brand', '')
+                    formik.setFieldValue('cause', '')
+                    formik.setFieldValue('sites', '')
+                  }
+                }}
+                className={`${typeButtonBase} ${
+                  formik.values.type === TreatmentTypeEnum.PROPHY
+                    ? 'bg-amber-100 text-amber-900 border-2 border-amber-300 shadow-sm'
+                    : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 hover:border-gray-300'
+                }`}
+              >
+                Prophy
+              </button>
+              <button
+                type='button'
+                onClick={() => {
+                  formik.setFieldValue('type', TreatmentTypeEnum.BLEED)
+                  if (formik.values.type === TreatmentTypeEnum.ANTIBODY) {
+                    formik.setFieldValue('brand', '')
+                    formik.setFieldValue('cause', '')
+                    formik.setFieldValue('sites', '')
+                  }
+                }}
+                className={`${typeButtonBase} ${
+                  formik.values.type === TreatmentTypeEnum.BLEED
+                    ? 'bg-emerald-100 text-emerald-900 border-2 border-emerald-300 shadow-sm'
+                    : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 hover:border-gray-300'
+                }`}
+              >
+                Bleed
+              </button>
+              <button
+                type='button'
+                onClick={() => {
+                  formik.setFieldValue('type', TreatmentTypeEnum.PREVENTATIVE)
+                  if (formik.values.type === TreatmentTypeEnum.ANTIBODY) {
+                    formik.setFieldValue('brand', '')
+                    formik.setFieldValue('cause', '')
+                    formik.setFieldValue('sites', '')
+                  }
+                }}
+                className={`${typeButtonBase} ${
+                  formik.values.type === TreatmentTypeEnum.PREVENTATIVE
+                    ? 'bg-primary-50 text-primary-800 border-2 border-primary-300 shadow-sm'
+                    : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 hover:border-gray-300'
+                }`}
+              >
+                Preventative
+              </button>
+            </div>
           </div>
 
           {user?.monoclonalAntibody && (
@@ -363,17 +350,16 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
               type='button'
               onClick={() => {
                 formik.setFieldValue('type', TreatmentTypeEnum.ANTIBODY)
-                // Set brand to monoclonal antibody and clear cause/sites when switching to antibody
                 formik.setFieldValue('brand', user?.monoclonalAntibody || '')
                 formik.setFieldValue('cause', '')
                 formik.setFieldValue('sites', '')
                 formik.setFieldValue('units', '0')
                 formik.setFieldValue('lot', '')
               }}
-              className={`w-full px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+              className={`w-full ${typeButtonBase} ${
                 formik.values.type === TreatmentTypeEnum.ANTIBODY
-                  ? 'bg-blue-100 text-blue-800 border border-blue-300'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  ? 'bg-sky-100 text-sky-900 border-2 border-sky-300 shadow-sm'
+                  : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 hover:border-gray-300'
               }`}
             >
               Monoclonal antibody
@@ -384,7 +370,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
           <div>
             <label
               htmlFor={dateId}
-              className='block text-sm font-medium text-gray-700 mb-1'
+              className='block text-sm font-medium text-gray-700 mb-1.5'
             >
               Date
             </label>
@@ -394,7 +380,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
               type='date'
               onChange={formik.handleChange}
               value={formik.values.date}
-              className='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent'
+              className={inputBase}
             />
           </div>
 
@@ -402,7 +388,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
           <div>
             <label
               htmlFor={brandId}
-              className='block text-sm font-medium text-gray-700 mb-1'
+              className='block text-sm font-medium text-gray-700 mb-1.5'
             >
               Medication
             </label>
@@ -418,7 +404,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
                   ? user?.monoclonalAntibody || ''
                   : formik.values.brand
               }
-              className='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed'
+              className={`${inputBase} disabled:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-70`}
             />
           </div>
 
@@ -428,7 +414,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
               <div>
                 <label
                   htmlFor={unitsId}
-                  className='block text-sm font-medium text-gray-700 mb-1'
+                  className='block text-sm font-medium text-gray-700 mb-1.5'
                 >
                   Units
                 </label>
@@ -440,9 +426,9 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
                     onChange={formik.handleChange}
                     placeholder='3000'
                     value={formik.values.units}
-                    className='w-full px-3 py-2 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent'
+                    className={`${inputBase} pr-14`}
                   />
-                  <span className='absolute right-3 top-1/2 transform -translate-y-1/2 text-sm text-gray-500'>
+                  <span className='absolute right-4 top-1/2 -translate-y-1/2 text-sm text-gray-400'>
                     units
                   </span>
                 </div>
@@ -452,7 +438,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
               <div>
                 <label
                   htmlFor={lotId}
-                  className='block text-sm font-medium text-gray-700 mb-1'
+                  className='block text-sm font-medium text-gray-700 mb-1.5'
                 >
                   Lot Number
                 </label>
@@ -463,7 +449,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
                   onChange={formik.handleChange}
                   placeholder='Lot number'
                   value={formik.values.lot}
-                  className='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent'
+                  className={inputBase}
                 />
               </div>
 
@@ -471,7 +457,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
               <div>
                 <label
                   htmlFor={sitesId}
-                  className='block text-sm font-medium text-gray-700 mb-1'
+                  className='block text-sm font-medium text-gray-700 mb-1.5'
                 >
                   Affected Areas
                 </label>
@@ -482,7 +468,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
                   onChange={formik.handleChange}
                   placeholder='Left ankle, right knee'
                   value={formik.values.sites}
-                  className='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent'
+                  className={inputBase}
                 />
               </div>
 
@@ -490,7 +476,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
               <div>
                 <label
                   htmlFor={causeId}
-                  className='block text-sm font-medium text-gray-700 mb-1'
+                  className='block text-sm font-medium text-gray-700 mb-1.5'
                 >
                   Cause of Bleed
                 </label>
@@ -501,7 +487,7 @@ export default forwardRef<{ handleSubmit: () => void }, TreatmentModalProps>(
                   onChange={formik.handleChange}
                   placeholder='Ran into a door'
                   value={formik.values.cause}
-                  className='w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent'
+                  className={inputBase}
                 />
               </div>
             </>
diff --git a/src/components/home/treatmentTable.tsx b/src/components/home/treatmentTable.tsx
index dd0e0ad..a19ec5d 100644
--- a/src/components/home/treatmentTable.tsx
+++ b/src/components/home/treatmentTable.tsx
@@ -248,7 +248,7 @@ export default function TreatmentTable(
   }
 
   return (
-    <div className='overflow-x-auto'>
+    <div className='overflow-x-auto rounded-lg border border-gray-200'>
       <table className='min-w-full divide-y divide-gray-200'>
         <thead className='bg-gray-50'>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -256,7 +256,7 @@ export default function TreatmentTable(
               {headerGroup.headers.map((header) => (
                 <th
                   key={header.id}
-                  className='px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100'
+                  className='px-4 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100'
                   onClick={header.column.getToggleSortingHandler()}
                 >
                   <div className='flex items-center gap-1'>
@@ -301,7 +301,7 @@ export default function TreatmentTable(
                 {row.getVisibleCells().map((cell) => (
                   <td
                     key={cell.id}
-                    className='px-6 py-4 whitespace-nowrap text-sm text-gray-900'
+                    className='px-4 sm:px-6 py-3 sm:py-4 whitespace-nowrap text-sm text-gray-900'
                   >
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </td>
@@ -314,7 +314,7 @@ export default function TreatmentTable(
 
       {/* Pagination */}
       {filteredTreatments.length > 25 && (
-        <div className='flex items-center justify-between px-6 py-3 bg-white border-t border-gray-200'>
+        <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 sm:px-6 py-3 bg-white border-t border-gray-200'>
           <div className='flex items-center gap-2'>
             <button
               type='button'
diff --git a/src/components/shared/footer.tsx b/src/components/shared/footer.tsx
index bebea68..79bac83 100644
--- a/src/components/shared/footer.tsx
+++ b/src/components/shared/footer.tsx
@@ -27,7 +27,7 @@ export default function Footer(): JSX.Element {
   }
 
   return (
-    <footer className='px-10 py-10'>
+    <footer className='px-4 sm:px-10 py-8 sm:py-10'>
       <hr className='border-gray-200' />
       <div className='h-8' />
       <div className='flex flex-col sm:flex-row gap-4'>
diff --git a/src/lib/providers/sheet-provider.css b/src/lib/providers/sheet-provider.css
index d822d03..de95135 100644
--- a/src/lib/providers/sheet-provider.css
+++ b/src/lib/providers/sheet-provider.css
@@ -9,23 +9,28 @@
 
 .SheetProvider-header {
   /* SELF-LAYOUT */
-  height: 57px;
+  min-height: 56px;
+  padding-top: env(safe-area-inset-top, 0);
+  padding-inline: 1rem;
+  padding-bottom: 0.75rem;
 
   /* APPEARANCE */
   border-bottom: 1px solid rgb(229, 231, 235);
+  background: white;
 
   /* INNER-LAYOUT */
   position: relative;
-  padding-inline: 1.25rem;
   display: grid;
-  grid-template-columns: 80px 1fr 80px;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
   gap: 0.75rem;
 }
 @media (min-width: 800px) {
   .SheetProvider-header {
-    /* SELF-LAYOUT */
-    height: 53px;
+    padding-inline: 1.25rem;
+    min-height: 52px;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 }
 
@@ -34,8 +39,8 @@
   justify-self: start;
 
   /* APPEARANCE */
-  border-radius: 6px;
-  outline-offset: 5px;
+  border-radius: 8px;
+  outline-offset: 2px;
   border: none;
   appearance: none;
   background-color: transparent;
@@ -44,12 +49,19 @@
   cursor: pointer;
 
   /* INNER-LAYOUT */
-  padding: 0;
+  padding: 0.5rem 0.25rem;
 
   /* TEXT */
-  font-size: 17.25px;
+  font-size: 16px;
   font-weight: 500;
-  color: rgb(52, 159, 13);
+  color: rgb(107, 114, 128);
+}
+.SheetProvider-cancelButton:hover {
+  color: rgb(75, 85, 99);
+}
+.SheetProvider-cancelButton:focus-visible {
+  outline: 2px solid rgb(255, 6, 44);
+  outline-offset: 2px;
 }
 
 .SheetProvider-title {
@@ -58,9 +70,14 @@
   justify-self: center;
 
   /* TEXT */
-  font-size: 17.25px;
-  font-weight: 620;
-  color: rgb(31, 41, 55);
+  font-size: 17px;
+  font-weight: 600;
+  color: rgb(17, 24, 39);
+}
+@media (min-width: 800px) {
+  .SheetProvider-title {
+    font-size: 18px;
+  }
 }
 
 .SheetProvider-saveButton {
@@ -68,22 +85,32 @@
   justify-self: end;
 
   /* APPEARANCE */
-  border-radius: 6px;
-  outline-offset: 5px;
+  border-radius: 8px;
+  outline-offset: 2px;
   border: none;
   appearance: none;
-  background-color: transparent;
+  background-color: rgb(255, 6, 44);
 
   /* INTERACTIVITY */
   cursor: pointer;
 
   /* INNER-LAYOUT */
-  padding: 0;
+  padding: 0.5rem 1rem;
 
   /* TEXT */
-  font-size: 17.25px;
+  font-size: 16px;
   font-weight: 600;
-  color: rgb(52, 159, 13);
+  color: white;
+}
+.SheetProvider-saveButton:hover {
+  background-color: rgb(220, 38, 60);
+}
+.SheetProvider-saveButton:active {
+  transform: scale(0.98);
+}
+.SheetProvider-saveButton:focus-visible {
+  outline: 2px solid rgb(255, 6, 44);
+  outline-offset: 2px;
 }
 
 .SheetProvider-scrollView {

From 92558251cf4a6b71c3bbc9006accf661441512ab Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sun, 15 Mar 2026 03:28:35 +0000
Subject: [PATCH 2/2] Fix build: replace JSX.Element with ReactElement, use
 Node 24.x

- Replace JSX.Element with React.ReactElement across all components to fix
  'Cannot find namespace JSX' TypeScript error in React 19/Next.js 16
- Update engines.node from 22.21.x to 24.x per request
- Add .nvmrc with Node 24 for Vercel and local dev consistency

Co-authored-by: Michael Schultz <michaelwschultz@gmail.com>
---
 .nvmrc                                      | 1 +
 package.json                                | 2 +-
 src/app/about/page.tsx                      | 3 ++-
 src/app/changelog/[slug]/page.tsx           | 3 ++-
 src/app/changelog/page.tsx                  | 3 ++-
 src/app/emergency/[alertId]/page.tsx        | 4 ++--
 src/app/emergency/print/page.tsx            | 3 ++-
 src/app/head.tsx                            | 4 +++-
 src/app/home/page.tsx                       | 4 ++--
 src/app/not-found.tsx                       | 4 ++--
 src/app/page.tsx                            | 3 ++-
 src/components/blog/blogFooter.tsx          | 4 ++--
 src/components/emergency/emergencyInfo.tsx  | 2 +-
 src/components/home/Tabs.tsx                | 8 ++++----
 src/components/home/chart.tsx               | 3 ++-
 src/components/home/emergencyCard.tsx       | 4 ++--
 src/components/home/feedbackModal.tsx       | 3 ++-
 src/components/home/header.tsx              | 4 ++--
 src/components/home/homePage.tsx            | 3 ++-
 src/components/home/profilePage.tsx         | 4 ++--
 src/components/home/settingsForm.tsx        | 4 ++--
 src/components/home/statCard.tsx            | 4 +++-
 src/components/home/stats.tsx               | 4 ++--
 src/components/home/treatmentTable.tsx      | 3 ++-
 src/components/landing/descriptionCards.tsx | 4 +++-
 src/components/shared/emergencySnippet.tsx  | 4 ++--
 src/components/shared/footer.tsx            | 4 ++--
 src/components/shared/staticHeader.tsx      | 4 ++--
 src/lib/contexts/ThemeContext.tsx           | 4 +++-
 29 files changed, 61 insertions(+), 43 deletions(-)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..a45fd52
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+24
diff --git a/package.json b/package.json
index ecb76c3..3768fc1 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "seed": "NEXT_PUBLIC_USE_EMULATORS=true npx tsx src/lib/seed.ts"
   },
   "engines": {
-    "node": "22.21.x"
+    "node": "24.x"
   },
   "dependencies": {
     "@silk-hq/components": "^0.10.0",
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 4d5b7a7..f7087a7 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,8 +1,9 @@
 import Image from 'next/image'
+import type { ReactElement } from 'react'
 import Footer from '@/components/shared/footer'
 import StaticHeader from '@/components/shared/staticHeader'
 
-const About = (): JSX.Element => {
+const About = (): ReactElement => {
   return (
     <div className='min-h-screen flex flex-col max-w-[850pt] w-full mx-auto'>
       <StaticHeader />
diff --git a/src/app/changelog/[slug]/page.tsx b/src/app/changelog/[slug]/page.tsx
index 50c1721..aea5aec 100644
--- a/src/app/changelog/[slug]/page.tsx
+++ b/src/app/changelog/[slug]/page.tsx
@@ -1,4 +1,5 @@
 import { notFound } from 'next/navigation'
+import type { ReactElement } from 'react'
 import BlogFooter from '@/components/blog/blogFooter'
 import PostFooter from '@/components/blog/postFooter'
 import Footer from '@/components/shared/footer'
@@ -10,7 +11,7 @@ interface PageProps {
   }>
 }
 
-const ChangelogPost = async ({ params }: PageProps): Promise<JSX.Element> => {
+const ChangelogPost = async ({ params }: PageProps): Promise<ReactElement> => {
   const { slug } = await params
 
   // For now, redirect to 404 for unknown slugs
diff --git a/src/app/changelog/page.tsx b/src/app/changelog/page.tsx
index 89154bd..d1506db 100644
--- a/src/app/changelog/page.tsx
+++ b/src/app/changelog/page.tsx
@@ -1,12 +1,13 @@
 'use client'
 
 import Image from 'next/image'
+import type { ReactElement } from 'react'
 import BlogFooter from '@/components/blog/blogFooter'
 import PostFooter from '@/components/blog/postFooter'
 import Footer from '@/components/shared/footer'
 import StaticHeader from '@/components/shared/staticHeader'
 
-const Changelog = (): JSX.Element => {
+const Changelog = (): ReactElement => {
   return (
     <div className='min-h-screen flex flex-col max-w-[850pt] w-full mx-auto'>
       <StaticHeader />
diff --git a/src/app/emergency/[alertId]/page.tsx b/src/app/emergency/[alertId]/page.tsx
index a4edec3..afdd4fd 100644
--- a/src/app/emergency/[alertId]/page.tsx
+++ b/src/app/emergency/[alertId]/page.tsx
@@ -2,12 +2,12 @@
 
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { type ReactElement, useEffect, useState } from 'react'
 import EmergencyInfo from '@/components/emergency/emergencyInfo'
 import Footer from '@/components/shared/footer'
 import { useEmergencyUserQuery } from '@/lib/hooks/useEmergencyUserQuery'
 
-const Emergency = (): JSX.Element => {
+const Emergency = (): ReactElement => {
   const [mounted, setMounted] = useState(false)
   const params = useParams()
   const alertId = params.alertId as string
diff --git a/src/app/emergency/print/page.tsx b/src/app/emergency/print/page.tsx
index 903b70a..bd656c0 100644
--- a/src/app/emergency/print/page.tsx
+++ b/src/app/emergency/print/page.tsx
@@ -1,9 +1,10 @@
 'use client'
 
+import type { ReactElement } from 'react'
 import EmergencyCard from '@/components/home/emergencyCard'
 import Logo from '@/components/shared/logo'
 
-export default function Print(): JSX.Element {
+export default function Print(): ReactElement {
   // TODO(michael) Could improve this by determining the user on the server side
   // and redirecting before hitting this page. Similar to how Lee Robinson explains
   // it here https://www.youtube.com/watch?v=NSR_Y_rm_zU
diff --git a/src/app/head.tsx b/src/app/head.tsx
index 3ac37f6..c1d77e3 100644
--- a/src/app/head.tsx
+++ b/src/app/head.tsx
@@ -1,3 +1,5 @@
+import type { ReactElement } from 'react'
+
 const googleRichResultsSchema = {
   '@context': 'https://schema.org',
   '@type': 'Organization',
@@ -5,7 +7,7 @@ const googleRichResultsSchema = {
   logo: 'https://hemolog.com/images/hemolog-logo.png',
 }
 
-export default function Head(): JSX.Element {
+export default function Head(): ReactElement {
   return (
     <script
       type='application/ld+json'
diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx
index 231fe9d..35b42fe 100644
--- a/src/app/home/page.tsx
+++ b/src/app/home/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { usePathname } from 'next/navigation'
-import { useEffect } from 'react'
+import { type ReactElement, useEffect } from 'react'
 import FeedbackPage from '@/components/home/feedbackPage'
 
 import Header from '@/components/home/header'
@@ -13,7 +13,7 @@ import { withAuth } from '@/components/shared/withAuth'
 import { ProtectRoute, useAuth } from '@/lib/auth'
 import { track } from '@/lib/helpers'
 
-const Home = (): JSX.Element => {
+const Home = (): ReactElement => {
   // TODO(michael) add welcome message by checking to see if this is the users
   // first time logging in. Still not sure how to accomplish this.
   //
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 5056c81..79b1a9e 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,12 +1,12 @@
 'use client'
 
 import { useRouter } from 'next/navigation'
-import { useEffect } from 'react'
+import { type ReactElement, useEffect } from 'react'
 import LoadingScreen from '@/components/shared/loadingScreen'
 import { withAuth } from '@/components/shared/withAuth'
 import { useAuth } from '@/lib/auth'
 
-function Custom404(): JSX.Element {
+function Custom404(): ReactElement {
   const router = useRouter()
   const { user, loading } = useAuth()
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 168281a..a01377f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,10 +1,11 @@
 import Image from 'next/image'
 import Link from 'next/link'
+import type { ReactElement } from 'react'
 import DescriptionCards from '@/components/landing/descriptionCards'
 import Footer from '@/components/shared/footer'
 import StaticHeader from '@/components/shared/staticHeader'
 
-export default function Landing(): JSX.Element {
+export default function Landing(): ReactElement {
   return (
     <div className='min-h-screen flex flex-col max-w-[850pt] w-full mx-auto relative'>
       <StaticHeader />
diff --git a/src/components/blog/blogFooter.tsx b/src/components/blog/blogFooter.tsx
index 0978948..06ed063 100644
--- a/src/components/blog/blogFooter.tsx
+++ b/src/components/blog/blogFooter.tsx
@@ -2,11 +2,11 @@
 
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { type ReactElement, useEffect, useState } from 'react'
 
 import { useAuth } from '@/lib/auth'
 
-export default function BlogFooter(): JSX.Element {
+export default function BlogFooter(): ReactElement {
   const { user, loading } = useAuth()
   const router = useRouter()
   const [mounted, setMounted] = useState(false)
diff --git a/src/components/emergency/emergencyInfo.tsx b/src/components/emergency/emergencyInfo.tsx
index f991d80..6be93fd 100644
--- a/src/components/emergency/emergencyInfo.tsx
+++ b/src/components/emergency/emergencyInfo.tsx
@@ -7,7 +7,7 @@ interface Props {
   person: Person
 }
 
-export default function EmergencyInfo(props: Props): JSX.Element {
+export default function EmergencyInfo(props: Props): React.ReactElement {
   const { person } = props
   const { user } = useAuth()
   const [smallerThanSmall, setSmallerThanSmall] = React.useState(false)
diff --git a/src/components/home/Tabs.tsx b/src/components/home/Tabs.tsx
index f770658..932bd29 100644
--- a/src/components/home/Tabs.tsx
+++ b/src/components/home/Tabs.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { type ReactElement, useState } from 'react'
 
 export interface TabsProps {
   initialValue?: string
@@ -14,7 +14,7 @@ export interface TabsItemProps {
   children: React.ReactNode
 }
 
-export function TabsItem({ children }: TabsItemProps): JSX.Element {
+export function TabsItem({ children }: TabsItemProps): ReactElement {
   return <>{children}</>
 }
 
@@ -24,7 +24,7 @@ export function Tabs({
   onChange,
   children,
   className = '',
-}: TabsProps): JSX.Element {
+}: TabsProps): ReactElement {
   const [activeTab, setActiveTab] = useState<string>(initialValue || '')
 
   const currentValue = value !== undefined ? value : activeTab
@@ -103,6 +103,6 @@ export interface TabsContentProps {
 export function TabsContent({
   children,
   className = '',
-}: TabsContentProps): JSX.Element {
+}: TabsContentProps): ReactElement {
   return <div className={`py-6 ${className}`}>{children}</div>
 }
diff --git a/src/components/home/chart.tsx b/src/components/home/chart.tsx
index 2c2aac0..29bd94d 100644
--- a/src/components/home/chart.tsx
+++ b/src/components/home/chart.tsx
@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react'
 import {
   Bar,
   BarChart,
@@ -22,7 +23,7 @@ interface ChartProps {
   filterYear: string
 }
 
-export default function Chart(props: ChartProps): JSX.Element | null {
+export default function Chart(props: ChartProps): ReactElement | null {
   const { filterYear } = props
   const { data } = useTreatmentsQuery()
 
diff --git a/src/components/home/emergencyCard.tsx b/src/components/home/emergencyCard.tsx
index bce2124..3631dba 100644
--- a/src/components/home/emergencyCard.tsx
+++ b/src/components/home/emergencyCard.tsx
@@ -1,6 +1,6 @@
 'use client'
 import Link from 'next/link'
-import React from 'react'
+import React, { type ReactElement } from 'react'
 import QRCode from 'react-qr-code'
 
 import { useAuth } from '@/lib/auth'
@@ -10,7 +10,7 @@ interface Props {
   forPrint?: boolean
 }
 
-export default function EmergencyCard({ forPrint }: Props): JSX.Element {
+export default function EmergencyCard({ forPrint }: Props): ReactElement {
   const { user } = useAuth()
   const { person } = useUserQuery(user?.uid)
 
diff --git a/src/components/home/feedbackModal.tsx b/src/components/home/feedbackModal.tsx
index a4e2287..88ba703 100644
--- a/src/components/home/feedbackModal.tsx
+++ b/src/components/home/feedbackModal.tsx
@@ -1,5 +1,6 @@
 import { Sheet } from '@silk-hq/components'
 import { useFormik } from 'formik'
+import type React from 'react'
 import toast from 'react-hot-toast'
 
 import { useAuth } from '@/lib/auth'
@@ -18,7 +19,7 @@ interface FeedbackModalProps {
 
 export default function FeedbackModal(
   props: FeedbackModalProps
-): JSX.Element | null {
+): React.ReactElement | null {
   const { visible, setVisible } = props
   const { user } = useAuth()
 
diff --git a/src/components/home/header.tsx b/src/components/home/header.tsx
index c78877a..0741ac6 100644
--- a/src/components/home/header.tsx
+++ b/src/components/home/header.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { type ReactElement } from 'react'
 import Logo from '@/components/shared/logo'
 import { useAuth } from '@/lib/auth'
 import { useTreatmentSheet } from '@/lib/hooks/useTreatmentSheet'
@@ -10,7 +10,7 @@ interface Props {
   version?: string
 }
 
-const Header = (props: Props): JSX.Element | null => {
+const Header = (props: Props): ReactElement | null => {
   const { version } = props
   const { user, signout } = useAuth()
   const { data: treatments } = useTreatmentsQuery()
diff --git a/src/components/home/homePage.tsx b/src/components/home/homePage.tsx
index 501293a..5755a15 100644
--- a/src/components/home/homePage.tsx
+++ b/src/components/home/homePage.tsx
@@ -3,6 +3,7 @@
 import { IconFilter } from '@tabler/icons-react'
 import { getYear } from 'date-fns'
 import dynamic from 'next/dynamic'
+import type { ReactElement } from 'react'
 import React, { useState } from 'react'
 import Stats from '@/components/home/stats'
 import TreatmentTable from '@/components/home/treatmentTable'
@@ -13,7 +14,7 @@ const Chart = dynamic(() => import('@/components/home/chart'), {
   ssr: false,
 })
 
-const HomePage = (): JSX.Element => {
+const HomePage = (): ReactElement => {
   const [smallerThanSmall, setSmallerThanSmall] = useState(false)
 
   React.useEffect(() => {
diff --git a/src/components/home/profilePage.tsx b/src/components/home/profilePage.tsx
index f7cb95b..189d9a9 100644
--- a/src/components/home/profilePage.tsx
+++ b/src/components/home/profilePage.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useRouter } from 'next/navigation'
-import { useCallback, useEffect, useState } from 'react'
+import { type ReactElement, useCallback, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
 import EmergencyCard from '@/components/home/emergencyCard'
 import SettingsForm from '@/components/home/settingsForm'
@@ -11,7 +11,7 @@ import { generateUniqueString, track } from '@/lib/helpers'
 import { useUserMutations } from '@/lib/hooks/useUserMutations'
 import { useUserQuery } from '@/lib/hooks/useUserQuery'
 
-const ProfilePage = (): JSX.Element => {
+const ProfilePage = (): ReactElement => {
   const { user, signout } = useAuth()
   const { person } = useUserQuery(user?.uid)
   const { updateUser } = useUserMutations()
diff --git a/src/components/home/settingsForm.tsx b/src/components/home/settingsForm.tsx
index c062029..33de919 100644
--- a/src/components/home/settingsForm.tsx
+++ b/src/components/home/settingsForm.tsx
@@ -1,12 +1,12 @@
 import { useFormik } from 'formik'
-import { useState } from 'react'
+import { type ReactElement, useState } from 'react'
 
 import { useAuth } from '@/lib/auth'
 import { track } from '@/lib/helpers'
 import { useUserMutations } from '@/lib/hooks/useUserMutations'
 import { useUserQuery } from '@/lib/hooks/useUserQuery'
 
-const SettingsForm = (): JSX.Element => {
+const SettingsForm = (): ReactElement => {
   const { user } = useAuth()
   const { person } = useUserQuery(user?.uid)
   const { updateUser } = useUserMutations()
diff --git a/src/components/home/statCard.tsx b/src/components/home/statCard.tsx
index 23e4892..a97df61 100644
--- a/src/components/home/statCard.tsx
+++ b/src/components/home/statCard.tsx
@@ -7,7 +7,9 @@ interface Props {
   style?: React.CSSProperties
 }
 
-export default function StatCard(props: Props): JSX.Element {
+import type { ReactElement } from 'react'
+
+export default function StatCard(props: Props): ReactElement {
   const {
     value,
     label,
diff --git a/src/components/home/stats.tsx b/src/components/home/stats.tsx
index b69b84b..5f4ec07 100644
--- a/src/components/home/stats.tsx
+++ b/src/components/home/stats.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { type ReactElement, useState } from 'react'
 import _ from 'underscore'
 import FeedbackModal from '@/components/home/feedbackModal'
 import StatCard from '@/components/home/statCard'
@@ -29,7 +29,7 @@ interface StatsProps {
   filterYear: string
 }
 
-export default function Stats(props: StatsProps): JSX.Element {
+export default function Stats(props: StatsProps): ReactElement {
   const { filterYear } = props
   const { data, isLoading, isError, error } = useTreatmentsQuery()
 
diff --git a/src/components/home/treatmentTable.tsx b/src/components/home/treatmentTable.tsx
index a19ec5d..2ce9ad7 100644
--- a/src/components/home/treatmentTable.tsx
+++ b/src/components/home/treatmentTable.tsx
@@ -12,6 +12,7 @@ import {
   useReactTable,
 } from '@tanstack/react-table'
 import { format, parseISO } from 'date-fns'
+import type { ReactElement } from 'react'
 import { useMemo, useState } from 'react'
 import toast from 'react-hot-toast'
 import { useAuth } from '@/lib/auth'
@@ -30,7 +31,7 @@ interface TreatmentTableProps {
 
 export default function TreatmentTable(
   props: TreatmentTableProps
-): JSX.Element {
+): ReactElement {
   const { limit, uid, filterYear } = props
   const {
     data: treatments,
diff --git a/src/components/landing/descriptionCards.tsx b/src/components/landing/descriptionCards.tsx
index 338318d..31e4652 100644
--- a/src/components/landing/descriptionCards.tsx
+++ b/src/components/landing/descriptionCards.tsx
@@ -1,6 +1,8 @@
 import Image from 'next/image'
 
-export default function DescrtipionCards(): JSX.Element {
+import type { ReactElement } from 'react'
+
+export default function DescrtipionCards(): ReactElement {
   return (
     <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
       <div className='bg-white rounded-lg border border-gray-200 p-6 shadow-sm'>
diff --git a/src/components/shared/emergencySnippet.tsx b/src/components/shared/emergencySnippet.tsx
index 7fd0520..77045fb 100644
--- a/src/components/shared/emergencySnippet.tsx
+++ b/src/components/shared/emergencySnippet.tsx
@@ -1,6 +1,6 @@
 import { IconCopy } from '@tabler/icons-react'
 import type React from 'react'
-import { useEffect, useState } from 'react'
+import { type ReactElement, useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
 
 interface Props {
@@ -8,7 +8,7 @@ interface Props {
   style?: React.CSSProperties
 }
 
-export default function EmergencySnippet(props: Props): JSX.Element {
+export default function EmergencySnippet(props: Props): ReactElement {
   const { alertId = 'example', style } = props
   const [domain, setDomain] = useState('hemolog.com')
 
diff --git a/src/components/shared/footer.tsx b/src/components/shared/footer.tsx
index 79bac83..6064e7d 100644
--- a/src/components/shared/footer.tsx
+++ b/src/components/shared/footer.tsx
@@ -2,12 +2,12 @@
 
 // All Geist UI components have been migrated to Tailwind
 
-import { useEffect, useState } from 'react'
+import { type ReactElement, useEffect, useState } from 'react'
 import EmergencySnippet from '@/components/shared/emergencySnippet'
 import { useAuth } from '@/lib/auth'
 import { CONFIG } from '@/lib/helpers'
 
-export default function Footer(): JSX.Element {
+export default function Footer(): ReactElement {
   const { user, loading } = useAuth()
   const [mounted, setMounted] = useState(false)
 
diff --git a/src/components/shared/staticHeader.tsx b/src/components/shared/staticHeader.tsx
index 7d3ecb0..f1b348e 100644
--- a/src/components/shared/staticHeader.tsx
+++ b/src/components/shared/staticHeader.tsx
@@ -1,11 +1,11 @@
 'use client'
 
 import { useRouter } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { type ReactElement, useEffect, useState } from 'react'
 import Logo from '@/components/shared/logo'
 import { useAuth } from '@/lib/auth'
 
-const StaticHeader = (): JSX.Element => {
+const StaticHeader = (): ReactElement => {
   const { user, loading } = useAuth()
   const router = useRouter()
   const [mounted, setMounted] = useState(false)
diff --git a/src/lib/contexts/ThemeContext.tsx b/src/lib/contexts/ThemeContext.tsx
index d15d990..d8e8154 100644
--- a/src/lib/contexts/ThemeContext.tsx
+++ b/src/lib/contexts/ThemeContext.tsx
@@ -16,7 +16,9 @@ const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
 
 const THEME_STORAGE_KEY = 'hemolog-theme'
 
-export function ThemeProvider({ children }: ThemeProviderProps): JSX.Element {
+export function ThemeProvider({
+  children,
+}: ThemeProviderProps): React.ReactElement {
   // Always start with 'light' to match server-rendered HTML
   const [theme, setTheme] = useState<Theme>('light')
   const [mounted, setMounted] = useState(false)