Fix light/dark mode styling for user profile dropdown and sign-in page

Author: TheJinius

frontend/app/login/page.tsx

@@ -37,18 +37,18 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-50">
-      <Card className="w-full max-w-md p-8 space-y-6">
+    <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-slate-900">
+      <Card className="w-full max-w-md p-8 space-y-6 bg-white dark:bg-slate-800 border-gray-200 dark:border-slate-700">
         <div className="text-center">
-          <h1 className="text-3xl font-bold font-bold text-gray-900 dark:text-[#33b5ff]">Sign In</h1>
-          <p className="mt-2 text-gray-600">
+          <h1 className="text-3xl font-bold font-bold text-blue-600 dark:text-blue-400">Sign In</h1>
+          <p className="mt-2 text-gray-600 dark:text-gray-400">
             Access your tariff application dashboard
           </p>
         </div>
 
         <Button 
           onClick={handleSignIn}
-          className="w-full"
+          className="w-full bg-blue-600 hover:bg-blue-700 text-white"
           size="lg"
         >
           Sign in with AWS Cognito

frontend/components/TopBar.tsx

@@ -148,26 +148,26 @@ export default function TopBar({ sidebarOpen, onToggleSidebar, activeTab, onTabC
             {/* Dropdown Menu */}
             {showUserMenu && (
               <div className="absolute right-0 top-full mt-2 z-50">
-                <Card className="w-80 shadow-lg">
+                <Card className="w-80 shadow-lg bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700">
                   <CardHeader>
-                    <CardTitle className="text-sm">User Profile</CardTitle>
+                    <CardTitle className="text-sm text-slate-900 dark:text-slate-100">User Profile</CardTitle>
                   </CardHeader>
                   <CardContent className="space-y-3">
                     {/* User Info */}
-                    <div className="text-xs space-y-2">
+                    <div className="text-xs space-y-2 text-slate-700 dark:text-slate-300">
                       <div>
-                        <strong>Username:</strong> {user?.username || 'N/A'}
+                        <strong className="text-slate-900 dark:text-slate-100">Username:</strong> {user?.username || 'N/A'}
                       </div>
                       <div>
-                        <strong>Email:</strong> {user?.email || 'N/A'}
+                        <strong className="text-slate-900 dark:text-slate-100">Email:</strong> {user?.email || 'N/A'}
                       </div>
                       <div>
-                        <strong>Groups:</strong> {user?.groups?.join(', ') || 'None'}
+                        <strong className="text-slate-900 dark:text-slate-100">Groups:</strong> {user?.groups?.join(', ') || 'None'}
                       </div>
 
                       {/* Session Status */}
                       <div>
-                        <strong>Session Status:</strong> 
+                        <strong className="text-slate-900 dark:text-slate-100">Session Status:</strong> 
                         {sessionError ? ` Error: ${sessionError}` : ' Active'}
                       </div>
                     </div>
@@ -177,7 +177,7 @@ export default function TopBar({ sidebarOpen, onToggleSidebar, activeTab, onTabC
                       onClick={handleSignOut}
                       variant="destructive"
                       size="sm"
-                      className="w-full"
+                      className="w-full bg-red-600 hover:bg-red-700 text-white"
                     >
                       <LogOut className="h-4 w-4 mr-2" />
                       Sign Out

frontend/public/cognito-custom.css

@@ -0,0 +1,95 @@
+/* AWS Cognito Hosted UI Custom CSS */
+/* Fix for light mode button visibility */
+
+/* Primary button styling */
+.btn-primary,
+button[type="submit"],
+input[type="submit"] {
+  background-color: #0070f3 !important;
+  color: white !important;
+  border: 1px solid #0070f3 !important;
+  font-weight: 600 !important;
+  padding: 12px 24px !important;
+  border-radius: 6px !important;
+  cursor: pointer !important;
+  transition: all 0.2s ease !important;
+}
+
+.btn-primary:hover,
+button[type="submit"]:hover,
+input[type="submit"]:hover {
+  background-color: #0051cc !important;
+  border-color: #0051cc !important;
+}
+
+/* Secondary buttons */
+.btn-secondary {
+  background-color: white !important;
+  color: #333 !important;
+  border: 1px solid #ddd !important;
+}
+
+.btn-secondary:hover {
+  background-color: #f5f5f5 !important;
+}
+
+/* Input fields - ensure good contrast */
+input[type="text"],
+input[type="password"],
+input[type="email"] {
+  border: 1px solid #ddd !important;
+  background-color: white !important;
+  color: #333 !important;
+  padding: 10px !important;
+  border-radius: 4px !important;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus {
+  border-color: #0070f3 !important;
+  outline: none !important;
+  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1) !important;
+}
+
+/* Labels */
+label {
+  color: #333 !important;
+  font-weight: 500 !important;
+  margin-bottom: 6px !important;
+  display: block !important;
+}
+
+/* Links */
+a {
+  color: #0070f3 !important;
+  text-decoration: none !important;
+}
+
+a:hover {
+  text-decoration: underline !important;
+}
+
+/* Error messages */
+.error-message,
+.alert-danger {
+  background-color: #fee !important;
+  color: #c00 !important;
+  border: 1px solid #fcc !important;
+  padding: 10px !important;
+  border-radius: 4px !important;
+  margin-bottom: 16px !important;
+}
+
+/* Container */
+.container {
+  background-color: white !important;
+  padding: 32px !important;
+  border-radius: 8px !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Headings */
+h1, h2, h3 {
+  color: #111 !important;
+}