diff --git a/THEME_IMPROVEMENTS.md b/THEME_IMPROVEMENTS.md deleted file mode 100644 index 5ba6df9..0000000 --- a/THEME_IMPROVEMENTS.md +++ /dev/null @@ -1,67 +0,0 @@ -# Theme Improvements - Better Contrast and Readability - -## Issues Fixed - -### 1. **Too Bright Light Theme** -- **Before**: Very bright white backgrounds that were harsh on the eyes -- **After**: Softer, more muted backgrounds using `#f1f5f9`, `#e2e8f0`, and `#cbd5e1` - -### 2. **Poor Text Contrast** -- **Before**: Many text elements had the same color as background, making them invisible -- **After**: Strong contrast with dark text (`#0f172a`, `#1e293b`, `#334155`) on light backgrounds - -### 3. **Specific Text Color Issues Fixed** -- Member hostnames and IPs now use `var(--text-primary)` for maximum readability -- Latency labels and values have proper contrast -- Navigation tabs are clearly visible in both themes -- Form inputs and dropdowns have proper text contrast -- Status indicators have appropriate colors with good contrast - -## Color Palette Updates - -### Light Theme (Improved) -- **Background**: Softer gradients (`#f1f5f9` → `#e2e8f0` → `#cbd5e1`) -- **Text Primary**: `#0f172a` (very dark for maximum contrast) -- **Text Secondary**: `#1e293b` (dark gray) -- **Text Tertiary**: `#334155` (medium gray) -- **Text Muted**: `#475569` (lighter gray) -- **Borders**: Stronger borders (`rgba(30, 41, 59, 0.2)`) for better definition - -### Dark Theme (Unchanged) -- Maintains the original dark theme for users who prefer it -- All existing functionality preserved - -## Technical Improvements - -### CSS Specificity -- Added `!important` rules for critical text elements to ensure they override any conflicting styles -- Used `[data-theme="light"]` selectors for theme-specific overrides - -### Contrast Ratios -- All text now meets WCAG AA contrast requirements -- Status indicators have clear, distinguishable colors -- Interactive elements have proper hover states - -### Readability Enhancements -- Removed problematic opacity values that made text invisible -- Ensured all form elements have proper text contrast -- Fixed dropdown options to be readable -- Improved error and success message visibility - -## Testing - -To test the improvements: - -1. Open `http://localhost:8080` in your browser -2. Click the theme toggle to switch to light theme -3. Verify all text is clearly readable -4. Check that the background is not too bright -5. Test form interactions and dropdowns -6. Verify status indicators are clearly visible - -## Files Modified - -- `public/styles/theme.css` - Updated color palette and added contrast fixes -- `public/styles/main.css` - Fixed text color issues and opacity problems - -The light theme is now much easier on the eyes with proper contrast for all text elements. diff --git a/THEME_README.md b/THEME_README.md deleted file mode 100644 index 1e0f36a..0000000 --- a/THEME_README.md +++ /dev/null @@ -1,144 +0,0 @@ -# SPORE UI Theme System - -This document describes the theme system implementation for SPORE UI, which provides both dark and light themes with a user-friendly theme switcher. - -## Features - -- **Dark Theme (Default)**: The original dark theme with dark backgrounds and light text -- **Light Theme**: A new light theme with light backgrounds and dark text -- **Theme Switcher**: A toggle button in the header to switch between themes -- **Persistence**: Theme preference is saved in localStorage -- **Smooth Transitions**: CSS transitions for smooth theme switching -- **Responsive Design**: Theme switcher adapts to mobile screens - -## Files Added/Modified - -### New Files -- `public/styles/theme.css` - CSS variables and theme definitions -- `public/scripts/theme-manager.js` - JavaScript theme management -- `THEME_README.md` - This documentation - -### Modified Files -- `public/index.html` - Added theme switcher to header and theme CSS link -- `public/styles/main.css` - Updated to use CSS variables instead of hardcoded colors - -## Implementation Details - -### CSS Variables System - -The theme system uses CSS custom properties (variables) defined in `theme.css`: - -```css -:root { - /* Dark theme variables */ - --bg-primary: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #1a252f 100%); - --text-primary: #ecf0f1; - --border-primary: rgba(255, 255, 255, 0.1); - /* ... more variables */ -} - -[data-theme="light"] { - /* Light theme overrides */ - --bg-primary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%); - --text-primary: #1e293b; - --border-primary: rgba(30, 41, 59, 0.1); - /* ... more variables */ -} -``` - -### Theme Switcher - -The theme switcher is located in the header's right section and includes: -- A label indicating "Theme:" -- A toggle button with sun/moon icons -- Hover effects and smooth animations -- Mobile-responsive design - -### JavaScript Theme Manager - -The `ThemeManager` class handles: -- Theme persistence in localStorage -- Theme switching logic -- Icon updates (sun for light, moon for dark) -- Event dispatching for other components -- System theme detection (future enhancement) - -## Usage - -### For Users -1. Click the theme toggle button in the header -2. The theme will switch immediately with smooth transitions -3. Your preference is automatically saved - -### For Developers - -#### Accessing Current Theme -```javascript -// Get current theme -const currentTheme = window.themeManager.getCurrentTheme(); - -// Listen for theme changes -window.addEventListener('themeChanged', (event) => { - console.log('Theme changed to:', event.detail.theme); -}); -``` - -#### Programmatic Theme Setting -```javascript -// Set theme programmatically -window.themeManager.setTheme('light'); // or 'dark' -``` - -## Color Palette - -### Dark Theme -- **Background**: Dark gradients (#2c3e50, #34495e, #1a252f) -- **Text**: Light colors (#ecf0f1, rgba(255,255,255,0.8)) -- **Accents**: Bright colors (#4ade80, #60a5fa, #fbbf24) -- **Borders**: Subtle white borders with low opacity - -### Light Theme -- **Background**: Light gradients (#f8fafc, #e2e8f0, #cbd5e1) -- **Text**: Dark colors (#1e293b, rgba(30,41,59,0.8)) -- **Accents**: Muted colors (#059669, #2563eb, #d97706) -- **Borders**: Subtle dark borders with low opacity - -## Browser Support - -- Modern browsers with CSS custom properties support -- localStorage support for theme persistence -- Graceful degradation for older browsers - -## Future Enhancements - -1. **System Theme Detection**: Automatically detect user's system preference -2. **More Themes**: Additional theme options (e.g., high contrast, colorblind-friendly) -3. **Theme Customization**: Allow users to customize accent colors -4. **Animation Preferences**: Respect user's motion preferences - -## Testing - -To test the theme system: - -1. Start the development server: `cd public && python3 -m http.server 8080` -2. Open `http://localhost:8080` in your browser -3. Click the theme toggle button in the header -4. Verify smooth transitions and proper color contrast -5. Refresh the page to verify theme persistence - -## Troubleshooting - -### Theme Not Switching -- Check browser console for JavaScript errors -- Verify `theme-manager.js` is loaded -- Check if localStorage is available and not disabled - -### Colors Not Updating -- Verify `theme.css` is loaded after `main.css` -- Check if CSS variables are supported in your browser -- Ensure the `data-theme` attribute is being set on the `` element - -### Mobile Issues -- Test on actual mobile devices, not just browser dev tools -- Verify touch events are working properly -- Check responsive CSS rules for theme switcher diff --git a/public/scripts/components/ClusterMembersComponent.js b/public/scripts/components/ClusterMembersComponent.js index 0f994fd..fda4a19 100644 --- a/public/scripts/components/ClusterMembersComponent.js +++ b/public/scripts/components/ClusterMembersComponent.js @@ -79,11 +79,22 @@ class ClusterMembersComponent extends Component { openDrawerForMember(memberIp) { this.ensureDrawer(); - // Set drawer title to member name (hostname) or IP + // Set drawer title to member name (hostname) and IP try { const members = (this.viewModel && typeof this.viewModel.get === 'function') ? this.viewModel.get('members') : []; const member = Array.isArray(members) ? members.find(m => m && m.ip === memberIp) : null; - const displayName = (member && member.hostname) ? member.hostname : (member && member.ip) ? member.ip : memberIp; + const hostname = (member && member.hostname) ? member.hostname : ''; + const ip = (member && member.ip) ? member.ip : memberIp; + let displayName = memberIp; + + if (hostname && ip) { + displayName = `${hostname} - ${ip}`; + } else if (hostname) { + displayName = hostname; + } else if (ip) { + displayName = ip; + } + const titleEl = this.detailsDrawer.querySelector('.drawer-title'); if (titleEl) { titleEl.textContent = displayName; diff --git a/public/scripts/components/TopologyGraphComponent.js b/public/scripts/components/TopologyGraphComponent.js index 6c7c58d..2c9a3b3 100644 --- a/public/scripts/components/TopologyGraphComponent.js +++ b/public/scripts/components/TopologyGraphComponent.js @@ -63,9 +63,20 @@ class TopologyGraphComponent extends Component { openDrawerForNode(nodeData) { this.ensureDrawer(); - // Title from hostname or IP + // Title from hostname and IP try { - const displayName = nodeData.hostname || nodeData.ip || 'Node Details'; + const hostname = nodeData.hostname || ''; + const ip = nodeData.ip || ''; + let displayName = 'Node Details'; + + if (hostname && ip) { + displayName = `${hostname} - ${ip}`; + } else if (hostname) { + displayName = hostname; + } else if (ip) { + displayName = ip; + } + const titleEl = this.detailsDrawer.querySelector('.drawer-title'); if (titleEl) titleEl.textContent = displayName; } catch (_) {}