cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): align semantic headings contrast and Settings panels

Browse Source
This commit is contained in:
cesnimda
2026-10-11 03:05:08 +02:00
parent 7da083c374
commit a94ea0a4a4
18 changed files with 192 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/components/SettingsView.tsx
+10 -10
View File
@@ -40,9 +40,9 @@ interface Props {
onThemeModeChange: (v: ThemeModePref) => void;
}
function TabPanel({ value, index, children }: { value: number; index: number; children: React.ReactNode }) {
function TabPanel({ value, index, label, children }: { value: number; index: number; label: string; children: React.ReactNode }) {
if (value !== index) return null;
return <Box sx={{ mt: "var(--app-section-gap)", minWidth: 0 }}>{children}</Box>;
return <Box role="tabpanel" id={`settings-panel-${index}`} aria-labelledby={`settings-tab-${index}`} aria-label={label} sx={{ mt: "var(--app-section-gap)", minWidth: 0 }}>{children}</Box>;
}
type NotificationPrefs = {
@@ -175,15 +175,15 @@ export default function SettingsView({
</FormControl>
<Tabs aria-label={t("settings")} value={tab} onChange={(_, v) => selectSection(v)} variant="scrollable" scrollButtons="auto" sx={{ display: { xs: "none", sm: "flex" }, mb: 1 }}>
<Tab label={t("settingsTabGeneral")} />
<Tab label={t("settingsTabFollowUps")} />
<Tab label={t("settingsTabNotifications")} />
<Tab label={t("settingsTabBackup")} />
<Tab id="settings-tab-0" aria-controls="settings-panel-0" label={t("settingsTabGeneral")} />
<Tab id="settings-tab-1" aria-controls="settings-panel-1" label={t("settingsTabFollowUps")} />
<Tab id="settings-tab-2" aria-controls="settings-panel-2" label={t("settingsTabNotifications")} />
<Tab id="settings-tab-3" aria-controls="settings-panel-3" label={t("settingsTabBackup")} />
</Tabs>
{rulesDirty ? <Typography role="status" variant="body2" sx={{ mt: 1, color: "text.secondary" }}>{t("assetsUnsavedChanges")}. {t("rulesDraftScope")}</Typography> : null}
<TabPanel value={tab} index={0}>
<TabPanel value={tab} index={0} label={t("settingsTabGeneral")}>
<Box sx={{ display: "grid", gap: "var(--app-section-gap)", minWidth: 0 }}>
<Box sx={{ display: "grid", gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "repeat(2, minmax(0, 1fr))" }, gap: "var(--app-section-gap)" }}>
<PageSection surface title={t("settingsAppearance")}>
@@ -273,7 +273,7 @@ export default function SettingsView({
</Box>
</TabPanel>
<TabPanel value={tab} index={1}>
<TabPanel value={tab} index={1} label={t("settingsTabFollowUps")}>
<RulesSettingsCard draft={rulesDraft} loadError={rulesLoadError} saveError={rulesSaveError} invalid={invalidRules}
saving={savingRules} dirty={rulesDirty} onSave={() => void saveRules()} onRetry={() => void loadRules()} onDiscard={discardRules}
onChange={(field, value) => {
@@ -282,7 +282,7 @@ export default function SettingsView({
}} />
</TabPanel>
<TabPanel value={tab} index={2}>
<TabPanel value={tab} index={2} label={t("settingsTabNotifications")}>
<PageSection surface title={t("settingsNotificationsTitle")} description={t("settingsNotificationsBody")}>
{notificationError ? <Alert severity="error" sx={{ mb: 1.5 }}>{notificationError}</Alert> : null}
{!notificationPrefs ? <Skeleton variant="rounded" height={70} /> : <Box sx={{ display: "grid", gap: 1 }}>
@@ -302,7 +302,7 @@ export default function SettingsView({
</PageSection>
</TabPanel>
<TabPanel value={tab} index={3}>
<TabPanel value={tab} index={3} label={t("settingsTabBackup")}>
<BackupCard />
</TabPanel>
</Box>