Add - Added hover effects and offer prices to Today's Special items #228
Conversation
|
@Ashwinib26 is attempting to deploy a commit to the bunty's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes in Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (3)
frontend/src/components/Pages/TodaysSpecial.jsx (3)
55-58: Improved header styling looks great!The changes to the header, including the larger font size, gradient effect, and custom font, significantly enhance the visual appeal of the "Today's Special" section. This aligns well with the PR objectives.
Consider adding a fallback font and ensuring the Lobster font is properly loaded. You can modify the font-family like this:
- style={{ fontFamily: 'Lobster, cursive' , lineHeight: '1.2', paddingBottom: '10px'}} + style={{ fontFamily: '"Lobster", cursive, sans-serif' , lineHeight: '1.2', paddingBottom: '10px'}}Also, make sure to include the Lobster font in your project's font loading strategy.
63-75: Great improvements to the Coffee Card component!The changes to the card height and the refactored price display logic with CSS transitions enhance both the visual consistency and the user interaction. This aligns well with the PR objectives for adding hover effects and improving the presentation of offer prices.
To improve accessibility, consider adding
aria-hidden="true"to the price display div and including a visually hidden element with the price information that's always available to screen readers. For example:<div className={`mt-4 transition-opacity duration-300 ease-in-out ${hoveredItem === 'coffee' ? 'opacity-100' : 'opacity-0'}`} aria-hidden="true"> <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.coffee.originalPrice}</p> <p className="text-xl font-bold text-red-500">{todaysSpecial.coffee.offerPrice}</p> </div> <div className="sr-only"> Original price: {todaysSpecial.coffee.originalPrice}, Offer price: {todaysSpecial.coffee.offerPrice} </div>This ensures that the price information is always accessible, regardless of the hover state.
Line range hint
1-118: Overall, excellent improvements to the Today's Special component!The changes successfully implement the PR objectives of adding hover effects and displaying offer prices for the Today's Special items. The consistent styling and interaction patterns across all card types create a cohesive and visually appealing user interface.
To further improve the code structure and reduce duplication, consider extracting the common card structure into a separate reusable component. This would make the code more maintainable and easier to update in the future. Here's a suggestion:
- Create a new component, e.g.,
SpecialCard:const SpecialCard = ({ item, type }) => ( <div className={`bg-${type === 'food' ? 'teal' : 'pink'}-100 p-4 rounded-lg shadow-lg max-w-xs text-center transition-transform duration-300 ease-in-out transform hover:scale-105 mx-2`} style={{ minHeight: '350px', maxHeight: '350px' }} onMouseEnter={() => setHoveredItem(type)} onMouseLeave={() => setHoveredItem(null)} > <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={item.image} alt={item.name} /> <h3 className="text-xl font-semibold">{item.name}</h3> <p className="text-gray-600">{item.description}</p> <div className={`mt-4 transition-opacity duration-300 ease-in-out ${hoveredItem === type ? 'opacity-100' : 'opacity-0'}`} aria-hidden="true"> <p className="text-lg font-bold text-red-700 line-through">{item.originalPrice}</p> <p className="text-xl font-bold text-red-500">{item.offerPrice}</p> </div> <div className="sr-only"> Original price: {item.originalPrice}, Offer price: {item.offerPrice} </div> </div> );
- Use the new component in the main render function:
<div className="flex flex-col md:flex-row justify-around items-center mb-8 space-y-8 md:space-y-0 md:space-x-4"> <SpecialCard item={todaysSpecial.coffee} type="coffee" /> <SpecialCard item={todaysSpecial.food} type="food" /> <SpecialCard item={todaysSpecial.drink} type="drink" /> </div>This refactoring would significantly reduce code duplication and make future updates easier to manage.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- frontend/src/components/Pages/TodaysSpecial.jsx (2 hunks)
🧰 Additional context used
🔇 Additional comments (2)
frontend/src/components/Pages/TodaysSpecial.jsx (2)
81-93: Consistent improvements applied to the Food Card componentThe changes to the Food Card component mirror those made to the Coffee Card, maintaining a consistent design and interaction pattern across the different item types. This uniformity enhances the overall user experience and aligns with the PR objectives.
Please apply the same accessibility improvements suggested for the Coffee Card component to this Food Card component as well.
99-111: Uniform improvements applied to the Drink Card componentThe changes to the Drink Card component are consistent with those made to the Coffee and Food Card components. This uniformity across all item types creates a cohesive and polished user interface, fully aligning with the PR objectives.
Please apply the same accessibility improvements suggested for the Coffee and Food Card components to this Drink Card component as well.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
|
|
@RamakrushnaBiswal , I made the required changes. After Updates :
|
RamakrushnaBiswal
merged commit cf044d3
into
RamakrushnaBiswal:main
RamakrushnaBiswal
added
enhancement
Implemented a stylish custom font for "Today's Special," added hover effects and dynamic price displays (original prices and offer prices), ensuring a visually appealing and interactive user experience.
Before :
After :
Summary by CodeRabbit
New Features
Bug Fixes