style: general styling #149
Summary
General spacing and styling, importing dynamic SDS sizes, header icons, remove variables per page selector, smaller filter selectors.
Before/after
Details
General
- General spacing and alignment styling on all pages.
- Everything now has the same distance from the side and the top.
- Modal buttons no longer replace text with "Loading.." etc, to avoid jarring spacing changes.
- Discovered that some dynamic SDS variables are not working properly because of the way they are imported, so wrote them in manually instead.
- Changed code to consisntently use sikt breakpoints, not tailwind ones.
- Smoother transition animation on sticky footers and mobile sidebar. From surveybanken and Material 3.
- Most black icons are now a secondary color instead.
- Capitalized back button and gave it some more space between text and icon.
- Removed all purple text and replaced with secondary text color.
- Created a "layout" subfolder in the components folder.
- Banners have more space.
Header
- Mascot animates when hovering entire logo
- Header icons and styling.
- All header links behave like tabs on hover.
- Logout button: less jarring spacing on hover.
Search filter
- Removed label from search box.
- Made filter selector boxes more similar to latest sketches.
Variable selection
- Variable selector footer says 1 "variabel", 2 "variabler" etc instead of X "variable(r)".
- Removed variables per page selector.
- Added hover/pressed colors to variable rows.
- Hidden some variable columns on smaller screens.