From df059961a68d382826d23d7c99892a1ab1c96bc3 Mon Sep 17 00:00:00 2001
From: Afifah Hadi <hadiafifah@gmail.com>
Date: Thu, 12 Mar 2026 14:29:57 -0700
Subject: [PATCH] implemented styling changes for judge login

---
 app/(pages)/_components/AuthForm/AuthForm.tsx |  46 ++++---
 .../AuthForm/JudgeAuthForm.module.scss        | 114 ++++++++++++------
 .../AuthFormBackground.module.scss            |  85 ++++++++++++-
 .../AuthFormBackground/AuthFormBackground.tsx |  12 +-
 .../AuthForms/ForgotPasswordForm.tsx          |   2 +-
 .../_components/AuthForms/LoginForm.tsx       |   4 +-
 public/judges/login/pink_cloud.svg            |   3 +
 7 files changed, 194 insertions(+), 72 deletions(-)
 create mode 100644 public/judges/login/pink_cloud.svg

diff --git a/app/(pages)/_components/AuthForm/AuthForm.tsx b/app/(pages)/_components/AuthForm/AuthForm.tsx
index defba920..e9cba2f9 100644
--- a/app/(pages)/_components/AuthForm/AuthForm.tsx
+++ b/app/(pages)/_components/AuthForm/AuthForm.tsx
@@ -4,8 +4,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 
 import useAuthForm from '@hooks/useAuthForm';
-import Froggy from 'public/judges/login/LogIn_Froggy.svg';
-import Drumstick from 'public/judges/login/LogIn_DrumStick.svg';
+import arrowRight from '@public/icons/arrow-right.svg';
 import hackerStyles from './HackerAuthForm.module.scss';
 import judgeStyles from './JudgeAuthForm.module.scss';
 
@@ -55,6 +54,14 @@ export default function AuthForm({
     onSuccess,
   });
 
