Make /event page responsive and apply global styles

sanakhuram commented 1 month ago

What does this PR do?

Implements responsive layout updates for the /event page and introduces global typography styles (h1, h2, p) for consistent scaling across devices.

Description of Task to be completed?

Made /event page fully responsive using Tailwind's mobile-first breakpoints (sm:, md:, lg:). Created global styles for headings and paragraphs to avoid style duplication. Removed conflicting or redundant inline styles from components. Fixed font issues in component. Adjusted button layout for better alignment and readability on smaller screens. Performed accessibility testing with Lighthouse and Axe DevTools.

How should this be manually tested?

Pull the feature/us8-responsive branch.
Run the app locally (npm run dev).
Navigate to /event and test layout responsiveness on various screen sizes (mobile, tablet, desktop).
Use Chrome DevTools to simulate devices and test keyboard navigation/focus states.
Optionally, run Lighthouse and Axe DevTools to verify accessibility.

Any background context you want to provide?

This PR is part of the work for User Story 8 (US8), focusing on making the /event page accessible and responsive. The style refactors were necessary to centralize typography rules and prevent redundant or conflicting styling across components.

netlify[bot] commented 1 month ago

Deploy Preview for musikkforandrerliv ready!

Name	Link
Latest commit	e60403536afc2ad79e00e1c2584d97104bd26c19
Latest deploy log	https://app.netlify.com/projects/musikkforandrerliv/deploys/683eaeb5944ba800088c0d15
Deploy Preview	https://deploy-preview-1192--musikkforandrerliv.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 project configuration.

sanakhuram commented 1 month ago

Implemented responsive layout for the /event page using mobile-first Tailwind breakpoints. Adjusted h1, h2, and paragraph styles globally for consistency across the app. Changes

Created global typography styles
Removed/overridden inline styles from EventHeader and SupportUsSection
Fixed mobile button layout and font issues in Sirak’s section Testing
Ran Lighthouse and Axe DevTools for accessibility (Score: 89)
Manual mobile/responsive testing done in Chrome and Firefox dev tools
Let me know if any removed styles should be kept or re-integrated another way☺️

Niksubishi commented 1 month ago

Approved. Feedback via team chat.

NoroffFEU / musikkforandrerliv.no