dark & light theme styling improvements

app/globals.css

@@ -33,7 +33,7 @@ body {
 }
 
 h1 {
-  @apply mb-4 mt-4 text-2xl font-bold text-gray-500 sm:text-4xl dark:text-white;
+  @apply mb-4 mt-4 text-2xl font-bold text-gray-900 sm:text-4xl dark:text-white;
 }
 
 h2 {

app/home/page.tsx

@@ -40,7 +40,7 @@ const HomePage = () => {
         <div>
           <button
             data-test="sign-out"
-            className="rounded p-1 px-4 hover:bg-gray-700 disabled:cursor-not-allowed disabled:opacity-50"
+            className="rounded p-1 px-4 hover:bg-gray-400 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-700"
             disabled={buttonStatus.status === "submitting"}
             onClick={() => handleSignOut()}
           >

app/page.tsx

@@ -31,10 +31,18 @@ const LoginPage = () => {
       <div>
         <div className="mb-10 flex items-center justify-center">
           <Image
+            className="dark:hidden" // shown in light theme
+            alt={appTitle}
+            src="/aws-restart-logo-light.png"
+            width={128}
+            height={75}
+          />
+          <Image
+            className="hidden dark:block" // shown in dark theme
             alt={appTitle}
             src="/aws-restart-logo.png"
-            width={120}
-            height={50}
+            width={128}
+            height={75}
           />
         </div>
         <div className="mb-4">

components/UI/Divider.tsx

@@ -1,5 +1,5 @@
 const Divider = () => {
-  return <hr className="bg-white dark:bg-gray-500" />
+  return <hr className="h-px border-0 bg-black dark:bg-gray-200"></hr>
 }
 
 export default Divider

components/UI/Lab.tsx

@@ -98,7 +98,7 @@ const Lab = ({ email, lab, data, mutate }: LabProps) => {
         <input
           data-test={`lab-checkbox-${lab.labId}`}
           type="checkbox"
-          className="before:content[''] border-blue-gray-200 before:bg-blue-gray-500 peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border transition-all before:absolute before:left-2/4 before:top-2/4 before:block before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-2/4 before:rounded-full before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-blue-700 checked:before:bg-gray-900 hover:before:opacity-10 dark:checked:border-gray-200 dark:checked:before:bg-gray-200"
+          className="before:content[''] peer relative h-5 w-5 cursor-pointer appearance-none rounded-md border border-gray-900 transition-all before:absolute before:left-2/4 before:top-2/4 before:block before:h-12 before:w-12 before:-translate-x-2/4 before:-translate-y-2/4 before:rounded-full before:opacity-0 before:transition-opacity checked:border-gray-900 checked:bg-blue-700 checked:before:bg-gray-900 hover:before:opacity-10 dark:border-white dark:checked:border-gray-200 dark:checked:before:bg-gray-200"
           id={lab.name}
           onChange={(e) => handleTrackLab({ event: e, lab })}
           checked={completed}

components/UI/Loading/LoadingLabs.tsx

@@ -7,8 +7,8 @@ const LoadingLabs = () => {
           {loadingItems.map((_, idx) => (
             <li
               key={idx}
-              className="h-10 w-full rounded bg-gray-200 dark:bg-gray-700"
-            ></li>
+              className="h-10 w-full rounded bg-gray-500 dark:bg-gray-700"
+            />
           ))}
         </ul>
       </div>

components/UI/Loading/LoadingLogo.tsx

@@ -1,12 +1,25 @@
 import { appTitle } from "@/lib/const"
 import Image from "next/image"
 
-const LoadingLogo = () =>{
-    return (
-        <div className="h-screen flex items-center justify-center animate-bounce">
-            <Image alt={appTitle} src="/aws-restart-logo.png" width={120} height={50} />
-        </div>
-    )
+const LoadingLogo = () => {
+  return (
+    <div className="flex h-screen animate-bounce items-center justify-center">
+      <Image
+        className="dark:hidden" // shown in light theme
+        alt={appTitle}
+        src="/aws-restart-logo-light.png"
+        width={128}
+        height={75}
+      />
+      <Image
+        className="hidden dark:block" // shown in dark theme
+        alt={appTitle}
+        src="/aws-restart-logo.png"
+        width={128}
+        height={75}
+      />
+    </div>
+  )
 }
 
-export default LoadingLogo
+export default LoadingLogo