From e5466025000e71edba02f247da995ec8a7e507bd Mon Sep 17 00:00:00 2001
From: Mai Vang <100221733+vmaineng@users.noreply.github.com>
Date: Thu, 25 Jul 2024 03:45:39 -0700
Subject: [PATCH] mai/fix-added darkmode changes for register (#445)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes #412

1) updated Login CSS to Register's CSS
2) wrote unit test to ensure dark mode was included

<img width="1303" alt="Screenshot 2024-07-20 at 12 07 48 PM"
src="https://github.com/user-attachments/assets/5e4fa1fe-bdd1-49c8-854d-aa97c33c14e9">

<img width="1128" alt="image"
src="https://github.com/user-attachments/assets/f4a36e9a-cb68-4ab7-823a-4bf57d9a462a">
---
 app/(main)/register/page.test.tsx |   5 +
 app/(main)/register/page.tsx      | 201 +++++++++++++++---------------
 2 files changed, 104 insertions(+), 102 deletions(-)

diff --git a/app/(main)/register/page.test.tsx b/app/(main)/register/page.test.tsx
index aa96fa48..10d46e2f 100644
--- a/app/(main)/register/page.test.tsx
+++ b/app/(main)/register/page.test.tsx
@@ -165,4 +165,9 @@ describe('Register', () => {
       );
     });
   });
+  test('renders Register component in dark mode using global css styles for background and foreground', () => {
+    const darkModeSection = screen.getByTestId('dark-mode-section');
+
+    expect(darkModeSection).toHaveClass('dark:bg-gradient-to-b');
+  });
 });
diff --git a/app/(main)/register/page.tsx b/app/(main)/register/page.tsx
index ad61d597..aef09212 100644
--- a/app/(main)/register/page.tsx
+++ b/app/(main)/register/page.tsx
@@ -125,115 +125,112 @@ const Register = (): JSX.Element => {
   const isDisabled = !email || !password || password !== confirmPassword;
 
   return (
-    <div className="h-screen w-full">
-      <div className="grid h-screen w-full grid-cols-2 bg-gradient-to-b from-[#4E160E] to-zinc-950">
-        <div className="grid p-8">
-          <div className="grid">
-            <Logo className="mx-auto place-self-end" src={logo} />
-          </div>
-          <div className="mx-auto grid gap-4 place-self-end">
-            <p className="leading-7 text-white">
-              Thank you... fantasy football draft, for letting me know that even
-              in my fantasies, I am bad at sports.
-            </p>
-            <p className="leading-7 text-white">Jimmy Fallon</p>
-          </div>
+    <section className="grid xl:grid-cols-2 xl:grid-rows-none">
+      <div
+        data-testid="dark-mode-section"
+        className="row-span-1 grid w-full place-items-center from-[#4E160E] to-zinc-950 dark:bg-gradient-to-b xl:h-screen xl:bg-gradient-to-b"
+      >
+        <Logo className="mx-auto w-52 xl:w-64 xl:place-self-end" src={logo} />
+        <div className="mx-auto grid gap-4 place-self-end px-8 pb-8 text-foreground text-white">
+          <p className="hidden leading-7 xl:block">
+            Thank you... fantasy football draft, for letting me know that even
+            in my fantasies, I am bad at sports.
+          </p>
+          <p className="hidden leading-7 xl:block">Jimmy Fallon</p>
+        </div>
+      </div>
+      <div className="row-span-1 mx-auto grid max-w-sm justify-center space-y-4 px-4 xl:flex xl:flex-col">
+        <div>
+          <h1 className="text-5xl font-extrabold tracking-tight text-foreground">
+            Register A New Account
+          </h1>
+          <p className="pb-4 font-normal leading-7 text-zinc-500">
+            If you have an existing account{' '}
+            <LinkCustom href="/login">Login!</LinkCustom>
+          </p>
         </div>
-        <div className="grid place-content-center bg-white p-8">
-          <div className="mx-auto grid w-80 place-content-center gap-4">
-            <h1 className="text-5xl font-extrabold tracking-tight text-foreground">
-              Register A New Account
-            </h1>
-            <p className="pb-4 font-normal leading-7 text-zinc-500">
-              If you have an existing account{' '}
-              <LinkCustom href="/login">Login!</LinkCustom>
-            </p>
 
-            <Form {...form}>
-              <form
-                id="input-container"
-                className="grid gap-3"
-                onSubmit={form.handleSubmit(onSubmit)}
-              >
-                <FormField
-                  control={form.control as Control<object>}
-                  name="email"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormControl>
-                        <Input
-                          data-testid="email"
-                          type="email"
-                          placeholder="Email"
-                          {...field}
-                        />
-                      </FormControl>
-                      {form.formState.errors.email && (
-                        <FormMessage>
-                          {form.formState.errors.email.message}
-                        </FormMessage>
-                      )}
-                    </FormItem>
+        <Form {...form}>
+          <form
+            id="input-container"
+            className="grid gap-3"
+            onSubmit={form.handleSubmit(onSubmit)}
+          >
+            <FormField
+              control={form.control as Control<object>}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      data-testid="email"
+                      type="email"
+                      placeholder="Email"
+                      {...field}
+                    />
+                  </FormControl>
+                  {form.formState.errors.email && (
+                    <FormMessage>
+                      {form.formState.errors.email.message}
+                    </FormMessage>
                   )}
-                />
-                <FormField
-                  control={form.control as Control<object>}
-                  name="password"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormControl>
-                        <Input
-                          data-testid="password"
-                          type="password"
-                          placeholder="Password"
-                          {...field}
-                        />
-                      </FormControl>
-                      {form.formState.errors.password && (
-                        <FormMessage>
-                          {form.formState.errors.password.message}
-                        </FormMessage>
-                      )}
-                    </FormItem>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control as Control<object>}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      data-testid="password"
+                      type="password"
+                      placeholder="Password"
+                      {...field}
+                    />
+                  </FormControl>
+                  {form.formState.errors.password && (
+                    <FormMessage>
+                      {form.formState.errors.password.message}
+                    </FormMessage>
                   )}
-                />
-                <FormField
-                  control={form.control as Control<object>}
-                  name="confirmPassword"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormControl>
-                        <Input
-                          data-testid="confirm-password"
-                          type="password"
-                          placeholder="Confirm Password"
-                          {...field}
-                        />
-                      </FormControl>
-                      {form.formState.errors.confirmPassword && (
-                        <FormMessage>
-                          {form.formState.errors.confirmPassword.message}
-                        </FormMessage>
-                      )}
-                    </FormItem>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control as Control<object>}
+              name="confirmPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      data-testid="confirm-password"
+                      type="password"
+                      placeholder="Confirm Password"
+                      {...field}
+                    />
+                  </FormControl>
+                  {form.formState.errors.confirmPassword && (
+                    <FormMessage>
+                      {form.formState.errors.confirmPassword.message}
+                    </FormMessage>
                   )}
-                />
+                </FormItem>
+              )}
+            />
 
-                <Button
-                  data-testid="continue-button"
-                  label="Register"
-                  type="submit"
-                  disabled={isDisabled}
-                />
-                <LinkCustom href="/login">
-                  Login to get started playing
-                </LinkCustom>
-              </form>
-            </Form>
-          </div>
-        </div>
+            <Button
+              data-testid="continue-button"
+              label="Register"
+              type="submit"
+              disabled={isDisabled}
+            />
+            <LinkCustom href="/login">Login to get started playing</LinkCustom>
+          </form>
+        </Form>
       </div>
-    </div>
+    </section>
   );
 };