Add styled components to ShareModal

[amandaguan-ag]

Type of Changes

	Type
✓	🎨 UI Improvements
✓	🔗 Update dependencies

Acceptance Criteria

• The ShareModal component now correctly adapts to light and dark mode settings.
• UI elements within the ShareModal maintain adequate contrast and visibility in both modes.

Description

This PR focuses on enhancing the user interface of the ShareModal component by adding styled components that adapt to light and dark mode themes. Ensuring a consistent and accessible UI across different modes enhances user experience and adheres to modern UI design standards.

Styled Components for Light and Dark Mode

The modal now features a set of styled components that react to the theme context. This ensures that the modal's visual elements are always visible and pleasant to interact with, regardless of the user's theme preference.

Improved Theme Consistency

With the introduction of these theme-responsive styles, the application now maintains a consistent look and feel that resonates with the overall design system.

Update

Before

After

Testing Steps / QA Criteria

• From your terminal, pull down this branch with git pull origin ag-design-share-list and check that branch out with git checkout ag-design-share-list.
• Start the application with npm start and navigate to the modal.
• Toggle the theme between light and dark mode. Observe that the ShareModal components update their styles accordingly.
• Ensure that all text and interactive elements are clearly visible in both modes.

[github-actions]

Visit the preview URL for this PR (updated for commit c54de57):

https://tcl-70-smart-shopping-list--pr86-ag-design-share-list-er8izy41.web.app

_{(expires Sat, 13 Apr 2024 20:21:06 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 7bb526f3a6607712c7f73ffd6c0dfff4c62b86d9}