Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui): Added theming support #150

Merged
merged 11 commits into from
Jul 14, 2023
Merged

Conversation

lupusA
Copy link
Collaborator

@lupusA lupusA commented Apr 29, 2023

Hi,
this PR adds a preliminary theming support. Themes are defined in CSS and can be selected at the top right of the UI.

Note that this PR is currently a draft. The selection is not persistent and there is still some work to do. This PR also contains some minor code refactorings.

ui-theming-small.mp4

This PR closes #118

Cheers,

- Changed variants of buttons to unify the look and feel
- Added support for themes specified in Theme.css
- Added a new dependency "react-select" for selecting themes.
Select component now shows the correct color.
src/App.jsx Outdated Show resolved Hide resolved
src/Theme.css Outdated Show resolved Hide resolved
Removed bootstrap-dark from dependencies.
The current theme is now synchronized with the react select component.
@lupusA lupusA marked this pull request as ready for review May 3, 2023 17:53
@jkowalski
Copy link
Contributor

I've tried this and it is very nice feature, but we need some tweaks:

  1. When I open the UI for the first time I get black-on-black experience:

image

My old ui-preferences.json had:

{"bytesStringBase2":false,"theme":"dark","pageSize":50}

Switching the theme to something else and switching back fixed the issue but it is annoying. Can we remap dark to dark-theme and light to light-theme when we fetch the preferences for backwards compatibility?

  1. The font size for the drop-down is a tiny bit too large compared to other fonts - can you make it a notch smaller?

image

  1. Also, would it make sense to introduce Preferences tab and move theme selector over there? I'm not sure the dropdown belongs on every single page.

  2. Pastel scheme has black-on-dark red danger button which is hard to read, should it be white-on-red or use lighter red?

image

  1. Section headers in pastel theme are too subtle pink on white which looks odd, perhaps make it darker purple:

image

  1. The expanded dropdown weirdly overlaps with Repository/Update Description button:

image

@lupusA
Copy link
Collaborator Author

lupusA commented May 4, 2023

Hey @jkowalski,

will work on it on the weekend.

Cheers,

This PR comes with the following fixes:

- Pastel theme should now be darker
- Added a preference tab
- Font size of the selector has been reduced
- Fixed css
- Moved AppContext under src/contexts
- Renamed themes to provide backwards compatibility
@lupusA
Copy link
Collaborator Author

lupusA commented May 7, 2023

Hi @jkowalski,

i worked in the preferences tab. Would you mind to test it?

Cheers,

@jkowalski
Copy link
Contributor

This is looking very promising, i found couple issues:

  1. When i hover over a link in dark mode, the text is dark-on-dark and unreadable:

image

  1. Can we make the dark mode background closer to what it was before, right now the gray is quite bright.

  2. In the preferences panel:

"Bytes to the base of 2"

Can we convert this to a 2-item drop-down or a radio button:

Size Display:
[x] Use base-10 suffixes (KB, MB, GB, TB)
[ ] Use base-2 suffixes (KiB, MiB, GiB, TiB)
  1. Now that we have Page Size in preferences, can we make it editable and remove all the other page selectors froma actual tables?

  2. As for the theme selection, can we make the dropdown narrower? Perhaps make the whole preferences panel 1/2 or 1/3 width until we have more controls to add there?

@lupusA
Copy link
Collaborator Author

lupusA commented May 7, 2023

Hey @jkowalski,

thanks for the feedback. The points you listed can easily be fixed. I will fix them in the next commit. Maybe, we need to rebase after that 😄

Considering point 4, I would argue that we keep it as a readonly preferences. I would find it cumbersome to switch back to the preferences tab to just change the pagination settings.

It is more convenient to set the page size below the actual table, when there are too many items.

What do you think?

Cheers,

@lupusA
Copy link
Collaborator Author

lupusA commented May 8, 2023

Hi @jkowalski,

point 5 is still open. The other points have been incorporated in the latest commit and can be tested.

Cheers,

lupusA added 2 commits May 8, 2023 22:01
- Added a darker background for the theme "dark"
- Added stripes back to the tables
- Moved css files in src/css
- Removed the Themeselector as it now implemented in PreferencesView
@lupusA
Copy link
Collaborator Author

lupusA commented Jun 15, 2023

Hi @jkowalski,

i will finalize this pr on the weekend. There are some minor things to be solved related to the dark theme.

Would you mind checking if this PR than can be merged?

Cheers

The editor should now have the correct theme settings.

Moved index.css to css folder.
@jkowalski
Copy link
Contributor

This is great, we could probably improve theme selector a bit (icons instead of names), but i'm going to merge this and integrate into Kopia so folks can try it out.

@jkowalski jkowalski merged commit ed223af into kopia:main Jul 14, 2023
jkowalski added a commit to jkowalski/kopia that referenced this pull request Jul 14, 2023
jkowalski added a commit to kopia/kopia that referenced this pull request Jul 14, 2023
* feat(ui): UI updates (Theming support, action fix)

- theming support kopia/htmlui#150
- actions fix kopia/htmlui#163

* disable dark mode selector test
@lupusA lupusA deleted the add-theme-support branch September 30, 2023 10:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants