This PR adds the buttons (only UI, no functionality) to show either "all
projects" or "my projects".
The buttons use a styled button group and are hidden behind the new
`projectListFilterMyProjects` flag.
The button placement breaks with the previously established page header
pattern of having all actions moved to the right. To accommodate this
new placement, I created a new flex container in the header called
`leftActions`, which is essentially just a mirror of the normal actions.
I went with `leftActions` instead of `inlineStartActions` or something
similar because I think it's clearer, and I don't see us adapting
Unleash for different writing directions right now. We can always change
it later.
I have also slightly increased the end margin of the page header to
accommodate the new designs and to adjust the spacing before the
buttons. I adjusted the margin of the text instead of the padding of the
left actions because this will keep the spacing to the page header the
same on every page. Without it, we could end up in situations where the
spacing changes from page to page based on whether it has left actions
or not, which is probably undesirable.
![image](https://github.com/Unleash/unleash/assets/17786332/7d6ba98c-a34b-45d4-85f4-2b1c2f3dc0c8)
## Still to do:
### Hover colors
~~Find out what the right hover color variable is. I'm using the light
mode hover color for now, which works well in both light and dark modes
(looks nice and is AAccessible), but it's not the same as the hover
color for other buttons in dark mode.~~
Fixed ☝🏼
### Small windows
Also worth noting: at around 500px, the layout shift starts to cause
problems and we end up with overlapping elements. How do we want to deal
with narrower screens? Today, the UI is pretty functional until we reach
about 250px. It would be nice to not increase that size.
The new version breaking at about 500px:
![image](https://github.com/Unleash/unleash/assets/17786332/bf4f70d7-13b7-410a-9de4-30f4873a2ab8)
The old version breaking at about 250px:
![image](https://github.com/Unleash/unleash/assets/17786332/2d4e1e9c-8442-471c-91e4-67c024736234)
### Margins
We also need to figure out how much space we want on smaller windows:
![image](https://github.com/Unleash/unleash/assets/17786332/b12804b1-a2db-4547-88d5-0d9d49221fe2)
https://linear.app/unleash/issue/2-986/feedback-from-sebastian
Implements the items mentioned in the task:
- Refactors logic to track completion separately;
- When finishing a topic, jumps to the next unfinished topic it can
find;
- Shows the finish dialog when finishing a topic, as long as completion
is 100%;
- Changes the guide overlay behavior and implements the necessary
changes to adapt to light and dark mode;
- Fixes an issue where some guide dialogs would close when clicking
outside;
- Added a final "toggle" step for each topic (still needs alignment,
different task);
- Improve navigation logic to hopefully fix the feature toggle name
sorting;
![image](https://user-images.githubusercontent.com/14320932/236003007-6e441acc-f933-4eb0-93a4-4b6c15a45b96.png)
Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#3537
## About the changes
Creating the first version of the Dark theme
Refactor: colors variables
Refactor: use theme variable instead
- this change will help us to use MuiCssBaseline, and we can use classes
directly for easy customization when we can't identify MUI classes
Refactor: adjusting some files components
- i’ve touched also the structure of some files, not only the colors
variables (but only to adjust the style, not functionality)
Fix: dark mode persistence on refresh (by Nuno)
Feat: dark mode sees light logos, and light mode sees dark logos (by
Nuno)
---------
Co-authored-by: Nuno Góis <github@nunogois.com>
## About the changes
Refactoring the colors for the light theme to be much easier to continue
with dark mode
This is the first step to finish dark mode
https://linear.app/unleash/project/[low][s][alpha]-dark-mode-in-unleash-admin-ui-31b407d13c4b/1
This PR uses `main-theme` as a placeholder for `dark-theme` for now due
to the new changes. Still need to set the correct values here.
---------
Co-authored-by: Nuno Góis <github@nunogois.com>
This PR adds:
* Keyboard events
* Boxshadow
* Filtering by unread notifications
* Increases smartness for logic around when to prompt whether or not the
functionality is useful
* feat: new user dropdown and profile page
* fix: add popup boxShadow to dark-theme
* fix: update routes snap
* refactor: move some tab specific logic into tabs component
* add useProfile hook example
* fix profile tab header (no name)
* fix: hide user popup when clicking profile link
* - add PATs to profile;
- add route logic to profile;
- refactor TimeAgoCell title;
- misc fixes and refactoring;
* add profile info to profile tab
* simplify req paths
* add PAT flag to the front-end
* fix: some UI adjustments
* change user popup buttons to links
* fix profile on front-end, add role description
* update delete PAT text
* address some PR comments
* address PR comments
* some more UI fixes and refactoring
* move password request to API hook