From 4a80e92001810ec429f5a880787fdb61e0d1df32 Mon Sep 17 00:00:00 2001
From: Rishabh Gusain <rishabhgusain.6@gmail.com>
Date: Wed, 22 May 2024 04:28:41 +0530
Subject: [PATCH] xyz

---
 src/components/Hotels/Hotelslist.js       |  6 +++---
 src/components/Hotels/SortComponent.js    |  6 +++---
 src/components/SearchPanel/SearchPanel.js | 16 ++++++++--------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Hotels/Hotelslist.js b/src/components/Hotels/Hotelslist.js
index 727008d..3960766 100644
--- a/src/components/Hotels/Hotelslist.js
+++ b/src/components/Hotels/Hotelslist.js
@@ -69,8 +69,8 @@ const HotelsList = () => {
     <div className="container mx-auto mt-6">
       <div className="flex flex-col items-center space-y-4">
         <SearchPanel onSearch={handleSearch} />
-        <div className="flex justify-between w-full max-w-3xl px-4">
-          <div className="text-base text-gray-700">
+        <div className="flex justify-between items-center w-full max-w-3xl px-4">
+          <div className="text-lg text-gray-700">
             {selectedCity.city_name && selectedCity.state_name 
               ? `Showing hotels from ${selectedCity.city_name}, ${selectedCity.state_name}`
               : 'Select a destination to see hotels'}
@@ -80,7 +80,7 @@ const HotelsList = () => {
           </div>
         </div>
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mt-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6 px-4">
         {hotels.map((hotel, index) => (
           <HotelCard key={index} hotel={hotel} />
         ))}
diff --git a/src/components/Hotels/SortComponent.js b/src/components/Hotels/SortComponent.js
index e1a2f14..ba25bea 100644
--- a/src/components/Hotels/SortComponent.js
+++ b/src/components/Hotels/SortComponent.js
@@ -17,12 +17,12 @@ const SortComponent = ({ onSort }) => {
   };
 
   return (
-    <div className="flex gap-5 justify-between items-start px-4 py-3.5 text-base leading-6 whitespace-nowrap bg-white rounded-3xl border-2 border-solid border-zinc-300 max-w-[260px] text-zinc-900">
-      <div className="my-auto">Sort</div>
+    <div className="flex gap-4 items-center px-6 py-3 bg-white rounded-lg shadow-md border border-gray-200">
+      <div className="text-lg font-semibold text-gray-700">Sort by:</div>
       <select
         value={sortOption}
         onChange={handleSortChange}
-        className="shrink-0 self-start w-full aspect-[0.88] h-10 text-lg"
+        className="px-3 py-2 text-base text-gray-700 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-600"
       >
         <option value="">Select sort option</option>
         {sortOptions.map((option, index) => (
diff --git a/src/components/SearchPanel/SearchPanel.js b/src/components/SearchPanel/SearchPanel.js
index 8ad3600..10c2f63 100644
--- a/src/components/SearchPanel/SearchPanel.js
+++ b/src/components/SearchPanel/SearchPanel.js
@@ -24,14 +24,14 @@ const SearchPanel = ({ onSearch }) => {
   }, []);
 
   return (
-    <div className="flex justify-center items-center px-16 py-2.5 bg-white max-md:px-5">
-      <div className="flex gap-0 max-w-full w-[578px] max-md:flex-wrap">
-        <div className="flex flex-col grow shrink-0 items-start py-3.5 pr-20 pl-3.5 rounded-xl basis-0 bg-zinc-100 w-fit max-md:pr-5">
-          <div className="text-xs leading-4 text-gray-600">Destination</div>
+    <div className="flex justify-center items-center px-6 py-4 bg-white shadow-md rounded-lg">
+      <div className="flex gap-4 w-full max-w-2xl bg-gray-50 p-4 rounded-lg shadow-inner">
+        <div className="flex flex-col flex-grow py-2 px-4 bg-white rounded-lg shadow-md">
+          <label className="text-xs font-semibold text-gray-600">Destination</label>
           <select
             value={destination}
             onChange={(e) => setDestination(e.target.value)}
-            className="mt-3.5 text-sm text-black bg-transparent border-none outline-none"
+            className="mt-2 text-sm text-black bg-transparent border-none outline-none w-full"
           >
             <option value="">Where are you going?</option>
             {locations.map((location, index) => (
@@ -42,14 +42,14 @@ const SearchPanel = ({ onSearch }) => {
           </select>
         </div>
         <button
-          className="flex gap-2 justify-center px-7 py-5 text-2xl font-medium leading-8 text-center text-white whitespace-nowrap bg-orange-600 rounded-none max-md:px-5"
+          className="flex items-center gap-2 px-6 py-2 text-xl font-medium text-white bg-orange-600 rounded-lg shadow-md hover:bg-orange-700"
           onClick={() => onSearch(destination)}
         >
-          <div className="grow my-auto">Search</div>
+          <span>Search</span>
           <img
             loading="lazy"
             src="https://cdn.builder.io/api/v1/image/assets/TEMP/9d6d4f6125f7997a445fb71d2dc845a7ea1bb655ba70b772c477839d6f638bc6?"
-            className="shrink-0 w-6 aspect-square"
+            className="w-5 h-5"
             alt="search icon"
           />
         </button>