fix: Address all feedback from Design Audit 11/11/2024

[bodom0015]

Problem

We've noticed some styling issues with the current SDOH website

This feedback has been recorded in the Design Audit 11/11/2024 notes in Notion

Approach

• fix: Navbar (Desktop) - added SDOH Logo to desktop navbar in all views except for Home (logo is already displayed there)
• fix: Navbar (Mobile) - left-align menu options here, add Logo to all views
• feat: Navbar (Mobile) - added animation to the Menu/Close icon when it transitions from one to the other
• fix: Navbar dotted lines - fixed aspect ratio for line1, adjusted width of line4 to match the others
• fix: Navbar - added additional space between each nav button, move navbar down slightly, and moved all views down slightly to accommodate this change
• fix: Navbar - added some extra padding between dropdown button and the menus that open when they are clicked
• feat: Navbar - added box-shadow to dropdown menus
• fix: Homepage - add some padding beneath the left side large logo to better align it with the right side
• fix: Homepage (Mobile) - adjust margins/padding to better balance the whitespace in this view, decrease total height by 1% so that first panel fits on the screen (iPhone 12)

How to Test

1. Navigate to homepage: https://deploy-preview-377--cheerful-treacle-913a24.netlify.app/
   • You should see the updated styles here for the Desktop Navbar and Desktop Homepage
2. Switch to mobile view
   • You should see the updated styles here for the Mobile Navbar and Mobile Homepage
3. Check other views to make sure nothing that drastic has changed
   • You should see that all views have had their content moved down slightly to accommodate the Navbar changes
   • You should see that SDOH Logo now appears in the Desktop Navbar on all views except for the Homepage

Screenshots (Desktop)

Screenshots (Mobile)

[netlify[bot]]

✅ Deploy Preview for cheerful-treacle-913a24 ready!

Name	Link
🔨 Latest commit	96549fd20ac73b700bb04db3f89739580b63312c
🔍 Latest deploy log	https://app.netlify.com/sites/cheerful-treacle-913a24/deploys/673633f4d635730008be6d02
😎 Deploy Preview	https://deploy-preview-377--cheerful-treacle-913a24.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bodom0015]

Thank you @pengyin-shan, I had not noticed this issue before! I might not be able to fix this before the super user meeting 🤔 but I believe this is because of the length of the "SDOH & Place Project" line beneath that dropdown on mobile

We may be able to force that to wrap to a new line and then we might not see this jump :pray:

[pengyin-shan]

Thank you @pengyin-shan, I had not noticed this issue before! I might not be able to fix this before the super user meeting 🤔 but I believe this is because of the length of the "SDOH & Place Project" line beneath that dropdown on mobile

We may be able to force that to wrap to a new line and then we might not see this jump 🙏

No worries at all! This is an extremely minor change, and it shouldn't affect the Super User Meeting, as we will not be testing the mobile view.

Please feel free to merge this PR and record it as a side issue to resolve later if necessary, as all other changes will be important for the Super User Meeting tomorrow.

[mradamcox]

@bodom0015, so I'm thinking that we should merge this into main, and merge #380 into the discovery app branch. That should work fine, right? If we later merge main back into the discovery app branch, that branch will already have these commits.