public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Darken bookings page

dark
Bailey Pumfleet 2021-11-26 16:25:58 +00:00
parent 6dae55b9f6
commit e0b3615ab8
5 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/EmptyScreen.tsx
View File

@ -13,13 +13,13 @@ export default function EmptyScreen({
}) {
return (
<>
<div className="min-h-80 border border-dashed rounded-sm flex justify-center items-center flex-col my-6">
<div className="flex flex-col items-center justify-center my-6 border border-dashed rounded-sm min-h-80 dark:border-gray-500">
<div className="bg-white w-[72px] h-[72px] flex justify-center items-center rounded-full">
<Icon className="inline-block w-10 h-10 bg-white" />
</div>
<div className="max-w-[420px] text-center">
<h2 className="text-lg font-medium mt-6 mb-1">{headline}</h2>
<p className="text-sm leading-6 text-gray-600">{description}</p>
<h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-200">{headline}</h2>
<p className="text-sm leading-6 text-gray-600 dark:text-gray-400">{description}</p>
</div>
</div>
</>

10
components/NavTabs.tsx
View File

@ -17,7 +17,7 @@ const NavTabs: FC<Props> = ({ tabs, linkProps }) => {
const router = useRouter();
return (
<>
<nav className="-mb-px flex space-x-2 sm:space-x-5" aria-label="Tabs">
<nav className="flex -mb-px space-x-2 sm:space-x-5" aria-label="Tabs">
{tabs.map((tab) => {
const isCurrent = router.asPath === tab.href;
return (
@ -25,15 +25,17 @@ const NavTabs: FC<Props> = ({ tabs, linkProps }) => {
<a
className={classNames(
isCurrent
? "border-neutral-900 text-neutral-900"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
? "border-neutral-900 text-neutral-900 dark:text-gray-200 dark:border-gray-200"
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-100",
"group inline-flex items-center py-4 px-1 border-b-2 font-medium text-sm"
)}
aria-current={isCurrent ? "page" : undefined}>
{tab.icon && (
<tab.icon
className={classNames(
isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
isCurrent
? "text-neutral-900"
: "text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-100",
"-ml-0.5 mr-2 h-5 w-5 hidden sm:inline-block"
)}
aria-hidden="true"

8
components/booking/BookingListItem.tsx
View File

@ -75,7 +75,7 @@ function BookingListItem(booking: BookingItem) {
return (
<tr>
<td className="hidden px-6 py-4 align-top sm:table-cell whitespace-nowrap">
<div className="text-sm leading-6 text-gray-900">{startTime}</div>
<div className="text-sm leading-6 text-gray-900 dark:text-gray-200">{startTime}</div>
<div className="text-sm text-gray-500">
{dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
</div>
@ -87,14 +87,14 @@ function BookingListItem(booking: BookingItem) {
{t("unconfirmed")}
</span>
)}
<div className="text-sm font-medium text-gray-900">
<div className="text-sm font-medium text-gray-900 dark:text-gray-200">
{startTime}:{" "}
<small className="text-sm text-gray-500">
{dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
</small>
</div>
</div>
<div className="text-sm font-medium leading-6 truncate text-neutral-900 max-w-52 md:max-w-96">
<div className="text-sm font-medium leading-6 truncate text-neutral-900 max-w-52 md:max-w-96 dark:text-white">
{booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
{booking.title}
{!booking.confirmed && !booking.rejected && (
@ -109,7 +109,7 @@ function BookingListItem(booking: BookingItem) {
</div>
)}
{booking.attendees.length !== 0 && (
<div className="text-sm text-gray-900 hover:text-blue-500">
<div className="text-sm text-gray-900 hover:text-blue-500 dark:text-gray-200">
<a href={"mailto:" + booking.attendees[0].email}>{booking.attendees[0].email}</a>
</div>
)}

4
components/ui/Button.tsx
View File

@ -63,12 +63,12 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
// different styles depending on color
color === "primary" &&
(disabled
? "border border-transparent bg-gray-400 text-white"
? "border border-transparent bg-gray-400 text-white dark:bg-gray-600"
: "border border-transparent dark:text-black text-white bg-brand dark:bg-white hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
color === "secondary" &&
(disabled
? "border border-gray-200 text-gray-400 bg-white"
: "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-900"),
: "border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:bg-transparent dark:text-white dark:border-gray-800 dark:hover:bg-gray-600 dark:hover:text-white"),
color === "minimal" &&
(disabled
? "text-gray-400 bg-transparent"

10
pages/bookings/[status].tsx
View File

@ -54,9 +54,11 @@ export default function Bookings() {
{(query.status === "loading" || query.status === "idle") && <Loader />}
{query.status === "success" && !isEmpty && (
<>
<div className="mt-6 overflow-hidden border border-b border-gray-200 rounded-sm">
<table className="min-w-full divide-y divide-gray-200">
<tbody className="bg-white divide-y divide-gray-200" data-testid="bookings">
<div className="mt-6 overflow-hidden border border-b border-gray-200 rounded-sm dark:border-gray-500">
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-400">
<tbody
className="bg-white divide-y divide-gray-200 dark:bg-gray-700"
data-testid="bookings">
{query.data.pages.map((page, index) => (
<Fragment key={index}>
{page.bookings.map((booking) => (
@ -67,7 +69,7 @@ export default function Bookings() {
</tbody>
</table>
</div>
<div className="text-center p-4" ref={buttonInView.ref}>
<div className="p-4 text-center" ref={buttonInView.ref}>
<Button
loading={query.isFetchingNextPage}
disabled={!query.hasNextPage}