89 lines
3.5 KiB
Markdown
89 lines
3.5 KiB
Markdown
# Settings Pages: Improve & Visual Overhaul
|
|
|
|
## Summary
|
|
Improve and visually overhaul the 5 existing Settings tabs, add a 6th Logging tab, expose backend fields missing from the frontend, and align styling with the app's design system (typography variables, blue gradient headers, card patterns, dark mode).
|
|
|
|
## Files to Modify
|
|
|
|
| File | Action |
|
|
|------|--------|
|
|
| `frontend/src/components/Settings/settings.ts` | Add 5 missing fields to interface + defaults |
|
|
| `frontend/src/components/Settings/Settings.svelte` | Overhaul template + styles (details below) |
|
|
| `frontend/src/app.css` | Add shared color CSS variables to `:root` |
|
|
| `frontend/src/App.svelte` | Add Logging sidebar tab, add `textarea` dark mode rule |
|
|
|
|
## Step-by-Step
|
|
|
|
### 1. `settings.ts` - Add missing backend fields
|
|
Add to `Settings` interface and `defaultSettings`:
|
|
- `showEmptyStates: boolean` (default `true`) - Display tab
|
|
- `requireAssignmentForProgress: boolean` (default `true`) - Workflow tab
|
|
- `slaWarningThresholdMinutes: number` (default `30`) - Workflow tab
|
|
- `requirePasswordChangeDays: number` (default `90`) - Security tab
|
|
- `ipWhitelist: string[]` (default `[]`) - Security tab
|
|
|
|
### 2. `app.css` - Add global color variables
|
|
Move from Settings.svelte scoped `:global` into `:root`:
|
|
```
|
|
--color-primary: #2563eb
|
|
--color-primary-hover: #1d4ed8
|
|
--color-danger: #d32f2f
|
|
--color-success: #2e7d32
|
|
--color-border: #e0e0e0
|
|
--color-text-primary: #1a1a1a
|
|
--color-text-secondary: #666
|
|
--color-bg-light: #fafbfc
|
|
```
|
|
|
|
### 3. `Settings.svelte` - Template improvements
|
|
|
|
**Header:** Remove local `.header` overrides - let global blue gradient apply. Restyle action buttons as white/transparent variants for visibility on blue background.
|
|
|
|
**Each tab section:** Upgrade `.setting-section` from flat dividers to mini-cards (subtle background, rounded corners, border). Add icons to `<h3>` headings.
|
|
|
|
**New content per tab:**
|
|
- **Display:** Add `showEmptyStates` checkbox
|
|
- **Workflow:** Add `requireAssignmentForProgress` checkbox, add SLA Configuration section with `slaWarningThresholdMinutes`
|
|
- **Security:** Add Password Policy section (`requirePasswordChangeDays`), add IP whitelist textarea (visible when `ipWhitelistEnabled` is true)
|
|
- **Logging (new tab):** Activity Logging toggle, Log Retention days, API Tracking toggle (all fields already in store but unexposed)
|
|
|
|
### 4. `Settings.svelte` - Style overhaul
|
|
|
|
**Typography:** Replace all hardcoded px font sizes with CSS variables:
|
|
- `28px` h1 -> remove (global `.header h1` handles it)
|
|
- `22px` h2 -> `var(--font-size-section-title)`
|
|
- `16px` h3 -> `var(--font-size-card-title)`
|
|
- `14px` labels/body -> `var(--font-size-body)` / `var(--font-size-label)`
|
|
- `13px` help text -> `var(--font-size-caption)`
|
|
|
|
**Colors:** Replace hardcoded colors with CSS variables from step 2.
|
|
|
|
**Setting sections:** Card-like sub-sections:
|
|
```css
|
|
.setting-section {
|
|
background: var(--color-bg-light);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
```
|
|
|
|
**Remove** the `:global { ... }` block defining local CSS vars (moved to app.css).
|
|
|
|
### 5. `App.svelte` - Sidebar + dark mode
|
|
|
|
Add to `settingsTabs` array:
|
|
```js
|
|
{ id: 'logging', label: 'Logging', icon: '📝' }
|
|
```
|
|
|
|
Add `textarea` to existing dark mode input rules (line ~773).
|
|
|
|
Add rendering for logging tab in the settings view section.
|
|
|
|
## Verification
|
|
```bash
|
|
cd frontend && npm run build
|
|
```
|
|
Build should complete with no new errors. Visually: all settings tabs should render with blue gradient header, card-style sections, correct typography, and proper dark mode support.
|