Merge pull request #401 from calendso/embed-redesign
minor fixes for redesign
This commit is contained in:
Peer_Rich
GitHub
commit
8c5b092111
5 changed files with 36 additions and 27 deletions
|
|
@ -113,7 +113,7 @@ export default function Page({ csrfToken }) {
|
|||
<button
|
||||
type="submit"
|
||||
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 && (
|
||||
|
|
@ -142,7 +142,7 @@ export default function Page({ csrfToken }) {
|
|||
<Link href="/auth/login">
|
||||
<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
|
||||
</button>
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default function Login({ csrfToken }) {
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
|
@ -69,7 +69,10 @@ export default function Login({ csrfToken }) {
|
|||
</form>
|
||||
</div>
|
||||
<div className="mt-4 text-neutral-600 text-center text-sm">
|
||||
Don't have an account? <a href="#" className="font-medium text-neutral-900">Create an account</a>
|
||||
Don'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>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export default function Bookings({ bookings }) {
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<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="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">
|
||||
|
|
@ -43,10 +43,7 @@ export default function Bookings({ bookings }) {
|
|||
.concat(bookings.filter((booking) => booking.confirmed || booking.rejected))
|
||||
.map((booking) => (
|
||||
<tr key={booking.id}>
|
||||
<td
|
||||
className={
|
||||
"px-6 py-4 whitespace-nowrap" + (booking.rejected ? " line-through" : "")
|
||||
}>
|
||||
<td className={"px-6 py-4" + (booking.rejected ? " line-through" : "")}>
|
||||
{!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">
|
||||
Unconfirmed
|
||||
|
|
@ -56,13 +53,20 @@ export default function Bookings({ bookings }) {
|
|||
{booking.attendees[0].name}
|
||||
</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
|
||||
className={
|
||||
"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="text-sm text-neutral-500">
|
||||
<div className="hidden lg:block text-sm text-neutral-900 font-medium">
|
||||
{booking.title}
|
||||
</div>
|
||||
<div className="hidden lg:block text-sm text-neutral-500">
|
||||
You and {booking.attendees[0].name}
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -74,28 +78,28 @@ export default function Bookings({ bookings }) {
|
|||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
{!booking.confirmed && !booking.rejected && (
|
||||
<>
|
||||
<a
|
||||
<button
|
||||
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
|
||||
</a>
|
||||
<a
|
||||
</button>
|
||||
<button
|
||||
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
|
||||
</a>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{booking.confirmed && !booking.rejected && (
|
||||
<>
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
<a
|
||||
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
|
||||
</a>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -40,10 +40,7 @@ export default function integration(props) {
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
|
||||
<Shell heading={getIntegrationName(props.integration.type)}>
|
||||
<div className="flex mb-8">
|
||||
<p className="text-sm text-neutral-500">Manage and delete integrations.</p>
|
||||
</div>
|
||||
<Shell heading={getIntegrationName(props.integration.type)} subtitle="Manage and delete integrations.">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="col-span-2 bg-white shadow overflow-hidden rounded-sm">
|
||||
<div className="px-4 py-5 sm:px-6">
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import { Switch } from "@headlessui/react";
|
|||
|
||||
export default function Home({ integrations }) {
|
||||
const [session, loading] = useSession();
|
||||
|
||||
const [showAddModal, setShowAddModal] = useState(false);
|
||||
const [showSelectCalendarModal, setShowSelectCalendarModal] = useState(false);
|
||||
const [selectableCalendars, setSelectableCalendars] = useState([]);
|
||||
|
|
@ -86,7 +87,11 @@ export default function Home({ integrations }) {
|
|||
useEffect(loadCalendars, [integrations]);
|
||||
|
||||
if (loading) {
|
||||
return <div className="loader"><span className="loader-inner"></span></div>;
|
||||
return (
|
||||
<div className="loader">
|
||||
<span className="loader-inner"></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -99,8 +104,8 @@ export default function Home({ integrations }) {
|
|||
<Shell
|
||||
heading="Integrations"
|
||||
subtitle="Connect your favourite apps."
|
||||
noPaddingBottom>
|
||||
<div className="text-right py-2">
|
||||
noPaddingBottom
|
||||
CTA={
|
||||
<button
|
||||
onClick={toggleAddModal}
|
||||
type="button"
|
||||
|
|
@ -108,7 +113,7 @@ export default function Home({ integrations }) {
|
|||
<PlusIcon className="w-5 h-5 mr-1" />
|
||||
Add new integration
|
||||
</button>
|
||||
</div>
|
||||
}>
|
||||
<div className="bg-white shadow overflow-hidden rounded-sm mb-8">
|
||||
{integrations.filter((ig) => ig.credential).length !== 0 ? (
|
||||
<ul className="divide-y divide-gray-200">
|
||||
|
|
|
|||
Loading…
Reference in a new issue