made success page and its FAQ component responsive under issue #272 assigned to me #425
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
codewarnab
requested changes
May 29, 2024
| @@ -25,6 +25,7 @@ import { Donationfront } from './pages/user/Donation/Donationfront/Donationfront | |||
| import requestPermission from './utils/Functions/notifyService'; | |||
| import TeamPage from './pages/shared/team'; | |||
| import NotFound from './Components/shared/PageNotfound'; | |||
| import SuccessPage from './pages/user/ReportIncidentPages/SuccessPage'; | |||
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
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.
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.
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.
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: