Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-07-26 09:54:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix(pdf): apply custom style fontSize to icons and level indicators (#3120) and

Browse Source 
* fix(pdf): apply custom style fontSize to icon and level indicator sizes

Map fontSize from Icon and Level Indicator custom style slots to Phosphor
icon size and level indicator dimensions, since react-pdf icons ignore
fontSize in favor of the size prop.

* fix: separate global icon and scoped level indicator font sizes

Icon slot fontSize now drives all resume icons plus level display
decorations. Level indicator fontSize overrides only within level display.
Shared sizing logic lives in schema; design sidebar preview uses global rules.

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
This commit is contained in:
Amruth Pillai
2026-05-29 00:41:21 +02:00
committed by GitHub
parent c1d11236ae
commit 1414fecade
12 changed files with 350 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/routes/builder/$resumeId/-sidebar/right/sections/design.tsx
+17 -1
View File
@@ -3,6 +3,8 @@ import { Trans } from "@lingui/react/macro";
import { useStore } from "@tanstack/react-form";
import { AnimatePresence, m } from "motion/react";
import { colorDesignSchema, levelDesignSchema } from "@reactive-resume/schema/resume/data";
import { resolveLevelDisplaySizes } from "@reactive-resume/schema/resume/level-display-sizes";
import { resolveStyleRuleFontSize } from "@reactive-resume/schema/resume/style-rules";
import { FormControl, FormItem, FormLabel, FormMessage } from "@reactive-resume/ui/components/form";
import { Input } from "@reactive-resume/ui/components/input";
import { Separator } from "@reactive-resume/ui/components/separator";
@@ -276,6 +278,13 @@ function LevelSectionForm() {
const previewType = useStore(form.store, (s) => s.values.type);
const previewIcon = useStore(form.store, (s) => s.values.icon);
const iconFontSize = resolveStyleRuleFontSize(resume.data, { slot: "icon" });
const levelFontSize = resolveStyleRuleFontSize(resume.data, { slot: "level" });
const { decorationSize, levelIconExplicitSize } = resolveLevelDisplaySizes({
bodyFontSize: resume.data.metadata.typography.body.fontSize,
iconFontSize,
levelFontSize,
});
return (
<form
@@ -294,7 +303,14 @@ function LevelSectionForm() {
style={{ "--page-primary-color": colors.primary, backgroundColor: colors.background } as React.CSSProperties}
className="flex items-center justify-center rounded-md p-6"
>
<LevelDisplay level={3} type={previewType} icon={previewIcon} className="w-full max-w-[220px] justify-center" />
<LevelDisplay
level={3}
type={previewType}
icon={previewIcon}
decorationSizePx={decorationSize}
iconSizePx={levelIconExplicitSize}
className="w-full max-w-[220px] justify-center"
/>
</div>
<div className="flex items-center gap-3">