From bc7d06634673ed86e26cd87d581f378250fff6e3 Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Wed, 24 Apr 2024 15:03:08 +0300
Subject: [PATCH] snug scheduler UI to fit the whole day in one screen

---
 components/calendar/ShiftComponent.tsx | 6 +++---
 pages/cart/calendar/index.tsx          | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/calendar/ShiftComponent.tsx b/components/calendar/ShiftComponent.tsx
index 4c33858..99e4976 100644
--- a/components/calendar/ShiftComponent.tsx
+++ b/components/calendar/ShiftComponent.tsx
@@ -193,7 +193,7 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
 
                     return (
                         <div key={index}
-                            className={`flow space-x-2 rounded-md px-2 py-1 my-1 ${ass.isConfirmed ? 'bg-green-100' : 'bg-gray-100'} ${borderStyles}`}
+                            className={`flow rounded-md px-2 py-1 sm:py-0.5 my-1 ${ass.isConfirmed ? 'bg-green-100' : 'bg-gray-100'} ${borderStyles}`}
                         >
                             <div className="flex justify-between items-center" onClick={() => handlePublisherClick(ass.publisher)}>
                                 <span className="text-gray-700">{publisherInfo.firstName} {publisherInfo.lastName}</span>
@@ -202,12 +202,12 @@ function ShiftComponent({ shift, onShiftSelect, isSelected, onPublisherSelect, a
                                     {shift.requiresTransport && (
                                         <span
                                             onClick={ass.canTransport || true ? () => toggleTransport(ass) : undefined}
-                                            className={`material-icons ${ass.isWithTransport ? 'text-green-500 font-bold' : (transportProvided ? 'text-gray-400 ' : 'text-orange-400 font-bold')} ${ass.canTransport || ass.isWithTransport || true ? ' cursor-pointer' : 'cursor-not-allowed'} px-3 py-1 ml-2 rounded-md`}
+                                            className={`material-icons ${ass.isWithTransport ? 'text-green-500 font-bold' : (transportProvided ? 'text-gray-400 ' : 'text-orange-400 font-bold')} ${ass.canTransport || ass.isWithTransport || true ? ' cursor-pointer' : 'cursor-not-allowed'} px-3 py-0 ml-2 rounded-md`}
                                         >
                                             {ass.isWithTransport ? "транспорт" : ass.canTransport ? "може транспорт" : "без транспорт"} <LocalShippingIcon />
                                         </span>
                                     )}
-                                    <button onClick={() => removeAssignment(ass.id)} className="text-white bg-red-500 hover:bg-red-600 px-3 py-1 ml-2 rounded-md" >
+                                    <button onClick={() => removeAssignment(ass.id)} className="items-center leading-snug text-white text-center bg-red-500 hover:bg-red-600 px-3 py-1 md:py-0.5 ml-2 rounded-md" >
                                         махни
                                     </button>
 
diff --git a/pages/cart/calendar/index.tsx b/pages/cart/calendar/index.tsx
index 6ad9127..da3bc2f 100644
--- a/pages/cart/calendar/index.tsx
+++ b/pages/cart/calendar/index.tsx
@@ -677,7 +677,7 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
                                       list of publishers for the selected date with availabilities 
                             
                             ------------------AVAILABLE PUBLISHERS LIST FOR THE SELECTED DATE0 ------------------ */}
-                            <div className="flex flex-col items-center my-8 sticky top-0">
+                            <div className="flex flex-col items-center my-4 sticky top-0">
 
                                 <h2 className="text-lg font-semibold mb-4">Достъпни за този ден: <span className="text-blue-600">{availablePubs.length}</span></h2>
                                 <label className="toggle pb-3">
@@ -719,7 +719,7 @@ export default function CalendarPage({ initialEvents, initialShifts }) {
 
                                         return (
                                             <li key={index}
-                                                className={`flex justify-between items-center p-4 rounded-lg shadow-sm mb-2 
+                                                className={`flex justify-between items-center p-4 sm:py-2 rounded-lg shadow-sm mb-2 
                                                 ${bgAndBorderColorClass} ${selectedBorderClass} ${activeOpacityClass}`}
                                                 onDoubleClick={(handlePublisherModalOpen.bind(this, pub))}
                                             >