Use prettier to order tailwind classes

This commit is contained in:
Luke Vella 2022-04-16 10:25:29 +01:00
parent c5c2816c3d
commit eee23c1bb5
52 changed files with 268 additions and 262 deletions

View file

@ -5,9 +5,9 @@ import { isInMaintenanceMode } from "../utils/constants";
const Maintenance: NextPage = () => {
return (
<div className="h-full bg-gray-100 flex flex-col justify-center items-center">
<div className="bg-white text-center p-8 rounded-lg border shadow-sm w-96">
<Logo className="h-8 inline-block text-indigo-500 mb-4" />
<div className="flex h-full flex-col items-center justify-center bg-gray-100">
<div className="w-96 rounded-lg border bg-white p-8 text-center shadow-sm">
<Logo className="mb-4 inline-block h-8 text-indigo-500" />
<div className="">
The site is currently under maintenance and will be back shortly
</div>

View file

@ -148,18 +148,18 @@ const Page: NextPage<{
<Head>
<title>{formData?.eventDetails?.title ?? t("newPoll")}</title>
</Head>
<div className="max-w-full w-[1024px] py-4 px-3 lg:px-6">
<div className="flex space-x-4 items-center mb-4">
<div className="w-[1024px] max-w-full py-4 px-3 lg:px-6">
<div className="mb-4 flex items-center space-x-4">
<h1 className="m-0">New Poll</h1>
<Steps current={currentStepIndex} total={steps.length} />
</div>
<div className="bg-white overflow-hidden rounded-lg max-w-full w-fit shadow-sm border">
<div className="w-fit max-w-full overflow-hidden rounded-lg border bg-white shadow-sm">
{(() => {
switch (currentStepName) {
case "eventDetails":
return (
<PollDetailsForm
className="px-4 pt-4 max-w-full"
className="max-w-full px-4 pt-4"
name={currentStepName}
defaultValues={formData?.eventDetails}
onSubmit={handleSubmit}
@ -180,7 +180,7 @@ const Page: NextPage<{
case "userDetails":
return (
<UserDetailsForm
className="px-4 pt-4 grow"
className="grow px-4 pt-4"
name={currentStepName}
defaultValues={formData?.userDetails}
onSubmit={handleSubmit}
@ -189,7 +189,7 @@ const Page: NextPage<{
);
}
})()}
<div className="bg-slate-50 w-full justify-end px-4 py-3 flex border-t space-x-3">
<div className="flex w-full justify-end space-x-3 border-t bg-slate-50 px-4 py-3">
{currentStepIndex > 0 ? (
<Button
disabled={isBusy}

View file

@ -216,7 +216,7 @@ const PollPage: NextPage = () => {
return (
<UserAvatarProvider seed={poll.pollId} names={names}>
<StandardLayout>
<div className="max-w-full lg:w-[1024px] bg-gray-50 relative py-4 md:px-4 lg:px-8">
<div className="relative max-w-full bg-gray-50 py-4 md:px-4 lg:w-[1024px] lg:px-8">
<Head>
<title>{poll.title}</title>
<meta name="robots" content="noindex,nofollow" />
@ -228,14 +228,14 @@ const PollPage: NextPage = () => {
}}
>
<div className="mb-6 px-4 md:px-0">
<div className="md:flex md:space-x-4 items-start mb-3">
<div className="mb-3 md:mb-0 grow">
<div className="mb-3 items-start md:flex md:space-x-4">
<div className="mb-3 grow md:mb-0">
<div className="flex flex-col-reverse md:flex-row">
<h1 className="grow mb-2 leading-tight text-3xl">
<h1 className="mb-2 grow text-3xl leading-tight">
{preventWidows(poll.title)}
</h1>
{poll.role === "admin" ? (
<div className="flex space-x-2 mb-4 md:mb-2">
<div className="mb-4 flex space-x-2 md:mb-2">
<NotificationsToggle />
<ManagePoll
placement={
@ -262,18 +262,18 @@ const PollPage: NextPage = () => {
</div>
</div>
{poll.description ? (
<div className="text-lg leading-relaxed max-w-2xl mb-4 whitespace-pre-line w-fit shadow-sm bg-white text-slate-600 rounded-xl px-4 py-3">
<div className="mb-4 w-fit max-w-2xl whitespace-pre-line rounded-xl bg-white px-4 py-3 text-lg leading-relaxed text-slate-600 shadow-sm">
<TruncatedLinkify>
{preventWidows(poll.description)}
</TruncatedLinkify>
</div>
) : null}
{poll.location ? (
<div className="flex items-center mb-4">
<div className="mb-4 flex items-center">
<div>
<LocationMarker
width={20}
className="text-slate-400 mr-2"
className="mr-2 text-slate-400"
/>
</div>
<TruncatedLinkify>{poll.location}</TruncatedLinkify>
@ -281,7 +281,7 @@ const PollPage: NextPage = () => {
) : null}
</div>
{poll.closed ? (
<div className="bg-sky-100 text-sky-700 py-3 px-4 md:rounded-lg shadow-sm mb-4 flex items-center">
<div className="mb-4 flex items-center bg-sky-100 py-3 px-4 text-sky-700 shadow-sm md:rounded-lg">
<div className="mr-3 rounded-md">
<LockClosed className="w-5" />
</div>

View file

@ -6,7 +6,7 @@ import PageLayout from "@/components/page-layout";
const PrivacyPolicy = () => {
return (
<PageLayout>
<div className="p-8 my-16 mx-auto max-w-3xl bg-white shadow-md rounded-lg prose prose-">
<div className="prose my-16 mx-auto max-w-3xl rounded-lg bg-white p-8 shadow-md">
<h1>Privacy Policy</h1>
<p>Last updated: April 04, 2022</p>
<p>