mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

changes to bookings and sidebar dropdown (#991)

Browse source
This commit is contained in:
Ciarán Hanrahan 2021-10-19 13:38:05 +01:00 committed by GitHub
parent 687af03cc3
commit 1447251c83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/EmptyScreen.tsx
View file

@ -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>
</> </>

2
components/NavTabs.tsx
View file

@ -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 (

21
components/Shell.tsx
View file

@ -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")}

20
components/booking/BookingListItem.tsx
View file

@ -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}>
&quot;{booking.description}&quot; &quot;{booking.description}&quot;
</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>
)} )}

4
styles/globals.css
View file

@ -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;
} }