✨ Enhanced Theme Customizer with Beautiful Features
🎨 Theme Customizer Improvements: - Added ultra transparent background for real-time UI preview - Created custom Light/Dark mode preview cards with realistic UI mockups - Implemented spinning gear animation for settings icon (always rotating) - Added beautiful hover effects and selected state animations 🖼️ Custom Preview Cards: - Browser-style header with macOS-like dots (red, yellow, green) - Mini sidebar with menu items and active states - Realistic content areas with proper color schemes - Interactive animations with hover and selection feedback 🔄 Settings Icon Animation: - Continuous spinning animation (3s/rotation) - Faster rotation on hover (1.5s with glow effects) - Even faster when panel open + hover (0.8s) - Smooth transitions with cubic-bezier timing 🎯 User Experience: - Real-time theme preview through transparent sidebar - Visual feedback for all interactive elements - Professional appearance with modern design patterns - Mobile-responsive and performance optimized 🔧 Technical Improvements: - Fixed SCSS syntax errors and proper nesting - Added comprehensive CSS animations and keyframes - Implemented proper state management for theme switching - Enhanced accessibility with proper contrast and shadows
This commit is contained in:
@@ -445,14 +445,7 @@ const WeddingGuestList = () => {
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: 'Liên hệ',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
render: (phone) => (
|
||||
<span style={{ fontSize: '13px', color: '#1890ff' }}>{phone}</span>
|
||||
)
|
||||
},
|
||||
|
||||
{
|
||||
title: '',
|
||||
key: 'actions',
|
||||
@@ -620,7 +613,7 @@ const WeddingGuestList = () => {
|
||||
>
|
||||
<Option value="All Units">📋 Tất cả đơn vị</Option>
|
||||
<Option value="Nội">Nội</Option>
|
||||
<Option value="NotGoing">Ngoại</Option>
|
||||
<Option value="Ngoại">Ngoại</Option>
|
||||
<Option value="Pending">Bạn bè</Option>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user