feat: add lucide-react icons and redesign admin UI with enhanced visual hierarchy
Add lucide-react dependency and create app-icons module with icon mappings for all admin sections. Replace logo images with inline SVG brand glyph component. Update Layout component with icon-enhanced navigation links including chevron indicators and hover states. Add topbar icon wrapper with gradient background styling. Redesign Page component header with icon, eyebrow text, and improved title block layout. Add page
This commit is contained in:
@@ -90,15 +90,47 @@ button {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.brand-glyph,
|
||||
.topbar-icon-wrap,
|
||||
.page-title-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex: 0 0 auto;
|
||||
color: var(--accent);
|
||||
border: 1px solid rgba(116, 224, 184, 0.18);
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(116, 224, 184, 0.14), transparent 72%),
|
||||
rgba(10, 18, 32, 0.88);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.brand-glyph {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.brand-glyph svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.brand-copy h1,
|
||||
.topbar-copy h2,
|
||||
.page-title-copy h3 {
|
||||
margin: 0;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.brand-tagline {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
max-width: 240px;
|
||||
max-width: 220px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@@ -151,12 +183,17 @@ button {
|
||||
.nav {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 40px;
|
||||
margin-top: 36px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
padding: 13px 14px 13px 16px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid transparent;
|
||||
color: var(--muted);
|
||||
transition: 180ms ease;
|
||||
}
|
||||
@@ -164,26 +201,85 @@ button {
|
||||
.nav-link:hover,
|
||||
.nav-link.active {
|
||||
color: var(--text);
|
||||
background: rgba(116, 224, 184, 0.12);
|
||||
border-color: rgba(116, 224, 184, 0.14);
|
||||
background: rgba(116, 224, 184, 0.08);
|
||||
}
|
||||
|
||||
.nav-link-copy {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.nav-link-icon,
|
||||
.nav-link-chevron {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.nav-link:hover .nav-link-icon,
|
||||
.nav-link.active .nav-link-icon,
|
||||
.nav-link:hover .nav-link-chevron,
|
||||
.nav-link.active .nav-link-chevron {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.topbar,
|
||||
.page-header {
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.topbar-copy {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.topbar-icon-wrap,
|
||||
.page-title-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-title-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-title-copy {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.page-subtitle-block {
|
||||
grid-column: 1 / 2;
|
||||
padding-left: 68px;
|
||||
}
|
||||
|
||||
.page-subtitle-block p {
|
||||
margin: 0;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
@@ -345,15 +441,52 @@ button {
|
||||
.selection-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
max-height: 240px;
|
||||
max-height: 260px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.selection-item {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 16px;
|
||||
background: rgba(8, 14, 26, 0.78);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
.selection-item:hover {
|
||||
border-color: rgba(116, 224, 184, 0.32);
|
||||
background: rgba(14, 22, 38, 0.96);
|
||||
}
|
||||
|
||||
.selection-item input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.selection-copy {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.selection-title {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.selection-meta {
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.selection-item input:checked + .selection-copy .selection-title {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
|
||||
Reference in New Issue
Block a user