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 issue is a sub-part of issue #242
Screenshots / GIFs (if applicable)
BEFORE:
DESKTOP AND MOBILE VIEW
AFTER:
DESKTOP AND MOBILE VIEW
Checklist:
[x] I have performed a self-review of my code
[x] I have added/updated relevant documentation (if needed)
[x] I have tested the changes locally and they function as expected
[x] I have ensured my code follows the project's coding standards
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
Related Issue
This issue is a sub-part of issue #242
Screenshots / GIFs (if applicable)
BEFORE: DESKTOP AND MOBILE VIEW
AFTER:
DESKTOP AND MOBILE VIEW
Checklist: