Lukas
045c8048fe
Moved all static layout properties (display, gap, margin, padding, colour) from inline style props to makeStyles classes in: - MapBansTable.tsx: Pagination row flexbox layout - JailDetailPage.tsx: Link styling for textDecoration - HistoryPage.tsx: Summary text styling - IpDetailView.tsx: Loading container and text formatting Kept inline styles only for genuinely dynamic values: - WorldMap.tsx: Tooltip position (follows mouse) - TopCountriesPieChart.tsx: Legend color (from recharts data) - TopCountriesBarChart.tsx: Chart height (derives from data length) This change improves performance by leveraging Griffel's atomic CSS cache and ensures consistency with the established Fluent UI pattern. Updated Docs/Web-Development.md with explicit rule: inline styles only for runtime-dynamic values, all static properties go in makeStyles. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2.3 KiB
T-20 · Replace inline style={{}} objects with makeStyles classes
Where found: frontend/src/pages/map/MapBansTable.tsx (multiple), pages/JailDetailPage.tsx, pages/HistoryPage.tsx, pages/history/IpDetailView.tsx, components/WorldMap.tsx, components/TopCountriesPieChart.tsx, components/TopCountriesBarChart.tsx
Why this is needed: The project uses Fluent UI's makeStyles with atomic CSS caching. Inline style={{}} objects are allocated on every render, bypass the atomic CSS cache, and are inconsistent with the established pattern. Exceptions are acceptable only for truly dynamic values (e.g. tooltip left/top that change on mouse move) — static layout values must use makeStyles.
Goal: All static layout properties moved to makeStyles. Inline styles only for genuinely dynamic values.
What to do:
- Audit each file listed above.
- For static
display: flex,gap,margin,padding— move tomakeStylesin that component's style block. - Keep inline
styleonly where the value is truly dynamic at runtime (e.g.WorldMaptooltip position,TopCountriesBarChartchart height).
Possible traps and issues:
MapBansTable.tsxhas several consecutive inlinestyleobjects for its pagination row — these can be collapsed into one named class.- Some components use both
tokens.*values and inline styles — ensuremakeStylesis imported where it isn't already.
Docs changes needed: Docs/Web-Development.md — add styling rule: use makeStyles for all static styles; inline style only for runtime-dynamic values.
Doc references: Docs/Web-Development.md, Fluent UI v9 docs on makeStyles
T-21 · Fail2BanMetadataService has inline socket timeout hardcoded
Where found: backend/app/services/fail2ban_metadata_service.py:64 — socket_timeout: float = 5.0
Why this is needed: Part of the same constant duplication as T-08. This file doesn't use _SOCKET_TIMEOUT as a module constant — it hardcodes 5.0 inline as a local variable. Should use the constant from constants.py once T-08 is done.
Goal: After T-08, replace with FAIL2BAN_SOCKET_TIMEOUT_FAST import.
What to do: Covered by T-08 sweep.
Possible traps and issues: None — dependent on T-08.
Docs changes needed: None.
Doc references: backend/app/services/fail2ban_metadata_service.py