Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-09 20:12:26 +10:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

4
.prettierrc
View File

@ -1,4 +1,6 @@
{ {
"printWidth": 100, "printWidth": 100,
"endOfLine": "auto" "endOfLine": "auto",
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindFunctions": ["cn", "cva"]
} }

2
apps/artboard/src/styles/main.css
View File

@ -21,5 +21,5 @@
} }
.wysiwyg { .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;
} }

2
apps/client/index.html
View File

@ -35,7 +35,7 @@
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="/src/styles/main.css" /> <link rel="stylesheet" href="/src/styles/main.css" />
</head> </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> <div id="root"></div>
<!-- Scripts --> <!-- Scripts -->

2
apps/client/src/pages/builder/sidebars/left/sections/basics.tsx
View File

@ -18,7 +18,7 @@ export const BasicsSection = () => {
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
{getSectionIcon("basics")} {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> </div>
</header> </header>

2
apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx
View File

@ -100,7 +100,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
{getSectionIcon(id)} {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>
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">

2
apps/client/src/pages/builder/sidebars/left/sections/shared/section-dialog.tsx
View File

@ -149,7 +149,7 @@ export const SectionDialog = <T extends SectionItem>({
<Form {...form}> <Form {...form}>
<ScrollArea> <ScrollArea>
<form <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)} onSubmit={form.handleSubmit(onSubmit)}
> >
<DialogHeader> <DialogHeader>

2
apps/client/src/pages/builder/sidebars/left/sections/shared/section-options.tsx
View File

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

2
apps/client/src/pages/builder/sidebars/right/sections/information.tsx
View File

@ -114,7 +114,7 @@ export const InformationSection = () => {
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
{getSectionIcon("information")} {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> </div>
</header> </header>

2
apps/client/src/pages/builder/sidebars/right/sections/layout.tsx
View File

@ -204,7 +204,7 @@ export const LayoutSection = () => {
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
{getSectionIcon("layout")} {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> </div>
<Tooltip content={t`Reset Layout`}> <Tooltip content={t`Reset Layout`}>

2
apps/client/src/pages/builder/sidebars/right/sections/notes.tsx
View File

@ -14,7 +14,7 @@ export const NotesSection = () => {
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
{getSectionIcon("notes")} {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> </div>
</header> </header>

2
apps/client/src/pages/builder/sidebars/right/sections/page.tsx
View File

@ -23,7 +23,7 @@ export const PageSection = () => {
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
{getSectionIcon("page")} {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> </div>
</header> </header>

2
apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx
View File

@ -36,7 +36,7 @@ export const SharingSection = () => {
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
{getSectionIcon("sharing")} {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> </div>
</header> </header>

2
apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx
View File

@ -20,7 +20,7 @@ export const StatisticsSection = () => {
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
{getSectionIcon("statistics")} {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> </div>
</header> </header>

2
apps/client/src/pages/builder/sidebars/right/sections/template.tsx
View File

@ -16,7 +16,7 @@ export const TemplateSection = () => {
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
{getSectionIcon("template")} {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> </div>
</header> </header>

2
apps/client/src/pages/builder/sidebars/right/sections/theme.tsx
View File

@ -17,7 +17,7 @@ export const ThemeSection = () => {
<header className="flex items-center justify-between"> <header className="flex items-center justify-between">
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
{getSectionIcon("theme")} {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> </div>
</header> </header>

8
apps/client/src/pages/builder/sidebars/right/sections/typography.tsx
View File

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

2
apps/client/src/pages/home/sections/support/index.tsx
View File

@ -51,7 +51,7 @@ export const SupportSection = () => (
</a> </a>
<a href="https://paypal.me/amruthde" rel="noreferrer noopener nofollow" target="_blank"> <a href="https://paypal.me/amruthde" rel="noreferrer noopener nofollow" target="_blank">
{/* eslint-disable-next-line lingui/no-unlocalized-strings */} {/* 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> </a>
</div> </div>

2
apps/client/src/pages/home/sections/templates/index.tsx
View File

@ -42,7 +42,7 @@ export const TemplatesSection = () => (
alt={template} alt={template}
loading="lazy" loading="lazy"
src={`/templates/jpg/${template}.jpg`} 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> </motion.a>
))} ))}

1
package.json
View File

@ -108,6 +108,7 @@
"postcss-import": "^16.1.0", "postcss-import": "^16.1.0",
"postcss-nested": "^6.2.0", "postcss-nested": "^6.2.0",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.9",
"tailwindcss": "^3.4.10", "tailwindcss": "^3.4.10",
"tailwindcss-animate": "^1.0.7", "tailwindcss-animate": "^1.0.7",
"ts-jest": "^29.2.5", "ts-jest": "^29.2.5",

62
pnpm-lock.yaml generated
View File

@ -603,6 +603,9 @@ importers:
prettier: prettier:
specifier: ^3.3.3 specifier: ^3.3.3
version: 3.3.3 version: 3.3.3
prettier-plugin-tailwindcss:
specifier: ^0.6.9
version: 0.6.9(prettier@3.3.3)
tailwindcss: tailwindcss:
specifier: ^3.4.10 specifier: ^3.4.10
version: 3.4.10(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.12))(@types/node@22.5.2)(typescript@5.5.4)) version: 3.4.10(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.12))(@types/node@22.5.2)(typescript@5.5.4))
@ -9316,6 +9319,61 @@ packages:
resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==} resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
engines: {node: '>=6.0.0'} engines: {node: '>=6.0.0'}
prettier-plugin-tailwindcss@0.6.9:
resolution: {integrity: sha512-r0i3uhaZAXYP0At5xGfJH876W3HHGHDp+LCRUJrs57PBeQ6mYHMwr25KH8NPX44F2yGTvdnH7OqCshlQx183Eg==}
engines: {node: '>=14.21.3'}
peerDependencies:
'@ianvs/prettier-plugin-sort-imports': '*'
'@prettier/plugin-pug': '*'
'@shopify/prettier-plugin-liquid': '*'
'@trivago/prettier-plugin-sort-imports': '*'
'@zackad/prettier-plugin-twig-melody': '*'
prettier: ^3.0
prettier-plugin-astro: '*'
prettier-plugin-css-order: '*'
prettier-plugin-import-sort: '*'
prettier-plugin-jsdoc: '*'
prettier-plugin-marko: '*'
prettier-plugin-multiline-arrays: '*'
prettier-plugin-organize-attributes: '*'
prettier-plugin-organize-imports: '*'
prettier-plugin-sort-imports: '*'
prettier-plugin-style-order: '*'
prettier-plugin-svelte: '*'
peerDependenciesMeta:
'@ianvs/prettier-plugin-sort-imports':
optional: true
'@prettier/plugin-pug':
optional: true
'@shopify/prettier-plugin-liquid':
optional: true
'@trivago/prettier-plugin-sort-imports':
optional: true
'@zackad/prettier-plugin-twig-melody':
optional: true
prettier-plugin-astro:
optional: true
prettier-plugin-css-order:
optional: true
prettier-plugin-import-sort:
optional: true
prettier-plugin-jsdoc:
optional: true
prettier-plugin-marko:
optional: true
prettier-plugin-multiline-arrays:
optional: true
prettier-plugin-organize-attributes:
optional: true
prettier-plugin-organize-imports:
optional: true
prettier-plugin-sort-imports:
optional: true
prettier-plugin-style-order:
optional: true
prettier-plugin-svelte:
optional: true
prettier@3.3.3: prettier@3.3.3:
resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==} resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
engines: {node: '>=14'} engines: {node: '>=14'}
@ -22076,6 +22134,10 @@ snapshots:
dependencies: dependencies:
fast-diff: 1.3.0 fast-diff: 1.3.0
prettier-plugin-tailwindcss@0.6.9(prettier@3.3.3):
dependencies:
prettier: 3.3.3
prettier@3.3.3: {} prettier@3.3.3: {}
pretty-format@27.5.1: pretty-format@27.5.1: