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

added Cal Sans (#709)

Browse source 
* added Cal Sans

* Delete EmptyScreen.tsx
This commit is contained in:
Peer Richelsen 2021-09-22 22:23:19 +01:00 committed by GitHub
parent d194878bb2
commit 51752bd2bd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 194 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/Dialog.tsx
View file

@ -32,7 +32,7 @@ type DialogHeaderProps = {
export function DialogHeader({ title, subtitle }: DialogHeaderProps) {
return (
<div className="mb-8">
<h3 className="text-gray-900 text-lg font-bold leading-6" id="modal-title">
<h3 className="font-cal text-gray-900 text-lg font-bold leading-6" id="modal-title">
{title}
</h3>
<div>

2
components/ImageUploader.tsx
View file

@ -142,7 +142,7 @@ export default function ImageUploader({ target, id, buttonMsg, handleAvatarChang
<div className="inline-block align-bottom bg-white rounded-sm px-4 pt-5 pb-4 text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full sm:p-6">
<div className="sm:flex sm:items-start mb-4">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<h3 className="text-lg leading-6 font-bold text-gray-900" id="modal-title">
<h3 className="font-cal text-lg leading-6 font-bold text-gray-900" id="modal-title">
Upload {target}
</h3>
</div>

4
components/booking/pages/AvailabilityPage.tsx
View file

@ -166,7 +166,9 @@ const AvailabilityPage = ({ profile, eventType, workingHours }: AvailabilityPage
size={10}
truncateAfter={3}
/>
<h2 className="font-medium text-gray-500 dark:text-gray-300 mt-3">{profile.name}</h2>
<h2 className="font-cal font-medium text-gray-500 dark:text-gray-300 mt-3">
{profile.name}
</h2>
<h1 className="mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
{eventType.title}
</h1>

4
components/booking/pages/BookingPage.tsx
View file

@ -200,7 +200,9 @@ const BookingPage = (props: BookingPageProps) => {
}))
)}
/>
<h2 className="font-medium dark:text-gray-300 text-gray-500">{props.profile.name}</h2>
<h2 className="font-cal font-medium dark:text-gray-300 text-gray-500">
{props.profile.name}
</h2>
<h1 className="text-3xl font-semibold dark:text-white text-gray-800 mb-4">
{props.eventType.title}
</h1>

2
components/security/ChangePasswordSection.tsx
View file

@ -60,7 +60,7 @@ const ChangePasswordSection = () => {
return (
<>
<div className="mt-6">
<h2 className="text-lg leading-6 font-medium text-gray-900">Change Password</h2>
<h2 className="font-cal text-lg leading-6 font-medium text-gray-900">Change Password</h2>
</div>
<form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
<div className="py-6 lg:pb-8">

2
components/security/TwoFactorAuthSection.tsx
View file

@ -14,7 +14,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
return (
<>
<div className="flex flex-row items-center">
<h2 className="text-lg leading-6 font-medium text-gray-900">Two-Factor Authentication</h2>
<h2 className="font-cal text-lg leading-6 font-medium text-gray-900">Two-Factor Authentication</h2>
<Badge className="text-xs ml-2" variant={enabled ? "success" : "gray"}>
{enabled ? "Enabled" : "Disabled"}
</Badge>

2
components/security/TwoFactorModalHeader.tsx
View file

@ -8,7 +8,7 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
<ShieldCheckIcon className="w-6 h-6 text-black" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
<h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">
{title}
</h3>
<p className="text-sm text-gray-400">{description}</p>

4
components/team/EditTeam.tsx
View file

@ -144,7 +144,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
</div>
</div>
<hr className="mt-2" />
<h3 className="font-bold leading-6 text-gray-900 mt-7 text-md">Profile</h3>
<h3 className="font-cal font-bold leading-6 text-gray-900 mt-7 text-md">Profile</h3>
<form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={updateTeamHandler}>
{hasErrors && <ErrorAlert message={errorMessage} />}
<div className="py-6 lg:pb-8">
@ -214,7 +214,7 @@ export default function EditTeam(props: { team: Team | undefined | null; onClose
<hr className="mt-6" />
</div>
<div className="flex justify-between mt-7">
<h3 className="font-bold leading-6 text-gray-900 text-md">Members</h3>
<h3 className="font-cal font-bold leading-6 text-gray-900 text-md">Members</h3>
<div className="relative flex items-center">
<Button
type="button"

2
pages/404.tsx
View file

@ -47,7 +47,7 @@ export default function Custom404() {
<main className="max-w-xl mx-auto pb-6 pt-16 sm:pt-24">
<div className="text-center">
<p className="text-sm font-semibold text-black uppercase tracking-wide">404 error</p>
<h1 className="mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
<h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
This page does not exist.
</h1>
{isEventType404 ? (

2
pages/[user].tsx
View file

@ -54,7 +54,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
{props.eventTypes.length == 0 && (
<div className="shadow overflow-hidden rounded-sm">
<div className="p-8 text-center text-gray-400 dark:text-white">
<h2 className="font-semibold text-3xl text-gray-600 dark:text-white">Uh oh!</h2>
<h2 className="font-cal font-semibold text-3xl text-gray-600 dark:text-white">Uh oh!</h2>
<p className="max-w-md mx-auto">This user hasn&apos;t set up any event types yet.</p>
</div>
</div>

8
pages/auth/forgot-password/[id].tsx
View file

@ -77,7 +77,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
<>
<div className="space-y-6">
<div>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Success</h2>
<h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">Success</h2>
</div>
<p>Your password has been reset. You can now login with your newly created password.</p>
<Link href="/auth/login">
@ -97,7 +97,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
<>
<div className="space-y-6">
<div>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Whoops</h2>
<h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">Whoops</h2>
<h2 className="text-center text-3xl font-extrabold text-gray-900">That Request is Expired.</h2>
</div>
<p>
@ -130,7 +130,9 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
{!isRequestExpired && !success && (
<>
<div className="space-y-6">
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Reset Password</h2>
<h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
Reset Password
</h2>
<p>Enter the new password you&apos;d like for your account.</p>
{error && <p className="text-red-600">{error.message}</p>}
</div>

4
pages/auth/forgot-password/index.tsx
View file

@ -81,7 +81,9 @@ export default function ForgotPassword({ csrfToken }) {
{!success && (
<>
<div className="space-y-6">
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Forgot Password</h2>
<h2 className="font-cal mt-6 text-center text-3xl font-extrabold text-gray-900">
Forgot Password
</h2>
<p>
Enter the email address associated with your account and we will send you a link to reset
your password.

4
pages/auth/login.tsx
View file

@ -72,7 +72,9 @@ export default function Login({ csrfToken }) {
<HeadSeo title="Login" description="Login" />
<div className="sm:mx-auto sm:w-full sm:max-w-md">
<img className="h-6 mx-auto" src="/calendso-logo-white-word.svg" alt="Cal.com Logo" />
<h2 className="mt-6 text-center text-3xl font-bold text-neutral-900">Sign in to your account</h2>
<h2 className="font-cal mt-6 text-center text-3xl font-bold text-neutral-900">
Sign in to your account
</h2>
</div>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">

2
pages/auth/signup.tsx
View file

@ -58,7 +58,7 @@ export default function Signup(props) {
aria-modal="true">
<HeadSeo title="Sign up" description="Sign up" />
<div className="sm:mx-auto sm:w-full sm:max-w-md">
<h2 className="text-center text-3xl font-extrabold text-gray-900">Create your account</h2>
<h2 className="font-cal text-center text-3xl font-extrabold text-gray-900">Create your account</h2>
</div>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white py-8 px-4 shadow mx-2 sm:rounded-lg sm:px-10">

4
pages/cancel/[uid].tsx
View file

@ -99,7 +99,9 @@ export default function Type(props) {
<p className="text-sm text-gray-500">Instead, you could also reschedule it.</p>
</div>
<div className="mt-4 border-t border-b py-4">
<h2 className="text-lg font-medium text-gray-600 mb-2">{props.booking.title}</h2>
<h2 className="font-cal text-lg font-medium text-gray-600 mb-2">
{props.booking.title}
</h2>
<p className="text-gray-500">
<CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{dayjs(props.booking.startTime).format(

2
pages/integrations/index.tsx
View file

@ -156,7 +156,7 @@ export default function Home({ integrations }: inferSSRProps<typeof getServerSid
<img className="h-8 w-8 mr-2" src={integration.imageSrc} alt={integration.title} />
</div>
<div className="w-10/12">
<h2 className="text-gray-800 font-medium">{integration.title}</h2>
<h2 className="font-cal text-gray-800 font-medium">{integration.title}</h2>
<p className="text-gray-400 text-sm">{integration.description}</p>
</div>
<div className="w-2/12 text-right pt-2">

4
pages/settings/embed.tsx
View file

@ -20,7 +20,7 @@ export default function Embed(props) {
<SettingsShell>
<div className="py-6 lg:pb-8 lg:col-span-9">
<div className="mb-6">
<h2 className="text-lg leading-6 font-medium text-gray-900">iframe Embed</h2>
<h2 className="font-cal text-lg leading-6 font-medium text-gray-900">iframe Embed</h2>
<p className="mt-1 text-sm text-gray-500">The easiest way to embed Cal.com on your website.</p>
</div>
<div className="grid grid-cols-2 space-x-4">
@ -66,7 +66,7 @@ export default function Embed(props) {
</div>
</div>
<div className="my-6">
<h2 className="text-lg leading-6 font-medium text-gray-900">Cal.com API</h2>
<h2 className="font-cal text-lg leading-6 font-medium text-gray-900">Cal.com API</h2>
<p className="mt-1 text-sm text-gray-500">
Leverage our API for full control and customizability.
</p>

2
pages/settings/teams.tsx
View file

@ -115,7 +115,7 @@ export default function Teams() {
{!!invites.length && (
<div>
<h2 className="text-lg font-medium leading-6 text-gray-900">Open Invitations</h2>
<h2 className="font-cal text-lg font-medium leading-6 text-gray-900">Open Invitations</h2>
<ul className="px-4 mt-4 mb-2 bg-white border divide-y divide-gray-200 rounded">
{invites.map((team: Team) => (
<TeamListItem

2
pages/team/[slug].tsx
View file

@ -30,7 +30,7 @@ function TeamPage({ team }: InferGetServerSidePropsType<typeof getServerSideProp
<Link href={`${team.slug}/${type.slug}`}>
<a className="px-6 py-4 flex justify-between">
<div className="flex-shrink">
<h2 className="font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
<h2 className="font-cal font-semibold text-neutral-900 dark:text-white">{type.title}</h2>
<EventTypeDescription className="text-sm" eventType={type} />
</div>
<div className="mt-1">

BIN
public/cal.ttf Normal file
View file

Binary file not shown.

75
styles/globals.css
View file

@ -13,6 +13,12 @@
@apply text-black;
}
/* Cal Sans */
@font-face {
font-family: "Cal Sans";
src: url("https://cal.com/cal.ttf");
}
/* note(PeerRich): TODO move @layer components into proper React Components: <Button color="primary" size="xs" /> */
@layer components {
/* Primary buttons */
@ -91,7 +97,7 @@
}
/* slider */
.slider {
@apply relative flex items-center w-40 h-4 select-none
@apply relative flex items-center w-40 h-4 select-none;
}
.slider > .slider-track {
@ -99,7 +105,7 @@
}
.slider .slider-range {
@apply absolute h-full bg-neutral-700 rounded-full
@apply absolute h-full bg-neutral-700 rounded-full;
}
.slider .slider-thumb {
@ -111,7 +117,7 @@
}
.slider .slider-thumb:focus {
box-shadow: 0 0 0 4px rgba(0,0,0,0.2);
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
}
}
@ -135,7 +141,7 @@
/* hide intercom chat bubble on mobile */
@media only screen and (max-width: 768px) {
.intercom-launcher-frame{
.intercom-launcher-frame {
display: none !important;
}
}
@ -149,13 +155,12 @@
/* hide intercom chat bubble on mobile */
@media only screen and (max-width: 768px) {
.intercom-launcher-frame{
.intercom-launcher-frame {
display: none !important;
}
}
.react-multi-email > [type='text'] {
.react-multi-email > [type="text"] {
@apply shadow-sm dark:bg-gray-700 dark:text-white dark:border-gray-900 focus:ring-black focus:border-black block w-full sm:text-sm border-gray-300 rounded-md;
}
@ -164,78 +169,78 @@
@apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
.react-multi-email > span[data-placeholder] {
.react-multi-email > span[data-placeholder] {
display: none;
position: absolute;
left: 0.8rem;
top: 0.75rem;
line-height: 1.25rem;
font-size: 0.875rem;
}
}
.react-multi-email.empty > span[data-placeholder] {
.react-multi-email.empty > span[data-placeholder] {
display: inline;
color: #646b7a;
}
}
.react-multi-email.focused > span[data-placeholder] {
.react-multi-email.focused > span[data-placeholder] {
display: none;
}
}
.react-multi-email > input {
.react-multi-email > input {
width: 100% !important;
display: inline-block !important;
@apply mt-1;
}
}
.react-multi-email [data-tag] {
.react-multi-email [data-tag] {
@apply inline-flex items-center px-2 py-1 my-1 mr-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-gray-900 dark:text-white bg-neutral-200 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-500;
}
}
.react-multi-email [data-tag] [data-tag-item] {
.react-multi-email [data-tag] [data-tag-item] {
max-width: 100%;
overflow: hidden;
}
}
.react-multi-email [data-tag] [data-tag-handle] {
.react-multi-email [data-tag] [data-tag-handle] {
margin-left: 0.833em;
cursor: pointer;
}
}
/* !important to override react-select */
.react-select__value-container{
.react-select__value-container {
border: 0 !important;
}
.react-select__input input {
border: 0 !important; box-shadow: none !important;
border: 0 !important;
box-shadow: none !important;
}
.react-select__option--is-focused{
.react-select__option--is-focused {
background: #000 !important;
color: #fff !important
color: #fff !important;
}
.react-select__control{
.react-select__control {
border: 2px solid transparent !important;
box-shadow: none !important;
}
.react-select__control.react-select__control--is-focused{
.react-select__control.react-select__control--is-focused {
border: 2px solid #000 !important;
border-color: #000 !important;
box-shadow: none !important;
margin: -1px;
padding: 1px;
}
/* !important to override react-dates */
.DateRangePickerInput__withBorder{
border: 0 !important
.DateRangePickerInput__withBorder {
border: 0 !important;
}
.DateInput_input{
border: 1px solid #D1D5DB !important;
.DateInput_input {
border: 1px solid #d1d5db !important;
border-radius: 2px !important;
font-size: inherit !important;
font-weight: inherit !important;
@ -244,14 +249,14 @@
line-height: 16px !important;
}
.DateInput_input__focused{
.DateInput_input__focused {
border: 2px solid #000 !important;
border-radius: 2px !important;
box-shadow: none !important;
padding: 10px ​10px 9px !important;
}
.DateRangePickerInput_arrow{
.DateRangePickerInput_arrow {
padding: 0px 10px;
}
@ -333,12 +338,10 @@ nav#nav--settings > a.active svg {
@apply text-neutral-500;
}
table tbody tr:nth-child(odd) {
@apply bg-gray-50;
}
body {
background-color: #f3f4f6;
}

2
tailwind.config.js
View file

@ -93,7 +93,7 @@ module.exports = {
},
fontFamily: {
inter: ["Inter", "sans-serif"],
kollektif: ["Kollektif", "sans-serif"],
cal: ["Cal Sans", "sans-serif"],
},
maxHeight: (theme) => ({
0: "0",