Description

Resolves #4201
Resolves #4253

Adds the framework for the new template page. This includes both the layout and some functionality (like routing).
After logging into scrumlr, users will now be redirected to the templates page.
The page consists of the header and main section

Header section

• User Pill with avatar and name, which when clicked redirects to settings (blocked by refactor: settings dialog #4265)
• Switch to switch between Templates and Sessions (when they exist in the future)
• Search bar to filter templates or sessions (in the future)
• In mobile view, the search bar can be toggled using a button.

Main section

• Two sections for saved and recommended templates.
• Only non-anonymous users can see the saved section.
• In mobile view, the sections are full width but scrollable horizontally.

Changelog

• Add new child routes templates and sessions to route new
• add new views ´Templates´ and Sessions accordingly
• new components:
  • UserPill
  • Switch
  • SearchBar
• change view NewBoard to a grid including the new components in header, and the views as Outlet
• all components and the Template view have a light and dark theme.
• all components and the Template view are responsive and have a separate mobile view
• components also have states for hover, focus, active, and disabled and are styled respectively.
• states are streamlined in new SCSS helper function in style.scss

TODO

• fix stan sometimes being cut off
• include refactor: settings dialog #4265 when merged and setup settings dialog
• include refactor: color palette #4283 for color constant names
• dark background

Checklist

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• The light- and dark-theme are both supported and tested
• The design was implemented and is responsive for all devices and screen sizes
• The application was tested in the most commonly used browsers (e.g. Chrome, Firefox, Safari)

(Optional) Visual Changes

Show media