Open Sudhanva21 opened 4 months ago
The recent updates introduce new dependencies and significant enhancements to the Feedback
and FeedBox
components in the client side of the application. The Feedback
component now leverages react-multi-carousel
to display user feedbacks more dynamically and responsively. The FeedBox
component's layout and styling have been refined for a better user experience. These changes address the need for improved design and responsiveness of feedback cards as specified in the linked issue.
Files | Change Summary |
---|---|
client/package.json | Added dependencies: react-multi-carousel , react-slick , slick-carousel |
client/src/components/ui/FeedBox.jsx | Updated the component's layout, styling, and content structure, enhancing the display of user information and feedback. |
client/src/components/ui/Feedback.jsx | Implemented a carousel for feedback cards, increased total feedback count, updated user data structure, and made layout responsive. |
sequenceDiagram
participant User
participant Feedback as Feedback Component
participant Carousel as Carousel Component
User->>Feedback: Open Feedback Section
Feedback->>Carousel: Initialize with User Data
Carousel-->>Feedback: Render Feedback Cards Using Props
Feedback->>User: Display Rendered Feedback Carousel
Objective | Addressed | Explanation |
---|---|---|
Improve the responsiveness and design of feedback cards (#1) | ✅ |
In the code, new carousels spin,
With feedback flowing in a gracious spin.
Images styled with care, align so neat,
Layout refined, design now a feat.
Responsive tales of users, cards so bright,
Coding bunnies worked through day and night. 🐰
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
Name | Link |
---|---|
Latest commit | 035c90c62a852ac72dea423db488a2bf4fc9fef3 |
Latest deploy log | https://app.netlify.com/sites/appoint-next/deploys/66714f4603363100088615e5 |
@Sudhanva21 can you video of it
@Latish705 Do you want video of the implementation??
This pull request did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please verify it has no conflicts with the develop branch and rebase if needed. Mention it now if you need help or give permission to other people to finish your work.
Pull Request Details
Description
Do some CSS changes in react-multi-carousel->lib->style.css if not already done .react-multiple-carouselarrow => change background to black rgba react-multiple-carouselarrow--left and of arrow--right=> calc(1px) instead of (4%+1px)
Fixes
Fixed #1
Type of PR
Summary
Made responsive for different width of screen and changed the design of feedback card
Screenshots (if applicable)
Additional Notes
[Include any additional information or context that might be helpful for reviewers.]
Checklist
npm run lint:fix
andnpm run format:fix
.Summary by CodeRabbit
New Features
Feedback
component to display user feedback cards dynamically.Enhancements
FeedBox
component with improved layout, styling, and content structure, enhancing the display of user information and feedback.Dependencies
react-multi-carousel
,react-slick
, andslick-carousel
for improved carousel support.