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

Merge pull request #401 from calendso/embed-redesign

Browse source 
minor fixes for redesign
This commit is contained in:
Peer_Rich 2021-08-02 18:55:44 +02:00 committed by GitHub
commit 8c5b092111
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 36 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -113,7 +113,7 @@ export default function Page({ csrfToken }) {
<button <button
type="submit" type="submit"
disabled={loading} disabled={loading}
className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${ className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-black hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ${
loading ? "cursor-not-allowed" : "" loading ? "cursor-not-allowed" : ""
}`}> }`}>
{loading && ( {loading && (
@ -142,7 +142,7 @@ export default function Page({ csrfToken }) {
<Link href="/auth/login"> <Link href="/auth/login">
<button <button
type="button" type="button"
className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"> className="w-full flex justify-center py-2 px-4 text-sm font-medium text-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black">
Login Login
</button> </button>
</Link> </Link>

7
pages/auth/login.tsx
View file

@ -10,7 +10,7 @@ export default function Login({ csrfToken }) {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<div className="sm:mx-auto sm:w-full sm:max-w-md"> <div className="sm:mx-auto sm:w-full sm:max-w-md">
<img className="h-6 mx-auto" src="/calendso-logo-word.svg" alt="Calendso Logo" /> <img className="h-6 mx-auto" src="/calendso-logo-white-word.svg" alt="Calendso Logo" />
<h2 className="mt-6 text-center text-3xl font-bold text-neutral-900">Sign in to your account</h2> <h2 className="mt-6 text-center text-3xl font-bold text-neutral-900">Sign in to your account</h2>
</div> </div>
@ -69,7 +69,10 @@ export default function Login({ csrfToken }) {
</form> </form>
</div> </div>
<div className="mt-4 text-neutral-600 text-center text-sm"> <div className="mt-4 text-neutral-600 text-center text-sm">
Don&apos;t have an account? <a href="#" className="font-medium text-neutral-900">Create an account</a> Don&apos;t have an account? {/* replace this with your account creation flow */}
<a href="https://checkout.calendso.com" className="font-medium text-neutral-900">
Create an account
</a>
</div> </div>
</div> </div>
</div> </div>

34
pages/bookings/index.tsx
View file

@ -32,7 +32,7 @@ export default function Bookings({ bookings }) {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links."> <Shell heading="Bookings" subtitle="See upcoming and past events booked through your event type links.">
<div className="flex flex-col"> <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="-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="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="shadow overflow-hidden border-b border-gray-200 sm:rounded-sm">
@ -43,10 +43,7 @@ export default function Bookings({ bookings }) {
.concat(bookings.filter((booking) => booking.confirmed || booking.rejected)) .concat(bookings.filter((booking) => booking.confirmed || booking.rejected))
.map((booking) => ( .map((booking) => (
<tr key={booking.id}> <tr key={booking.id}>
<td <td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
className={
"px-6 py-4 whitespace-nowrap" + (booking.rejected ? " line-through" : "")
}>
{!booking.confirmed && !booking.rejected && ( {!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"> <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">
Unconfirmed Unconfirmed
@ -56,13 +53,20 @@ export default function Bookings({ bookings }) {
{booking.attendees[0].name} {booking.attendees[0].name}
</div> </div>
<div className="text-sm text-gray-500">{booking.attendees[0].email}</div> <div className="text-sm text-gray-500">{booking.attendees[0].email}</div>
<div
style={{ maxWidth: 150 }}
className="block lg:hidden font-medium text-xs text-gray-900 truncate">
{booking.title}
</div>
</td> </td>
<td <td
className={ className={
"px-6 py-4 max-w-20 w-full" + (booking.rejected ? " line-through" : "") "px-6 py-4 max-w-20 w-full" + (booking.rejected ? " line-through" : "")
}> }>
<div className="text-sm text-neutral-900 font-medium">{booking.title}</div> <div className="hidden lg:block text-sm text-neutral-900 font-medium">
<div className="text-sm text-neutral-500"> {booking.title}
</div>
<div className="hidden lg:block text-sm text-neutral-500">
You and {booking.attendees[0].name} You and {booking.attendees[0].name}
</div> </div>
</td> </td>
@ -74,28 +78,28 @@ export default function Bookings({ bookings }) {
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
{!booking.confirmed && !booking.rejected && ( {!booking.confirmed && !booking.rejected && (
<> <>
<a <button
onClick={() => confirmBookingHandler(booking, true)} onClick={() => confirmBookingHandler(booking, true)}
className="cursor-pointer text-blue-600 hover:text-blue-900"> className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
Confirm Confirm
</a> </button>
<a <button
onClick={() => confirmBookingHandler(booking, false)} onClick={() => confirmBookingHandler(booking, false)}
className="cursor-pointer ml-4 text-blue-600 hover:text-blue-900"> className="text-xs sm:text-sm ml-4 inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
Reject Reject
</a> </button>
</> </>
)} )}
{booking.confirmed && !booking.rejected && ( {booking.confirmed && !booking.rejected && (
<> <>
<a <a
href={window.location.href + "/../cancel/" + booking.uid} href={window.location.href + "/../cancel/" + booking.uid}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2"> className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
Cancel Cancel
</a> </a>
<a <a
href={window.location.href + "/../reschedule/" + booking.uid} href={window.location.href + "/../reschedule/" + booking.uid}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black mr-2"> className="text-xs sm:text-sm inline-flex items-center px-4 py-2 border-transparent font-medium rounded-sm shadow-sm text-neutral-700 bg-white hover:bg-neutral-100 border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black ml-2">
Reschedule Reschedule
</a> </a>
</> </>

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

@ -40,10 +40,7 @@ export default function integration(props) {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<Shell heading={getIntegrationName(props.integration.type)}> <Shell heading={getIntegrationName(props.integration.type)} subtitle="Manage and delete integrations.">
<div className="flex mb-8">
<p className="text-sm text-neutral-500">Manage and delete integrations.</p>
</div>
<div className="grid grid-cols-3 gap-4"> <div className="grid grid-cols-3 gap-4">
<div className="col-span-2 bg-white shadow overflow-hidden rounded-sm"> <div className="col-span-2 bg-white shadow overflow-hidden rounded-sm">
<div className="px-4 py-5 sm:px-6"> <div className="px-4 py-5 sm:px-6">

13
pages/integrations/index.tsx
View file

@ -16,6 +16,7 @@ import { Switch } from "@headlessui/react";
export default function Home({ integrations }) { export default function Home({ integrations }) {
const [session, loading] = useSession(); const [session, loading] = useSession();
const [showAddModal, setShowAddModal] = useState(false); const [showAddModal, setShowAddModal] = useState(false);
const [showSelectCalendarModal, setShowSelectCalendarModal] = useState(false); const [showSelectCalendarModal, setShowSelectCalendarModal] = useState(false);
const [selectableCalendars, setSelectableCalendars] = useState([]); const [selectableCalendars, setSelectableCalendars] = useState([]);
@ -86,7 +87,11 @@ export default function Home({ integrations }) {
useEffect(loadCalendars, [integrations]); useEffect(loadCalendars, [integrations]);
if (loading) { if (loading) {
return <div className="loader"><span className="loader-inner"></span></div>; return (
<div className="loader">
<span className="loader-inner"></span>
</div>
);
} }
return ( return (
@ -99,8 +104,8 @@ export default function Home({ integrations }) {
<Shell <Shell
heading="Integrations" heading="Integrations"
subtitle="Connect your favourite apps." subtitle="Connect your favourite apps."
noPaddingBottom> noPaddingBottom
<div className="text-right py-2"> CTA={
<button <button
onClick={toggleAddModal} onClick={toggleAddModal}
type="button" type="button"
@ -108,7 +113,7 @@ export default function Home({ integrations }) {
<PlusIcon className="w-5 h-5 mr-1" /> <PlusIcon className="w-5 h-5 mr-1" />
Add new integration Add new integration
</button> </button>
</div> }>
<div className="bg-white shadow overflow-hidden rounded-sm mb-8"> <div className="bg-white shadow overflow-hidden rounded-sm mb-8">
{integrations.filter((ig) => ig.credential).length !== 0 ? ( {integrations.filter((ig) => ig.credential).length !== 0 ? (
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200">