CSS for http://localhost:3000/EditContactInformation

[Madhu2244]

Figma: https://www.figma.com/file/VkH80LtHkl1Ck76v88fTvk/FPH-Wireframes?type=design&node-id=2739-33620&mode=design&t=JdGksYsWMHWTJH03-0

For your task, see the image above, and implement the CSS for all those Figmas in the photo. You might have to add a bit of functionality with the extra tab, but almost everything here should just be CSS.

To implement the undo changes button, create an additional state (initialState) that maintains the INITIAL information of the contact with no changes. And for whatever changes are made, edit the state that keeps track of the current values of the text boxes. Lastly, for undoing the changes, we can just reset the states to their original values based on initialState.

Do not implement the modal that says "You have unnsaved changes" - This is too complex of a feature to implement - However, make sure that we have the toast on the bottom right that shows that there are unsaved changes. So if we save the changes, then the initialState value should be updated and the toast on the bottom right should dissapear.

The toast on the bottom right should only appear when we start making changes (aka when initialState !== currentStates)