fix dark mode inconsistencies

Author: vincanger

app/src/client/app/AccountPage.tsx

@@ -7,12 +7,12 @@ import { TierIds } from '@wasp/shared/constants';
 export default function AccountPage({ user }: { user: User }) {
   return (
     <div className='mt-10 px-6'>
-      <div className='overflow-hidden bg-white ring-1 ring-gray-900/10 shadow-lg sm:rounded-lg lg:m-8 '>
+      <div className='overflow-hidden border border-gray-900/10 shadow-lg sm:rounded-lg lg:m-8 dark:border-gray-100/10'>
         <div className='px-4 py-5 sm:px-6 lg:px-8'>
           <h3 className='text-base font-semibold leading-6 text-gray-900'>Account Information</h3>
         </div>
-        <div className='border-t border-gray-200 px-4 py-5 sm:p-0'>
-          <dl className='sm:divide-y sm:divide-gray-200'>
+        <div className='border-t border-gray-900/10 dark:border-gray-100/10 px-4 py-5 sm:p-0'>
+          <dl className='sm:divide-y sm:divide-gray-900/10 sm:dark:divide-gray-100/10'>
             {!!user.email && (
               <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
                 <dt className='text-sm font-medium text-gray-500 dark:text-white'>Email address</dt>
@@ -22,7 +22,9 @@ export default function AccountPage({ user }: { user: User }) {
             {!!user.username && (
               <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
                 <dt className='text-sm font-medium text-gray-500 dark:text-white'>Username</dt>
-                <dd className='mt-1 text-sm text-gray-900 dark:text-gray-400 sm:col-span-2 sm:mt-0'>{user.username}</dd>
+                <dd className='mt-1 text-sm text-gray-900 dark:text-gray-400 sm:col-span-2 sm:mt-0'>
+                  {user.username}
+                </dd>
               </div>
             )}
             <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
@@ -50,8 +52,10 @@ export default function AccountPage({ user }: { user: User }) {
               )}
             </div>
             <div className='py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6'>
-              <dt className='text-sm font-medium text-gray-500'>About</dt>
-              <dd className='mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0'>I'm a cool customer.</dd>
+              <dt className='text-sm font-medium text-gray-500 dark:text-white'>About</dt>
+              <dd className='mt-1 text-sm text-gray-900 dark:text-gray-400 sm:col-span-2 sm:mt-0'>
+                I'm a cool customer.
+              </dd>
             </div>
           </dl>
         </div>
@@ -85,7 +89,7 @@ function CustomerPortalButton() {
 
   return (
     <div className='ml-4 flex-shrink-0 sm:col-span-1 sm:mt-0'>
-      <button onClick={handleClick} className={`font-medium text-sm text-indigo-600 hover:text-indigo-500`}>
+      <button onClick={handleClick} className={`font-medium text-sm text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300`}>
         Manage Subscription
       </button>
     </div>

app/src/client/app/CheckoutPage.tsx

@@ -34,13 +34,13 @@ export default function CheckoutPage() {
   return (
     <div className='flex min-h-full flex-col justify-center mt-10 sm:px-6 lg:px-8'>
       <div className='sm:mx-auto sm:w-full sm:max-w-md'>
-        <div className='bg-white text-black py-8 px-4 shadow-xl ring-1 ring-gray-900/10 sm:rounded-lg sm:px-10'>
+        <div className='py-8 px-4 shadow-xl ring-1 ring-gray-900/10 dark:ring-gray-100/10 sm:rounded-lg sm:px-10'>
           <h1>
             {paymentStatus === 'paid'
               ? '🥳 Payment Successful!'
               : paymentStatus === 'canceled'
-              ? '😢 Payment Canceled'
-              : paymentStatus === 'error' && '🙄 Payment Error'}
+                ? '😢 Payment Canceled'
+                : paymentStatus === 'error' && '🙄 Payment Error'}
           </h1>
           {paymentStatus !== 'loading' && (
             <span className='text-center'>

app/src/client/app/DemoAppPage.tsx

@@ -22,7 +22,7 @@ export default function DemoAppPage() {
           This example app uses OpenAI's chat completions with function calling to return a structured JSON object. Try it out, enter your day's tasks, and let AI do the rest!
         </p>
         {/* begin AI-powered Todo List */}
-        <div className='my-8 border rounded-3xl border-gray-900/10'>
+        <div className='my-8 border rounded-3xl border-gray-900/10 dark:border-gray-100/10'>
           <div className='sm:w-[90%] md:w-[70%] lg:w-[50%] py-10 px-6 mx-auto my-8 space-y-10'>
             <NewTaskForm handleCreateTask={createTask} />
           </div>

app/src/client/app/FileUploadPage.tsx

@@ -74,10 +74,10 @@ export default function FileUploadPage() {
           </h2>
         </div>
         <p className='mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-gray-600 dark:text-white'>
-          This is an example file upload page using AWS S3. Maybe your app needs this. Maybe it
-          doesn't. But a lot of people asked for this feature, so here you go 🤝
+          This is an example file upload page using AWS S3. Maybe your app needs this. Maybe it doesn't. But a lot of
+          people asked for this feature, so here you go 🤝
         </p>
-        <div className='my-8 border rounded-3xl border-gray-900/10'>
+        <div className='my-8 border rounded-3xl border-gray-900/10 dark:border-gray-100/10'>
           <div className='space-y-10 my-10 py-8 px-4 mx-auto sm:max-w-lg'>
             <form onSubmit={handleUpload} className='flex flex-col gap-2'>
               <input
@@ -93,7 +93,7 @@ export default function FileUploadPage() {
                 Upload
               </button>
             </form>
-            <div className='border-b-2 border-gray-200'></div>
+            <div className='border-b-2 border-gray-200 dark:border-gray-100/10'></div>
             <div className='space-y-4 col-span-full'>
               <h2 className='text-xl font-bold'>Uploaded Files</h2>
               {isFilesLoading && <p>Loading...</p>}

app/src/client/app/PricingPage.tsx

@@ -75,7 +75,7 @@ const PricingPage = () => {
               key={tier.id}
               className={`relative flex flex-col  ${
                 tier.bestDeal ? 'ring-2' : 'ring-1 lg:mt-8'
-              } grow justify-between rounded-3xl ring-gray-200 overflow-hidden p-8 xl:p-10`}
+              } grow justify-between rounded-3xl ring-gray-900/10 dark:ring-gray-100/10 overflow-hidden p-8 xl:p-10`}
             >
               {tier.bestDeal && (
                 <div className='absolute top-0 right-0 -z-10 w-full h-full transform-gpu blur-3xl' aria-hidden='true'>
@@ -95,7 +95,9 @@ const PricingPage = () => {
                 </div>
                 <p className='mt-4 text-sm leading-6 text-gray-600 dark:text-white'>{tier.description}</p>
                 <p className='mt-6 flex items-baseline gap-x-1 dark:text-white'>
-                  <span className='text-4xl font-bold tracking-tight text-gray-900 dark:text-white'>{tier.priceMonthly}</span>
+                  <span className='text-4xl font-bold tracking-tight text-gray-900 dark:text-white'>
+                    {tier.priceMonthly}
+                  </span>
                   <span className='text-sm font-semibold leading-6 text-gray-600 dark:text-white'>/month</span>
                 </p>
                 <ul role='list' className='mt-8 space-y-3 text-sm leading-6 text-gray-600 dark:text-white'>

app/src/client/components/AppNavBar.tsx

@@ -28,11 +28,8 @@ export default function AppNavBar() {
 
   const { data: user, isLoading: isUserLoading } = useAuth();
   return (
-    <header className='absolute inset-x-0 top-0 z-50 shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border-strokedark dark:bg-boxdark-2'>
-      <nav
-        className='flex items-center justify-between p-6 lg:px-8'
-        aria-label='Global'
-      >
+    <header className='absolute inset-x-0 top-0 z-50 shadow sticky bg-white bg-opacity-50 backdrop-blur-lg backdrop-filter dark:border dark:border-gray-100/10 dark:bg-boxdark-2'>
+      <nav className='flex items-center justify-between p-6 lg:px-8' aria-label='Global'>
         <div className='flex lg:flex-1'>
           <a href='/' className='-m-1.5 p-1.5'>
             <img className='h-8 w-8' src={logo} alt='My SaaS App' />
@@ -65,10 +62,7 @@ export default function AppNavBar() {
           </ul>
 
           {isUserLoading ? null : !user ? (
-            <a
-              href={!user ? '/login' : '/account'}
-              className='text-sm font-semibold leading-6 ml-4'
-            >
+            <a href={!user ? '/login' : '/account'} className='text-sm font-semibold leading-6 ml-4'>
               <div className='flex items-center duration-300 ease-in-out text-gray-900 hover:text-yellow-500 dark:text-white'>
                 Log in <BiLogIn size='1.1rem' className='ml-1 mt-[0.1rem]' />
               </div>
@@ -80,12 +74,7 @@ export default function AppNavBar() {
           )}
         </div>
       </nav>
-      <Dialog
-        as='div'
-        className='lg:hidden'
-        open={mobileMenuOpen}
-        onClose={setMobileMenuOpen}
-      >
+      <Dialog as='div' className='lg:hidden' open={mobileMenuOpen} onClose={setMobileMenuOpen}>
         <div className='fixed inset-0 z-50' />
         <Dialog.Panel className='fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white dark:text-white dark:bg-boxdark px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10'>
           <div className='flex items-center justify-between'>
@@ -124,7 +113,7 @@ export default function AppNavBar() {
                     </div>
                   </Link>
                 ) : (
-                  <UserMenuItems user={user} setMobileMenuOpen={setMobileMenuOpen}/>
+                  <UserMenuItems user={user} setMobileMenuOpen={setMobileMenuOpen} />
                 )}
               </div>
             </div>