From a9d7df72627648e1b23cdba1e848bb74b3600d8d Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Mon, 4 Mar 2024 14:03:32 +0200
Subject: [PATCH] Mobile-first UI for my schedule

---
 pages/cart/publishers/myschedule.tsx | 58 +++++++++++++++++-----------
 1 file changed, 36 insertions(+), 22 deletions(-)

diff --git a/pages/cart/publishers/myschedule.tsx b/pages/cart/publishers/myschedule.tsx
index d9fb1eb..1d33c12 100644
--- a/pages/cart/publishers/myschedule.tsx
+++ b/pages/cart/publishers/myschedule.tsx
@@ -13,36 +13,50 @@ export default function MySchedulePage({ assignments }) {
 
     const { data: session, status } = useSession();
     if (status === "loading") {
-        return <div>Loading...</div>;
+        return <div className="flex justify-center items-center h-screen">Loading...</div>;
     }
 
     return (
         <Layout>
             <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER, UserRole.USER]}>
-                <h1 className="text-3xl font-bold">Моите смени</h1>
                 <div className="container mx-auto p-4">
-                    {assignments && assignments.map((assignment) => (
-                        <div className="flex items-center space-x-2 py-1" key={assignment.dateStr}>
-                            <div className="font-bold flex-shrink-0 w-6 text-right">{assignment.dateStr + ":"}</div> {/*This is the column for the date. I've given it a fixed width (w-8) which you can adjust*/}
-                            <div className="flex-grow flex">
-                                <div className="flow space-x-2 bg-gray-200 rounded-lg shadow-md py-2 px-3" key={assignment.id}>
-                                    <span>{GetTimeFormat(assignment.shift.startTime)} - {GetTimeFormat(assignment.shift.endTime)}</span>
-                                    <button
-                                        className={`text-sm text-white font-semibold px-2 rounded-lg shadow ${assignment.isConfirmed ? "bg-yellow-400 hover:bg-yellow-500" : "bg-red-400 hover:bg-red-500"}`}
-                                        onClick={() => searchReplacement(assignment.id)}
-                                    >
-                                        Търси заместник
-                                    </button>
-                                    <button
-                                        className="text-sm bg-green-400 hover:bg-green-500 text-white font-semibold px-2 rounded-lg shadow"
-                                        onClick={() => AddToGoogleCalendar(assignment.id)}
-                                    >
-                                        Добави в календар
-                                    </button>
+                    <h1 className="text-2xl md:text-3xl font-bold text-center my-4">Моите смени</h1>
+                    <div className="space-y-4">
+                        {assignments && assignments.map((assignment) => (
+                            <div key={assignment.dateStr} className="bg-white shadow overflow-hidden rounded-lg">
+                                <div className="px-4 py-5 sm:px-6">
+                                    <h3 className="text-lg leading-6 font-medium text-gray-900">{assignment.dateStr}</h3>
+                                </div>
+                                <div className="border-t border-gray-200">
+                                    <dl>
+                                        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                                            <dt className="text-sm font-medium text-gray-500">Час</dt>
+                                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                                {GetTimeFormat(assignment.shift.startTime)} - {GetTimeFormat(assignment.shift.endTime)}
+                                            </dd>
+                                        </div>
+                                        <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                                            <dt className="text-sm font-medium text-gray-500">Действия</dt>
+                                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                                <button
+                                                    className="mr-2 mb-2 inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+                                                    onClick={() => AddToGoogleCalendar(assignment.id)}
+                                                >
+                                                    Добави в календар
+                                                </button>
+                                                <button
+                                                    className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                                                    onClick={() => searchReplacement(assignment.id)}
+                                                >
+                                                    Търси заместник
+                                                </button>
+                                            </dd>
+                                        </div>
+                                    </dl>
                                 </div>
                             </div>
-                        </div>
-                    ))}
+                        ))}
+                    </div>
                 </div>
             </ProtectedRoute>
         </Layout>