style(ui): Polish the UI

[jasoryeh]

Hello,

I discovered Kopia a bit ago, but the one thing that made this tool a bit intimidating was the user interface.

Here are a few stylistic changes to polish up some interfaces, still working on adding some other adjustments here and there to make the UI more friendly.

Among these changes:

• Spacings between things like form items and elements to make everything less "squished" together
• Fix dark mode inconsistencies (snapshot table)
• De-clutter the policy editor to not be one giant accordion
• Add some text to make the purpose of each page clearer
• Moving the connected repository name to the navbar, and putting it at the top right
• and more

Please let me know if there are any changes (to this PR or new changes) on your mind!

[lupusA]

Hey @jasoryeh ,
thanks for helping with the ui. I am currently working on the localisation and added also some improvements here and there.

Let's get the ui more consistent for the next release.

The changes so far are looking good 😊

[lupusA]

Regarding the next changes:

1. We need to refactor the whole UI and use functions instead of components. It is basically a preparation to update the libraries (router etc.)
2. Notifications would be a great new feature. The notifications should inform the user about important things such as completed snapshots etc.
3. We need to work on the tests to increase the coverage.

[jkowalski]

@jasoryeh thanks for your contributions,

please coordinate merging this change with @lupusA. I think we need to his localization merged first and update this PR as there will likely be a non-trivial conflict.

[jasoryeh]

@lupusA I'll await your PR's merge and completion first, in the meantime, I've made a test branch (with rebase) including your changes and there are indeed many non-trivial conflicts.

https://github.com/jasoryeh/kopia-htmlui/tree/lupusA-language

I'll update that branch I tested as you make progress, then update this PR after your PR is completed.

[lupusA]

Hi @jasoryeh,

i will merge this weekend. There are some minor things which need to be fixed. However, this can be done after incorporating your changes.

Cheers,

[jasoryeh]

@lupusA Any updates on #241, I've been looking to add more changes but don't want to introduce too many conflicts to manually go through later

[lupusA]

Hi @jasoryeh

#241 is currently on hold as I have other things to do. If you want, we can merge first and then I have to resolve the conflicts later on. What do you think?

Cheers,

[jasoryeh]

Hi @jasoryeh

#241 is currently on hold as I have other things to do. If you want, we can merge first and then I have to resolve the conflicts later on. What do you think?

Cheers,

Hi @lupusA osunds good, I'll convert this PR into a non-draft request, I'll save other improvements for another PR since this was just some small nit-picky things I wanted to fix!

[dcog989]

Hi. I just raised #332 as quick fix to a constant niggle for me.

I was going to suggest an overhaul of esp. the CSS - convert all hardcoded values to variables, thereby making the chaotic padding and margins in the UI more consistent. Plus a big bag of tweaks to improve layout. Perhaps that would be best done by building on this PR?

This PR has stalled for a year now, along with localisation work. I'd be happy to move this forward, excluding localisation, if everyone happy?