pb-67: admin page mobile friendly (#108)

* fixes placements of postits in admin panel

* tweaks event calendar for smalelr screens

* fix: h-w issue events modal

* final fix scaling events and calendar modal

* fix tweaks rest of modals and adds slack channel modal for consistancy

* tweaks font size

* feat: makes create event better for mobile

* chore: removesunused classnames

* feat: delete event better for mobile

application/next-frontend/src/Admin/components/CardComponentWrapper.tsx

@@ -17,7 +17,7 @@ const CardComponentWrapper = ({
     const { setHovered, isHovered } = useHover()
     return (
         <div
-            className={`relative min-h-[16rem] w-[25rem] bg-yellow p-4 shadow-2xl shadow-amber-950/25 ${className} ${
+            className={`relative min-h-[16rem] min-w-[min(25rem,_90vw)] bg-yellow p-4 shadow-2xl shadow-amber-950/25 ${className} ${
                 isHovered ? 'hover:shadow-custom' : ''
             } ${addIcon && isHovered ? 'hover:cursor-pointer' : ''} `}
             onMouseEnter={() => setHovered(true)}

application/next-frontend/src/Admin/scenarios/AdminMainPage.tsx

@@ -1,32 +1,34 @@
 import { Events } from 'Admin/scenarios/Events'
 import { Restaurants } from 'Admin/scenarios/Restaurants'
-import { SlackChannel } from 'Admin/scenarios/SlackChannel'
+import { SlackChannel } from '@/Admin/scenarios/SlackChannel'
 import Image from 'next/image'
 import MascotHappy from 'Admin/assets/MascotHappy.svg'
 
 import { HoverProvider } from 'Shared/context/HoverContext'
 
 const AdminMainPage = () => {
     return (
-        <div>
-            <div className={`grid-background flex w-full justify-evenly pt-16 `}>
-                <div className="w-1/3 p-4 [&>*]:mb-14">
-                    <h1 className="font-queensMedium text-6xl">Pizza Admin</h1>
+        <div className="grid-background flex items-center justify-center p-16 px-10 lg:p-20">
+            <div className={`flex w-full max-w-[1500px] flex-col items-center gap-16`}>
+                <div className="grid w-full grid-cols-1 items-center justify-items-center gap-16 lg:grid-cols-2">
+                    <div>
+                        <h1 className="w-full text-left font-queensMedium text-6xl">Pizza Admin</h1>
+                    </div>
+                    <div />
                     <HoverProvider>
                         <Events />
                     </HoverProvider>
-                    <HoverProvider>
-                        <SlackChannel />
-                    </HoverProvider>
-                </div>
-                <div className={`z-0 w-1/3 p-4 [&>*]:mb-14`}>
                     <Image
-                        className="mt-16"
+                        className="row-start-6 lg:row-start-[unset]"
                         priority
                         src={MascotHappy}
                         width={450}
                         alt="pizza bot mascot with four arms"
                     />
+                    <HoverProvider>
+                        <SlackChannel />
+                    </HoverProvider>
+
                     <HoverProvider>
                         <Restaurants />
                     </HoverProvider>

application/next-frontend/src/Admin/scenarios/Events/components/CreatePizzaEventCard.tsx

@@ -99,24 +99,21 @@ const CreatePizzaEventCard = ({ selectedDate }: { selectedDate: Date }) => {
     }
 
     return (
-        <div className="h-[448px] w-[703px] rounded-[32px] border bg-green-light px-14 py-10">
-            <div className="flex justify-between">
+        <div className="w-[min(90wv,_50rem)] rounded-[32px] border bg-green-light px-14 py-10">
+            <div className="flex justify-between gap-4">
                 <span className="font-queensRegular text-5xl text-green-primary">Create Pizza Event?</span>
-                <span
-                    className="m-0 cursor-pointer text-4xl font-light text-green-quaternary"
-                    onClick={() => closeModal()}
-                >
+                <span className="cursor-pointer text-4xl font-light text-green-quaternary" onClick={() => closeModal()}>
                     &times;
                 </span>
             </div>
 
             <FormProvider {...methods}>
                 <form onSubmit={handleSubmit(onSubmit)}>
-                    <div className="mt-12 grid grid-cols-2 gap-4 font-workSans font-semibold">
-                        <h3 className="w-full text-left text-2xl italic">Date:</h3>
-                        <h3 className="w-full text-left text-2xl italic">Time:</h3>
+                    <div className="mt-12 grid grid-flow-row grid-cols-1 gap-4 font-workSans font-semibold lg:grid-cols-2">
+                        <h3 className="w-full text-left text-2xl italic lg:row-start-auto">Date:</h3>
+                        <h3 className="row-start-3 w-full text-left text-2xl italic lg:row-start-auto">Time:</h3>
 
-                        <div className="flex flex-row items-center text-4xl">
+                        <div className="flex flex-row items-center text-4xl lg:row-start-auto">
                             <span className=" text-green-tertiary">{date}.</span>
                             <span className="pl-4 text-green-tertiary">{months[currentMonth]}</span>
                             <Controller
@@ -135,7 +132,7 @@ const CreatePizzaEventCard = ({ selectedDate }: { selectedDate: Date }) => {
                             />
                         </div>
 
-                        <div className="flex flex-row items-center gap-1 text-4xl">
+                        <div className="flex flex-row items-center gap-1 text-4xl lg:row-start-auto">
                             <div className="border-2 border-dotted border-[#94DBB6]">
                                 <Controller
                                     name="eventHour"
@@ -182,15 +179,15 @@ const CreatePizzaEventCard = ({ selectedDate }: { selectedDate: Date }) => {
                                 />
                             </div>
                         </div>
-                        <div className="mt-8">
+                        <div className="mt-8 flex justify-center">
                             <Button
                                 onClick={() => closeModal()}
                                 text="Cancel"
                                 buttonStyle="secondary"
                                 className="w-[270px] hover:border-neutral hover:text-neutral"
                             />
                         </div>
-                        <div className="mt-8">
+                        <div className="row-start-5 mt-8 flex justify-center lg:row-start-auto">
                             <Button text="Create Event" buttonStyle="primary" className="w-[270px]" type="submit" />
                         </div>
                     </div>

application/next-frontend/src/Admin/scenarios/Events/components/DeletePizzaEventCard.tsx

@@ -23,7 +23,7 @@ const DeletePizzaEventCard = ({ event }: Props) => {
     const { closeModal } = useModal()
 
     return (
-        <div className="h-[448px] w-[703px] rounded-[32px] border bg-green-light px-14 py-10">
+        <div className="flex w-[min(90wv,_50rem)] flex-col gap-8 rounded-[32px] border bg-green-light p-10">
             <div className="flex justify-between">
                 <span className="font-queensRegular text-5xl text-green-primary">Delete Pizza Event?</span>
                 <span
@@ -33,20 +33,21 @@ const DeletePizzaEventCard = ({ event }: Props) => {
                     &times;
                 </span>
             </div>
+            <div className="flex gap-8">
+                <div className="flex flex-col font-workSans ">
+                    <span className="text-2xl font-semibold italic text-green-primary">Date:</span>
+                    <span className="text-3xl font-semibold">
+                        {ordinal(date)} of {months[month]}
+                    </span>
+                </div>
 
-            <div className="mt-14 flex font-workSans text-2xl font-semibold italic text-green-primary">
-                <span className="w-[70%]">Date:</span>
-                <span className="w-[30%]">Time</span>
+                <div className="flex flex-col font-workSans">
+                    <span className="text-2xl font-semibold italic text-green-primary">Time</span>
+                    <span className="text-3xl font-semibold">{time}</span>
+                </div>
             </div>
 
-            <div className="mt-5 flex font-workSans text-3xl font-semibold">
-                <span className="w-[70%]">
-                    {ordinal(date)} of {months[month]}
-                </span>
-                <span className="w-[30%]">{time}</span>
-            </div>
-
-            <div className="my-4 mt-14 flex justify-evenly">
+            <div className="my-4 flex justify-evenly">
                 <Button onClick={() => closeModal()} text="Cancel" buttonStyle="secondary" className="w-[270px]" />
                 <Button
                     onClick={() => {

application/next-frontend/src/Admin/scenarios/Events/components/EventCalendarModal.tsx

@@ -4,14 +4,12 @@ import { EventCalendar } from '@/Admin/scenarios/Events/components/EventCalendar
 
 const EventModal = () => {
     return (
-        <div className="pointer-events-auto flex">
-            <div className="flex">
-                <HoverProvider isInsideModal>
-                    <Events clickable={false} />
-                </HoverProvider>
+        <HoverProvider isInsideModal>
+            <div className="pointer-events-auto flex flex-col lg:flex-row">
+                <Events clickable={false} />
                 <EventCalendar />
             </div>
-        </div>
+        </HoverProvider>
     )
 }
 

application/next-frontend/src/Admin/scenarios/Events/index.tsx

@@ -39,7 +39,7 @@ const Events = ({ clickable = true }: { clickable?: boolean }) => {
     }, [modalStack])
 
     return (
-        <div className={`${eventModalShowing ? 'opacity-0' : ''}`}>
+        <div className={` ${eventModalShowing ? 'opacity-0' : ''}`}>
             <CardComponentWrapper
                 title="Events"
                 addIcon

application/next-frontend/src/Admin/scenarios/Restaurants/components/NewRestaurantModal.tsx

@@ -30,7 +30,7 @@ const NewRestaurantModal = () => {
     }
 
     return (
-        <div className="relative w-[28rem] bg-yellow p-4">
+        <div className="relative min-w-[min(28rem,_90vw)] bg-yellow p-4">
             <div className="flex justify-between text-green-primary">
                 <h5 className="mb-2 ml-6 pt-3 font-queensRegular text-3xl font-semibold">Places</h5>
                 <span className="cursor-pointer text-4xl" onClick={() => closeModal()}>

application/next-frontend/src/Admin/scenarios/SlackChannel/components/SlackChannelModal.tsx

@@ -0,0 +1,47 @@
+import { CardComponentWrapper } from '@/Admin/components/CardComponentWrapper'
+import { HoverProvider } from '@/Shared/context/HoverContext'
+import { useCurrentChannel } from '@/api/useCurrentChannel'
+import { SlackUser } from '@/api/useSlackUsers'
+
+const numUsersInChannel = (users: SlackUser[]) => {
+    if (users.length === 0) return 'No users in channel'
+    if (users.length === 1) return '1 user in channel'
+    return `${users.length} users in channel`
+}
+
+const SlackChannelModal = () => {
+    const { data, isLoading, error } = useCurrentChannel()
+
+    const channelName = data?.channel_name
+    const channelMembers = data?.users.filter((user) => user.active) ?? []
+
+    return (
+        <HoverProvider isInsideModal>
+            <CardComponentWrapper title="Slack Channel" className="max-w-xl">
+                {isLoading ? (
+                    'Loading...'
+                ) : error ? (
+                    `Failed to load channel info due to the following error: ${error?.info.msg}`
+                ) : !data || !data.channel_id ? (
+                    <div className="mt-5 break-keep font-workSans">
+                        No slack channel has been set for the PizzaBot. Please use the command{' '}
+                        <b>/set&#8209;pizza&#8209;channel</b> in your preferred slack-channel to set.
+                    </div>
+                ) : (
+                    <div className="mt-5 flex flex-col gap-4 pl-3 font-workSans">
+                        <div className="text-2xl font-semibold">
+                            <span>#{channelName}</span>
+                        </div>
+                        <div className="text-xl">{numUsersInChannel(channelMembers)}</div>
+                        <div className="my-8 break-keep text-xl">
+                            If you want to change the channel I work in, use the command{' '}
+                            <b>/set&#8209;pizza&#8209;channel</b> in your preferred slack-channel to set.
+                        </div>
+                    </div>
+                )}
+            </CardComponentWrapper>
+        </HoverProvider>
+    )
+}
+
+export { SlackChannelModal }

application/next-frontend/src/Admin/scenarios/SlackChannel.tsx → application/next-frontend/src/Admin/scenarios/SlackChannel/index.tsx

@@ -1,7 +1,9 @@
 import { useCurrentChannel } from '@/api/useCurrentChannel'
 import { SlackUser } from '@/api/useSlackUsers'
-import { CardComponentWrapper } from '../components/CardComponentWrapper'
+import { CardComponentWrapper } from '../../components/CardComponentWrapper'
 import { useHover } from '@/Shared/context/HoverContext'
+import { SlackChannelModal } from './components/SlackChannelModal'
+import { useModal } from '@/Shared/context/ModalContext'
 
 const numUsersInChannel = (users: SlackUser[]) => {
     if (users.length === 0) return 'No users in channel'
@@ -16,8 +18,10 @@ const SlackChannel = () => {
     const channelMembers = data?.users.filter((user) => user.active) ?? []
     const { isHovered } = useHover()
 
+    const { openModal } = useModal()
+
     return (
-        <CardComponentWrapper title="Slack Channel">
+        <CardComponentWrapper title="Slack Channel" onClickCard={() => openModal(<SlackChannelModal />)}>
             {isLoading ? (
                 'Loading...'
             ) : error ? (

application/next-frontend/src/Shared/modal/ModalWrapper.tsx

@@ -15,7 +15,7 @@ const ModalWrapper = ({ children }: ModalWrapperProps) => {
     return (
         <div className="fixed left-0 top-0 z-50 flex h-full w-full items-center justify-center">
             <div className="absolute inset-0 bg-gray-500 opacity-75" onClick={handleOverlayClick} />
-            <div className="z-10">{children}</div>
+            <div className="z-10 mx-5 my-10 max-h-[90vh] overflow-auto">{children}</div>
         </div>
     )
 }