All articles

Release 3.6: GUI redesign

2 min. read

Vivien Muller

Vivien Muller

12 July, 2022

As mentioned late 2021 in the “What’s cooking” blog article, the graphical user interface got a fresh lick of paint. Check it out:

Fig. Revisited password workspace

Of course the dark theme received the same level of attention:

Fig. Revisited password workspace with dark theme

We left no stone unturned, all the interface elements have been revised:

Fig. Create a password dialog with improved design

Buttons, fields dialogs, workspaces, login pages even hover & active states have been re-styled.

Here’s a preview of the design-kit made with Figma:

Fig. Figma design kit overview

You can consult the original figma file here:

https://www.figma.com/file/3QSxoPUkTds3ix3zL534gN/Design-kit?node-id=0%3A1

To align the browser app with the mobile app GUI, a new icon library has been adopted: “Feather” by “Cole Bemis

Fig. New icon set for passbolt

Beyond these graphical changes which are the tip of the iceberg, a lot of work has been done on the code refactoring. The entire front-end code has been re-written and cleaned-up. As a result, new themes will be way easier to create, like for example a darker than dark, aka black mode 🤘. We’ll soon post a detailed blog article about how to create custom themes. Stay tuned.

Thanks to this rework, it is now much easier to customise and extend passbolt UI components. To reflect this, we have published our style guide which is now also available as a standalone storybook website here: https://passbolt.github.io/passbolt_styleguide

This refactoring and redesign will serve as a foundation to the upcoming features that were previously announced: improved grid, improved tags, password expiry and admin reports, planned to be released later this year. (SSO is also currently in progress).

Share your thoughts

Do you have something to say about this release? As always your feedback is very valuable for us, feel free to share it with us on the corresponding thread in the community forum. ❤️️

h
b
c
e
i
a