add margin to sign in name and sign out button

[amandaguan-ag]

Type of Changes

	Type
✓	✨ UI Design
	🔗 Update dependencies

Acceptance Criteria

• UI improvement for better visual separation between user's display name and sign-out button.
• Ensure consistent margin in both desktop and mobile views.
• Maintain responsive design with the new margin addition.

Description

This PR addresses the UI enhancement for the navigation bar by providing adequate margin between the "Signed in as [User Name]" and the "Sign Out" button. Previously, the elements were visually touching each other, especially on smaller screens, creating a cramped look and feel. With this update, we wrap the Typography and SignOutButton in separate Box components to individually control their styles, ensuring a better user experience across all devices.

Updates

Before

After

Testing Steps / QA Criteria

• Pull down this branch with git pull origin ag-sign-out-margin and check out the branch with git checkout ag-sign-out-margin.
• Run npm start to launch the app.
• Verify that there is now a margin between the "Signed in as [User Name]" and the "Sign Out" button on both desktop and mobile views.
• Resize the browser window to ensure that the margin remains consistent across various screen sizes.

[MiliMade]

Hey @amandaguan-ag there's a PR open which addresses the nav bar design