Fix light mode bugs

CS3219-AY2425S1 · Nov 9, 2024 · f7f0bd1 · f7f0bd1
1 parent 1167d2e
commit f7f0bd1
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 74 deletions.
diff --git a/frontend/peerprep/app/@landing/sign-in/forgot-password/reset/page.tsx b/frontend/peerprep/app/@landing/sign-in/forgot-password/reset/page.tsx
@@ -12,6 +12,7 @@ import { fontFun } from "@/config/fonts";
 import { validatePassword } from "@/utils/utils";
 import Toast from "@/components/toast";
 import { resetPassword } from "@/auth/actions";
+import PasswordRequirementsTooltip from "@/components/PasswordRequirementsTooltip";
 
 export default function ResetPasswordPage() {
   const router = useRouter();
@@ -22,7 +23,7 @@ export default function ResetPasswordPage() {
   const [isLoading, setIsLoading] = useState(false);
   const [isFormSubmitted, setIsFormSubmitted] = useState(false);
   const [toast, setToast] = useState<{ message: string; type: string } | null>(
-    null,
+    null
   );
 
   const toggleVisibility = () => setIsVisible(!isVisible);
@@ -85,27 +86,6 @@ export default function ResetPasswordPage() {
     setIsLoading(false);
   };
 
-  const passwordRequirements = (
-    <Tooltip
-      content={
-        <ul className="list-disc pl-2 py-1 text-xs">
-          <li>At least 12 characters long</li>
-          <li>Contains at least one uppercase letter</li>
-          <li>Contains at least one lowercase letter</li>
-          <li>Contains at least one digit</li>
-          <li>Contains at least one special character (e.g., @$#!%*?&)</li>
-        </ul>
-      }
-      placement="right"
-      showArrow
-    >
-      <div className="flex flex-row gap-1 items-center w-fit dark:hover:text-gray-300 hover:text-gray-500">
-        <BoxIcon name="bx-info-circle" size="12px" />
-        &nbsp;Password requirements
-      </div>
-    </Tooltip>
-  );
-
   return (
     <div className="flex items-center justify-center mt-20">
       {toast && (
@@ -131,7 +111,7 @@ export default function ResetPasswordPage() {
         </div>
 
         <div className="flex flex-col gap-4 w-fill">
-          {passwordRequirements}
+          <PasswordRequirementsTooltip />
           <Input
             label="New Password"
             variant="faded"

diff --git a/frontend/peerprep/app/@landing/sign-up/page.tsx b/frontend/peerprep/app/@landing/sign-up/page.tsx
@@ -17,6 +17,7 @@ import {
   validateUsername,
   validatePassword,
 } from "@/utils/utils";
+import PasswordRequirementsTooltip from "@/components/PasswordRequirementsTooltip";
 
 export default function SignUpPage() {
   const router = useRouter();
@@ -27,7 +28,7 @@ export default function SignUpPage() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isFormSubmitted, setIsFormSubmitted] = useState(false);
   const [toast, setToast] = useState<{ message: string; type: string } | null>(
-    null,
+    null
   );
 
   // Toggle password visibility
@@ -65,9 +66,9 @@ export default function SignUpPage() {
         setTimeout(
           () =>
             router.push(
-              `sign-up/email-verification?email=${encodeURIComponent(email)}`,
+              `sign-up/email-verification?email=${encodeURIComponent(email)}`
             ),
-          500,
+          500
         );
       } else {
         setToast({
@@ -85,27 +86,6 @@ export default function SignUpPage() {
     setIsLoading(false);
   };
 
-  const passwordRequirements = (
-    <Tooltip
-      content={
-        <ul className="list-disc pl-2 py-1 text-xs">
-          <li>At least 12 characters long</li>
-          <li>Contains at least one uppercase letter</li>
-          <li>Contains at least one lowercase letter</li>
-          <li>Contains at least one digit</li>
-          <li>Contains at least one special character (e.g., @$#!%*?&)</li>
-        </ul>
-      }
-      placement="right"
-      showArrow
-    >
-      <div className="flex flex-row gap-1 items-center w-fit dark:hover:text-gray-300 hover:text-gray-500">
-        <BoxIcon name="bx-info-circle" size="12px" />
-        &nbsp;Password requirements
-      </div>
-    </Tooltip>
-  );
-
   const errorPasswordRequirements = (
     <Tooltip
       content={
@@ -193,7 +173,7 @@ export default function SignUpPage() {
             labelPlacement="outside"
             label="Password"
             placeholder="Enter your password"
-            description={passwordRequirements}
+            description={<PasswordRequirementsTooltip />}
             value={password}
             onValueChange={setPassword}
             isInvalid={password.length > 0 && !validatePassword(password)}

diff --git a/frontend/peerprep/components/PasswordRequirementsTooltip.tsx b/frontend/peerprep/components/PasswordRequirementsTooltip.tsx
@@ -0,0 +1,25 @@
+import { Tooltip } from "@nextui-org/react";
+import BoxIcon from "@/components/boxicons";
+
+export default function PasswordRequirementsTooltip() {
+  return (
+    <Tooltip
+      content={
+        <ul className="list-disc pl-2 py-1 text-xs">
+          <li>At least 12 characters long</li>
+          <li>Contains at least one uppercase letter</li>
+          <li>Contains at least one lowercase letter</li>
+          <li>Contains at least one digit</li>
+          <li>Contains at least one special character (e.g., @$#!%*?&)</li>
+        </ul>
+      }
+      placement="right"
+      showArrow
+    >
+      <div className="flex flex-row gap-1 items-center w-fit dark:hover:text-gray-300 hover:text-gray-500 text-xs">
+        <BoxIcon name="bx-info-circle" size="12px" />
+        &nbsp;Password requirements
+      </div>
+    </Tooltip>
+  );
+}
diff --git a/frontend/peerprep/components/changepasswordmodal.tsx b/frontend/peerprep/components/changepasswordmodal.tsx
@@ -16,6 +16,7 @@ import BoxIcon from "./boxicons";
 
 import { validatePassword } from "@/utils/utils";
 import { EyeFilledIcon, EyeSlashFilledIcon } from "@/components/icons";
+import PasswordRequirementsTooltip from "./PasswordRequirementsTooltip";
 
 interface ChangePasswordModalProps {
   isOpen: boolean;
@@ -54,31 +55,6 @@ export function ChangePasswordModal({
     onOpenChange(false);
   };
 
-  const passwordRequirements = (
-    <Tooltip
-      content={
-        <ul className="list-disc pl-2 py-1 text-xs">
-          <li>At least 12 characters long</li>
-          <li>Contains at least one uppercase letter</li>
-          <li>Contains at least one lowercase letter</li>
-          <li>Contains at least one digit</li>
-          <li>Contains at least one special character (e.g., @$#!%*?&)</li>
-        </ul>
-      }
-      placement="right"
-      showArrow
-    >
-      <div className="flex flex-row gap-0.5 items-center w-fit text-xs">
-        <BoxIcon
-          name="bx-info-circle"
-          size="10px"
-          className="text-white hover:text-gray-200"
-        />
-        &nbsp;Password requirements
-      </div>
-    </Tooltip>
-  );
-
   return (
     <Modal isOpen={isOpen} onOpenChange={handleClose}>
       <ModalContent>
@@ -89,7 +65,7 @@ export function ChangePasswordModal({
                 <BoxIcon name="bxs-lock" size="40px" />
                 <div className="flex flex-col gap-0 items-center">
                   Change Password
-                  {passwordRequirements}
+                  <PasswordRequirementsTooltip />
                 </div>
               </div>
             </ModalHeader>