From 363d760ce7a9a30b97fe2ef2fd10b7a00d155f85 Mon Sep 17 00:00:00 2001
From: Vaibhav-Yerkar <vaibhavyerkar2017@gmail.com>
Date: Sat, 19 Oct 2024 10:17:00 +0530
Subject: [PATCH] UI enhancemend for Menu Page - Today's Special

---
 .../src/components/Pages/TodaysSpecial.jsx    | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/Pages/TodaysSpecial.jsx b/frontend/src/components/Pages/TodaysSpecial.jsx
index 6136e14a..ab9d6f79 100644
--- a/frontend/src/components/Pages/TodaysSpecial.jsx
+++ b/frontend/src/components/Pages/TodaysSpecial.jsx
@@ -66,12 +66,12 @@ const TodaysSpecial = () => {
 
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.coffee.image} alt={todaysSpecial.coffee.name} />
 
-          <h3 className="text-xl font-semibold">{todaysSpecial.coffee.name}</h3>
-          <p className="text-gray-600">{todaysSpecial.coffee.description}</p>
+          <h3 className="text-xl font-semibold text-left">{todaysSpecial.coffee.name}</h3>
+          <p className="text-gray-600 text-left">{todaysSpecial.coffee.description}</p>
           
-          <div className={`mt-4 transition-opacity duration-300 ease-in-out ${hoveredItem === 'coffee' ? 'opacity-100' : 'opacity-0'}`}>
-            <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 className={`flex items-center justify-end gap-2 mt-2 transition-opacity duration-300 ease-in-out ${hoveredItem === 'coffee' ? 'opacity-100' : 'opacity-0'}`}>
+            <p className="text-md font-semibold text-gray-500 line-through">{todaysSpecial.coffee.originalPrice}</p>
+            <p className="text-xl font-bold text-red-600">{todaysSpecial.coffee.offerPrice}</p>
           </div>
         </div>
 
@@ -84,12 +84,12 @@ const TodaysSpecial = () => {
         >
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.food.image} alt={todaysSpecial.food.name} loading="lazy" />
 
-          <h3 className="text-xl font-semibold">{todaysSpecial.food.name}</h3>
-          <p className="text-gray-600">{todaysSpecial.food.description}</p>
+          <h3 className="text-xl font-semibold text-left">{todaysSpecial.food.name}</h3>
+          <p className="text-gray-600 text-left">{todaysSpecial.food.description}</p>
         
-          <div className={`mt-4 transition-opacity duration-300 ease-in-out ${hoveredItem === 'food' ? 'opacity-100' : 'opacity-0'}`}>
-              <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.food.originalPrice}</p>
-              <p className="text-xl font-bold text-red-500">{todaysSpecial.food.offerPrice}</p>
+          <div className={`flex items-center justify-end gap-2 mt-2 transition-opacity duration-300 ease-in-out ${hoveredItem === 'food' ? 'opacity-100' : 'opacity-0'}`}>
+              <p className="text-md font-semibold text-gray-500 line-through">{todaysSpecial.food.originalPrice}</p>
+              <p className="text-xl font-bold text-red-600">{todaysSpecial.food.offerPrice}</p>
           </div>
         </div>
 
@@ -102,12 +102,12 @@ const TodaysSpecial = () => {
         >
           <img className="w-64 h-48 object-cover object-center rounded-md mb-4" src={todaysSpecial.drink.image} alt={todaysSpecial.drink.name} loading="lazy"/>
 
-          <h3 className="text-xl font-semibold">{todaysSpecial.drink.name}</h3>
-          <p className="text-gray-600">{todaysSpecial.drink.description}</p>
+          <h3 className="text-xl font-semibold text-left">{todaysSpecial.drink.name}</h3>
+          <p className="text-gray-600 text-left">{todaysSpecial.drink.description}</p>
         
-          <div className={`mt-4 transition-opacity duration-300 ease-in-out ${hoveredItem === 'drink' ? 'opacity-100' : 'opacity-0'}`}>
-            <p className="text-lg font-bold text-red-700 line-through">{todaysSpecial.drink.originalPrice}</p>
-            <p className="text-xl font-bold text-red-500">{todaysSpecial.drink.offerPrice}</p>
+          <div className={`flex items-center justify-end gap-2 mt-2 transition-opacity duration-300 ease-in-out ${hoveredItem === 'drink' ? 'opacity-100' : 'opacity-0'}`}>
+            <p className="text-lg font-semibold text-gray-500 line-through">{todaysSpecial.drink.originalPrice}</p>
+            <p className="text-xl font-bold text-red-600">{todaysSpecial.drink.offerPrice}</p>
           </div>
         </div>
       </div>