jacobh2/F-r-ldraledigplannerare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Settle on one visual language

Browse Source 
The interface had drifted into two of everything. The calendar and its
popovers were built around a blue accent the rest of the app had long since
replaced with green, five different sizes served the same class of small
label, and page sections were a stack of identical bordered cards that gave
no sense of what mattered most. Sections now separate by space and a hairline,
the overview leads with its headline figure at a size that says so, and the
palette, type scale and spacing live in one place as variables rather than
scattered literals.

Two things were not styled at all. The sign-in screen was an unstyled form in
the top-left corner, and the tip cards had no rules whatsoever despite their
markup already carrying a severity, so every tip rendered identically with a
plain green square for its dismiss control.

The calendar was also unusable on a narrow screen: the preset rail never
collapsed and covered the last three columns of the grid.
This commit is contained in:
Jacob Hagstedt
2026-09-18 01:39:34 +02:00
parent f2b3920cbc
commit 296b596778
15 changed files with 757 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/layout/layout.css
+22 -7
View File
@@ -11,7 +11,7 @@
max-width: var(--maxw);
width: 100%;
margin: 0 auto;
padding: var(--sp-5);
padding: var(--sp-6) var(--sp-5);
}
/* Dashboard & Pages */
@@ -23,16 +23,31 @@
width: 100%;
}
/* Sections separate by whitespace and a hairline rule, not a stack of
* bordered/shadowed cards — every section on a page looking equally "boxed"
* flattens the hierarchy the headline figures above them are meant to have.
* The `<details>` accordions (plan-fold, dashboard__more-details) keep their
* own bordered treatment in components.css since they're interactive
* disclosure controls, not passive content groups. */
.dashboard__section,
.settings-page__section,
.calendar__section,
.tips-page__section {
background-color: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: var(--sp-5);
margin-bottom: var(--sp-5);
box-shadow: var(--shadow-sm);
background-color: transparent;
border: none;
border-top: 1px solid var(--c-border);
border-radius: 0;
padding: var(--sp-6) 0 0;
margin-bottom: var(--sp-6);
box-shadow: none;
}
.dashboard__section:first-child,
.settings-page__section:first-child,
.calendar__section:first-child,
.tips-page__section:first-child {
border-top: none;
padding-top: 0;
}
.dashboard__section:last-child,