Merge pull request #71 from Tivix/68-bug-cpf-library---hard-skill-cat…

…egory-has-wrong-font-size [FE][CPF-68] Hard skill category has wrong font size
Tivix · Jul 1, 2024 · c40db8b · c40db8b
2 parents bea5f81 + d96d606
commit c40db8b
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/frontend/src/components/common/AccordionCard/AccordionCard.interface.ts b/frontend/src/components/common/AccordionCard/AccordionCard.interface.ts
@@ -1,4 +1,5 @@
 export interface AccordionCardProps extends React.HTMLAttributes<HTMLDivElement> {
   title: string;
   expandedByDefault?: boolean;
+  small?: boolean;
 }
diff --git a/frontend/src/components/common/AccordionCard/AccordionCard.tsx b/frontend/src/components/common/AccordionCard/AccordionCard.tsx
@@ -8,6 +8,7 @@ export const AccordionCard = ({
   children,
   expandedByDefault,
   className,
+  small,
 }: PropsWithChildren<AccordionCardProps>) => {
   const [isOpen, setOpen] = useState(false);
 
@@ -32,7 +33,7 @@ export const AccordionCard = ({
           )}
           onClick={() => setOpen(!isOpen)}
         >
-          <span className="text-xl font-semibold text-navy-900">{title}</span>
+          <span className={`${small ? 'text-base' : 'text-xl'} font-semibold text-navy-900`}>{title}</span>
           {children ? (
             <div className="flex h-8 w-8 items-center justify-center rounded-full bg-navy-50">
               <ChevronRightIcon className={generateClassNames('rotate-90 text-navy-500', { '-rotate-90': isOpen })} />

diff --git a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx b/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx
@@ -46,6 +46,7 @@ export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVertical
                 className="w-full"
                 title={category}
                 expandedByDefault={shouldBeExpandedByDefault}
+                small
               >
                 <AccordionList
                   items={skills.map(({ name, description }) => ({