[STORY] Display the address book configuration screen in a dialog

[itswillta]

User story summary

1. Related epic
2. Definition
3. Criteria
4. UI/UX Design
5. TASKS

Related epic

Synchronize Contacts' UI/UX with Calendar's

Definition

As a user, I want the address book configuration screen to display in a dialog on desktop.

• I login and go to Contacts
• Then I select "Settings" in an address book
• Then the address book configuration should be displayed in a dialog

Criteria

• The address book settings screen should display inside a dialog.
• The dialog should stand out from the rest of the viewport (as seen in the screenshots below).
• The address book's name and its icon is displayed first in the body of the dialog.
• The "Save" and "Close" buttons will be at the bottom of the dialog.

UI/UX Design

1. [Desktop] The main "Address book settings" screen:

2. [Desktop] The "Address book settings" dialog:

TASKS

create/modify the route state for the address-book settings

change the address book configuration template to be a modal

[OPTIONAL]

move the name edit and delete button into the configuration screen