Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Success page made responsive under #272 #427

Merged
merged 2 commits into from
May 30, 2024
Merged

Success page made responsive under #272 #427

merged 2 commits into from
May 30, 2024

Conversation

Priyal208
Copy link
Contributor

Description

Under issue #272 assigned to me , i made success page responsive the one which appears after full animal report, additionaly its FAQ component embeded in success page , i also made it responsive

Summary of Changes Made

SuccessPage Component
Centered Content and Added Spacing:
Adjusted the layout to center the text content.
Added spacing between elements to improve readability.
Responsive Design:
Used Tailwind CSS to make buttons responsive. Adjusted padding and font size for smaller devices.
Ensured that text and other elements scale appropriately on different screen sizes.
CustomizedAccordions Component
Styled Components with MUI:
Customized the Accordion, AccordionSummary, and AccordionDetails components using styled from MUI.
Added a blur effect and semi-transparent background to the Accordion component.
Responsive Design:
Adjusted padding in AccordionDetails for smaller screens using media queries.
Ensured the font size for Typography elements is responsive using the sx prop.
Ensured images within AccordionDetails resize appropriately on smaller screens by styling them with styled.
Responsive Adjustments:
Overall, I focused on making both components responsive to ensure a good user experience on all device sizes.
Added responsive utility classes from Tailwind CSS and media queries for conditional styling.
Improved Layout and Spacing:
Ensured proper spacing between different sections for better readability and user experience.
Centered content and adjusted layout to look aesthetically pleasing and functional.
These changes ensure the components are user-friendly, visually appealing, and functional across various devices, enhancing the overall user experience.

Related Issue

This is sub-part of issue #242

Screenshots / GIFs (if applicable)

BEFORE(DESKTOP AND MOBILE VIEW):
Screenshot 2024-05-28 211613
Screenshot 2024-05-28 211713
AFTER(DESKTOP AND MOBILE VIEW):
Screenshot 2024-05-28 215153
Screenshot 2024-05-28 215207
Screenshot 2024-05-28 215832

Checklist:

  • I have performed a self-review of my code
  • I have added/updated relevant documentation (if needed)
  • I have tested the changes locally and they function as expected
  • I have ensured my code follows the project's coding standards

Additional Notes

I created this new PR and deleted older one as you told me to fork again and do so

@codewarnab codewarnab requested a review from rishicds May 29, 2024 17:27
@codewarnab codewarnab added level2 25 points gssoc Girl Script Summer of Code labels May 29, 2024
@rishicds rishicds merged commit 1360023 into Innovateninjas:main May 30, 2024
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
gssoc Girl Script Summer of Code level2 25 points
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants