fix: make auth illustration theme-aware for light mode contrast (#256)

frontend/src/Pages/Authentication.tsx

@@ -2,11 +2,11 @@ import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { LoginForm, SignUpForm, OTPVerificationForm, ForgotPasswordForm, ResetPasswordForm } from './Authentication/forms.tsx';
 import { Link, useLocation } from 'react-router-dom';
-import DebateCover from '../assets/DebateCover4.svg';
+import DebateCoverIllustration from '../components/DebateCoverIllustration';
 import { ThemeToggle } from '@/components/ThemeToggle';
 
 const LeftSection = () => (
-  <div className="hidden md:flex w-full h-full flex-col justify-between bg-muted p-10 text-black dark:text-white">
+  <div className="hidden md:flex w-full h-full flex-col justify-between bg-muted p-10 text-black dark:text-white overflow-y-auto">
     <div className="flex items-center text-lg font-medium">
       <Link to="/" className="flex items-center">
         <svg>
@@ -15,8 +15,12 @@ const LeftSection = () => (
         Arguehub
       </Link>
     </div>
-    <div className="flex justify-center items-center flex-1 p-10">
-      <img src={DebateCover} alt="Debate Cover" className="max-w-full max-h-full object-contain" />
+    <div className="flex justify-center items-center flex-1 min-h-0 p-6">
+      <DebateCoverIllustration
+        className="max-w-full max-h-full object-contain"
+        role="img"
+        aria-label="Debate Cover"
+      />
     </div>
     <div>
       <blockquote className="space-y-2">
@@ -73,30 +77,30 @@ const RightSection: React.FC<RightSectionProps> = ({
     </div>
     <div className="flex flex-col items-center justify-center w-full px-6">
       <div className="w-full max-w-md bg-card border border-border rounded-2xl shadow-xl p-8 backdrop-blur-sm">
-      {authMode === 'login' && (
-        <>
-          <h3 className="text-2xl font-medium my-4">Sign in to your account</h3>
-          <LoginForm startForgotPassword={startForgotPassword} infoMessage={infoMessage} />
-        </>
-      )}
-      {authMode === 'signup' && (
-        <>
-          <h3 className="text-2xl font-medium my-4">Create an account</h3>
-          <SignUpForm startOtpVerification={startOtpVerification} />
-        </>
-      )}
-      {authMode === 'otpVerification' && (
-        <OTPVerificationForm email={emailForOTP} handleOtpVerified={handleOtpVerified} />
-      )}
-      {authMode === 'forgotPassword' && (
-        <ForgotPasswordForm startResetPassword={startResetPassword} />
-      )}
-      {authMode === 'resetPassword' && (
-        <ResetPasswordForm
-          email={emailForPasswordReset}
-          handlePasswordReset={handlePasswordReset}
-        />
-      )}
+        {authMode === 'login' && (
+          <>
+            <h3 className="text-2xl font-medium my-4">Sign in to your account</h3>
+            <LoginForm startForgotPassword={startForgotPassword} infoMessage={infoMessage} />
+          </>
+        )}
+        {authMode === 'signup' && (
+          <>
+            <h3 className="text-2xl font-medium my-4">Create an account</h3>
+            <SignUpForm startOtpVerification={startOtpVerification} />
+          </>
+        )}
+        {authMode === 'otpVerification' && (
+          <OTPVerificationForm email={emailForOTP} handleOtpVerified={handleOtpVerified} />
+        )}
+        {authMode === 'forgotPassword' && (
+          <ForgotPasswordForm startResetPassword={startResetPassword} />
+        )}
+        {authMode === 'resetPassword' && (
+          <ResetPasswordForm
+            email={emailForPasswordReset}
+            handlePasswordReset={handlePasswordReset}
+          />
+        )}
       </div>
     </div>
   </div>

frontend/src/Pages/Home.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import { Button } from "@/components/ui/button";
 import { useNavigate } from "react-router-dom";
 import { AuthContext } from "@/context/authContext";
-import DebateCover from "../assets/DebateCover4.svg";
+import DebateCoverIllustration from "../components/DebateCoverIllustration";
 import { RiRobot2Fill } from "react-icons/ri";
 import { FaHandshakeSimpleSlash } from "react-icons/fa6";
 import AOSSIELogo from "@/assets/aossie.png";
@@ -21,7 +21,7 @@ const Home: React.FC = () => {
 
   const handlePlayDebateClick = () => {
     if (authContext?.isAuthenticated) {
-      navigate('/game');  
+      navigate('/game');
     } else {
       navigate('/auth', { state: { isSignUp: false } });
     }
@@ -35,7 +35,7 @@ const Home: React.FC = () => {
     }
   };
 
-  const logoutHandler = () =>{
+  const logoutHandler = () => {
     authContext?.logout()
     navigate("/")
   }
@@ -44,9 +44,9 @@ const Home: React.FC = () => {
     <div className="flex flex-col min-h-screen bg-background">
       <nav className="flex items-center justify-between px-6 py-4 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <div className="flex items-center gap-4">
-          <a 
-            href="https://aossie.org" 
-            target="_blank" 
+          <a
+            href="https://aossie.org"
+            target="_blank"
             rel="noopener noreferrer"
             className="p-1 hover:opacity-80 transition-opacity"
           >
@@ -62,14 +62,14 @@ const Home: React.FC = () => {
             <Button onClick={logoutHandler} variant="destructive" size="sm">Log out</Button>
           ) : (
             <>
-              <Button 
-                variant="ghost" 
+              <Button
+                variant="ghost"
                 className="text-foreground hover:bg-accent"
                 onClick={loginHandler}
               >
                 Login
               </Button>
-              <Button 
+              <Button
                 variant="outline"
                 className="font-bold border-primary text-primary hover:bg-primary hover:text-primary-foreground"
                 onClick={signupHandler}
@@ -84,7 +84,11 @@ const Home: React.FC = () => {
       <div className="flex items-center justify-center">
         <div className="flex flex-wrap items-center justify-center w-full px-2 md:px-16">
           <div className="w-full md:w-2/3 p-4 md:p-16">
-            <img src={DebateCover} alt="Debate Cover" className="w-full object-cover" />
+            <DebateCoverIllustration
+              className="w-full object-cover"
+              role="img"
+              aria-label="Debate Cover"
+            />
           </div>
           <div className="flex w-full md:w-1/3 flex-col items-center justify-center space-y-4 p-4">
             <h3 className="text-xl md:text-4xl font-bold text-center">

frontend/src/Pages/StartDebate.tsx

@@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom";
 import { RiRobot2Fill } from "react-icons/ri";
 import { FaHandshakeSimpleSlash } from "react-icons/fa6";
 
-import DebateCover from "../assets/DebateCover4.svg";
+import DebateCoverIllustration from "../components/DebateCoverIllustration";
 import { Button } from "../components/ui/button";
 import { AuthContext } from "../context/authContext";
 import DebatePopup from "@/components/DebatePopup";
@@ -35,17 +35,17 @@ const StartDebate = () => {
       <div className="flex items-center justify-center flex-1">
         <div className="flex flex-wrap items-center justify-center w-full px-2 md:px-16">
           <div className="w-full md:w-2/3 p-4 md:p-16">
-            <img
-              src={DebateCover}
-              alt="Debate Cover"
+            <DebateCoverIllustration
               className="w-full object-cover"
+              role="img"
+              aria-label="Debate Cover"
             />
           </div>
           <div className="flex w-full md:w-1/3 flex-col items-center justify-center space-y-4 p-4">
             <div className="flex flex-col items-center mb-6">
-              <a 
-                href="https://aossie.org" 
-                target="_blank" 
+              <a
+                href="https://aossie.org"
+                target="_blank"
                 rel="noopener noreferrer"
                 className="mb-2 hover:opacity-80 transition-opacity"
               >
@@ -94,4 +94,4 @@ const StartDebate = () => {
   );
 };
 
-export default StartDebate;
+export default StartDebate;