Liquid Blue Applied #71
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…d animated gradients
- fix: remove internal boxes from search components (HeaderSearch, UserToolbar) - style: add liquid-glow-text effects for dashboard component titles - fix: remove background box behind header buttons in ProfileColumn - style: reposition header buttons (expand, notifications, settings) to far right - style: restore rounded corners to HeaderSearch component - clean: remove unwanted backgrounds and outlines throughout header area - polish: improve header button spacing and alignment
…vanced settings pages
…ced settings, and allowed users pages
…ed DashboardWrapper to Relay Settings, Advanced Settings, Allowed Users, Access Control, and Nostr Statistics pages
…page - Reduced container padding and margins by 50% for tighter layout
…nt for consistent styling with Relay Settings page
…page - Reduced container padding and margins by 50% for tighter layout
…backgrounds and replace with transparent cyan glass effect
… uniform blue (#1890ff) for all relay modes
…e - remove unnecessary wrapper containers and simplify form structure
… Advanced Settings pages - remove unnecessary wrapper containers and simplify form structure
…e sections - Remove ant-form global styling, eliminate backgrounds and border-radius from info boxes
… page - Remove backgrounds, borders, and shadows from CollapsibleSection headers - Restore proper spacing between sections (1.5rem) - Keep headers as simple centered text when collapsed
…appearance - removed duplicate titles in all settings components, made title prop optional, added responsive padding (50x60px desktop, 40x30px tablet, 30x16px mobile), restored glowing box container styling
…nt with transparent blue disabled state
…Unregistered Kind Numbers, Event Kinds Configuration, and all Media Extensions
…uttons - Updated Send button with SendOutlined icon and liquid blue gradient - Updated Receiving Address button with DownloadOutlined icon - Redesigned button styles with exact liquid blue gradient specifications - Added glassmorphic effects: backdrop blur, inner shadows, border styling - Implemented liquid shimmer animation on hover - Added glass overlay reflection layer - Enhanced with multi-layer shadows for depth - Consistent blue gradient: from-blue-600/18 to-cyan-600/10 - Hover states with enhanced blue saturation - Icons include drop-shadow glow effects - Smooth cubic-bezier transitions throughout
…ttons - Updated button styles with teal-cyan-green gradient (from-teal-500/25 via-cyan-500/20 to-green-500/25) - Changed border to teal-400/25 for consistency - Enhanced hover state with 30% opacity gradients - Added stronger active state with 35% opacity - Updated shimmer effect with multi-color teal-cyan-green animation - Modified icon glow to use teal drop-shadow - Adjusted all shadow effects to use teal-cyan color palette - Updated focus and disabled states with matching colors - Applied gradient to both normal and ghost button variants
- Fixed knob sizing to 18px for proper fit within toggle - Added proper positioning for checked state knob - Removed dollar sign symbol from USD state knob - Maintained gradient effects and glow without symbols - Enhanced inner glow effects with subtle radial gradients - Consistent knob sizing across all states and hover effects - Fixed knob positioning with top: 2px and proper left calc for checked
- Network toggle now matches USD emerald green theme when enabled - Dull gray appearance when disabled (no colors) - Enhanced shimmer and glow effects matching USD state - Perfect knob centering at top: 0px - Green-tinted knob with emerald glow when enabled
…rom all settings toggles
…o Advanced Settings, Allowed Users, and Blocked Pubkeys pages
- Fixed dropdowns and modals not appearing in fullscreen mode by configuring global getPopupContainer - Added rounded top-left corner to right column for smoother UI - Updated Paid Subscribers buttons with liquid glass styling to match Send/Receive buttons - Ensured symmetrical spacing (12px mobile, 16px desktop) for title and buttons
… display in fullscreen mode
…rem height) and fix transaction component background to match balance component
… pages with glass morphism theme, and standardize chart component sizes
… pages with glass morphism theme, and standardize chart component sizes
…aturing gradient, glow effects and animations
…ove white background and apply dark glass morphism with cyan accents
… dark glass morphism background, match Bitcoin chart styling, add expand/collapse all button
…d Subscribers - Apply glass morphism effects and cyan color scheme to BaseNotification icons and notification items
…d Subscribers - Apply glass morphism effects and cyan color scheme to BaseNotification icons and notification items
…ement, keep pulse glow, reposition badge to top-right of bell icon
…y cyan colors and glass morphism effects to all notification buttons
…- buttons and badge
…- buttons and badge
…d glass morphism and depth effects
…ors, no animations, clean table layout
…ettings and Advanced Settings titles added, Content Moderation renamed, font colors updated to white, table borders removed
…n-top from Tables component
…ics page - now shows as simple colored text
… sizes and fix double container issue
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Liquid Blue Theme Implementation for HORNETS Relay Panel
Executive Summary
Complete UI transformation implementing a liquid blue/cyan glassmorphism theme inspired by futuristic AI interfaces. This comprehensive redesign touches every aspect of the panel, creating a cohesive, modern, and visually striking interface.
Major Feature Implementations
1. Core Theme System
2. Custom Components
New UI Components
LiquidToggle Component: Custom toggle switch with emerald green/cyan glow effects
LiquidGlassCheckbox: Glassmorphic checkboxes with cyan borders and glow
LiquidBlueButton: Enhanced buttons with liquid blue gradients
LiquidBlueBadge: Notification badge with pulse animations
3. Dashboard Enhancements
Background & Animations
Component Styling
Paid Subscribers:
Charts & Graphs:
Balance & Transactions:
4. Settings Pages Redesign
Relay Settings
Advanced Settings
Content Moderatio
5. Navigation & Layout
Sidebar Navigation
Header Improvements
Two-Column Layout
6. Authentication Screens
7. Notifications System
Notification Pages
Dropdown Improvements
8. Nostr Statistics Page
Technical Improvements
Performance Optimizations
Responsive Design
Code Organization
Bug Fixes
Fullscreen Mode Issues
UI Consistency
Form Elements
Layout Issues
Files Modified
Component Files (41+ components updated)
Impact
User Experience
Developer Experience
Migration Notes
Visual Highlights
Testing Checklist
Ready for Production
This comprehensive UI transformation is complete and ready for deployment. The liquid blue theme provides a modern, professional interface that enhances the user experience while maintaining all existing functionality.