Skip to content

Polish settings navigation and Heroicon hierarchy #242

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mehul0810 merged 5 commits into from
Sep 20, 2026
Merged

Polish settings navigation and Heroicon hierarchy #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
50d0d12
Polish settings navigation and icon hierarchy
mehul0810 Aug 11, 2026
802ee32
Update settings smoke navigation
mehul0810 Aug 11, 2026
f661000
Restore visible diagnostic tab focus
mehul0810 Aug 11, 2026
11ad327
Replace nested diagnostic tabs with report selector
mehul0810 Aug 11, 2026
261429e
Update diagnostic smoke coverage
mehul0810 Aug 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 229 additions & 13 deletions assets/src/css/admin/settings.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,20 @@
.perform-settings-page {
--perform-color-brand: #0046d1;
--perform-color-primary: #0046d1;
--perform-color-brand-hover: #0037a8;
--perform-color-focus: #2271b1;
--perform-color-text: #1d2327;
--perform-color-text-muted: #50575e;
--perform-color-border: #dcdcde;
--perform-color-surface: #fff;
--perform-color-surface-subtle: #f7f8fa;
--perform-color-surface-accent: #f3f7ff;
--perform-color-canvas: #f0f0f1;
--perform-color-success: #008a20;
--perform-color-warning: #996800;
--perform-color-danger: #b32d2e;
--perform-radius-card: 10px;
--perform-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.08);
display: flex;
flex-direction: column;
min-height: calc(100vh - 32px);
Expand All @@ -18,6 +23,13 @@
background: var(--perform-color-surface);
}

.perform-settings-page .perform-ui-icon {
flex: 0 0 auto;
width: 20px;
height: 20px;
stroke-width: 1.75;
}

.perform-settings-page *,
.perform-settings-page *::before,
.perform-settings-page *::after {
Expand Down Expand Up @@ -87,8 +99,8 @@
min-height: 48px;
padding: 0 16px;
color: var(--perform-color-text-muted);
font-size: 14px;
font-weight: 600;
font-size: 13px;
font-weight: 500;
line-height: 1.4;
}

Expand All @@ -98,6 +110,7 @@

.perform-settings-tab-panel .components-tab-panel__tabs-item[aria-selected='true'] {
color: var(--perform-color-brand);
font-weight: 600;
}

.perform-settings-tab-panel .components-tab-panel__tabs-item[aria-selected='true']::after {
Expand All @@ -111,6 +124,85 @@
content: '';
}

.perform-diagnostic-switcher {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px clamp(20px, 3vw, 44px);
border-bottom: 1px solid var(--perform-color-border);
background: var(--perform-color-surface-subtle);
}

.perform-diagnostic-switcher__context {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}

.perform-diagnostic-switcher__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
border: 1px solid #d7e3fb;
border-radius: 9px;
color: var(--perform-color-brand);
background: var(--perform-color-surface-accent);
}

.perform-diagnostic-switcher__context > span:last-child {
display: grid;
gap: 2px;
}

.perform-diagnostic-switcher__context strong {
font-size: 13px;
font-weight: 600;
line-height: 1.35;
}

.perform-diagnostic-switcher__context small {
color: var(--perform-color-text-muted);
font-size: 12px;
line-height: 1.4;
}

.perform-diagnostic-switcher__control {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}

.perform-diagnostic-switcher__control > span {
color: var(--perform-color-text-muted);
font-size: 12px;
font-weight: 600;
}

.perform-diagnostic-switcher__control select {
min-width: 220px;
height: 40px;
margin: 0;
border-color: var(--perform-color-border);
border-radius: 7px;
color: var(--perform-color-text);
background-color: var(--perform-color-surface);
font-size: 13px;
font-weight: 600;
}

.perform-diagnostic-switcher__control select:focus {
border-color: var(--perform-color-focus);
outline: 2px solid var(--perform-color-focus);
outline-offset: 2px;
box-shadow: none;
}

