CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

Adding @brad-decker as a second reviewer, hopeful that he can confirm this matches his understanding of the issue, and provide more context if necessary.

Thanks for reviewing this ya'll! Just pushed updated changes! 🙂 @darkwing @Gudahtt

Didn't see these changes, sorry! Working on them now 🙂

@Gudahtt let me know what you think! 🙂

This is awesome -- great work @BboyAkers ! I did notice one side-effect that we didn't think of -- if there are no contacts, which is probably the majority of new-ish users, we just have an empty screen:

@rachelcope @jakehaugen -- have ideas for text you'd like to see here?

@BboyAkers One small update -- could you implement the "no contacts" language? This is really impressive!

Here's the design for the empty state.
Figma file

Thanks a ton @rachelcope I'll get crackin on this!

Awesome @BboyAkers, really solid start! A few things:

1. There's a lint issue, should be easy to fix
2. There's a typo in the title "Build you*r ..."
3. We need to add some spacing between "Build your contact list" heading, the "Add friends" line, and the "Add contact" element
4. We need to turn the "+Add contact" text into a <button> element, for the sake of accessibility
5. In full screen mode, the content still looks too far to the left (not centered)
6. It looks like the screenshot from design wanted to remove the big blue "+" button

We're almost there!

Just pushed the changes @darkwing 🙂. Didn't fully center contact list in 'desktop' mode due to the contact container and the contact content container sharing the page. In my other PR. I can make the change to fully center it in desktop mode once this is merged, unless you'd like for me to do it in this PR. Thoughts?

Side note: I added the text but it's not in the localization objects. Should I localize it for English and leave it empty for all the other languages for the time being or just leave it as is here?

This is 99% of the way there @BboyAkers! Two things:

1. If you run yarn verify-locales:fix, that should fix all the lint issues.
2. The E2E tests are having a problem because we deleted the big "+" button -- if we change the CSS selector to find the Add button in the test (the new add button you implemented), they should work :)
3. One thing I tried doing was deleting the one contact I added; when I do so, the form stays up and populated, instead of redirecting back to the main contracts screen.

After we fix these I think this is good to go!

Updated! 🙂