Skip to content

Commit 4c6bf96

Browse files
PeerRichPeerRich
authored
fixed booking buttons on mobile (#682)
* fixed booking buttons on mobile * fixed mobile layout for reject and confirm booking
1 parent 06f5559 commit 4c6bf96

File tree

1 file changed

+96
-26
lines changed

1 file changed

+96
-26
lines changed

‎pages/bookings/index.tsx‎

Lines changed: 96 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Fragment } from "react";
88
import { Menu, Transition } from "@headlessui/react";
99
import { DotsHorizontalIcon } from "@heroicons/react/solid";
1010
import classNames from "@lib/classNames";
11-
import { ClockIcon, XIcon } from "@heroicons/react/outline";
11+
import { ClockIcon, XIcon, CheckIcon, BanIcon } from "@heroicons/react/outline";
1212
import Loader from "@components/Loader";
1313
import { Button } from "@components/ui/Button";
1414
import { getSession } from "@lib/auth";
@@ -89,33 +89,103 @@ export default function Bookings({ bookings }) {
8989
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
9090
{!booking.confirmed && !booking.rejected && (
9191
<>
92-
<button
93-
onClick={() => confirmBookingHandler(booking, true)}
94-
className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
95-
Confirm
96-
</button>
97-
<button
98-
onClick={() => confirmBookingHandler(booking, false)}
99-
className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
100-
Reject
101-
</button>
92+
<div className="space-x-2 hidden lg:block">
93+
<Button
94+
onClick={() => confirmBookingHandler(booking, true)}
95+
StartIcon={CheckIcon}
96+
color="secondary">
97+
Confirm
98+
</Button>
99+
<Button
100+
onClick={() => confirmBookingHandler(booking, false)}
101+
StartIcon={BanIcon}
102+
color="secondary">
103+
Reject
104+
</Button>
105+
</div>
106+
<Menu as="div" className="inline-block lg:hidden text-left ">
107+
{({ open }) => (
108+
<>
109+
<div>
110+
<Menu.Button className="text-neutral-400 mt-1 p-2 border border-transparent hover:border-gray-200">
111+
<span className="sr-only">Open options</span>
112+
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
113+
</Menu.Button>
114+
</div>
115+
<Transition
116+
show={open}
117+
as={Fragment}
118+
enter="transition ease-out duration-100"
119+
enterFrom="transform opacity-0 scale-95"
120+
enterTo="transform opacity-100 scale-100"
121+
leave="transition ease-in duration-75"
122+
leaveFrom="transform opacity-100 scale-100"
123+
leaveTo="transform opacity-0 scale-95">
124+
<Menu.Items
125+
static
126+
className="origin-top-right absolute right-0 mt-2 w-56 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none divide-y divide-neutral-100">
127+
<div className="py-1">
128+
<Menu.Item>
129+
{({ active }) => (
130+
<span
131+
onClick={() => confirmBookingHandler(booking, true)}
132+
className={classNames(
133+
active
134+
? "bg-neutral-100 text-neutral-900"
135+
: "text-neutral-700",
136+
"group flex items-center px-4 py-2 text-sm font-medium"
137+
)}>
138+
<CheckIcon
139+
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
140+
aria-hidden="true"
141+
/>
142+
Confirm
143+
</span>
144+
)}
145+
</Menu.Item>
146+
<Menu.Item>
147+
{({ active }) => (
148+
<span
149+
onClick={() => confirmBookingHandler(booking, false)}
150+
className={classNames(
151+
active
152+
? "bg-neutral-100 text-neutral-900"
153+
: "text-neutral-700",
154+
"group flex items-center px-4 py-2 text-sm w-full font-medium"
155+
)}>
156+
<BanIcon
157+
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
158+
aria-hidden="true"
159+
/>
160+
Reject
161+
</span>
162+
)}
163+
</Menu.Item>
164+
</div>
165+
</Menu.Items>
166+
</Transition>
167+
</>
168+
)}
169+
</Menu>
102170
</>
103171
)}
104172
{booking.confirmed && !booking.rejected && (
105-
<div className="space-x-2">
106-
<Button
107-
data-testid="cancel"
108-
href={"/cancel/" + booking.uid}
109-
StartIcon={XIcon}
110-
color="secondary">
111-
Cancel
112-
</Button>
113-
<Button
114-
href={"reschedule/" + booking.uid}
115-
StartIcon={ClockIcon}
116-
color="secondary">
117-
Reschedule
118-
</Button>
173+
<>
174+
<div className="space-x-2 hidden lg:block">
175+
<Button
176+
data-testid="cancel"
177+
href={"/cancel/" + booking.uid}
178+
StartIcon={XIcon}
179+
color="secondary">
180+
Cancel
181+
</Button>
182+
<Button
183+
href={"reschedule/" + booking.uid}
184+
StartIcon={ClockIcon}
185+
color="secondary">
186+
Reschedule
187+
</Button>
188+
</div>
119189
<Menu as="div" className="inline-block lg:hidden text-left ">
120190
{({ open }) => (
121191
<>
@@ -183,7 +253,7 @@ export default function Bookings({ bookings }) {
183253
</>
184254
)}
185255
</Menu>
186-
</div>
256+
</>
187257
)}
188258
{!booking.confirmed && booking.rejected && (
189259
<div className="text-sm text-gray-500">Rejected</div>

0 commit comments

Comments
 (0)