maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changes to bookings and sidebar dropdown (#991)

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">
<Icon className="inline-block w-10 h-10 bg-white" />
</div>
<div className="max-w-[500px] text-center">
<h2 className="font-cal text-xl leading-7 font-bold mt-6 mb-3">{headline}</h2>
<p className="leading-6">{description}</p>
<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>
</div>
</div>
</>

2
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-8" aria-label="Tabs">
<nav className="-mb-px flex space-x-2 sm:space-x-5" aria-label="Tabs">
{tabs.map((tab) => {
const isCurrent = router.asPath === tab.href;
return (

21
components/Shell.tsx
View File

@ -214,7 +214,7 @@ export default function Shell(props: {
))}
</nav>
</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 />
</div>
</div>
@ -224,7 +224,7 @@ export default function Shell(props: {
<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]">
{/* 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">
<a>
<Logo />
@ -311,7 +311,7 @@ function UserDropdown({ small }: { small?: boolean }) {
<>
<span className="flex-grow text-sm">
<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>
<SelectorIcon
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"
rel="noopener noreferrer"
href={`${process.env.NEXT_PUBLIC_APP_URL}/${user?.username || ""}`}
className="flex px-4 py-2 text-sm text-neutral-500">
{t("view_public_page")} <ExternalLinkIcon className="w-3 h-3 mt-1 ml-1 text-neutral-400" />
className="flex px-4 py-2 text-sm text-gray-700 items-center">
<ExternalLinkIcon className="w-5 h-5 mr-3 text-gray-500" /> {t("view_public_page")}
</a>
</DropdownMenuItem>
<DropdownMenuSeparator className="h-px bg-gray-200" />
@ -337,11 +337,11 @@ function UserDropdown({ small }: { small?: boolean }) {
href="https://cal.com/slack"
target="_blank"
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
viewBox="0 0 2447.6 2452.5"
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"
)}
xmlns="http://www.w3.org/2000/svg">
@ -368,12 +368,9 @@ function UserDropdown({ small }: { small?: boolean }) {
<DropdownMenuItem>
<a
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
className={classNames(
"text-neutral-400 group-hover:text-neutral-500",
"mr-2 flex-shrink-0 h-5 w-5"
)}
className={classNames("text-gray-500 group-hover:text-gray-700", "mr-2 flex-shrink-0 h-5 w-5")}
aria-hidden="true"
/>
{t("sign_out")}

20
components/booking/BookingListItem.tsx
View File

@ -73,16 +73,11 @@ function BookingListItem(booking: BookingItem) {
return (
<tr>
<td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap">
<div className="text-sm text-gray-900">{startTime}</div>
<td className="hidden sm:table-cell px-6 py-4 whitespace-nowrap align-top">
<div className="text-sm text-gray-900 leading-6">{startTime}</div>
<div className="text-sm text-gray-500">
{dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
</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 className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
<div className="sm:hidden">
@ -98,17 +93,22 @@ function BookingListItem(booking: BookingItem) {
</small>
</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.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>
{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;
</div>
)}
{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>
</div>
)}

4
styles/globals.css
View File

@ -359,10 +359,6 @@ nav#nav--settings > a.active svg {
@apply text-neutral-500;
}
table tbody tr:nth-child(odd) {
@apply bg-gray-50;
}
body {
background-color: #f3f4f6;
}