UI: move "Restore deleted contacts" button and remove 'Contacts' H2

fecgov / fecfile-web-app

7 stars 4 forks source link

UI: move "Restore deleted contacts" button and remove 'Contacts' H2 #1981

Closed MitchellTCG closed 1 week ago

MitchellTCG commented 1 month ago

Tasks

[ ] Remove the "Contacts" H2
[ ] Move "Restore deleted contacts" button to the left of "+ Add contact" (20px padding between the buttons)
[ ] There should be 16px of space between the bottom of the buttons and top of the Data table
[ ] make the background color of the Restore deleted contacts buttons #AEB0B5
[ ] Make the text color of the Restore deleted contacts buttons #212121
[ ] Rename the button from "Restore deleted contact(s)" to "Restore deleted contacts "

Current State

current-state

[ See image in Jira| /attachments/11259?name=image-20240530-172007.png]

Ideal State

ideal-state

[!image-20240530-172101.png! See image in Jira| /attachments/11260?name=image-20240530-172101.png]

QA Notes

[x] BA/Design Quality Checklist complete

DEV Notes

Design

null

FECFILE-1404

MitchellTCG commented 1 month ago

@GreggMoreland pls review

sasha-dresden commented 1 month ago

@MitchellTCG on #1988 and #1989 it says to have 8px padding below the H1 and the top of the table, but on this ticket, it asks for 16px between the action buttons, (which are on the same line as the H1). I wasn't sure if this table was specifically different from all the others or if one of the spacings was incorrect? Also, I noticed that the alignment between the H1 and the buttons is baseline, which seems a little off to me when the padding is much smaller. This is because baseline aligns the text of the button and the text of the h1 on the baseline, which because "Manage Users" has a descending "g", so the padding between the h1 and the table looks much larger than the padding between the buttons and the table.

Trying out the various options, I think this looks a bit more even: This is set to end

mjtravers commented 4 weeks ago

Passes CR. Sending to QA.

WiseQA commented 4 weeks ago

QA review verified the following UX changes were implemented.

[x] Remove the "Contacts" H2
[x] Move "Restore deleted contacts" button to the left of "+ Add contact" (20px padding between the buttons)
[x] There should be 16px of space between the bottom of the buttons and top of the Data table
[x] make the background color of the Restore deleted contacts buttons #AEB0B5
[x] Make the text color of the Restore deleted contacts buttons #212121
[x] Rename the button from "Restore deleted contact(s)" to "Restore deleted contacts "

QA Review Completed. Moved to Stage Ready.

exalate-issue-sync[bot] commented 1 week ago

akhorsand commented: Accepted during PI Planning Sprint Review on 7/8/2024

fecgov / fecfile-web-app