From 80ee2faed89ad7798d5e789ca9596a9ae0a5d369 Mon Sep 17 00:00:00 2001
From: Eric Gullickson <16152721+ericgullickson@users.noreply.github.com>
Date: Thu, 12 Feb 2026 20:14:01 -0600
Subject: [PATCH] fix: Replace circle toggle with MUI Switch pill style (refs
 #148)

EmailNotificationToggle used a custom button-based toggle that rendered
as a circle. Replaced with MUI Switch component to match the pill-style
toggles used on the SettingsPage throughout the app.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/EmailNotificationToggle.tsx    | 39 ++++++-------------
 1 file changed, 12 insertions(+), 27 deletions(-)

diff --git a/frontend/src/features/notifications/components/EmailNotificationToggle.tsx b/frontend/src/features/notifications/components/EmailNotificationToggle.tsx
index a82e4ca..5203a94 100644
--- a/frontend/src/features/notifications/components/EmailNotificationToggle.tsx
+++ b/frontend/src/features/notifications/components/EmailNotificationToggle.tsx
@@ -1,9 +1,10 @@
 /**
  * @ai-summary Email notification toggle component
- * @ai-context Mobile-first responsive toggle switch for email notifications
+ * @ai-context Uses MUI Switch to match SettingsPage pill-style toggles
  */
 
 import React from 'react';
+import { Box, Switch, Typography } from '@mui/material';
 
 interface EmailNotificationToggleProps {
   enabled: boolean;
@@ -19,32 +20,16 @@ export const EmailNotificationToggle: React.FC<EmailNotificationToggleProps> = (
   className = '',
 }) => {
   return (
-    <div className={`flex items-center justify-between gap-3 ${className}`}>
-      <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+    <Box className={className} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
+      <Typography variant="body2" fontWeight={500} color="text.secondary">
         {label}
-      </label>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={enabled}
-        aria-label={label}
-        onClick={() => onChange(!enabled)}
-        className={`
-          relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full
-          border-2 border-transparent transition-colors duration-200 ease-in-out
-          focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
-          ${enabled ? 'bg-primary-600' : 'bg-slate-300 dark:bg-slate-600'}
-        `}
-        style={{ minWidth: '44px', minHeight: '44px', padding: '9px 0' }}
-      >
-        <span
-          className={`
-            pointer-events-none inline-block h-5 w-5 transform rounded-full
-            bg-white shadow ring-0 transition duration-200 ease-in-out
-            ${enabled ? 'translate-x-5' : 'translate-x-0'}
-          `}
-        />
-      </button>
-    </div>
+      </Typography>
+      <Switch
+        checked={enabled}
+        onChange={(e) => onChange(e.target.checked)}
+        color="primary"
+        inputProps={{ 'aria-label': label }}
+      />
+    </Box>
   );
 };