UI refresh of the desktop application

[vermotr (Romain)]

Hello,

On Dribble, I came across the work of Artem Nosenko (/shots/13907643-Bitwarden-Design-Concept-for-macOS) and his concept is awesome.

I then tried to implement his work without changing the UX too much.

The main lines :

• I migrated Font Awesome 4 to 5 (but I kept FA 4 to be compatible with jslib);
• I reworked the left menu (especially the drop-down list);
• In the middle list, I changed the size of the icons, without increasing the height of the elements;
• Finally, I moved the action buttons in the header and I added the item icon to the detail view.

What do you think?

My work is available on GitHub: vermotr/bitwarden-desktop

bitwarden-desktop-light

bitwarden-desktop-dark

Feature name:

UI refresh

Feature Description

UI refresh of the desktop application

Clients / Repos Affected:

Desktop

Timeline to completion (estimate):

ETA: Q2/2021 - Q3/2021

[aex351]

Nice UI improvements!

@vermotr

I reworked the left menu (especially the drop-down list);

This is a much needed improvement. Indeed, the drop-down list in the current state is a bit confusing in regards to the icon alignment. The folder icon versus the right arrow icon (which indicates the presence of sub folders) should not be on the same level.

It would be nice if your UI changes would also be applied to the web vault. As the web vault for example contains the same drop-down list.

@vermotr

In the middle list, I changed the size of the icons, without increasing the height of the elements

Very nice, it looks very refreshing. I wonder how this will look on a Windows 10 machine. As the spacing between the items for me in current state is much more narrow.

I also like that items that are selected or hovered over with the mouse now stand out more. In the current state it is hardly noticeable.

@vermotr

Finally, I moved the action buttons in the header and I added the item icon to the detail view.

Much welcomed change, I like that you have moved the function buttons to the top. That makes it more in sync with the web vault. I also feel it makes it more easy to use in terms of usability. As for some reason I do find myself ‘searching’ for those buttons’ in current state.

Question, what is the motivation behind changing the functions buttons from right to left (delete / edit and copy)?

If possible could you translate this to the web vault too?

I hope your UI changed gets implemented soon. This thread should get more attention.

[vachan (I am back people!)]

@kspearrin @cscharf

[vermotr (Romain)]

Thank you very much @aex351 for your review!

Regarding the buttons, I find it more relevant to have the actions most often used on the right and the least on the left. This is really a personal vision, so I really appreciate having more feedback.

If you want to try my work, you can clone my fork: GitHub - vermotr/bitwarden-desktop: The desktop vault (Windows, macOS, & Linux).

[aex351]

@vermotr, could you provide a Windows binary?

I am trying to build bitwarden-desktop myself. However it is failing. Any instructions for this would also be welcome.

[EvansMatthew97]

@vermotr I came across the exact same design just a few days ago and was planning on also doing a redesign. Really awesome work so far. I expanded on it a little bit:

• Changed font to default system font
• Increased padding slightly between vault items
• Made font weight of names bold, changed size of cipher header
• Added background to icon, fallback now uses default icon
• Replaced fontawesome icons with material icons
• Fixed groupings “my vault/send” footer position
• Hid “add items” button on vault bin page

I’m having trouble branching off and doing anything with jslib causing issues. If you could let me know how to deal with this I’ll push the code to your fork.

Cheers

[vermotr (Romain)]

@EvansMatthew97, nice work!

@EvansMatthew97

Replaced fontawesome icons with material icons

I’m not sure replacing Font Awesome with Material icons is a good idea. Indeed, the other applications are already using FA4. A good start, would be to update to the version 5 (like I did), but it is true that if we update to a new version, we can also change the font

@EvansMatthew97

I’m having trouble branching off and doing anything with jslib causing issues. If you could let me know how to deal with this I’ll push the code to your fork.

Regarding the jslib, you cannot update it directly from the desktop repository because it’s a common code referenced in Bitwarden JavaScript projects. You can find the repository here: GitHub - bitwarden/jslib: Common code referenced across Bitwarden JavaScript projects.
You must therefore propose your modifications in this repository, but these modifications will be reflected in the other projects.

@kspearrin @cscharf, what do you think of our work? Would you be interested in a PR?

[EvansMatthew97]

I’m not sure replacing Font Awesome with Material icons is a good idea.

While I understand it is used globally by Bitwarden, FontAwesome Free can be limiting. Material Icons is open source, so if more icons need to be added, BitWarden can create their own branch https://github.com/material-icons/material-icons.

Material icons also have a more “app” feel than “website” in my opinion. Because it’s used everywhere, FontAwesome is almost the Calibri of fonts. It’s not necessarily bad, it’s just plain and can be perceived as cheap.

[anteh]

This refresh is exactly what’s keeping me from moving from my current password manager. A much needed overhaul of the UI. I do hope this will be implemented in the official version soon.

[aex351]

Any update on this? Why is nobody from Bitwarden commenting in this thread.

[tgreer (Trey Greer)]

We’re working on some UI updates internally, icons are especially tricky due to the licensing (FA in particular).

[bwintx (Bryce Wray)]

I would love to see you folks adopt the “system fonts stack” approach on a cross-platform, cross-app/-extension basis. This is one of the really few nits I have with your otherwise outstanding product and its various implementations.