changes to bookings and sidebar dropdown (#991)
This commit is contained in:
parent
687af03cc3
commit
1447251c83
5 changed files with 23 additions and 30 deletions
|
@ -17,9 +17,9 @@ export default function EmptyScreen({
|
||||||
<div className="bg-white w-[72px] h-[72px] flex justify-center items-center rounded-full">
|
<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" />
|
<Icon className="inline-block w-10 h-10 bg-white" />
|
||||||
</div>
|
</div>
|
||||||
<div className="max-w-[500px] text-center">
|
<div className="max-w-[420px] text-center">
|
||||||
<h2 className="font-cal text-xl leading-7 font-bold mt-6 mb-3">{headline}</h2>
|
<h2 className="text-lg font-medium mt-6 mb-1">{headline}</h2>
|
||||||
<p className="leading-6">{description}</p>
|
<p className="text-sm leading-6 text-gray-600">{description}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -17,7 +17,7 @@ const NavTabs: FC<Props> = ({ tabs, linkProps }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<nav className="-mb-px flex space-x-2 sm:space-x-8" aria-label="Tabs">
|
<nav className="-mb-px flex space-x-2 sm:space-x-5" aria-label="Tabs">
|
||||||
{tabs.map((tab) => {
|
{tabs.map((tab) => {
|
||||||
const isCurrent = router.asPath === tab.href;
|
const isCurrent = router.asPath === tab.href;
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -214,7 +214,7 @@ export default function Shell(props: {
|
||||||
))}
|
))}
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-4 pt-2 pr-2">
|
<div className="p-2 pt-2 pr-2 hover:bg-gray-100 rounded-sm m-2">
|
||||||
<UserDropdown />
|
<UserDropdown />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -224,7 +224,7 @@ export default function Shell(props: {
|
||||||
<div className="flex flex-col flex-1 w-0 overflow-hidden">
|
<div className="flex flex-col flex-1 w-0 overflow-hidden">
|
||||||
<main className="flex-1 relative z-0 overflow-y-auto focus:outline-none max-w-[1700px]">
|
<main className="flex-1 relative z-0 overflow-y-auto focus:outline-none max-w-[1700px]">
|
||||||
{/* show top navigation for md and smaller (tablet and phones) */}
|
{/* show top navigation for md and smaller (tablet and phones) */}
|
||||||
<nav className="flex items-center justify-between p-4 bg-white shadow md:hidden">
|
<nav className="flex items-center justify-between p-4 bg-white border-b border-gray-200 md:hidden">
|
||||||
<Link href="/event-types">
|
<Link href="/event-types">
|
||||||
<a>
|
<a>
|
||||||
<Logo />
|
<Logo />
|
||||||
|
@ -311,7 +311,7 @@ function UserDropdown({ small }: { small?: boolean }) {
|
||||||
<>
|
<>
|
||||||
<span className="flex-grow text-sm">
|
<span className="flex-grow text-sm">
|
||||||
<span className="block font-medium text-gray-900 truncate">{user.name}</span>
|
<span className="block font-medium text-gray-900 truncate">{user.name}</span>
|
||||||
<span className="block font-normal truncate text-neutral-500">/{user.username}</span>
|
<span className="block font-normal truncate text-neutral-500">cal.com/{user.username}</span>
|
||||||
</span>
|
</span>
|
||||||
<SelectorIcon
|
<SelectorIcon
|
||||||
className="flex-shrink-0 w-5 h-5 text-gray-400 group-hover:text-gray-500"
|
className="flex-shrink-0 w-5 h-5 text-gray-400 group-hover:text-gray-500"
|
||||||
|
@ -327,8 +327,8 @@ function UserDropdown({ small }: { small?: boolean }) {
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
href={`${process.env.NEXT_PUBLIC_APP_URL}/${user?.username || ""}`}
|
href={`${process.env.NEXT_PUBLIC_APP_URL}/${user?.username || ""}`}
|
||||||
className="flex px-4 py-2 text-sm text-neutral-500">
|
className="flex px-4 py-2 text-sm text-gray-700 items-center">
|
||||||
{t("view_public_page")} <ExternalLinkIcon className="w-3 h-3 mt-1 ml-1 text-neutral-400" />
|
<ExternalLinkIcon className="w-5 h-5 mr-3 text-gray-500" /> {t("view_public_page")}
|
||||||
</a>
|
</a>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
<DropdownMenuSeparator className="h-px bg-gray-200" />
|
||||||
|
@ -337,11 +337,11 @@ function UserDropdown({ small }: { small?: boolean }) {
|
||||||
href="https://cal.com/slack"
|
href="https://cal.com/slack"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="flex px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900">
|
className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
|
||||||
<svg
|
<svg
|
||||||
viewBox="0 0 2447.6 2452.5"
|
viewBox="0 0 2447.6 2452.5"
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"text-neutral-400 group-hover:text-neutral-500",
|
"text-gray-500 group-hover:text-gray-700",
|
||||||
"mt-0.5 mr-3 flex-shrink-0 h-4 w-4"
|
"mt-0.5 mr-3 flex-shrink-0 h-4 w-4"
|
||||||
)}
|
)}
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
|
@ -368,12 +368,9 @@ function UserDropdown({ small }: { small?: boolean }) {
|
||||||
<DropdownMenuItem>
|
<DropdownMenuItem>
|
||||||
<a
|
<a
|
||||||
onClick={() => signOut({ callbackUrl: "/auth/logout" })}
|
onClick={() => signOut({ callbackUrl: "/auth/logout" })}
|
||||||
className="flex px-4 py-2 text-sm font-medium cursor-pointer hover:bg-gray-100 hover:text-gray-900">
|
className="flex px-4 py-2 text-sm cursor-pointer hover:bg-gray-100 hover:text-gray-900">
|
||||||
<LogoutIcon
|
<LogoutIcon
|
||||||
className={classNames(
|
className={classNames("text-gray-500 group-hover:text-gray-700", "mr-2 flex-shrink-0 h-5 w-5")}
|
||||||
"text-neutral-400 group-hover:text-neutral-500",
|
|
||||||
"mr-2 flex-shrink-0 h-5 w-5"
|
|
||||||
)}
|
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
{t("sign_out")}
|
{t("sign_out")}
|
||||||
|
|
|
@ -73,16 +73,11 @@ function BookingListItem(booking: BookingItem) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr>
|
<tr>
|
||||||
<td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
|
<td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap align-top">
|
||||||
<div className="text-sm text-gray-900">{startTime}</div>
|
<div className="text-sm text-gray-900 leading-6">{startTime}</div>
|
||||||
<div className="text-sm text-gray-500">
|
<div className="text-sm text-gray-500">
|
||||||
{dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
|
{dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
|
||||||
</div>
|
</div>
|
||||||
{!booking.confirmed && !booking.rejected && (
|
|
||||||
<span className="mb-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
|
|
||||||
{t("unconfirmed")}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</td>
|
</td>
|
||||||
<td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
|
<td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
|
||||||
<div className="sm:hidden">
|
<div className="sm:hidden">
|
||||||
|
@ -98,17 +93,22 @@ function BookingListItem(booking: BookingItem) {
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm text-neutral-900 font-medium truncate max-w-60 md:max-w-96">
|
<div className="text-sm text-neutral-900 font-medium leading-6 truncate max-w-60 md:max-w-96">
|
||||||
{booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
|
{booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
|
||||||
{booking.title}
|
{booking.title}
|
||||||
|
{!booking.confirmed && !booking.rejected && (
|
||||||
|
<span className="ml-2 inline-flex items-center px-1.5 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
|
||||||
|
{t("unconfirmed")}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{booking.description && (
|
{booking.description && (
|
||||||
<div className="text-sm text-neutral-600 truncate max-w-60 md:max-w-96" title={booking.description}>
|
<div className="text-sm text-gray-500 truncate max-w-60 md:max-w-96" title={booking.description}>
|
||||||
"{booking.description}"
|
"{booking.description}"
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{booking.attendees.length !== 0 && (
|
{booking.attendees.length !== 0 && (
|
||||||
<div className="text-sm text-blue-500">
|
<div className="text-sm text-gray-900 hover:text-blue-500">
|
||||||
<a href={"mailto:" + booking.attendees[0].email}>{booking.attendees[0].email}</a>
|
<a href={"mailto:" + booking.attendees[0].email}>{booking.attendees[0].email}</a>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -359,10 +359,6 @@ nav#nav--settings > a.active svg {
|
||||||
@apply text-neutral-500;
|
@apply text-neutral-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
table tbody tr:nth-child(odd) {
|
|
||||||
@apply bg-gray-50;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #f3f4f6;
|
background-color: #f3f4f6;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue