Fix dark mode login/signup pages

web/src/components/NavbarAccountIcon/NavbarAccountIcon.tsx

@@ -16,19 +16,19 @@ const NavbarAccountIcon = ({ mobile, className }: Props) => {
   return isAuthenticated ? (
     <div className={className}>
       <details
-        className={`dropdown dropdown-end ${
+        className={`dropdown-end dropdown ${
           mobile ? 'space-y-2' : 'space-y-4'
         }`}
       >
         <summary className="btn btn-ghost swap swap-rotate w-12 hover:shadow-lg">
-          <Icon path={mdiAccount} className="h-8 w-8 text-gray-500" />
+          <Icon path={mdiAccount} className="h-8 w-8 text-base-content" />
         </summary>
         <div className="dropdown-content flex w-auto flex-row items-center space-x-3 rounded-xl bg-base-100 p-3 shadow-lg">
           <p className="whitespace-nowrap font-inter text-lg">
             Hello, {currentUser.firstName}!
           </p>
           <button className="btn btn-ghost" type="button" onClick={logOut}>
-            <Icon path={mdiLogout} className="h-7 w-7 text-gray-600" />
+            <Icon path={mdiLogout} className="h-7 w-7 text-base-content" />
           </button>
         </div>
       </details>
@@ -37,7 +37,7 @@ const NavbarAccountIcon = ({ mobile, className }: Props) => {
     <div className={className}>
       <Link to={routes.login()}>
         <button className="btn btn-ghost" type="button" onClick={logOut}>
-          <Icon path={mdiLogin} className="h-8 w-8 text-gray-500" />
+          <Icon path={mdiLogin} className="h-8 w-8 text-base-content" />
         </button>
       </Link>
     </div>

web/src/pages/ForgotPasswordPage/ForgotPasswordPage.tsx

@@ -62,7 +62,7 @@ const ForgotPasswordPage = () => {
                       validation={{
                         required: {
                           value: true,
-                          message: 'Email is required',
+                          message: 'Required',
                         },
                         pattern: {
                           value: new RegExp(

web/src/pages/LoginPage/LoginPage.tsx

@@ -107,7 +107,9 @@ const LoginPage = () => {
             </div>
           </div>
           <div className="rw-login-link">
-            <span className="font-inter">Don&apos;t have an account?</span>{' '}
+            <span className="font-inter text-base-content">
+              Don&apos;t have an account?
+            </span>{' '}
             <Link to={routes.signup()} className="rw-link">
               Sign up!
             </Link>

web/src/pages/SignupPage/SignupPage.tsx

@@ -140,7 +140,9 @@ const SignupPage = () => {
             </div>
           </div>
           <div className="rw-login-link">
-            <span className="font-inter">Already have an account?</span>{' '}
+            <span className="font-inter text-base-content">
+              Already have an account?
+            </span>{' '}
             <Link to={routes.login()} className="rw-link">
               Log in!
             </Link>

web/src/scaffold.css

@@ -24,7 +24,7 @@
   @apply m-4;
 }
 .rw-segment {
-  @apply w-full overflow-hidden rounded-lg border border-gray-200;
+  @apply w-full overflow-hidden rounded-lg ;
   scrollbar-color: theme('colors.zinc.400') transparent;
 }
 .rw-segment::-webkit-scrollbar {
@@ -37,25 +37,19 @@
   @apply rounded-full border-[3px] border-solid border-transparent bg-zinc-400 bg-clip-content;
 }
 .rw-segment-header {
-  @apply bg-gray-200 px-4 py-3 text-gray-700;
+  @apply bg-base-300 px-4 py-3;
 }
 .rw-segment-main {
-  @apply bg-gray-100 p-4;
+  @apply bg-base-200 p-4;
 }
 .rw-link {
-  @apply font-inter text-blue-400 underline;
-}
-.rw-link:hover {
-  @apply text-blue-500;
+  @apply font-inter link link-hover text-base-content;
 }
 .rw-forgot-link {
-  @apply mt-1 text-right font-inter text-xs text-gray-400 underline;
-}
-.rw-forgot-link:hover {
-  @apply text-blue-500;
+  @apply text-right font-inter text-xs text-base-content link link-hover;
 }
 .rw-heading {
-  @apply font-inter font-semibold;
+  @apply font-inter font-semibold text-base-content;
 }
 .rw-heading.rw-heading-primary {
   @apply text-xl;
@@ -110,10 +104,10 @@
   @apply text-red-600;
 }
 .rw-input {
-  @apply input input-bordered w-full max-w-xs font-inter;
+  @apply input input-bordered w-full max-w-xs font-inter text-base-content;
 }
 .rw-textarea {
-  @apply textarea textarea-bordered font-inter max-w-xs w-full;
+  @apply textarea textarea-bordered font-inter max-w-xs w-full text-base-content;
 }
 .rw-check-radio-items {
   @apply flex justify-items-center;
@@ -125,9 +119,6 @@
 .rw-input[type='radio'] {
   @apply ml-0 mr-1 mt-1 inline w-4;
 }
-.rw-input:focus {
-  @apply border-gray-400;
-}
 .rw-input-error {
   @apply input-error;
 }
@@ -188,7 +179,7 @@
   @apply text-center;
 }
 .rw-login-container {
-  @apply mx-auto my-16 flex w-96 flex-wrap items-center justify-center;
+  @apply mx-auto my-16 flex w-96 flex-wrap items-center justify-center bg-base-100;
 }
 .rw-login-container .rw-form-wrapper {
   @apply w-full text-center;