+  const hasTypedInput = fields.some((field) => {
+    if (field.type === 'checkbox') {
+      return false;
+    }
+    const value = formValues[field.name];
+    return String(value ?? '').trim().length > 0;
+  });
+
   return (
     <div className={styles.container}>
       <form onSubmit={handleSubmit} className={styles.form}>
@@ -98,35 +105,26 @@ export default function AuthForm({
         </div>
 
         <div className={styles.bottom_container}>
-          {role === 'judge' && (
-            <div className={styles.froggy_container}>
-              <Image
-                src={Drumstick}
-                alt="froggy_drumstick"
-                width={10}
-                height={10}
-                className={styles.drumstick}
-              />
-              <Image
-                src={Froggy}
-                alt="froggy"
-                width={50}
-                height={50}
-                className={styles.froggy}
-              />
-            </div>
-          )}
-
           <div className={styles.bottom}>
             <div />
             <button
               type="submit"
               disabled={loading || !valid}
               className={`${styles.submit_button} ${
-                valid ? styles.valid : null
-              }`}
+                role === 'judge' && hasTypedInput ? styles.filled : null
+              } ${valid ? styles.valid : null}`}
             >
-              {loading ? 'Checking...' : buttonText}
+              <span className={styles.submit_content}>
+                {loading ? 'Checking...' : buttonText}
+                {role === 'judge' ? (
+                  <Image
+                    src={arrowRight}
+                    alt=""
+                    aria-hidden="true"
+                    className={styles.submit_arrow}
+                  />
+                ) : null}
+              </span>
             </button>
           </div>
           <p className={styles.error_msg}>{errors.submit}</p>
diff --git a/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss b/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss
index f704d13f..e9956423 100644
--- a/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss
+++ b/app/(pages)/_components/AuthForm/JudgeAuthForm.module.scss
@@ -1,14 +1,19 @@
 .container {
   width: 100%;
-  height: 60vh;
-  border-radius: var(--b-radius);
+  display: flex;
+  height: 100%;
+  min-height: 100%;
+  border-radius: 28px;
+  color: #000;
 }
 
 .form {
   display: flex;
   flex-direction: column;
-  align-items: space-between;
+  justify-content: flex-start;
   height: 100%;
+  width: 100%;
+  color: #000;
 
   .input_container {
     position: relative;
@@ -39,16 +44,22 @@
   }
 
   input {
-    padding-top: var(--small-medium-spacer);
-    padding-left: var(--small-spacer);
+    height: 76px;
+    border: 1.5px solid #5e5e65;
+    border-radius: 16px;
+    background: #fff;
+    padding: 30px 16px 10px 16px;
     width: 100%;
+    font-size: 1.75rem;
+    color: #000;
   }
 
   label {
     position: absolute;
-    margin-top: var(--tiny-spacer);
-    left: var(--small-spacer);
-    font-size: 0.9rem;
+    top: 10px;
+    left: 16px;
+    font-size: 0.95rem;
+    color: #8b8b8b;
     pointer-events: none;
   }
 }
@@ -63,7 +74,14 @@
 .fields {
   display: flex;
   flex-direction: column;
-  gap: var(--small-spacer);
+  gap: 20px;
+}
+
+.top_container {
+  color: #000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .error {
@@ -72,49 +90,73 @@
 
 .bottom_container {
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   margin-top: auto;
   flex-direction: column;
+  padding-top: 24px;
+}
+
+.bottom {
+  width: 100%;
 }
 
 .submit_button {
-  padding: 15px 18px;
-  font-size: 1.125rem;
+  padding: 12px 24px;
+  font-size: 1.5rem;
   font-weight: 700;
   line-height: normal;
-  color: var(--text-light);
-  border: none;
-  border-radius: var(--b-radius);
-  background-color: var(--background-secondary-light);
+  color: #000;
+  border: 1px solid #e6e6ef;
+  border-radius: 9999px;
+  background-color: #fff;
   cursor: not-allowed;
   width: 100%;
-  opacity: 0.7;
+  opacity: 1;
 }
 
-.valid {
-  background-color: var(--background-secondary);
-  opacity: 1;
-  cursor: pointer;
+.submit_content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
 }
 
-.froggy_container {
-  // display: flex;
-  justify-content: flex-end;
-  position: relative;
+.submit_arrow {
+  width: 22px;
+  height: 22px;
+  filter: brightness(0);
+}
 
-  img {
-    position: absolute;
-  }
+.filled {
+  background-color: #000;
+  color: #fff;
+  border-color: #000;
 
-  .froggy {
-    z-index: 1;
-    left: 280px;
-    top: -59px;
+  .submit_arrow {
+    filter: brightness(0) invert(1);
   }
+}
+
+.valid {
+  background-color: #000;
+  color: #fff;
+  border-color: #000;
+  opacity: 1;
+  cursor: pointer;
 
-  .drumstick {
-    z-index: 2;
-    left: 277px;
-    top: -47px;
+  .submit_arrow {
+    filter: brightness(0) invert(1);
   }
 }
+
+.froggy_container {
+  display: none;
+}
+
+.forgot {
+  color: #000;
+  text-align: center;
+  text-decoration: none;
+  font-size: 1rem;
+  margin-top: 8px;
+}
diff --git a/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss b/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss
index 0bc86a9d..dad8d208 100644
--- a/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss
+++ b/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.module.scss
@@ -1,10 +1,85 @@
 .container {
+  min-height: 100vh;
+  display: flex;
   flex-direction: column;
-  padding: var(--spacer) var(--small-spacer);
-  align-content: space-around;
-  height: 100vh;
+  justify-content: center;
+  align-items: center;
+  padding: 32px 24px 48px;
+  background: #fafaff;
+  color: #000;
 }
 
 .section {
-  margin-bottom: var(--spacer);
-}
\ No newline at end of file
+  width: min(100%, 560px);
+}
+
+.logo_section {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+.logo_container {
+  position: relative;
+  width: 128px;
+  height: 128px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo_container::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: url('/judges/login/pink_cloud.svg') center/contain no-repeat;
+  animation: spin_cloud 12s linear infinite;
+}
+
+.logo_container :global(img) {
+  width: 74px;
+  height: 74px;
+  position: relative;
+  z-index: 1;
+  filter: brightness(0) invert(1);
+}
+
+.title_section {
+  text-align: center;
+  margin-bottom: 28px;
+}
+
+.title_section h3 {
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  line-height: 1.05;
+  margin: 0 0 12px;
+  color: #000;
+}
+
+.title_section p {
+  margin: 0;
+  font-size: clamp(1rem, 2.6vw, 1.75rem);
+  color: #4e4e54;
+}
+
+.form_section {
+  width: min(100%, 560px);
+  height: 48vh;
+  display: flex;
+  justify-content: space-between;
+}
+
+.form_section > div {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes spin_cloud {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.tsx b/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.tsx
index 3d087e01..61a8bc26 100644
--- a/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.tsx
+++ b/app/(pages)/judges/_components/AuthFormBackground/AuthFormBackground.tsx
@@ -14,18 +14,22 @@ export default async function AuthFormBackground({
 }) {
   return (
     <div className={styles.container}>
-      <div className={styles.section}>
-        <Image src={hd_logo} alt="hd_logo" height={50} width={50} />
+      <div className={`${styles.section} ${styles.logo_section}`}>
+        <div className={styles.logo_container}>
+          <Image src={hd_logo} alt="hd_logo" height={74} width={74} />
+        </div>
       </div>
 
-      <div className={styles.section}>
+      <div className={`${styles.section} ${styles.title_section}`}>
         <h3>
           <b>{title}</b>
         </h3>
         <p style={{ whiteSpace: 'pre-line' }}>{subtitle}</p>
       </div>
 
-      <div className={styles.section}>{children}</div>
+      <div className={`${styles.section} ${styles.form_section}`}>
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx b/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx
index d276f9d9..ed68bc03 100644
--- a/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx
+++ b/app/(pages)/judges/_components/AuthForms/ForgotPasswordForm.tsx
@@ -32,7 +32,7 @@ export default function ForgotPasswordForm() {
     <AuthForm
       role="judge"
       fields={formFields}
-      buttonText="Send Email →"
+      buttonText="Send Email"
       initialValues={{
         email: '',
       }}
diff --git a/app/(pages)/judges/_components/AuthForms/LoginForm.tsx b/app/(pages)/judges/_components/AuthForms/LoginForm.tsx
index cdef401e..75662b1d 100644
--- a/app/(pages)/judges/_components/AuthForms/LoginForm.tsx
+++ b/app/(pages)/judges/_components/AuthForms/LoginForm.tsx
@@ -20,7 +20,7 @@ export default function LoginForm() {
     {
       name: 'email' as const,
       type: 'email',
-      label: 'Email',
+      label: 'Username',
       placeholder: '',
       readOnly: false,
     },
@@ -37,7 +37,7 @@ export default function LoginForm() {
     <AuthForm
       role="judge"
       fields={formFields}
-      buttonText="Log in →"
+      buttonText="Log in"
       linkText="Forgot Password?"
       linkHref="/judges/login/forgot-password"
       initialValues={{
diff --git a/public/judges/login/pink_cloud.svg b/public/judges/login/pink_cloud.svg
new file mode 100644
index 00000000..5807ab13
--- /dev/null
+++ b/public/judges/login/pink_cloud.svg
@@ -0,0 +1,3 @@
+<svg width="109" height="109" viewBox="0 0 109 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54.5 0.5C62.1378 0.5 68.864 4.39518 72.8066 10.3037C79.7722 8.91326 87.2824 10.9155 92.6836 16.3164C98.0841 21.7172 100.085 29.2269 98.6953 36.1924C104.605 40.1346 108.5 46.8614 108.5 54.5C108.5 62.1382 104.604 68.8641 98.6953 72.8066C100.086 79.7723 98.0843 87.2823 92.6836 92.6836C87.2823 98.0843 79.7723 100.086 72.8066 98.6953C68.8641 104.604 62.1382 108.5 54.5 108.5C46.8614 108.5 40.1347 104.605 36.1924 98.6953C29.2269 100.085 21.7172 98.0841 16.3164 92.6836C10.9155 87.2824 8.91326 79.7722 10.3037 72.8066C4.39518 68.864 0.499999 62.1378 0.5 54.5C0.500001 46.8618 4.39488 40.1347 10.3037 36.1924C8.91368 29.227 10.9157 21.7171 16.3164 16.3164C21.7171 10.9157 29.227 8.91373 36.1924 10.3037C40.1347 4.3949 46.8618 0.500001 54.5 0.5Z" fill="#FCBAC1" stroke="#005271"/>
+</svg>