-
-
Dashboard
-
+
diff --git a/src/pages/Settings/components/SettingsTabs.jsx b/src/pages/Settings/components/SettingsTabs.jsx
index 31d82ba..4990e49 100644
--- a/src/pages/Settings/components/SettingsTabs.jsx
+++ b/src/pages/Settings/components/SettingsTabs.jsx
@@ -1,4 +1,11 @@
import React from 'react';
+// Material-UI Icons
+import HomeIcon from '@mui/icons-material/Home';
+import ArticleIcon from '@mui/icons-material/Article';
+import EditIcon from '@mui/icons-material/Edit';
+import ImageIcon from '@mui/icons-material/Image';
+import PeopleIcon from '@mui/icons-material/People';
+import SettingsIcon from '@mui/icons-material/Settings';
/**
* Settings tabs navigation component
@@ -12,32 +19,32 @@ const SettingsTabs = ( { activeTab, onTabChange, hasUnsavedChanges } ) => {
{
id: 'site',
label: 'Site Information',
- icon: '🏠',
+ icon: HomeIcon,
},
{
id: 'content',
label: 'Content & Reading',
- icon: '📖',
+ icon: ArticleIcon,
},
{
id: 'writing',
label: 'Writing & Publishing',
- icon: '✍️',
+ icon: EditIcon,
},
{
id: 'media',
label: 'Media & Assets',
- icon: '🖼️',
+ icon: ImageIcon,
},
{
id: 'users',
label: 'Users & Membership',
- icon: '👥',
+ icon: PeopleIcon,
},
{
id: 'helix',
label: 'Helix Settings',
- icon: '⚙️',
+ icon: SettingsIcon,
},
];
@@ -56,7 +63,9 @@ const SettingsTabs = ( { activeTab, onTabChange, hasUnsavedChanges } ) => {
}` }
onClick={ () => onTabChange( tab.id ) }
>
-
{ tab.icon }
+
+
+
{ tab.label }
{ hasUnsavedChanges && (
');
+ opacity: 0.3;
}
.helix-settings-header h1 {
- font-size: 2.5rem;
- font-weight: 600;
- color: #1d4ed8;
- margin: 0 0 10px 0;
+ font-size: 3rem;
+ font-weight: 800;
+ color: #ffffff;
+ margin: 0 0 0.5rem 0;
+ position: relative;
+ z-index: 1;
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.helix-settings-header p {
- font-size: 1.1rem;
- color: #6b7280;
+ font-size: 1.25rem;
+ color: rgba(255, 255, 255, 0.9);
margin: 0;
+ position: relative;
+ z-index: 1;
+ font-weight: 400;
}
/* Loading State */
@@ -47,7 +71,7 @@
width: 24px;
height: 24px;
border: 3px solid #e5e7eb;
- border-top: 3px solid #1d4ed8;
+ border-top: 3px solid #667eea;
border-radius: 50%;
animation: spin 1s linear infinite;
display: inline-block;
@@ -99,14 +123,17 @@
}
.helix-btn-primary {
- background-color: #1d4ed8;
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
- border-color: #1d4ed8;
+ border-color: #667eea;
+ box-shadow: 0 4px 6px -1px rgba(102, 126, 234, 0.2);
}
.helix-btn-primary:hover:not(:disabled) {
- background-color: #1e40af;
- border-color: #1e40af;
+ background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
+ border-color: #5a6fd8;
+ transform: translateY(-1px);
+ box-shadow: 0 8px 15px -3px rgba(102, 126, 234, 0.3);
}
.helix-btn-secondary {
@@ -158,17 +185,26 @@
}
.helix-tab:hover {
- color: #1d4ed8;
+ color: #667eea;
background-color: #f8fafc;
}
.helix-tab.active {
- color: #1d4ed8;
- border-bottom-color: #1d4ed8;
+ color: #667eea;
+ border-bottom-color: #667eea;
}
.helix-tab-icon {
font-size: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.helix-tab-icon svg {
+ width: 20px;
+ height: 20px;
+ transition: color 0.2s ease;
}
.helix-tab-indicator {
@@ -192,15 +228,22 @@
.helix-settings-section {
background: white;
border-radius: 12px;
- border: 1px solid #e5e7eb;
+ border: 1px solid rgba(226, 232, 240, 0.5);
overflow: hidden;
margin-bottom: 30px;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.helix-settings-section:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.helix-settings-section-header {
- background: #f8fafc;
+ background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
padding: 24px;
- border-bottom: 1px solid #e5e7eb;
+ border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}
.helix-settings-section-title {
@@ -290,8 +333,8 @@
.helix-number-input:focus,
.helix-select-input:focus {
outline: none;
- border-color: #1d4ed8;
- box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
+ border-color: #667eea;
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.helix-select-input {
@@ -323,7 +366,7 @@
}
.helix-toggle-input:checked {
- background: #1d4ed8;
+ background: #667eea;
}
.helix-toggle-input::before {
@@ -382,8 +425,8 @@
}
.helix-notification-info {
- border-left: 4px solid #1d4ed8;
- background-color: #eff6ff;
+ border-left: 4px solid #667eea;
+ background-color: #f0f4ff;
}
.helix-notification-content {
@@ -441,7 +484,7 @@
.helix-tab.active {
border-bottom-color: #e5e7eb;
- border-left: 3px solid #1d4ed8;
+ border-left: 3px solid #667eea;
background-color: #f8fafc;
}