From f6cffbd21a6bd8a5cd3faa13243359d2e4758404 Mon Sep 17 00:00:00 2001 From: "tuan.cna" Date: Fri, 30 May 2025 15:07:41 +0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=93=20Enhanced=20Dark/Light=20Mode=20S?= =?UTF-8?q?upport=20for=20Custom=20Pagination?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🎨 Complete Theme Integration: - Full dark mode and light mode styling like Product component - Automatic theme switching based on Redux isDarkMode state - Consistent styling patterns across the application 🌙 Dark Mode Features: - Dark blue/gray gradient backgrounds (#2c3e50, #34495e) - Neon blue accents and borders (rgba(52, 152, 219, 0.3)) - Glassmorphism effects with backdrop blur - Orange active page highlighting (#f39c12, #e67e22) - Blue hover effects (#3498db, #2980b9) - White text on dark backgrounds ☀️ Light Mode Features: - Clean white/gray gradients (#ffffff, #f8f9fa) - Subtle gray borders and shadows - Blue active page highlighting (#007bff, #0056b3) - Professional light theme appearance - Dark text on light backgrounds 🔧 Technical Improvements: - Removed all inline styles from pagination components - CSS-only styling with proper class-based approach - Smooth transitions between theme modes - Consistent hover and active states - Proper disabled states for loading 🎯 Visual Enhancements: - Enhanced gradient effects for both themes - Improved shadow and border styling - Better color contrast for accessibility - Consistent icon styling across themes - Professional hover animations 🚀 User Experience: - Seamless theme switching without page reload - Consistent visual language with Product component - Improved readability in both modes - Better visual hierarchy and spacing - Enhanced interactive feedback --- .../projects/projecttracker.jsx | 243 ++++++++++-------- 1 file changed, 137 insertions(+), 106 deletions(-) diff --git a/src/feature-module/projects/projecttracker.jsx b/src/feature-module/projects/projecttracker.jsx index fb90682..9e10032 100644 --- a/src/feature-module/projects/projecttracker.jsx +++ b/src/feature-module/projects/projecttracker.jsx @@ -462,30 +462,110 @@ const ProjectTracker = () => { opacity: 1 !important; position: relative !important; z-index: 1 !important; + transition: all 0.3s ease !important; + } + + /* Dark mode pagination styling (default) */ + .custom-pagination-container { + background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important; + border: 1px solid rgba(52, 152, 219, 0.3) !important; + border-radius: 12px !important; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(52, 152, 219, 0.1) !important; + backdrop-filter: blur(10px) !important; + padding: 16px 24px !important; + margin: 16px 0 !important; + } + + /* Dark mode text styling */ + .custom-pagination-container .pagination-info { + color: #bdc3c7 !important; + font-weight: 500 !important; + font-size: 14px !important; + } + + /* Dark mode select styling */ + .custom-pagination-container select { + background: linear-gradient(45deg, #34495e, #2c3e50) !important; + border: 1px solid rgba(52, 152, 219, 0.3) !important; + border-radius: 6px !important; + color: #ffffff !important; + padding: 4px 8px !important; + font-size: 14px !important; + cursor: pointer !important; + transition: all 0.3s ease !important; + } + + .custom-pagination-container select:focus { + border-color: #3498db !important; + box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important; + outline: none !important; + } + + .custom-pagination-container select option { + background: #2c3e50 !important; + color: #ffffff !important; + } + + /* Dark mode pagination buttons */ + .custom-pagination-container button { + background: linear-gradient(45deg, #34495e, #2c3e50) !important; + border: 1px solid rgba(52, 152, 219, 0.3) !important; + border-radius: 50% !important; + width: 32px !important; + height: 32px !important; + color: #ffffff !important; + font-size: 14px !important; + font-weight: 700 !important; + cursor: pointer !important; + transition: all 0.3s ease !important; + box-shadow: 0 2px 8px rgba(52, 73, 94, 0.3) !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + } + + .custom-pagination-container button:hover { + background: linear-gradient(45deg, #3498db, #2980b9) !important; + transform: scale(1.1) !important; + box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4) !important; + } + + .custom-pagination-container button.active { + background: linear-gradient(45deg, #f39c12, #e67e22) !important; + border: 2px solid #f39c12 !important; + box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4) !important; + } + + .custom-pagination-container button:disabled { + background: linear-gradient(45deg, #7f8c8d, #95a5a6) !important; + border-color: #7f8c8d !important; + color: #bdc3c7 !important; + opacity: 0.6 !important; + cursor: not-allowed !important; + transform: none !important; + box-shadow: none !important; } /* Light mode pagination styling */ .custom-pagination-container.light-mode { background: linear-gradient(135deg, #ffffff, #f8f9fa) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; - border-radius: 12px !important; - padding: 16px 20px !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; - margin-top: 20px !important; + backdrop-filter: none !important; } /* Light mode text styling */ .custom-pagination-container.light-mode .pagination-info { color: #2c3e50 !important; - font-weight: 500 !important; + font-weight: 600 !important; } /* Light mode select styling */ .custom-pagination-container.light-mode select { - background: #ffffff !important; + background: linear-gradient(135deg, #ffffff, #f8f9fa) !important; border: 1px solid #dee2e6 !important; color: #495057 !important; - border-radius: 6px !important; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; } .custom-pagination-container.light-mode select:focus { @@ -493,6 +573,11 @@ const ProjectTracker = () => { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important; } + .custom-pagination-container.light-mode select option { + background: #ffffff !important; + color: #495057 !important; + } + /* Light mode pagination buttons */ .custom-pagination-container.light-mode button { background: linear-gradient(135deg, #ffffff, #f8f9fa) !important; @@ -504,8 +589,9 @@ const ProjectTracker = () => { .custom-pagination-container.light-mode button:hover { background: linear-gradient(135deg, #e9ecef, #f8f9fa) !important; border-color: #adb5bd !important; - transform: translateY(-1px) !important; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important; + transform: translateY(-1px) scale(1.05) !important; + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important; + color: #495057 !important; } .custom-pagination-container.light-mode button.active { @@ -516,11 +602,43 @@ const ProjectTracker = () => { } .custom-pagination-container.light-mode button:disabled { - background: #f8f9fa !important; + background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important; border-color: #dee2e6 !important; color: #6c757d !important; opacity: 0.6 !important; cursor: not-allowed !important; + transform: none !important; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; + } + + /* Icon styling for both modes */ + .custom-pagination-container .pagination-icon { + background: linear-gradient(45deg, #3498db, #2ecc71) !important; + border-radius: 50% !important; + width: 24px !important; + height: 24px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + font-size: 12px !important; + box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3) !important; + transition: all 0.3s ease !important; + } + + .custom-pagination-container.light-mode .pagination-icon { + background: linear-gradient(45deg, #007bff, #28a745) !important; + box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2) !important; + } + + /* Hover effects for container */ + .custom-pagination-container:hover { + transform: translateY(-2px) !important; + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(52, 152, 219, 0.2) !important; + } + + .custom-pagination-container.light-mode:hover { + transform: translateY(-2px) !important; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important; } `} @@ -538,29 +656,7 @@ const ProjectTracker = () => { {/* Custom Pagination */} -
{ - e.currentTarget.style.transform = 'translateY(-2px)'; - e.currentTarget.style.boxShadow = '0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(52, 152, 219, 0.2)'; - }} - onMouseLeave={(e) => { - e.currentTarget.style.transform = 'translateY(0)'; - e.currentTarget.style.boxShadow = '0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(52, 152, 219, 0.1)'; - }} - > +
{/* Pagination Info */}
{ }} >
- Row Per Page + Row Per Page - Entries + Entries
-
+
📊
- - Showing {startRecord} to {endRecord} of {totalCount} entries + + Showing {startRecord} to {endRecord} of {totalCount} entries
@@ -646,47 +718,6 @@ const ProjectTracker = () => { onClick={() => !loading && handlePageChange(pageNum)} disabled={loading} className={isActive ? 'active' : ''} - style={{ - background: loading - ? 'linear-gradient(45deg, #7f8c8d, #95a5a6)' - : isActive - ? 'linear-gradient(45deg, #f39c12, #e67e22)' - : 'linear-gradient(45deg, #34495e, #2c3e50)', - border: isActive - ? '2px solid #f39c12' - : '1px solid rgba(52, 152, 219, 0.3)', - borderRadius: '50%', - width: '32px', - height: '32px', - color: '#ffffff', - fontSize: '14px', - fontWeight: '700', - cursor: loading ? 'not-allowed' : 'pointer', - transition: 'all 0.3s ease', - boxShadow: loading - ? 'none' - : isActive - ? '0 4px 12px rgba(243, 156, 18, 0.4)' - : '0 2px 8px rgba(52, 73, 94, 0.3)', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - opacity: loading ? 0.6 : 1 - }} - onMouseEnter={(e) => { - if (!loading && !isActive) { - e.target.style.background = 'linear-gradient(45deg, #3498db, #2980b9)'; - e.target.style.transform = 'scale(1.1)'; - e.target.style.boxShadow = '0 4px 12px rgba(52, 152, 219, 0.4)'; - } - }} - onMouseLeave={(e) => { - if (!loading && !isActive) { - e.target.style.background = 'linear-gradient(45deg, #34495e, #2c3e50)'; - e.target.style.transform = 'scale(1)'; - e.target.style.boxShadow = '0 2px 8px rgba(52, 73, 94, 0.3)'; - } - }} > {pageNum}