From 5878f0f0df20f6966025f446d19211dbb3c0657d Mon Sep 17 00:00:00 2001 From: Rounak Agarwal Date: Wed, 9 Sep 2026 21:49:02 +0530 Subject: [PATCH 1/4] fix: make auth illustration theme-aware for light mode contrast (#256) --- frontend/src/Pages/Authentication.tsx | 52 +- frontend/src/Pages/Home.tsx | 2 +- frontend/src/Pages/StartDebate.tsx | 8 +- .../components/DebateCoverIllustration.tsx | 443 ++++++++++++++++++ frontend/src/index.css | 10 +- 5 files changed, 481 insertions(+), 34 deletions(-) create mode 100644 frontend/src/components/DebateCoverIllustration.tsx diff --git a/frontend/src/Pages/Authentication.tsx b/frontend/src/Pages/Authentication.tsx index eb117cfa..a14e0490 100644 --- a/frontend/src/Pages/Authentication.tsx +++ b/frontend/src/Pages/Authentication.tsx @@ -2,7 +2,7 @@ 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 = () => ( @@ -16,7 +16,7 @@ const LeftSection = () => (
- Debate Cover +
@@ -73,30 +73,30 @@ const RightSection: React.FC = ({
- {authMode === 'login' && ( - <> -

Sign in to your account

- - - )} - {authMode === 'signup' && ( - <> -

Create an account

- - - )} - {authMode === 'otpVerification' && ( - - )} - {authMode === 'forgotPassword' && ( - - )} - {authMode === 'resetPassword' && ( - - )} + {authMode === 'login' && ( + <> +

Sign in to your account

+ + + )} + {authMode === 'signup' && ( + <> +

Create an account

+ + + )} + {authMode === 'otpVerification' && ( + + )} + {authMode === 'forgotPassword' && ( + + )} + {authMode === 'resetPassword' && ( + + )}
diff --git a/frontend/src/Pages/Home.tsx b/frontend/src/Pages/Home.tsx index 7a9e1272..bdd7d63c 100644 --- a/frontend/src/Pages/Home.tsx +++ b/frontend/src/Pages/Home.tsx @@ -84,7 +84,7 @@ const Home: React.FC = () => {
- Debate Cover +

diff --git a/frontend/src/Pages/StartDebate.tsx b/frontend/src/Pages/StartDebate.tsx index d940faac..d958d927 100644 --- a/frontend/src/Pages/StartDebate.tsx +++ b/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,9 +35,7 @@ const StartDebate = () => {
- Debate Cover
@@ -94,4 +92,4 @@ const StartDebate = () => { ); }; -export default StartDebate; +export default StartDebate; \ No newline at end of file diff --git a/frontend/src/components/DebateCoverIllustration.tsx b/frontend/src/components/DebateCoverIllustration.tsx new file mode 100644 index 00000000..3530b8ab --- /dev/null +++ b/frontend/src/components/DebateCoverIllustration.tsx @@ -0,0 +1,443 @@ +import React from "react"; + +const DebateCoverIllustration = (props: React.SVGProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default DebateCoverIllustration; diff --git a/frontend/src/index.css b/frontend/src/index.css index d07d593e..4d0e5212 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,8 +1,9 @@ @tailwind base; @tailwind components; @tailwind utilities; + @layer base { - + :root { --background: 0 0% 100%; --foreground: 20 14.3% 4.1%; @@ -15,6 +16,7 @@ --secondary: 60 4.8% 90.9%; --secondary-foreground: 24 9.8% 10%; --muted: 60 4.8% 95.9%; + --illustration-neutral: 215 25% 27%; --muted-foreground: 25 5.3% 44.7%; --accent: 60 4.8% 95.9%; --accent-foreground: 24 9.8% 10%; @@ -43,6 +45,7 @@ --secondary: 12 6.5% 15.1%; --secondary-foreground: 60 9.1% 97.8%; --muted: 12 6.5% 15.1%; + --illustration-neutral: 0 0% 88%; --muted-foreground: 24 5.4% 63.9%; --accent: 12 6.5% 15.1%; --accent-foreground: 60 9.1% 97.8%; @@ -70,6 +73,7 @@ --secondary: 0 0% 20%; --secondary-foreground: 0 0% 100%; --muted: 0 0% 25%; + --illustration-neutral: 0 0% 88%; --muted-foreground: 0 0% 70%; --accent: 60 100% 50%; --accent-foreground: 0 0% 0%; @@ -90,6 +94,7 @@ * { @apply border-border; } + body { @apply bg-background text-foreground; } @@ -100,6 +105,7 @@ transform: translateY(0); opacity: 1; } + 100% { transform: translateY(-150px); opacity: 0; @@ -133,4 +139,4 @@ body { margin: 0; font-family: 'Outfit', sans-serif; -} +} \ No newline at end of file From 0c911788cfafab78428fffbddad8a933d066b5b7 Mon Sep 17 00:00:00 2001 From: Rounak Agarwal Date: Wed, 9 Sep 2026 22:27:04 +0530 Subject: [PATCH 2/4] fix: import DebateCoverIllustration in Home page --- frontend/src/Pages/Home.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/Pages/Home.tsx b/frontend/src/Pages/Home.tsx index bdd7d63c..5d40b7d6 100644 --- a/frontend/src/Pages/Home.tsx +++ b/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"; From e7cf99fd83404136b1ab2375cd9dae738ad763a3 Mon Sep 17 00:00:00 2001 From: Rounak Agarwal Date: Thu, 10 Sep 2026 13:55:49 +0530 Subject: [PATCH 3/4] fix: keep auth tagline visible alongside illustration across viewport sizes --- frontend/src/Pages/Authentication.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/Pages/Authentication.tsx b/frontend/src/Pages/Authentication.tsx index a14e0490..e95ce55e 100644 --- a/frontend/src/Pages/Authentication.tsx +++ b/frontend/src/Pages/Authentication.tsx @@ -15,8 +15,8 @@ const LeftSection = () => ( Arguehub
-
- +
+
From 38064d58b31053d108843975bc99359e0739b5ef Mon Sep 17 00:00:00 2001 From: Rounak Agarwal Date: Thu, 10 Sep 2026 14:26:21 +0530 Subject: [PATCH 4/4] a11y: add role and aria-label to illustration for accessible name --- frontend/src/Pages/Authentication.tsx | 8 ++++++-- frontend/src/Pages/Home.tsx | 22 +++++++++++++--------- frontend/src/Pages/StartDebate.tsx | 8 +++++--- 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/frontend/src/Pages/Authentication.tsx b/frontend/src/Pages/Authentication.tsx index e95ce55e..5d617b9a 100644 --- a/frontend/src/Pages/Authentication.tsx +++ b/frontend/src/Pages/Authentication.tsx @@ -6,7 +6,7 @@ import DebateCoverIllustration from '../components/DebateCoverIllustration'; import { ThemeToggle } from '@/components/ThemeToggle'; const LeftSection = () => ( -
+
@@ -16,7 +16,11 @@ const LeftSection = () => (
- +
diff --git a/frontend/src/Pages/Home.tsx b/frontend/src/Pages/Home.tsx index 5d40b7d6..ef7914aa 100644 --- a/frontend/src/Pages/Home.tsx +++ b/frontend/src/Pages/Home.tsx @@ -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 = () => {