mirror of
https://ghproxy.net/https://github.com/abhijitb/helix.git
synced 2025-08-29 01:08:27 +08:00
updated styling of the settings page
This commit is contained in:
Abhijit Bhatnagar
parent
fecc1046d4
commit
0d3c02b18c
6 changed files with 99 additions and 50 deletions
|
|
@ -116,12 +116,9 @@ export default function Dashboard() {
|
|||
|
||||
if ( dashboardData.loading ) {
|
||||
return (
|
||||
<div className="helix-dashboard">
|
||||
<div className="helix-dashboard__header">
|
||||
<h1>Dashboard</h1>
|
||||
</div>
|
||||
<div className="helix-settings-page">
|
||||
<div className="helix-loading">
|
||||
<div className="helix-loading__spinner"></div>
|
||||
<div className="helix-spinner"></div>
|
||||
<p>Loading dashboard...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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 ) }
|
||||
>
|
||||
<span className="helix-tab-icon">{ tab.icon }</span>
|
||||
<span className="helix-tab-icon">
|
||||
<tab.icon />
|
||||
</span>
|
||||
<span className="helix-tab-label">{ tab.label }</span>
|
||||
{ hasUnsavedChanges && (
|
||||
<span
|
||||
|
|
|
|||
|
|
@ -1,29 +1,53 @@
|
|||
/* Helix Settings Page Styles */
|
||||
|
||||
.helix-settings-page {
|
||||
max-width: 1200px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
padding: 2rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.helix-settings-header {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 3rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 3rem 2rem;
|
||||
margin: -2rem -2rem 3rem -2rem;
|
||||
border-radius: 0 0 24px 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.helix-settings-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
