Unify design of alerts with template

[infeo]

Currently, the application contains different types of alerts but they do not follow the same layout and wording.

I suggest the following template and based on that, check and rework the alerts.

The different types of alerts would be info, warning and error. The info alert has a green icon, the warning alert an orange one and the error alert a red icon.

The tasks to achieve this are:

• Rename style class label-large to label-extra-large
• Create new style class label-large with font size 1.25em and font Quicksand Bold
• Rework user dialogues to the above scheme

Remark

The suggested design is based on https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/alerts/ and additionally inspiration is taken from https://uxmovement.com/buttons/5-rules-for-choosing-the-right-words-on-button-labels/

[infeo]

@cryptomator What are your thoughts?

[infeo]

I just noticed, the "Apple" design also suggest a help button. In our case this could be link to our docs.

[tobihagemann]

Thank you, looks great! Would love to have a unified layout for alert dialogs.

• Is the window title something that we should specify what its purpose is? Is it in most cases the vault name? What about dialogs that are not specific to a vault (maybe set it to the application name)? It shouldn't be redundant to the message.
• An optional help button is a good idea. Do we already have dialogs that would benefit from that?
• Does it look better if the icon is top-aligned?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.