From 01c69fc8cdae799e1b93ec2d55a6301c9be62027 Mon Sep 17 00:00:00 2001 From: taylanbakircioglu Date: Thu, 2 Apr 2026 15:16:24 +0300 Subject: [PATCH] fix: dark mode compatibility for Change Detection and Login pages - Anomalies card: dark-aware gradient background - Compare Runs summary cards: dark-aware background colors - Login page: dark mode CSS for inputs, background, and card shadow - Login version: use dynamic APP_VERSION instead of hardcoded 1.0.0 - Config: clean up comment in dns_search_domains field Made-with: Cursor --- frontend/src/pages/ChangeDetection.tsx | 14 +++++---- frontend/src/pages/Login.css | 40 ++++++++++++++++++++++++-- frontend/src/pages/Login.tsx | 3 +- services/graph-writer/app/config.py | 2 +- 4 files changed, 50 insertions(+), 9 deletions(-) diff --git a/frontend/src/pages/ChangeDetection.tsx b/frontend/src/pages/ChangeDetection.tsx index a55decf..3649e92 100644 --- a/frontend/src/pages/ChangeDetection.tsx +++ b/frontend/src/pages/ChangeDetection.tsx @@ -1374,7 +1374,11 @@ const ChangeDetection: React.FC = () => { onClick={() => handleStatCardClick('anomalies')} style={{ cursor: 'pointer', - background: anomalyCount > 0 ? 'linear-gradient(135deg, #fff2e8 0%, #fff7e6 100%)' : undefined, + background: anomalyCount > 0 + ? isDark + ? 'linear-gradient(135deg, rgba(212, 117, 106, 0.18) 0%, rgba(212, 117, 106, 0.08) 100%)' + : 'linear-gradient(135deg, #fff2e8 0%, #fff7e6 100%)' + : undefined, borderLeft: anomalyCount > 0 ? '3px solid #d4756a' : undefined, border: activeStatFilter === 'anomalies' ? '2px solid #d4756a' : undefined, }} @@ -2064,7 +2068,7 @@ const ChangeDetection: React.FC = () => { {/* Comparison Summary Cards */} - + Run #{runA}} value={runComparisonData.comparison.total_in_run_a} @@ -2077,7 +2081,7 @@ const ChangeDetection: React.FC = () => { - + Run #{runB}} value={runComparisonData.comparison.total_in_run_b} @@ -2090,7 +2094,7 @@ const ChangeDetection: React.FC = () => { - + New in Run #{runB}} value={runComparisonData.comparison.only_in_run_b} @@ -2103,7 +2107,7 @@ const ChangeDetection: React.FC = () => { - + Gone from #{runA}} value={runComparisonData.comparison.only_in_run_a} diff --git a/frontend/src/pages/Login.css b/frontend/src/pages/Login.css index 00f1e25..9bb0f0b 100644 --- a/frontend/src/pages/Login.css +++ b/frontend/src/pages/Login.css @@ -194,6 +194,42 @@ } } -/* Light theme is default - no dark mode for login page */ -/* Keep the ocean theme bright and inviting */ +/* Dark mode overrides */ +.dark-theme .login-container { + background: linear-gradient(135deg, #0c4a6e 0%, #164e63 50%, #1e293b 100%); +} + +.dark-theme .login-container::before { + background: + radial-gradient(circle at 20% 50%, rgba(8, 145, 178, 0.15) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%); +} + +.dark-theme .login-card { + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); +} + +.dark-theme .login-form .ant-input-affix-wrapper, +.dark-theme .login-form .ant-input-password { + background: #141414 !important; + border-color: #374151 !important; +} + +.dark-theme .login-form .ant-input-affix-wrapper .ant-input, +.dark-theme .login-form .ant-input-password .ant-input { + background: #141414 !important; + color: #e5e7eb !important; +} + +.dark-theme .login-form .ant-input-affix-wrapper:hover, +.dark-theme .login-form .ant-input-affix-wrapper-focused, +.dark-theme .login-form .ant-input-password:hover { + border-color: #0891b2 !important; + box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2) !important; +} + +.dark-theme .login-form .ant-input-affix-wrapper .ant-input::placeholder, +.dark-theme .login-form .ant-input-password .ant-input::placeholder { + color: rgba(255, 255, 255, 0.3) !important; +} diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx index 175ede6..40f86a5 100644 --- a/frontend/src/pages/Login.tsx +++ b/frontend/src/pages/Login.tsx @@ -7,6 +7,7 @@ import { RootState } from '../store'; import { loginStart, loginSuccess, loginFailure } from '../store/slices/authSlice'; import { apiClient } from '../utils/api'; import FlowfishLogo from '../components/FlowfishLogo'; +import { APP_VERSION } from '../version'; import './Login.css'; const { useToken } = theme; @@ -317,7 +318,7 @@ const Login: React.FC = () => { }} > - Secure Enterprise Platform · Version 1.0.0 + Secure Enterprise Platform · Version {APP_VERSION} diff --git a/services/graph-writer/app/config.py b/services/graph-writer/app/config.py index d5db11f..dbd5cd3 100644 --- a/services/graph-writer/app/config.py +++ b/services/graph-writer/app/config.py @@ -54,7 +54,7 @@ class Settings(BaseSettings): # DNS search domain normalization — comma-separated list of custom search # domains to strip from DNS names before creating graph nodes. # Typically matches the search list from /etc/resolv.conf on cluster nodes. - # Example: DNS_SEARCH_DOMAINS=mycompany.local,internal.mycompany.local + # Comma-separated list, typically matching /etc/resolv.conf search entries dns_search_domains: str = Field(default="", description="From DNS_SEARCH_DOMAINS env var") # Kubernetes (for workload discovery)