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

Merge branch 'main' of https://github.com/calendso/calendso

Browse source
This commit is contained in:
Bailey Pumfleet 2021-08-05 13:44:42 +01:00
commit 20954259be
13 changed files with 141 additions and 140 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
components/Settings.tsx
View file

@ -35,7 +35,7 @@ export default function SettingsShell(props) {
];
return (
<div className="max-w-6xl">
<div>
<div className="sm:mx-auto">
<nav className="-mb-px flex space-x-2 sm:space-x-8" aria-label="Tabs">
{tabs.map((tab) => (
@ -60,8 +60,9 @@ export default function SettingsShell(props) {
</Link>
))}
</nav>
<hr />
</div>
<main>{props.children}</main>
<main className="max-w-4xl">{props.children}</main>
</div>
);
}

11
components/Shell.tsx
View file

@ -20,6 +20,7 @@ import classNames from "@lib/classNames";
export default function Shell(props) {
const router = useRouter();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession();
const telemetry = useTelemetry();
@ -71,7 +72,7 @@ export default function Shell(props) {
<div className="h-screen flex overflow-hidden bg-gray-100">
{/* Static sidebar for desktop */}
<div className="hidden md:flex md:flex-shrink-0">
<div className="flex flex-col w-64">
<div className="flex flex-col w-56">
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex flex-col h-0 flex-1 border-r border-gray-200 bg-white">
<div className="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
@ -105,7 +106,7 @@ export default function Shell(props) {
))}
</nav>
</div>
<div className="flex-shrink-0 flex border-t border-gray-200 p-4">
<div className="flex-shrink-0 flex p-4">
<UserDropdown session={session} />
</div>
</div>
@ -135,10 +136,10 @@ export default function Shell(props) {
</div>
</div>
</nav>
<div className="py-6">
<div className="py-8">
<div className="block sm:flex justify-between px-4 sm:px-6 md:px-8">
<div className="mb-6">
<h1 className="text-2xl font-semibold text-gray-900">{props.heading}</h1>
<div className="mb-8">
<h1 className="text-xl font-bold text-gray-900">{props.heading}</h1>
<p className="text-sm text-neutral-500 mr-4">{props.subtitle}</p>
</div>
<div className="mb-4 flex-shrink-0">{props.CTA}</div>

2
components/ui/Scheduler.tsx
View file

@ -91,7 +91,7 @@ export const Scheduler = ({
type="button"
onClick={() => removeScheduleAt(idx)}
className="btn-sm bg-transparent px-2 py-1 ml-1">
<TrashIcon className="h-6 w-6 inline text-gray-400 -mt-1" />
<TrashIcon className="h-5 w-5 inline text-gray-400 -mt-1" />
</button>
</li>
);

2
pages/auth/logout.tsx
View file

@ -29,7 +29,7 @@ export default function Logout() {
</div>
<div className="mt-5 sm:mt-6">
<Link href="/auth/login">
<a className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm">
<a className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-black text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:text-sm">
Go back to the login page
</a>
</Link>

9
pages/availability/index.tsx
View file

@ -10,6 +10,7 @@ import { ClockIcon } from "@heroicons/react/outline";
import Loader from '@components/Loader';
export default function Availability(props) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession();
const router = useRouter();
const [showAddModal, setShowAddModal] = useState(false);
@ -29,7 +30,7 @@ export default function Availability(props) {
const bufferMinsRef = useRef<HTMLInputElement>();
if (loading) {
return <Loader/>;
return <Loader />;
}
function toggleAddModal() {
@ -124,7 +125,7 @@ export default function Availability(props) {
">
<div className="flex">
<div className="w-1/2 mr-2 bg-white shadow rounded-sm">
<div className="w-1/2 mr-2 bg-white border border-gray-200 rounded-sm">
<div className="px-4 py-5 sm:p-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
Change the start and end times of your day
@ -143,7 +144,7 @@ export default function Availability(props) {
</div>
</div>
<div className="w-1/2 ml-2 bg-white shadow rounded-sm">
<div className="w-1/2 ml-2 border border-gray-200 rounded-sm">
<div className="px-4 py-5 sm:p-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
Something doesn&apos;t look right?
@ -153,7 +154,7 @@ export default function Availability(props) {
</div>
<div className="mt-5">
<Link href="/availability/troubleshoot">
<a className="btn btn-primary">Launch troubleshooter</a>
<a className="btn btn-white">Launch troubleshooter</a>
</Link>
</div>
</div>

3
pages/availability/troubleshoot.tsx
View file

@ -10,12 +10,13 @@ import Loader from '@components/Loader';
dayjs.extend(utc);
export default function Troubleshoot({ user }) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession();
const [availability, setAvailability] = useState([]);
const [selectedDate, setSelectedDate] = useState(dayjs());
if (loading) {
return <Loader/>;
return <Loader />;
}
function convertMinsToHrsMins(mins) {

19
pages/bookings/index.tsx
View file

@ -43,25 +43,8 @@ export default function Bookings({ bookings }) {
<div className="-mx-4 sm:mx-auto flex flex-col">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-sm">
<div className="border border-gray-200 overflow-hidden border-b rounded-sm">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Event
</th>
<th
scope="col"
className="hidden sm:table-cell px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Date
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">Actions</span>
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{bookings
.filter((booking) => !booking.confirmed && !booking.rejected)

178
pages/event-types/[type].tsx
View file

@ -388,35 +388,28 @@ export default function EventTypePage({
<title>{eventType.title} | Event Type | Calendso</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Shell heading={"Event Type: " + eventType.title} subtitle={eventType.description}>
<Shell
heading={
<input
ref={titleRef}
type="text"
name="title"
id="title"
required
className="pl-0 text-xl font-bold text-gray-900 cursor-pointer border-none focus:ring-0 bg-transparent focus:outline-none"
placeholder="Quick Chat"
defaultValue={eventType.title}
/>
}
subtitle={eventType.description}>
<div className="block sm:flex">
<div className="w-full sm:w-10/12 mr-2">
<div className="bg-white rounded-sm border border-neutral-200 -mx-4 sm:mx-0 p-4 sm:p-8">
<form onSubmit={updateEventTypeHandler} className="space-y-4">
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="title" className="flex font-medium text-neutral-700 mt-1">
<PencilIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
Title
</label>
</div>
<div className="w-full">
<input
ref={titleRef}
type="text"
name="title"
id="title"
required
className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-neutral-300 rounded-sm"
placeholder="Quick Chat"
defaultValue={eventType.title}
/>
</div>
</div>
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="slug" className="flex font-medium text-neutral-700 mt-1">
<LinkIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
<div className="block sm:flex items-center">
<div className="min-w-44 mb-4 sm:mb-0">
<label htmlFor="slug" className="text-sm flex font-medium text-neutral-700 mt-0">
<LinkIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
URL
</label>
</div>
@ -437,10 +430,41 @@ export default function EventTypePage({
</div>
</div>
</div>
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="location" className="flex font-medium text-neutral-700 mt-1">
<LocationMarkerIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
<div className="block sm:flex items-center">
<div className="min-w-44 mb-4 sm:mb-0">
<label htmlFor="length" className="text-sm flex font-medium text-neutral-700 mt-0">
<ClockIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
Duration
</label>
</div>
<div className="w-full">
<div className="mt-1 relative rounded-sm shadow-sm">
<input
ref={lengthRef}
type="number"
name="length"
id="length"
required
className="focus:ring-primary-500 focus:border-primary-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-sm"
placeholder="15"
defaultValue={eventType.length}
/>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<span className="text-gray-500 sm:text-sm" id="duration">
mins
</span>
</div>
</div>
</div>
</div>
<hr />
<div className="block sm:flex items-center">
<div className="min-w-44 mb-4 sm:mb-0">
<label htmlFor="location" className="text-sm flex font-medium text-neutral-700 mt-0">
<LocationMarkerIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
Location
</label>
</div>
@ -468,19 +492,19 @@ export default function EventTypePage({
className="mb-2 p-2 border border-neutral-300 rounded-sm shadow-sm">
<div className="flex justify-between">
{location.type === LocationType.InPerson && (
<div className="flex-grow flex">
<div className="flex-grow flex items-center">
<LocationMarkerIcon className="h-6 w-6" />
<span className="ml-2 text-sm">{location.address}</span>
</div>
)}
{location.type === LocationType.Phone && (
<div className="flex-grow flex">
<div className="flex-grow flex items-center">
<PhoneIcon className="h-6 w-6" />
<span className="ml-2 text-sm">Phone call</span>
</div>
)}
{location.type === LocationType.GoogleMeet && (
<div className="flex-grow flex">
<div className="flex-grow flex items-center">
<svg
className="h-6 w-6"
viewBox="0 0 64 54"
@ -511,7 +535,7 @@ export default function EventTypePage({
</div>
)}
{location.type === LocationType.Zoom && (
<div className="flex-grow flex">
<div className="flex-grow flex items-center">
<svg
className="h-6 w-6"
viewBox="0 0 64 64"
@ -555,10 +579,12 @@ export default function EventTypePage({
<li>
<button
type="button"
className="sm:flex sm:items-start text-sm text-primary-600"
className="bg-neutral-100 rounded-sm py-2 px-3 flex"
onClick={() => setShowLocationModal(true)}>
<PlusIcon className="h-5 w-5" />
<span className="font-medium">Add another location option</span>
<PlusIcon className="h-4 w-4 mt-0.5 text-neutral-900" />
<span className="ml-1 text-neutral-700 text-sm font-medium">
Add another location
</span>
</button>
</li>
)}
@ -566,37 +592,13 @@ export default function EventTypePage({
)}
</div>
</div>
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="length" className="flex font-medium text-neutral-700 mt-1">
<ClockIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
Duration
</label>
</div>
<div className="w-full">
<div className="mt-1 relative rounded-sm shadow-sm">
<input
ref={lengthRef}
type="number"
name="length"
id="length"
required
className="focus:ring-primary-500 focus:border-primary-500 block w-full pl-2 pr-12 sm:text-sm border-gray-300 rounded-sm"
placeholder="15"
defaultValue={eventType.length}
/>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<span className="text-gray-500 sm:text-sm" id="duration">
mins
</span>
</div>
</div>
</div>
</div>
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="description" className="flex font-medium text-neutral-700 mt-1">
<DocumentIcon className="w-4 h-4 mr-2 mt-1 text-neutral-500" />
<hr className="border-neutral-200" />
<div className="block sm:flex items-center">
<div className="min-w-44 mb-4 sm:mb-0">
<label htmlFor="description" className="text-sm flex font-medium text-neutral-700 mt-0">
<DocumentIcon className="w-4 h-4 mr-2 mt-0.5 text-neutral-500" />
Description
</label>
</div>
@ -620,9 +622,11 @@ export default function EventTypePage({
<span className="text-neutral-700 text-sm font-medium">Show advanced settings</span>
</Disclosure.Button>
<Disclosure.Panel className="space-y-4">
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="eventName" className="flex font-medium text-neutral-700 mt-2">
<div className="block sm:flex items-center">
<div className="min-w-44 mb-4 sm:mb-0">
<label
htmlFor="eventName"
className="text-sm flex font-medium text-neutral-700 mt-2">
Event name
</label>
</div>
@ -640,11 +644,11 @@ export default function EventTypePage({
</div>
</div>
</div>
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<div className="block sm:flex items-center">
<div className="min-w-44 mb-4 sm:mb-0">
<label
htmlFor="additionalFields"
className="flex font-medium text-neutral-700 mt-2">
className="text-sm flex font-medium text-neutral-700 mt-2">
Additional inputs
</label>
</div>
@ -694,9 +698,9 @@ export default function EventTypePage({
</ul>
</div>
</div>
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="hidden" className="flex font-medium text-neutral-700">
<div className="block sm:flex items-center">
<div className="min-w-44 mb-4 sm:mb-0">
<label htmlFor="hidden" className="text-sm flex font-medium text-neutral-700">
Hide event type
</label>
</div>
@ -721,11 +725,11 @@ export default function EventTypePage({
</div>
</div>
</div>
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<div className="block sm:flex items-center">
<div className="min-w-44 mb-4 sm:mb-0">
<label
htmlFor="requiresConfirmation"
className="flex font-medium text-neutral-700">
className="text-sm flex font-medium text-neutral-700">
Opt-in booking
</label>
</div>
@ -750,11 +754,14 @@ export default function EventTypePage({
</div>
</div>
</div>
<hr className="border-neutral-200" />
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<div className="min-w-44 mb-4 sm:mb-0">
<label
htmlFor="inviteesCanSchedule"
className="flex font-medium text-neutral-700 mt-2">
className="text-sm flex font-medium text-neutral-700 mt-2">
Invitees can schedule
</label>
</div>
@ -849,9 +856,14 @@ export default function EventTypePage({
</RadioGroup>
</div>
</div>
<hr className="border-neutral-200" />
<div className="block sm:flex">
<div className="min-w-32 mb-4 sm:mb-0">
<label htmlFor="availability" className="flex font-medium text-neutral-700 mt-2">
<div className="min-w-44 mb-4 sm:mb-0">
<label
htmlFor="availability"
className="text-sm flex font-medium text-neutral-700 mt-2">
Availability
</label>
</div>

26
pages/event-types/index.tsx
View file

@ -73,8 +73,8 @@ export default function Availability({ user, types }) {
New event type
</DialogTrigger>
<DialogContent>
<div className="mb-4">
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title">
<div className="mb-8">
<h3 className="text-lg leading-6 font-bold text-gray-900" id="modal-title">
Add a new event type
</h3>
<div>
@ -153,7 +153,7 @@ export default function Availability({ user, types }) {
</div>
</div>
</div>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<div className="mt-8 sm:flex sm:flex-row-reverse">
<button type="submit" className="btn btn-primary">
Continue
</button>
@ -176,7 +176,7 @@ export default function Availability({ user, types }) {
heading="Event Types"
subtitle="Create events to share for people to book on your calendar."
CTA={types.length !== 0 && <CreateNewEventDialog />}>
<div className="bg-white shadow overflow-hidden sm:rounded-sm -mx-4 sm:mx-0">
<div className="bg-white border border-gray-200 rounded-sm overflow-hidden -mx-4 sm:mx-0">
<ul className="divide-y divide-neutral-200">
{types.map((type) => (
<li key={type.id}>
@ -196,21 +196,21 @@ export default function Availability({ user, types }) {
<div className="mt-2 flex space-x-4">
<div className="flex items-center text-sm text-neutral-500">
<ClockIcon
className="flex-shrink-0 mr-1.5 h-5 w-5 text-neutral-400"
className="flex-shrink-0 mr-1.5 h-4 w-4 text-neutral-400"
aria-hidden="true"
/>
<p>{type.length}m</p>
</div>
<div className="flex items-center text-sm text-neutral-500">
<UserIcon
className="flex-shrink-0 mr-1.5 h-5 w-5 text-neutral-400"
className="flex-shrink-0 mr-1.5 h-4 w-4 text-neutral-400"
aria-hidden="true"
/>
<p>1-on-1</p>
</div>
<div className="flex items-center text-sm text-neutral-500">
<InformationCircleIcon
className="flex-shrink-0 mr-1.5 h-5 w-5 text-neutral-400"
className="flex-shrink-0 mr-1.5 h-4 w-4 text-neutral-400"
aria-hidden="true"
/>
<p>{type.description.substring(0, 100)}</p>
@ -220,7 +220,7 @@ export default function Availability({ user, types }) {
<div className="mt-4 flex-shrink-0 sm:mt-0 sm:ml-5">
<div className="flex overflow-hidden space-x-5">
<Link href={"/" + session.user.username + "/" + type.slug}>
<a className="text-neutral-400">
<a className="text-neutral-400 p-2 border border-transparent hover:border-gray-200">
<ExternalLinkIcon className="w-5 h-5" />
</a>
</Link>
@ -230,7 +230,7 @@ export default function Availability({ user, types }) {
window.location.hostname + "/" + session.user.username + "/" + type.slug
);
}}
className="text-neutral-400">
className="text-neutral-400 p-2 border border-transparent hover:border-gray-200">
<LinkIcon className="w-5 h-5" />
</button>
</div>
@ -241,7 +241,7 @@ export default function Availability({ user, types }) {
{({ open }) => (
<>
<div>
<Menu.Button className="text-neutral-400 mt-1">
<Menu.Button className="text-neutral-400 mt-1 text-neutral-400 p-2 border border-transparent hover:border-gray-200">
<span className="sr-only">Open options</span>
<DotsHorizontalIcon className="h-5 w-5" aria-hidden="true" />
</Menu.Button>
@ -271,7 +271,7 @@ export default function Availability({ user, types }) {
"group flex items-center px-4 py-2 text-sm font-medium"
)}>
<ExternalLinkIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
Preview
@ -295,7 +295,7 @@ export default function Availability({ user, types }) {
"group flex items-center px-4 py-2 text-sm w-full font-medium"
)}>
<LinkIcon
className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"
aria-hidden="true"
/>
Copy link to event
@ -311,7 +311,7 @@ export default function Availability({ user, types }) {
{/* "group flex items-center px-4 py-2 text-sm font-medium"*/}
{/* )}>*/}
{/* <DuplicateIcon*/}
{/* className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"*/}
{/* className="mr-3 h-4 w-4 text-neutral-400 group-hover:text-neutral-500"*/}
{/* aria-hidden="true"*/}
{/* />*/}
{/* Duplicate*/}

8
pages/integrations/[integration].tsx
View file

@ -7,13 +7,15 @@ import { useRouter } from "next/router";
import { useSession, getSession } from "next-auth/client";
import Loader from '@components/Loader';
export default function integration(props) {
export default function Integration(props) {
const router = useRouter();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession();
const [showAPIKey, setShowAPIKey] = useState(false);
if (loading) {
return <Loader/>;
return <Loader />;
}
function toggleShowAPIKey() {
@ -23,6 +25,7 @@ export default function integration(props) {
async function deleteIntegrationHandler(event) {
event.preventDefault();
/*eslint-disable */
const response = await fetch("/api/integrations", {
method: "DELETE",
body: JSON.stringify({ id: props.integration.id }),
@ -30,6 +33,7 @@ export default function integration(props) {
"Content-Type": "application/json",
},
});
/*eslint-enable */
router.push("/integrations");
}

11
pages/integrations/index.tsx
View file

@ -16,7 +16,8 @@ import { Switch } from "@headlessui/react";
import Loader from '@components/Loader';
import classNames from "@lib/classNames";
export default function Home({ integrations }) {
export default function IntegrationHome({ integrations }) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession();
const [showAddModal, setShowAddModal] = useState(false);
@ -85,9 +86,7 @@ export default function Home({ integrations }) {
useEffect(loadCalendars, [integrations]);
if (loading) {
return (
<Loader/>
);
return <Loader />;
}
return (
@ -109,7 +108,7 @@ export default function Home({ integrations }) {
Add new integration
</button>
}>
<div className="bg-white shadow overflow-hidden rounded-sm mb-8">
<div className="bg-white border border-gray-200 overflow-hidden rounded-sm mb-8">
{integrations.filter((ig) => ig.credential).length !== 0 ? (
<ul className="divide-y divide-gray-200">
{integrations
@ -276,7 +275,7 @@ export default function Home({ integrations }) {
</div>
</div>
)}
<div className="bg-white shadow rounded-sm">
<div className="bg-white border border-gray-200 rounded-sm">
<div className="px-4 py-5 sm:p-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">Select calendars</h3>
<div className="mt-2 max-w-xl text-sm text-gray-500">

6
pages/settings/embed.tsx
View file

@ -1,7 +1,4 @@
import Head from "next/head";
import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import prisma from "../../lib/prisma";
import Shell from "../../components/Shell";
import SettingsShell from "../../components/Settings";
@ -9,10 +6,11 @@ import { useSession, getSession } from "next-auth/client";
import Loader from '@components/Loader';
export default function Embed(props) {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const [session, loading] = useSession();
if (loading) {
return <Loader/>;
return <Loader />;
}
return (

1
styles/globals.css
View file

@ -81,6 +81,7 @@
}
}
/* add padding bottom to bottom nav on standalone mode */
@media all and (display-mode: standalone) {
.bottom-nav {
padding-bottom: 24px;