tag modal: click on tag to apply (instead of button next to it)

[alexanderdd]

Is your feature request related to a problem? Please describe.

1. open the tag modal of an email
2. see this (German version):
   
3. hover over the name of the first tag "Später" (=later) -> cursor changes to hand - looks like I can click on it!
4. no, I cannot click on it
5. how do I apply the tag?
6. oh there is a button to the right...

Describe the solution you'd like

Click on the name of a tag to apply it.
Remove the "apply tag" buttons.

Describe alternatives you've considered

Additional context

[ChristophWurst]

@nimishavijay I think it's best to think about the overall design of this modal. There are plenty of quirks. Technically the modal can do everything one might need, but it's just not very convenient to do so. Could you work on this and create specs/mockups for our engineers?

[nimishavijay]

So here's a good place to start:

Overall changes:

• Use only one heading "Add tags" with the appropriate heading number and styling (should be h2, I think?)
• Use the standard size for the "small" modal (300px)
• Each row has:
  • checkbox component with tag on the inside
  • 3 dot menu with Edit tag and Delete tag (currently there seems to be a bug that the default tags don't have a delete action unless you click on "Edit name or color", so that should be fixed too)
  • gap between rows is --default-grid-baseline
• Each tag has:
  • bold font
  • height 28px
  • left and right padding 8px
• Add tag button:
  • "Add tag" --> "Add new tag" (to distinguish it from the modal title)
  • button goes at the bottom on the left
  • uses tertiary button styling
• Have a "Done" button at the end to save changes

Adding a new tag:

• when you click on the "Add new tag" button, a new row is created with an input field and a color picker

Editing tag:

• when you click on Edit tag in the 3 dot menu for a tag, the checkbox items changes into a color dot and an input field inline

Deleting tag:

• Should again be a small size (300px) and use correctly formatted headings
• Change the wording inside the dialog to also contain the name of the tag that will be deleted (to prevent misclicks) and make sure the user knows that no emails will be removed --> "The tag "Later" will be removed from all messages. Deleting a tag does not delete any messages."

In the future, we can have some more features such as a search bar in this dialog for searching for a tag, etc. What do you think?