Success page made responsive under #272 #427
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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):
AFTER(DESKTOP AND MOBILE VIEW):
Checklist:
Additional Notes
I created this new PR and deleted older one as you told me to fork again and do so