Feat: Enhance Responsiveness and UI Components for Multi-Device Support

[juliopavila]

Overview:

This pull request introduces a series of enhancements to improve the responsiveness of the UI components across different devices including tablets, specifically addressing layout issues in landscape mode. It also merges the result screen functionalities and updates the Twitter message handling for better user engagement and social media interaction.

Key Changes:

1. Responsive Adjustments: Updated the media queries in components to better handle tablet sizes and landscape orientations. This is crucial for devices like tablets and mobile where the previous settings did not accurately trigger the intended styles.

2. UI Component Enhancements:

   • Modified CircularTile SVG to handle different screen sizes by dynamically adjusting the viewBox property.
   • Improved LoadingAnimation component to ensure it adapts gracefully across mobile, tablet, and desktop environments using new media queries.

3. Result Screen Integration:

   • Merged multiple result-related routes into a single, dynamic route to streamline the navigation and state management.
   • Enhanced the result display logic to accommodate different result types through conditional rendering.

4. Social Media Integration:

   • Updated the Twitter message format to increase clarity and catchiness.
   • Adjusted regex in useTwitter hook for more robust message matching, ensuring social media actions align with user activities accurately.

Files Modified:

• App.tsx: Updated routing logic to consolidate result screens.
• CircularTile.tsx, LoadingAnimation.tsx: Adjustments for responsive behavior and SVG rendering.
• PollCardResult.tsx, CountdownTime.tsx: UI refinements for clarity and visual appeal.
• Other related files across the client package to reinforce consistency and functionality enhancements.

Testing:

• Conduct thorough testing on various devices including desktops, tablets (in both portrait and landscape modes), and mobile devices to ensure the UI displays correctly.
• Verify that all navigation and state transitions are smooth and that user data flows correctly between components.
• Ensure social media functionalities are tested to confirm that posts are formatted and triggered as expected.

[cedricwaxwing]

I think the CircularTiles seem to be working more responsively on the main branch, can you elaborate on the issue were seeing with them before? Right now with the viewport adjustments, they create a weird spacing effect:

[cedricwaxwing]

Looks good! 👍