From eb835c9098c5c55f85669ea738304421e80aa5ca Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Sun, 29 Mar 2026 17:06:23 +0200
Subject: [PATCH 1/2] feat: add aria-labels for play/pause and mute/unmute
 buttons in Audio component for improved accessibility

---
 surfsense_web/components/tool-ui/audio.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/surfsense_web/components/tool-ui/audio.tsx b/surfsense_web/components/tool-ui/audio.tsx
index dae752034..f8053677c 100644
--- a/surfsense_web/components/tool-ui/audio.tsx
+++ b/surfsense_web/components/tool-ui/audio.tsx
@@ -223,6 +223,7 @@ export function Audio({ id, src, title, durationMs, className }: AudioProps) {
 						onClick={togglePlayPause}
 						disabled={isLoading}
 						className="size-7 sm:size-8"
+						aria-label={isPlaying ? "Pause" : "Play"}
 					>
 						{isLoading ? (
 							<div className="size-3 sm:size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
@@ -234,7 +235,7 @@ export function Audio({ id, src, title, durationMs, className }: AudioProps) {
 					</Button>
 
 					<div className="group/volume flex items-center gap-1 sm:gap-1.5">
-						<Button variant="ghost" size="icon" onClick={toggleMute} className="size-7 sm:size-8">
+						<Button variant="ghost" size="icon" onClick={toggleMute} className="size-7 sm:size-8" aria-label={isMuted ? "Unmute" : "Mute"}>
 							{isMuted ? (
 								<VolumeXIcon className="size-3.5 sm:size-4" />
 							) : (

From 71db2f8c386c59ebe08065ee36da568a55268803 Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Sun, 29 Mar 2026 17:27:09 +0200
Subject: [PATCH 2/2] style: update LocalLoginForm styles with theme colors ref
 from global.css

---
 .../app/(home)/login/LocalLoginForm.tsx       | 36 +++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/surfsense_web/app/(home)/login/LocalLoginForm.tsx b/surfsense_web/app/(home)/login/LocalLoginForm.tsx
index 7c85eedbd..3d675e56d 100644
--- a/surfsense_web/app/(home)/login/LocalLoginForm.tsx
+++ b/surfsense_web/app/(home)/login/LocalLoginForm.tsx
@@ -96,7 +96,7 @@ export function LocalLoginForm() {
 							animate={{ opacity: 1, y: 0, scale: 1 }}
 							exit={{ opacity: 0, y: -10, scale: 0.95 }}
 							transition={{ duration: 0.3 }}
-							className="rounded-lg border border-red-200 bg-red-50 p-4 text-red-900 shadow-sm dark:border-red-900/30 dark:bg-red-900/20 dark:text-red-200"
+							className="rounded-lg border border-destructive/20 bg-destructive/10 p-4 text-destructive shadow-sm"
 						>
 							<div className="flex items-start gap-3">
 								<svg
@@ -109,7 +109,7 @@ export function LocalLoginForm() {
 									strokeWidth="2"
 									strokeLinecap="round"
 									strokeLinejoin="round"
-									className="flex-shrink-0 mt-0.5 text-red-500 dark:text-red-400"
+									className="flex-shrink-0 mt-0.5 text-destructive"
 								>
 									<title>Error Icon</title>
 									<circle cx="12" cy="12" r="10" />
@@ -118,13 +118,13 @@ export function LocalLoginForm() {
 								</svg>
 								<div className="flex-1 min-w-0">
 									<p className="text-sm font-semibold mb-1">{error.title}</p>
-									<p className="text-sm text-red-700 dark:text-red-300">{error.message}</p>
+									<p className="text-sm text-destructive">{error.message}</p>
 								</div>
 								<button
 									onClick={() => {
 										setError({ title: null, message: null });
 									}}
-									className="flex-shrink-0 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-200 transition-colors"
+									className="flex-shrink-0 text-destructive hover:text-destructive/90 transition-colors"
 									aria-label="Dismiss error"
 									type="button"
 								>
@@ -152,7 +152,7 @@ export function LocalLoginForm() {
 				<div>
 					<label
 						htmlFor="email"
-						className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+						className="block text-sm font-medium text-foreground"
 					>
 						{t("email")}
 					</label>
@@ -163,10 +163,10 @@ export function LocalLoginForm() {
 						placeholder="you@example.com"
 						value={username}
 						onChange={(e) => setUsername(e.target.value)}
-						className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-all ${
-							error.title
-								? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700"
-								: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700"
+					className={`mt-1 block w-full rounded-md border px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-background text-foreground transition-all ${
+						error.title
+							? "border-destructive focus:border-destructive focus:ring-destructive"
+							: "border-border focus:border-primary focus:ring-primary"
 						}`}
 						disabled={isLoggingIn}
 					/>
@@ -175,7 +175,7 @@ export function LocalLoginForm() {
 				<div>
 					<label
 						htmlFor="password"
-						className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+						className="block text-sm font-medium text-foreground"
 					>
 						{t("password")}
 					</label>
@@ -187,17 +187,17 @@ export function LocalLoginForm() {
 							placeholder="Enter your password"
 							value={password}
 							onChange={(e) => setPassword(e.target.value)}
-							className={`mt-1 block w-full rounded-md border pr-10 px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:bg-gray-800 dark:text-white transition-all ${
+							className={`mt-1 block w-full rounded-md border pr-10 px-3 py-1.5 md:py-2 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-background text-foreground transition-all ${
 								error.title
-									? "border-red-300 focus:border-red-500 focus:ring-red-500 dark:border-red-700"
-									: "border-gray-300 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-700"
+									? "border-destructive focus:border-destructive focus:ring-destructive"
+									: "border-border focus:border-primary focus:ring-primary"
 							}`}
 							disabled={isLoggingIn}
 						/>
 						<button
 							type="button"
 							onClick={() => setShowPassword((prev) => !prev)}
-							className="absolute inset-y-0 right-0 flex items-center pr-3 mt-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+							className="absolute inset-y-0 right-0 flex items-center pr-3 mt-1 text-muted-foreground hover:text-foreground"
 							aria-label={showPassword ? t("hide_password") : t("show_password")}
 						>
 							{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@@ -208,12 +208,12 @@ export function LocalLoginForm() {
 				<button
 					type="submit"
 					disabled={isLoggingIn}
-					className="relative w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
+					className="relative w-full rounded-md bg-primary px-4 py-1.5 md:py-2 text-primary-foreground shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
 				>
 					<span className={isLoggingIn ? "invisible" : ""}>{t("sign_in")}</span>
 					{isLoggingIn && (
 						<span className="absolute inset-0 flex items-center justify-center">
-							<Spinner size="sm" className="text-white" />
+							<Spinner size="sm" className="text-primary-foreground" />
 						</span>
 					)}
 				</button>
@@ -221,11 +221,11 @@ export function LocalLoginForm() {
 
 			{authType === "LOCAL" && (
 				<div className="mt-4 text-center text-sm">
-					<p className="text-gray-600 dark:text-gray-400">
+					<p className="text-muted-foreground">
 						{t("dont_have_account")}{" "}
 						<Link
 							href="/register"
-							className="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400"
+							className="font-medium text-primary hover:text-primary/90"
 						>
 							{t("sign_up")}
 						</Link>