mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-10 04:22:27 +10:00
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:
@ -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;
|
||||
}
|
||||
|
||||
@ -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 -->
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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`}>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user