chore: update Prettier configuration and add Tailwind CSS plugin; refactor CSS classes for consistency

- Updated .prettierrc to include Tailwind CSS plugin and functions.
- Added prettier-plugin-tailwindcss to package.json and pnpm-lock.yaml.
- Refactored CSS classes in main.css and various TSX files for improved consistency and readability.
- Adjusted spacing in several components to enhance layout and maintain uniformity.
This commit is contained in:
Amruth Pillai
2025-01-12 15:29:23 +01:00
parent 007243f2c3
commit 26e34b6b83
20 changed files with 87 additions and 22 deletions

View File

@ -21,5 +21,5 @@
}
.wysiwyg {
@apply prose max-w-none prose-foreground prose-headings:mt-0 prose-headings:mb-2 prose-p:mt-0 prose-p:mb-2 prose-ul:mt-0 prose-ul:mb-2 prose-li:mt-0 prose-li:mb-2 prose-ol:mt-0 prose-ol:mb-2 prose-img:mt-0 prose-img:mb-2 prose-hr:mt-0 prose-hr:mb-2 prose-p:leading-normal prose-li:leading-normal prose-a:break-all;
@apply prose-foreground prose max-w-none prose-headings:mb-2 prose-headings:mt-0 prose-p:mb-2 prose-p:mt-0 prose-p:leading-normal prose-a:break-all prose-ol:mb-2 prose-ol:mt-0 prose-ul:mb-2 prose-ul:mt-0 prose-li:mb-2 prose-li:mt-0 prose-li:leading-normal prose-img:mb-2 prose-img:mt-0 prose-hr:mb-2 prose-hr:mt-0;
}

View File

@ -35,7 +35,7 @@
<!-- Styles -->
<link rel="stylesheet" href="/src/styles/main.css" />
</head>
<body class="text-sm antialiased bg-background text-foreground print:bg-white print:m-0">
<body class="bg-background text-sm text-foreground antialiased print:m-0 print:bg-white">
<div id="root"></div>
<!-- Scripts -->

View File

@ -18,7 +18,7 @@ export const BasicsSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("basics")}
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Basics`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Basics`}</h2>
</div>
</header>

View File

@ -100,7 +100,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
<div className="flex items-center gap-x-4">
{getSectionIcon(id)}
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{section.name}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{section.name}</h2>
</div>
<div className="flex items-center gap-x-2">

View File

@ -149,7 +149,7 @@ export const SectionDialog = <T extends SectionItem>({
<Form {...form}>
<ScrollArea>
<form
className=" max-h-[60vh] space-y-6 lg:max-h-fit"
className="max-h-[60vh] space-y-6 lg:max-h-fit"
onSubmit={form.handleSubmit(onSubmit)}
>
<DialogHeader>
@ -165,7 +165,7 @@ export const SectionDialog = <T extends SectionItem>({
</h2>
</div>
</DialogTitle>
<VisuallyHidden>
<DialogDescription />
</VisuallyHidden>

View File

@ -82,7 +82,7 @@ export const SectionOptions = ({ id }: Props) => {
<List weight="bold" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="mr-4 w-48 ">
<DropdownMenuContent className="mr-4 w-48">
{hasItems && (
<>
<DropdownMenuItem onClick={onCreate}>

View File

@ -114,7 +114,7 @@ export const InformationSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("information")}
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Information`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Information`}</h2>
</div>
</header>

View File

@ -204,7 +204,7 @@ export const LayoutSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("layout")}
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Layout`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Layout`}</h2>
</div>
<Tooltip content={t`Reset Layout`}>

View File

@ -14,7 +14,7 @@ export const NotesSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("notes")}
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Notes`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Notes`}</h2>
</div>
</header>

View File

@ -23,7 +23,7 @@ export const PageSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("page")}
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Page`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Page`}</h2>
</div>
</header>

View File

@ -36,7 +36,7 @@ export const SharingSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("sharing")}
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Sharing`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Sharing`}</h2>
</div>
</header>

View File

@ -20,7 +20,7 @@ export const StatisticsSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("statistics")}
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Statistics`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Statistics`}</h2>
</div>
</header>

View File

@ -16,7 +16,7 @@ export const TemplateSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("template")}
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Template`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Template`}</h2>
</div>
</header>

View File

@ -17,7 +17,7 @@ export const ThemeSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("theme")}
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Theme`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Theme`}</h2>
</div>
</header>

View File

@ -62,11 +62,11 @@ export const TypographySection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("typography")}
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Typography`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Typography`}</h2>
</div>
</header>
<main className="grid gap-y-8">
<main className="grid gap-y-6">
<div className="grid grid-cols-2 gap-4">
{fontSuggestions.map((font) => (
<Button
@ -167,7 +167,7 @@ export const TypographySection = () => {
<div className="space-y-1.5">
<Label>{t`Options`}</Label>
<div className="flex items-center gap-x-4 py-2">
<div className="flex items-center gap-x-4 py-1">
<Switch
id="metadata.typography.hideIcons"
checked={typography.hideIcons}
@ -178,7 +178,7 @@ export const TypographySection = () => {
<Label htmlFor="metadata.typography.hideIcons">{t`Hide Icons`}</Label>
</div>
<div className="flex items-center gap-x-4 py-2">
<div className="flex items-center gap-x-4 py-1">
<Switch
id="metadata.typography.underlineLinks"
checked={typography.underlineLinks}

View File

@ -51,7 +51,7 @@ export const SupportSection = () => (
</a>
<a href="https://paypal.me/amruthde" rel="noreferrer noopener nofollow" target="_blank">
{/* eslint-disable-next-line lingui/no-unlocalized-strings */}
<img src="/support-logos/paypal.svg" className=" max-h-[28px]" alt="PayPal" />
<img src="/support-logos/paypal.svg" className="max-h-[28px]" alt="PayPal" />
</a>
</div>

View File

@ -42,7 +42,7 @@ export const TemplatesSection = () => (
alt={template}
loading="lazy"
src={`/templates/jpg/${template}.jpg`}
className=" aspect-[1/1.4142] h-[400px] rounded object-cover lg:h-[600px]"
className="aspect-[1/1.4142] h-[400px] rounded object-cover lg:h-[600px]"
/>
</motion.a>
))}