.perform-settings-tab-panel .components-tab-panel__tabs-item:focus-visible,
.perform-settings-page .components-button:focus-visible,
.perform-settings-page a:focus-visible {
Expand Down Expand Up @@ -278,6 +370,8 @@

.perform-savebar .components-button {
min-height: 40px;
font-size: 13px;
font-weight: 600;
}

.perform-cache-stats-container {
Expand Down Expand Up @@ -445,6 +539,19 @@
min-width: 0;
}

.perform-dashboard .components-card,
.perform-database-audit .components-card,
.perform-site-inventory .components-card,
.perform-admin-monitor .components-card,
.perform-cron-pressure .components-card,
.perform-admin-assets .components-card,
.perform-plugin-impact .components-card,
.perform-action-scheduler .components-card {
border: 1px solid var(--perform-color-border);
border-radius: var(--perform-radius-card);
box-shadow: var(--perform-shadow-card);
}

.perform-dashboard-overview {
display: flex;
align-items: flex-start;
Expand Down Expand Up @@ -512,26 +619,68 @@
background: #f6f7f7;
}

.perform-dashboard-stats .perform-dashboard-stat {
display: grid;
grid-template-columns: 42px minmax(0, 1fr);
align-items: center;
gap: 14px;
min-height: 104px;
padding: 16px;
border: 1px solid var(--perform-color-border);
border-left: 1px solid var(--perform-color-border);
border-radius: var(--perform-radius-card);
background: var(--perform-color-surface);
box-shadow: var(--perform-shadow-card);
}

.perform-dashboard-stat__icon {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 10px;
color: var(--perform-color-brand) !important;
background: var(--perform-color-surface-accent);
}

.perform-dashboard-stat__icon[data-status='ready'] {
color: var(--perform-color-success) !important;
background: #edf8ef;
}

.perform-dashboard-stat__icon[data-status='review'] {
color: var(--perform-color-warning) !important;
background: #fff8e5;
}

.perform-dashboard-stat__content {
min-width: 0;
}

.perform-health-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.perform-health-card {
border-radius: 0;
border-left: 4px solid var(--perform-color-border);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
--perform-health-status: var(--perform-color-text-muted);
--perform-health-status-bg: #f1f2f3;
border-left: 1px solid var(--perform-color-border) !important;
}

.perform-health-card[data-status='ready'] {
border-left-color: var(--perform-color-success);
--perform-health-status: var(--perform-color-success);
--perform-health-status-bg: #edf8ef;
}

.perform-health-card[data-status='review'] {
border-left-color: var(--perform-color-warning);
--perform-health-status: var(--perform-color-warning);
--perform-health-status-bg: #fff8e5;
}

.perform-health-card[data-status='observe'] {
border-left-color: var(--perform-color-brand);
--perform-health-status: var(--perform-color-brand);
--perform-health-status-bg: var(--perform-color-surface-accent);
}

.perform-health-card__heading {
Expand All @@ -547,20 +696,49 @@
line-height: 1.35;
}

.perform-health-card__heading span {
.perform-health-card__title {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}

.perform-health-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
color: var(--perform-health-status);
background: var(--perform-health-status-bg);
}

.perform-health-card__icon .perform-ui-icon {
width: 19px;
height: 19px;
}

.perform-health-card__status {
display: inline-flex;
flex-shrink: 0;
align-items: center;
gap: 5px;
min-height: 24px;
padding: 2px 8px;
border: 1px solid var(--perform-color-border);
border-radius: 12px;
background: #f6f7f7;
color: var(--perform-color-text-muted);
background: var(--perform-health-status-bg);
color: var(--perform-health-status);
font-size: 11px;
font-weight: 600;
}

.perform-health-card__status .perform-ui-icon {
width: 14px;
height: 14px;
}

.perform-health-card p {
min-height: 44px;
margin: 12px 0;
Expand All @@ -569,9 +747,18 @@
}

.perform-dashboard-measurement-note {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 20px;
border-left: 4px solid var(--perform-color-brand);
background: #f6f7f7;
border: 1px solid #c9d9ff;
border-radius: var(--perform-radius-card);
background: var(--perform-color-surface-accent);
}

.perform-dashboard-measurement-note > .perform-ui-icon {
margin-top: 1px;
color: var(--perform-color-brand);
}

.perform-dashboard-measurement-note p {
Expand Down Expand Up @@ -609,6 +796,17 @@
margin-bottom: 8px;
}

.perform-card-heading {
display: flex;
align-items: flex-start;
gap: 10px;
}

.perform-card-heading > .perform-ui-icon {
margin-top: 1px;
color: var(--perform-color-brand);
}

.perform-database-audit {
display: grid;
gap: 24px;
Expand Down Expand Up @@ -1688,6 +1886,7 @@
}

.perform-settings-tab-panel .components-tab-panel__tabs,
.perform-diagnostic-switcher,
.perform-settings-content,
.perform-savebar {
padding-right: 16px;
Expand All @@ -1699,6 +1898,23 @@
padding-bottom: 40px;
}

.perform-diagnostic-switcher {
align-items: stretch;
flex-direction: column;
gap: 14px;
}

.perform-diagnostic-switcher__control {
align-items: stretch;
flex-direction: column;
gap: 6px;
}

.perform-diagnostic-switcher__control select {
width: 100%;
max-width: none;
}

.perform-settings-field {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
Expand Down
Loading
Loading