From 2af694ceb92882c7534cefd87229a0f24e22c0e3 Mon Sep 17 00:00:00 2001
From: Wiktoria Salamon <wiktoriajuliasalamon@gmail.com>
Date: Tue, 2 Jul 2024 16:33:10 +0200
Subject: [PATCH 1/7] feat: add Typography component

---
 .../common/Typography/Typography.interface.ts | 42 +++++++++++++
 .../common/Typography/Typography.tsx          | 63 +++++++++++++++++++
 .../src/components/common/Typography/index.ts |  1 +
 3 files changed, 106 insertions(+)
 create mode 100644 frontend/src/components/common/Typography/Typography.interface.ts
 create mode 100644 frontend/src/components/common/Typography/Typography.tsx
 create mode 100644 frontend/src/components/common/Typography/index.ts

diff --git a/frontend/src/components/common/Typography/Typography.interface.ts b/frontend/src/components/common/Typography/Typography.interface.ts
new file mode 100644
index 00000000..87ec42a9
--- /dev/null
+++ b/frontend/src/components/common/Typography/Typography.interface.ts
@@ -0,0 +1,42 @@
+export interface TypographyProps {
+  variant?: TypographyVariants;
+}
+
+export type TypographyVariants =
+    'hint/caps-medium'
+    | 'hint/regular'
+    | 'hint/medium'
+    | 'hint/semibold'
+    | 'hint/bold'
+    | 'body-s/regular'
+    | 'body-s/medium'
+    | 'body-s/semibold'
+    | 'body-s/bold'
+    | 'body-m/regular'
+    | 'body-m/medium'
+    | 'body-m/semibold'
+    | 'body-m/bold'
+    | 'body-l/regular'
+    | 'body-l/medium'
+    | 'body-l/semibold'
+    | 'body-l/bold'
+    | 'head-s/regular'
+    | 'head-s/medium'
+    | 'head-s/semibold'
+    | 'head-s/bold'
+    | 'head-m/regular'
+    | 'head-m/medium'
+    | 'head-m/semibold'
+    | 'head-m/bold'
+    | 'head-l/regular'
+    | 'head-l/medium'
+    | 'head-l/semibold'
+    | 'head-l/bold'
+    | 'head-xl/regular'
+    | 'head-xl/medium'
+    | 'head-xl/semibold'
+    | 'head-xl/bold'
+    | 'head-2xl/regular'
+    | 'head-2xl/medium'
+    | 'head-2xl/semibold'
+    | 'head-2xl/bold';
diff --git a/frontend/src/components/common/Typography/Typography.tsx b/frontend/src/components/common/Typography/Typography.tsx
new file mode 100644
index 00000000..51945861
--- /dev/null
+++ b/frontend/src/components/common/Typography/Typography.tsx
@@ -0,0 +1,63 @@
+import { generateClassNames } from '@app/utils';
+import React, {PropsWithChildren} from 'react';
+import {TypographyProps, TypographyVariants} from "@app/components/common/Typography/Typography.interface";
+
+const variantsStyles: {
+    [key in TypographyVariants]: string;
+} = {
+  'hint/caps-medium': 'text-xs tracking-[.6em] uppercase font-medium',
+  'hint/regular': 'text-xs tracking-[.2em] font-normal',
+  'hint/medium': 'text-xs font-medium',
+  'hint/semibold': 'text-xs font-semibold',
+  'hint/bold': 'text-xs font-bold',
+  'body-s/regular': 'text-sm tracking-[.1em] font-normal',
+  'body-s/medium': 'text-sm tracking-[.2em] font-medium',
+  'body-s/semibold': 'text-sm tracking-[.2em] font-semibold',
+  'body-s/bold': 'text-sm tracking-[.1em] font-bold',
+  'body-m/regular': 'text-base tracking-[.2em] font-normal',
+  'body-m/medium': 'text-base font-medium',
+  'body-m/semibold': 'text-base font-semibold',
+  'body-m/bold': 'text-base font-bold',
+  'body-l/regular': 'text-lg font-normal',
+  'body-l/medium': 'text-lg font-medium',
+  'body-l/semibold': 'text-lg font-semibold',
+  'body-l/bold': 'text-xl font-bold',
+  'head-s/regular': 'text-xl font-normal',
+  'head-s/medium': 'text-xl font-medium',
+  'head-s/semibold': 'text-xl font-semibold',
+  'head-s/bold': 'text-xl font-bold',
+  'head-m/regular': 'text-2xl font-normal',
+  'head-m/medium': 'text-2xl font-medium',
+  'head-m/semibold': 'text-2xl font-semibold',
+  'head-m/bold': 'text-2xl font-bold',
+  'head-l/regular': 'text-3xl font-normal',
+  'head-l/medium': 'text-3xl font-medium',
+  'head-l/semibold': 'text-3xl font-semibold',
+  'head-l/bold': 'text-3xl font-bold',
+  'head-xl/regular': 'text-4xl font-normal',
+  'head-xl/medium': 'text-4xl font-medium',
+  'head-xl/semibold': 'text-4xl font-semibold',
+  'head-xl/bold': 'text-4xl font-bold',
+  'head-2xl/regular': 'text-5xl font-normal',
+  'head-2xl/medium': 'text-5xl font-medium',
+  'head-2xl/semibold': 'text-5xl font-semibold',
+  'head-2xl/bold': 'text-5xl font-bold',
+};
+
+export const Typography = ({
+                         variant = 'body-m/regular',
+                         className,
+                         children,
+                       }: PropsWithChildren<TypographyProps>) => {
+  const classnames = generateClassNames(
+      'navy-900',
+      variantsStyles[variant],
+      className,
+  );
+
+  return (
+      <span className={classnames}>
+        {children}
+      </span>
+  );
+};
diff --git a/frontend/src/components/common/Typography/index.ts b/frontend/src/components/common/Typography/index.ts
new file mode 100644
index 00000000..6f8ebcfb
--- /dev/null
+++ b/frontend/src/components/common/Typography/index.ts
@@ -0,0 +1 @@
+export {Typography} from './Typography';

From b3486b75b009ec051d1f53092fbf5314fec43c88 Mon Sep 17 00:00:00 2001
From: Wiktoria Salamon <wiktoriajuliasalamon@gmail.com>
Date: Tue, 2 Jul 2024 18:52:43 +0200
Subject: [PATCH 2/7] feat: add element type to Typography props

---
 .../common/Typography/Typography.interface.ts | 78 ++++++++++---------
 .../common/Typography/Typography.tsx          | 41 +++++-----
 2 files changed, 63 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/common/Typography/Typography.interface.ts b/frontend/src/components/common/Typography/Typography.interface.ts
index 87ec42a9..c2bcc3dc 100644
--- a/frontend/src/components/common/Typography/Typography.interface.ts
+++ b/frontend/src/components/common/Typography/Typography.interface.ts
@@ -1,42 +1,46 @@
 export interface TypographyProps {
   variant?: TypographyVariants;
+  as?: TextElement;
+  className?: string;
 }
 
 export type TypographyVariants =
-    'hint/caps-medium'
-    | 'hint/regular'
-    | 'hint/medium'
-    | 'hint/semibold'
-    | 'hint/bold'
-    | 'body-s/regular'
-    | 'body-s/medium'
-    | 'body-s/semibold'
-    | 'body-s/bold'
-    | 'body-m/regular'
-    | 'body-m/medium'
-    | 'body-m/semibold'
-    | 'body-m/bold'
-    | 'body-l/regular'
-    | 'body-l/medium'
-    | 'body-l/semibold'
-    | 'body-l/bold'
-    | 'head-s/regular'
-    | 'head-s/medium'
-    | 'head-s/semibold'
-    | 'head-s/bold'
-    | 'head-m/regular'
-    | 'head-m/medium'
-    | 'head-m/semibold'
-    | 'head-m/bold'
-    | 'head-l/regular'
-    | 'head-l/medium'
-    | 'head-l/semibold'
-    | 'head-l/bold'
-    | 'head-xl/regular'
-    | 'head-xl/medium'
-    | 'head-xl/semibold'
-    | 'head-xl/bold'
-    | 'head-2xl/regular'
-    | 'head-2xl/medium'
-    | 'head-2xl/semibold'
-    | 'head-2xl/bold';
+  | 'hint/caps-medium'
+  | 'hint/regular'
+  | 'hint/medium'
+  | 'hint/semibold'
+  | 'hint/bold'
+  | 'body-s/regular'
+  | 'body-s/medium'
+  | 'body-s/semibold'
+  | 'body-s/bold'
+  | 'body-m/regular'
+  | 'body-m/medium'
+  | 'body-m/semibold'
+  | 'body-m/bold'
+  | 'body-l/regular'
+  | 'body-l/medium'
+  | 'body-l/semibold'
+  | 'body-l/bold'
+  | 'head-s/regular'
+  | 'head-s/medium'
+  | 'head-s/semibold'
+  | 'head-s/bold'
+  | 'head-m/regular'
+  | 'head-m/medium'
+  | 'head-m/semibold'
+  | 'head-m/bold'
+  | 'head-l/regular'
+  | 'head-l/medium'
+  | 'head-l/semibold'
+  | 'head-l/bold'
+  | 'head-xl/regular'
+  | 'head-xl/medium'
+  | 'head-xl/semibold'
+  | 'head-xl/bold'
+  | 'head-2xl/regular'
+  | 'head-2xl/medium'
+  | 'head-2xl/semibold'
+  | 'head-2xl/bold';
+
+export type TextElement = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
\ No newline at end of file
diff --git a/frontend/src/components/common/Typography/Typography.tsx b/frontend/src/components/common/Typography/Typography.tsx
index 51945861..4fada642 100644
--- a/frontend/src/components/common/Typography/Typography.tsx
+++ b/frontend/src/components/common/Typography/Typography.tsx
@@ -1,9 +1,8 @@
-import { generateClassNames } from '@app/utils';
-import React, {PropsWithChildren} from 'react';
-import {TypographyProps, TypographyVariants} from "@app/components/common/Typography/Typography.interface";
+import React, { PropsWithChildren } from 'react';
+import { TypographyProps, TypographyVariants } from '@app/components/common/Typography/Typography.interface';
 
 const variantsStyles: {
-    [key in TypographyVariants]: string;
+  [key in TypographyVariants]: string;
 } = {
   'hint/caps-medium': 'text-xs tracking-[.6em] uppercase font-medium',
   'hint/regular': 'text-xs tracking-[.2em] font-normal',
@@ -44,20 +43,24 @@ const variantsStyles: {
   'head-2xl/bold': 'text-5xl font-bold',
 };
 
-export const Typography = ({
-                         variant = 'body-m/regular',
-                         className,
-                         children,
-                       }: PropsWithChildren<TypographyProps>) => {
-  const classnames = generateClassNames(
-      'navy-900',
-      variantsStyles[variant],
-      className,
-  );
+export const Typography = ({ variant = 'body-m/regular', as, className, children }: PropsWithChildren<TypographyProps>) => {
+  const classnames = `navy-900 ${variantsStyles[variant]} ${className}`;
 
-  return (
-      <span className={classnames}>
-        {children}
-      </span>
-  );
+  switch (as) {
+    case 'h1':
+      return <h1 className={classnames}>{children}</h1>;
+    case 'h2':
+      return <h2 className={classnames}>{children}</h2>;
+    case 'h3':
+      return <h3 className={classnames}>{children}</h3>;
+    case 'h4':
+      return <h4 className={classnames}>{children}</h4>;
+    case 'h5':
+      return <h5 className={classnames}>{children}</h5>;
+    case 'h6':
+      return <p className={classnames}>{children}</p>;
+    case 'p':
+    default:
+      return <p className={classnames}>{children}</p>;
+  }
 };

From 1a79fdc4b88d9e9deaee9f0845aaef701d259a75 Mon Sep 17 00:00:00 2001
From: Wiktoria Salamon <wiktoriajuliasalamon@gmail.com>
Date: Tue, 2 Jul 2024 19:09:29 +0200
Subject: [PATCH 3/7] linter

---
 .../components/common/Typography/Typography.interface.ts   | 2 +-
 frontend/src/components/common/Typography/Typography.tsx   | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/common/Typography/Typography.interface.ts b/frontend/src/components/common/Typography/Typography.interface.ts
index c2bcc3dc..8873a884 100644
--- a/frontend/src/components/common/Typography/Typography.interface.ts
+++ b/frontend/src/components/common/Typography/Typography.interface.ts
@@ -43,4 +43,4 @@ export type TypographyVariants =
   | 'head-2xl/semibold'
   | 'head-2xl/bold';
 
-export type TextElement = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
\ No newline at end of file
+export type TextElement = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
diff --git a/frontend/src/components/common/Typography/Typography.tsx b/frontend/src/components/common/Typography/Typography.tsx
index 4fada642..4e08e1b1 100644
--- a/frontend/src/components/common/Typography/Typography.tsx
+++ b/frontend/src/components/common/Typography/Typography.tsx
@@ -43,7 +43,12 @@ const variantsStyles: {
   'head-2xl/bold': 'text-5xl font-bold',
 };
 
-export const Typography = ({ variant = 'body-m/regular', as, className, children }: PropsWithChildren<TypographyProps>) => {
+export const Typography = ({
+  variant = 'body-m/regular',
+  as,
+  className,
+  children,
+}: PropsWithChildren<TypographyProps>) => {
   const classnames = `navy-900 ${variantsStyles[variant]} ${className}`;
 
   switch (as) {

From b6370ff4dce5bed8dbaa8c0839c447c0e94c233a Mon Sep 17 00:00:00 2001
From: Wiktoria Salamon <wiktoriajuliasalamon@gmail.com>
Date: Wed, 3 Jul 2024 11:15:41 +0200
Subject: [PATCH 4/7] refactor: use typography for all copies in the app

---
 frontend/src/app/(app)/documentation/page.tsx |  4 +-
 frontend/src/app/(app)/library/page.tsx       |  5 +-
 frontend/src/app/(app)/my-space/page.tsx      |  4 +-
 frontend/src/app/(app)/page.tsx               |  7 ++-
 frontend/src/app/(app)/people/page.tsx        |  4 +-
 .../common/AccordionCard/AccordionCard.tsx    | 45 ++++++++-------
 .../AccordionList/AccordionListItem.tsx       | 27 +++++----
 .../common/BucketCard/BucketCard.tsx          |  5 +-
 .../common/LadderCard/LadderCard.tsx          |  3 +-
 .../common/Typography/Typography.tsx          | 55 ++++++++++---------
 .../src/components/common/Typography/index.ts |  2 +-
 .../AdvancementLevel/AdvancementLevel.tsx     | 21 ++++---
 .../modules/Breadcrumbs/Breadcrumbs.tsx       |  8 +--
 .../modules/BucketDetails/BucketDetails.tsx   |  5 +-
 .../modules/LadderDetails/LadderDetails.tsx   | 19 +++----
 .../modules/LadderTabs/LadderTabs.tsx         |  3 +-
 16 files changed, 117 insertions(+), 100 deletions(-)

diff --git a/frontend/src/app/(app)/documentation/page.tsx b/frontend/src/app/(app)/documentation/page.tsx
index 5a46bdc2..05b6d576 100644
--- a/frontend/src/app/(app)/documentation/page.tsx
+++ b/frontend/src/app/(app)/documentation/page.tsx
@@ -1,7 +1,9 @@
+import {Typography} from "@app/components/common/Typography";
+
 export default function Documentation() {
   return (
     <div>
-      <h1 className="mb-10 text-lg font-semibold leading-6 text-navy-900">Documentation</h1>
+      <Typography className="mb-10" variant="body-l/semibold" as="h1">Documentation</Typography>
     </div>
   );
 }
diff --git a/frontend/src/app/(app)/library/page.tsx b/frontend/src/app/(app)/library/page.tsx
index 01de50c2..071785e3 100644
--- a/frontend/src/app/(app)/library/page.tsx
+++ b/frontend/src/app/(app)/library/page.tsx
@@ -1,13 +1,14 @@
 import { LadderCard } from '@app/components/common/LadderCard';
 import { getLadders } from '@app/api/ladder';
+import {Typography} from "@app/components/common/Typography";
 
 export default async function LibraryPage() {
   const data = await getLadders();
 
   return (
     <div>
-      <h1 className="mb-10 text-lg font-semibold leading-6 text-navy-900">CPF Library</h1>
-      <p className="mb-6 tracking-wide text-navy-600">Select a career path to view the details.</p>
+      <Typography className="mb-10" variant="body-l/semibold" as="h1">CPF Library</Typography>
+      <Typography className="mb-6 text-navy-600" variant="body-m/regular">Select a career path to view the details.</Typography>
       <div className="grid grid-cols-3 gap-6">
         {data.map((ladder) => (
           <LadderCard key={ladder.ladderSlug} {...ladder} />
diff --git a/frontend/src/app/(app)/my-space/page.tsx b/frontend/src/app/(app)/my-space/page.tsx
index 0f62e372..4fabc8b9 100644
--- a/frontend/src/app/(app)/my-space/page.tsx
+++ b/frontend/src/app/(app)/my-space/page.tsx
@@ -1,7 +1,9 @@
+import { Typography } from '@app/components/common/Typography';
+
 export default function MySpace() {
   return (
     <div>
-      <h1 className="mb-10 text-lg font-semibold leading-6 text-navy-900">My Space</h1>
+      <Typography className="mb-10" variant="body-l/semibold" as="h1">My Space</Typography>
     </div>
   );
 }
diff --git a/frontend/src/app/(app)/page.tsx b/frontend/src/app/(app)/page.tsx
index 625d85d8..b3f11323 100644
--- a/frontend/src/app/(app)/page.tsx
+++ b/frontend/src/app/(app)/page.tsx
@@ -1,5 +1,6 @@
+import { redirect } from 'next/navigation';
+import { routes } from '@app/constants';
+
 export default function Home() {
-  return (
-    <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">We shall see</div>
-  );
+  redirect(routes.mySpace.index);
 }
diff --git a/frontend/src/app/(app)/people/page.tsx b/frontend/src/app/(app)/people/page.tsx
index 5cf04b3e..8308513b 100644
--- a/frontend/src/app/(app)/people/page.tsx
+++ b/frontend/src/app/(app)/people/page.tsx
@@ -1,7 +1,9 @@
+import {Typography} from "@app/components/common/Typography";
+
 export default function People() {
   return (
     <div>
-      <h1 className="mb-10 text-lg font-semibold leading-6 text-navy-900">People</h1>
+      <Typography className="mb-10" variant="body-l/semibold" as="h1">People</Typography>
     </div>
   );
 }
diff --git a/frontend/src/components/common/AccordionCard/AccordionCard.tsx b/frontend/src/components/common/AccordionCard/AccordionCard.tsx
index 858fc88f..88da93fe 100644
--- a/frontend/src/components/common/AccordionCard/AccordionCard.tsx
+++ b/frontend/src/components/common/AccordionCard/AccordionCard.tsx
@@ -2,6 +2,7 @@ import { PropsWithChildren, useEffect, useState } from 'react';
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
 import { generateClassNames } from '@app/utils';
 import { AccordionCardProps } from './AccordionCard.interface';
+import {Typography} from "@app/components/common/Typography";
 
 export const AccordionCard = ({
   title,
@@ -20,27 +21,29 @@ export const AccordionCard = ({
 
   return (
     <div className={className}>
-      <h2>
-        <button
-          type="button"
-          className={generateClassNames(
-            'flex w-full items-center justify-between rounded-2xl border border-navy-200 p-6',
-            {
-              'hover:bg-navy-100': !isOpen && children,
-              'hover:bg-transparent rounded-b-none border-b-0 pb-0': isOpen,
-              'cursor-auto': !children,
-            },
-          )}
-          onClick={() => setOpen(!isOpen)}
-        >
-          <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 })} />
-            </div>
-          ) : undefined}
-        </button>
-      </h2>
+      <button
+        type="button"
+        className={generateClassNames(
+          'flex w-full items-center justify-between rounded-2xl border border-navy-200 p-6',
+          {
+            'hover:bg-navy-100': !isOpen && children,
+            'hover:bg-transparent rounded-b-none border-b-0 pb-0': isOpen,
+            'cursor-auto': !children,
+          },
+        )}
+        onClick={() => setOpen(!isOpen)}
+      >
+        {small ? (
+            <Typography variant="body-m/semibold">{title}</Typography>
+        ): (
+            <Typography variant="head-s/semibold">{title}</Typography>
+        )}
+        {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 })} />
+          </div>
+        ) : undefined}
+      </button>
       {children ? (
         <div className={generateClassNames('rounded-b-2xl border border-t-0 border-navy-200 p-6', { hidden: !isOpen })}>
           {children}
diff --git a/frontend/src/components/common/AccordionList/AccordionListItem.tsx b/frontend/src/components/common/AccordionList/AccordionListItem.tsx
index bc4c0246..a8e9f9a8 100644
--- a/frontend/src/components/common/AccordionList/AccordionListItem.tsx
+++ b/frontend/src/components/common/AccordionList/AccordionListItem.tsx
@@ -2,26 +2,25 @@ import { PropsWithChildren, useState } from 'react';
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
 import { generateClassNames } from '@app/utils';
 import { AccordionListItemProps } from './AccordionList.interface';
+import {Typography} from "@app/components/common/Typography";
 
 export const AccordionListItem = ({ title, children }: PropsWithChildren<AccordionListItemProps>) => {
   const [isOpen, setOpen] = useState(false);
 
   return (
     <div className="border-b border-b-navy-200 px-2 py-4">
-      <h3>
-        <button
-          type="button"
-          className={generateClassNames('flex w-full items-center justify-between', { 'cursor-auto': !children })}
-          onClick={() => setOpen(!isOpen)}
-        >
-          <span className="text-left text-base font-medium text-navy-600">{title}</span>
-          <div className="flex min-h-10 min-w-10 items-center justify-center">
-            {children ? (
-              <ChevronRightIcon className={generateClassNames('rotate-90 text-navy-500', { '-rotate-90': isOpen })} />
-            ) : undefined}
-          </div>
-        </button>
-      </h3>
+      <button
+        type="button"
+        className={generateClassNames('flex w-full items-center justify-between', { 'cursor-auto': !children })}
+        onClick={() => setOpen(!isOpen)}
+      >
+        <Typography variant="body-m/medium" className="text-left text-navy-600">{title}</Typography>
+        <div className="flex min-h-10 min-w-10 items-center justify-center">
+          {children ? (
+            <ChevronRightIcon className={generateClassNames('rotate-90 text-navy-500', { '-rotate-90': isOpen })} />
+          ) : undefined}
+        </div>
+      </button>
       {children ? (
         <div className={generateClassNames('mt-4 text-sm font-normal text-navy-600', { hidden: !isOpen })}>
           {children}
diff --git a/frontend/src/components/common/BucketCard/BucketCard.tsx b/frontend/src/components/common/BucketCard/BucketCard.tsx
index 07580ebd..13c1e4c8 100644
--- a/frontend/src/components/common/BucketCard/BucketCard.tsx
+++ b/frontend/src/components/common/BucketCard/BucketCard.tsx
@@ -2,6 +2,7 @@ import Link from 'next/link';
 import { BucketCardProps } from './BucketCard.interface';
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
 import { routes } from '@app/constants';
+import { Typography } from '@app/components/common/Typography';
 
 export const BucketCard = ({ bucket, ladderSlug }: BucketCardProps) => {
   const { bucketSlug, bucketName, description } = bucket;
@@ -12,12 +13,12 @@ export const BucketCard = ({ bucket, ladderSlug }: BucketCardProps) => {
       className="flex cursor-pointer flex-col gap-2 rounded-2xl border border-navy-200 bg-white p-6 hover:bg-navy-100"
     >
       <div className="flex justify-between">
-        <h2 className="text-xl font-semibold text-navy-900">{bucketName}</h2>
+        <Typography variant="head-s/semibold" as="h2">{bucketName}</Typography>
         <div className="flex h-8 w-8 items-center justify-center rounded-full bg-navy-50">
           <ChevronRightIcon className="text-navy-500" />
         </div>
       </div>
-      <p className="text-base text-navy-600">{description}</p>
+      <Typography variant="body-m/regular" className="text-navy-600">{description}</Typography>
     </Link>
   );
 };
diff --git a/frontend/src/components/common/LadderCard/LadderCard.tsx b/frontend/src/components/common/LadderCard/LadderCard.tsx
index 21528538..a0fe6988 100644
--- a/frontend/src/components/common/LadderCard/LadderCard.tsx
+++ b/frontend/src/components/common/LadderCard/LadderCard.tsx
@@ -1,12 +1,13 @@
 import Link from 'next/link';
 import { LadderCardInterface } from './LadderCard.interface';
 import { routes } from '@app/constants';
+import {Typography} from "@app/components/common/Typography";
 
 export const LadderCard = ({ ladderName, ladderSlug }: LadderCardInterface) => (
   <Link
     href={`${routes.library.index}/${ladderSlug}`}
     className="flex h-44 cursor-pointer items-center justify-center rounded-2xl border border-navy-200 bg-white hover:bg-navy-100"
   >
-    <h2 className="text-l text-navy-900">{ladderName}</h2>
+    <Typography as="h2" variant="body-l/semibold">{ladderName}</Typography>
   </Link>
 );
diff --git a/frontend/src/components/common/Typography/Typography.tsx b/frontend/src/components/common/Typography/Typography.tsx
index 4e08e1b1..c56ca1a2 100644
--- a/frontend/src/components/common/Typography/Typography.tsx
+++ b/frontend/src/components/common/Typography/Typography.tsx
@@ -1,19 +1,20 @@
 import React, { PropsWithChildren } from 'react';
 import { TypographyProps, TypographyVariants } from '@app/components/common/Typography/Typography.interface';
+import {generateClassNames} from "@app/utils";
 
 const variantsStyles: {
   [key in TypographyVariants]: string;
 } = {
-  'hint/caps-medium': 'text-xs tracking-[.6em] uppercase font-medium',
-  'hint/regular': 'text-xs tracking-[.2em] font-normal',
+  'hint/caps-medium': 'text-xs tracking-widest uppercase font-medium',
+  'hint/regular': 'text-xs tracking-wider font-normal',
   'hint/medium': 'text-xs font-medium',
   'hint/semibold': 'text-xs font-semibold',
   'hint/bold': 'text-xs font-bold',
-  'body-s/regular': 'text-sm tracking-[.1em] font-normal',
-  'body-s/medium': 'text-sm tracking-[.2em] font-medium',
-  'body-s/semibold': 'text-sm tracking-[.2em] font-semibold',
-  'body-s/bold': 'text-sm tracking-[.1em] font-bold',
-  'body-m/regular': 'text-base tracking-[.2em] font-normal',
+  'body-s/regular': 'text-sm tracking-wide font-normal',
+  'body-s/medium': 'text-sm tracking-wider font-medium',
+  'body-s/semibold': 'text-sm tracking-wider font-semibold',
+  'body-s/bold': 'text-sm tracking-wide font-bold',
+  'body-m/regular': 'text-base tracking-wider font-normal',
   'body-m/medium': 'text-base font-medium',
   'body-m/semibold': 'text-base font-semibold',
   'body-m/bold': 'text-base font-bold',
@@ -49,23 +50,27 @@ export const Typography = ({
   className,
   children,
 }: PropsWithChildren<TypographyProps>) => {
-  const classnames = `navy-900 ${variantsStyles[variant]} ${className}`;
+  const classnames = generateClassNames(
+      'text-navy-900',
+      variantsStyles[variant],
+      className ?? '',
+  );
 
-  switch (as) {
-    case 'h1':
-      return <h1 className={classnames}>{children}</h1>;
-    case 'h2':
-      return <h2 className={classnames}>{children}</h2>;
-    case 'h3':
-      return <h3 className={classnames}>{children}</h3>;
-    case 'h4':
-      return <h4 className={classnames}>{children}</h4>;
-    case 'h5':
-      return <h5 className={classnames}>{children}</h5>;
-    case 'h6':
-      return <p className={classnames}>{children}</p>;
-    case 'p':
-    default:
-      return <p className={classnames}>{children}</p>;
-  }
+    switch (as) {
+      case 'h1':
+        return <h1 className={classnames}>{children}</h1>;
+      case 'h2':
+        return <h2 className={classnames}>{children}</h2>;
+      case 'h3':
+        return <h3 className={classnames}>{children}</h3>;
+      case 'h4':
+        return <h4 className={classnames}>{children}</h4>;
+      case 'h5':
+        return <h5 className={classnames}>{children}</h5>;
+      case 'h6':
+        return <p className={classnames}>{children}</p>;
+      case 'p':
+      default:
+        return <p className={classnames}>{children}</p>;
+    }
 };
diff --git a/frontend/src/components/common/Typography/index.ts b/frontend/src/components/common/Typography/index.ts
index 6f8ebcfb..5cbb1cc8 100644
--- a/frontend/src/components/common/Typography/index.ts
+++ b/frontend/src/components/common/Typography/index.ts
@@ -1 +1 @@
-export {Typography} from './Typography';
+export { Typography } from './Typography';
diff --git a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx b/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx
index 86df7a56..c2b9780a 100644
--- a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx
+++ b/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx
@@ -6,6 +6,8 @@ import { Modal } from '@app/components/common/Modal';
 import { AdvancementLevelProps } from './AdvancemetLevel.interface';
 import { useAdvancementLevel } from '@app/components/modules/AdvancementLevel/AdvancementLevel.hooks';
 import { Markdown } from '@app/components/common/Markdown';
+import {Typography} from "@app/components/common/Typography";
+import {Button} from "@app/components/common/Button";
 
 export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVerticalLine, data }) => {
   const { hideModal, openModal, toggleAccordionOpen, modalOpen, accordionOpen } = useAdvancementLevel();
@@ -14,7 +16,7 @@ export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVertical
   const shouldBeExpandedByDefault = Object.keys(data.categories).length === 1;
 
   return (
-    <div className="flex flex-row">
+    <div className="flex flex-row gap-2">
       <div className="relative flex flex-col items-center">
         <button
           className="mb-2 mt-4 flex h-6 w-6 items-center justify-center rounded-full bg-blue-800 hover:opacity-50"
@@ -24,23 +26,20 @@ export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVertical
         </button>
         {showVerticalLine && <div className="absolute left-3 top-12 h-[calc(100%-40px)] w-[1.5px] bg-blue-800" />}
       </div>
-      <div className="mb-4 ml-2 flex w-full flex-col gap-4">
+      <div className="mb-4 ml-4 flex w-full flex-col gap-4">
         <button
-          className={`flex w-full cursor-pointer flex-col gap-4 rounded-lg p-4 ${!accordionOpen && 'hover:bg-navy-50'}`}
+          className={`flex w-full cursor-pointer flex-col gap-4 rounded-lg ${!accordionOpen && 'hover:bg-navy-50'}`}
           onClick={toggleAccordionOpen}
         >
-          <h3>Advancement level {advancementLevel}</h3>
-          <p className="text-base tracking-wide text-navy-600">{description}</p>
+          <Typography as="h3" variant="body-l/semibold">Advancement level {advancementLevel}</Typography>
+          <Typography variant="body-m/regular" className="text-navy-600">{description}</Typography>
         </button>
         {accordionOpen && (
           <>
             {projects.length > 0 && (
-              <button
-                className="w-fit text-sm font-semibold text-blue-800 hover:text-blue-900 hover:underline hover:underline-offset-4"
-                onClick={openModal}
-              >
-                An example way to pass level
-              </button>
+                <Button variant="link" onClick={openModal} className="w-fit text-sm">
+                  An example way to pass level
+                </Button>
             )}
             {Object.entries(categories).map(([category, skills]) => (
               <AccordionCard
diff --git a/frontend/src/components/modules/Breadcrumbs/Breadcrumbs.tsx b/frontend/src/components/modules/Breadcrumbs/Breadcrumbs.tsx
index dbf988fc..f65b84f4 100644
--- a/frontend/src/components/modules/Breadcrumbs/Breadcrumbs.tsx
+++ b/frontend/src/components/modules/Breadcrumbs/Breadcrumbs.tsx
@@ -2,6 +2,7 @@ import Link from 'next/link';
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
 import { BreadcrumbsProps } from './Breadcrumbs.interface';
 import { generateClassNames } from '@app/utils';
+import {Typography} from "@app/components/common/Typography";
 
 export const Breadcrumbs = ({ breadcrumbs }: BreadcrumbsProps) => {
   return (
@@ -15,12 +16,11 @@ export const Breadcrumbs = ({ breadcrumbs }: BreadcrumbsProps) => {
               )}
               <Link
                 href={breadcrumb.href}
-                className={generateClassNames('text-lg font-semibold leading-6 text-navy-600 hover:text-navy-900', {
-                  'text-navy-900': breadcrumb.current,
-                })}
                 aria-current={breadcrumb.current ? 'page' : undefined}
               >
-                {breadcrumb.label}
+                <Typography variant="body-l/semibold" className={generateClassNames('text-navy-600 hover:text-navy-900', {
+                  'text-navy-900': breadcrumb.current,
+                })}>{breadcrumb.label}</Typography>
               </Link>
             </div>
           </li>
diff --git a/frontend/src/components/modules/BucketDetails/BucketDetails.tsx b/frontend/src/components/modules/BucketDetails/BucketDetails.tsx
index 1cbf64c9..ba0a84e1 100644
--- a/frontend/src/components/modules/BucketDetails/BucketDetails.tsx
+++ b/frontend/src/components/modules/BucketDetails/BucketDetails.tsx
@@ -1,5 +1,6 @@
 import { BucketDetailsProps } from './BucketDetails.interface';
 import { AdvancementLevel } from '@app/components/modules/AdvancementLevel';
+import {Typography} from "@app/components/common/Typography";
 
 export const BucketDetails: React.FC<BucketDetailsProps> = ({ data }) => {
   const { bucketName, description, advancementLevels } = data;
@@ -9,8 +10,8 @@ export const BucketDetails: React.FC<BucketDetailsProps> = ({ data }) => {
       <div className="mx-28 flex flex-col gap-8 rounded-2xl bg-white px-20 py-12">
         <div className="flex justify-between">
           <div className="flex flex-col gap-3">
-            <h2 className="text-2xl font-semibold text-navy-900">{bucketName}</h2>
-            <p className="text-base tracking-wide text-navy-600">{description}</p>
+            <Typography variant="head-m/semibold" as="h2">{bucketName}</Typography>
+            <Typography variant="body-m/regular" className="text-navy-600">{description}</Typography>
           </div>
         </div>
         <div className="flex flex-col">
diff --git a/frontend/src/components/modules/LadderDetails/LadderDetails.tsx b/frontend/src/components/modules/LadderDetails/LadderDetails.tsx
index f395c996..c1c1b33e 100644
--- a/frontend/src/components/modules/LadderDetails/LadderDetails.tsx
+++ b/frontend/src/components/modules/LadderDetails/LadderDetails.tsx
@@ -5,20 +5,19 @@ import { LadderBandBucket } from '@app/types/common';
 import { BucketCard } from '@app/components/common/BucketCard';
 import { AccordionCard } from '@app/components/common/AccordionCard';
 import { AccordionList } from '@app/components/common/AccordionList';
+import {Typography} from "@app/components/common/Typography";
 
 export const LadderDetails = ({ ladder, ladderName, band, ladderSlug }: LadderDetailsProps) => {
   return (
     <div className="flex flex-col gap-8 rounded-2xl bg-white px-20 py-12">
       <div className="flex justify-between">
         <div className="flex flex-col gap-3">
-          <h2 className="text-2xl font-semibold text-navy-900">
-            Band {band}: {ladderName}
-          </h2>
-          <p className="text-lg font-medium text-navy-600">Salary range: {ladder.salaryRange}</p>
+          <Typography as="h2" variant="head-m/semibold">Band {band}: {ladderName}</Typography>
+          <Typography variant="body-l/medium" className="text-navy-600">Salary range: {ladder.salaryRange}</Typography>
         </div>
         <div className="flex flex-col items-center rounded-xl border border-navy-200 p-4">
-          <div className="flex justify-between gap-2 text-navy-600">
-            <p>Threshold</p>
+          <div className="flex justify-between gap-2">
+            <Typography variant="body-m/medium" className="text-navy-600">Threshold</Typography>
             <InfoIcon
               className="text-navy-600"
               data-tooltip-id="threshold-info-tooltip"
@@ -27,13 +26,13 @@ export const LadderDetails = ({ ladder, ladderName, band, ladderSlug }: LadderDe
             />
             <Tooltip id="threshold-info-tooltip" />
           </div>
-          <p className="text-2xl font-bold">{ladder.threshold}</p>
+          <Typography variant="head-m/bold">{ladder.threshold}</Typography>
         </div>
       </div>
       <div className="flex flex-col gap-6">
-        <p className="text-base tracking-wide text-navy-600">Buckets you need to complete to get on this band:</p>
+        <Typography variant="body-m/regular" className="text-navy-600">Buckets you need to complete to get on this band:</Typography>
         <div className="flex flex-col gap-4">
-          <p className="text-xs uppercase tracking-wide text-navy-600">Hard skills</p>
+          <Typography variant="hint/caps-medium" className="text-navy-600">Hard skills</Typography>
           <div className="flex flex-col gap-6">
             {ladder.hardSkillBuckets.map((bucket: LadderBandBucket) => (
               <BucketCard bucket={bucket} key={bucket.bucketSlug} ladderSlug={ladderSlug} />
@@ -41,7 +40,7 @@ export const LadderDetails = ({ ladder, ladderName, band, ladderSlug }: LadderDe
           </div>
         </div>
         <div className="flex flex-col gap-4">
-          <p className="text-xs uppercase tracking-wide text-navy-600">Soft skills</p>
+          <Typography variant="hint/caps-medium" className="text-navy-600">Soft skills</Typography>
           <div className="flex flex-col gap-6">
             <AccordionCard title="Time management">
               <div className="flex flex-col gap-6">
diff --git a/frontend/src/components/modules/LadderTabs/LadderTabs.tsx b/frontend/src/components/modules/LadderTabs/LadderTabs.tsx
index fb98b404..4a61168d 100644
--- a/frontend/src/components/modules/LadderTabs/LadderTabs.tsx
+++ b/frontend/src/components/modules/LadderTabs/LadderTabs.tsx
@@ -4,6 +4,7 @@ import { generateBandGrouping } from './utils';
 import { LadderTabsProps, LadderInterface } from './LadderTabs.interface';
 import { generateClassNames } from '@app/utils';
 import { Button } from '@app/components/common/Button';
+import {Typography} from "@app/components/common/Typography";
 
 export const LadderTabs: React.FC<LadderTabsProps> = ({ maximumLadders, activeLadder, ladderOnClick }) => {
   const generateLadders = useCallback((maxLadders: number): LadderInterface => generateBandGrouping(maxLadders), []);
@@ -15,7 +16,7 @@ export const LadderTabs: React.FC<LadderTabsProps> = ({ maximumLadders, activeLa
       {Object.keys(ladders).map((positionName: string, index: number) => (
         <Fragment key={positionName}>
           <div className="rounded-2xl bg-white px-2 py-3">
-            <h3 className="mb-2 text-center text-xs uppercase tracking-wide text-navy-600">{positionName}</h3>
+            <Typography as="h3" variant="hint/caps-medium" className="mb-2 text-center text-navy-600">{positionName}</Typography>
             {ladders[positionName].map((ladder: number, index: number) => (
               <Fragment key={ladder.toString()}>
                 <Button

From 79df2cd86755b49ebaecdefbae6f14bc8b79ed06 Mon Sep 17 00:00:00 2001
From: Wiktoria Salamon <wiktoriajuliasalamon@gmail.com>
Date: Wed, 3 Jul 2024 11:16:01 +0200
Subject: [PATCH 5/7] linter

---
 frontend/src/app/(app)/documentation/page.tsx |  6 ++-
 frontend/src/app/(app)/library/page.tsx       | 10 +++--
 frontend/src/app/(app)/my-space/page.tsx      |  4 +-
 frontend/src/app/(app)/people/page.tsx        |  6 ++-
 .../common/AccordionCard/AccordionCard.tsx    |  8 ++--
 .../AccordionList/AccordionListItem.tsx       |  6 ++-
 .../common/BucketCard/BucketCard.tsx          |  8 +++-
 .../common/LadderCard/LadderCard.tsx          |  6 ++-
 .../common/Typography/Typography.tsx          | 42 +++++++++----------
 .../AdvancementLevel/AdvancementLevel.tsx     | 18 ++++----
 .../modules/Breadcrumbs/Breadcrumbs.tsx       | 18 ++++----
 .../modules/BucketDetails/BucketDetails.tsx   | 10 +++--
 .../modules/LadderDetails/LadderDetails.tsx   | 26 ++++++++----
 .../modules/LadderTabs/LadderTabs.tsx         |  6 ++-
 14 files changed, 106 insertions(+), 68 deletions(-)

diff --git a/frontend/src/app/(app)/documentation/page.tsx b/frontend/src/app/(app)/documentation/page.tsx
index 05b6d576..b530f52b 100644
--- a/frontend/src/app/(app)/documentation/page.tsx
+++ b/frontend/src/app/(app)/documentation/page.tsx
@@ -1,9 +1,11 @@
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export default function Documentation() {
   return (
     <div>
-      <Typography className="mb-10" variant="body-l/semibold" as="h1">Documentation</Typography>
+      <Typography className="mb-10" variant="body-l/semibold" as="h1">
+        Documentation
+      </Typography>
     </div>
   );
 }
diff --git a/frontend/src/app/(app)/library/page.tsx b/frontend/src/app/(app)/library/page.tsx
index 071785e3..a04ac124 100644
--- a/frontend/src/app/(app)/library/page.tsx
+++ b/frontend/src/app/(app)/library/page.tsx
@@ -1,14 +1,18 @@
 import { LadderCard } from '@app/components/common/LadderCard';
 import { getLadders } from '@app/api/ladder';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export default async function LibraryPage() {
   const data = await getLadders();
 
   return (
     <div>
-      <Typography className="mb-10" variant="body-l/semibold" as="h1">CPF Library</Typography>
-      <Typography className="mb-6 text-navy-600" variant="body-m/regular">Select a career path to view the details.</Typography>
+      <Typography className="mb-10" variant="body-l/semibold" as="h1">
+        CPF Library
+      </Typography>
+      <Typography className="mb-6 text-navy-600" variant="body-m/regular">
+        Select a career path to view the details.
+      </Typography>
       <div className="grid grid-cols-3 gap-6">
         {data.map((ladder) => (
           <LadderCard key={ladder.ladderSlug} {...ladder} />
diff --git a/frontend/src/app/(app)/my-space/page.tsx b/frontend/src/app/(app)/my-space/page.tsx
index 4fabc8b9..86bc590b 100644
--- a/frontend/src/app/(app)/my-space/page.tsx
+++ b/frontend/src/app/(app)/my-space/page.tsx
@@ -3,7 +3,9 @@ import { Typography } from '@app/components/common/Typography';
 export default function MySpace() {
   return (
     <div>
-      <Typography className="mb-10" variant="body-l/semibold" as="h1">My Space</Typography>
+      <Typography className="mb-10" variant="body-l/semibold" as="h1">
+        My Space
+      </Typography>
     </div>
   );
 }
diff --git a/frontend/src/app/(app)/people/page.tsx b/frontend/src/app/(app)/people/page.tsx
index 8308513b..98569ca0 100644
--- a/frontend/src/app/(app)/people/page.tsx
+++ b/frontend/src/app/(app)/people/page.tsx
@@ -1,9 +1,11 @@
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export default function People() {
   return (
     <div>
-      <Typography className="mb-10" variant="body-l/semibold" as="h1">People</Typography>
+      <Typography className="mb-10" variant="body-l/semibold" as="h1">
+        People
+      </Typography>
     </div>
   );
 }
diff --git a/frontend/src/components/common/AccordionCard/AccordionCard.tsx b/frontend/src/components/common/AccordionCard/AccordionCard.tsx
index 88da93fe..420c0209 100644
--- a/frontend/src/components/common/AccordionCard/AccordionCard.tsx
+++ b/frontend/src/components/common/AccordionCard/AccordionCard.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren, useEffect, useState } from 'react';
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
 import { generateClassNames } from '@app/utils';
 import { AccordionCardProps } from './AccordionCard.interface';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export const AccordionCard = ({
   title,
@@ -34,9 +34,9 @@ export const AccordionCard = ({
         onClick={() => setOpen(!isOpen)}
       >
         {small ? (
-            <Typography variant="body-m/semibold">{title}</Typography>
-        ): (
-            <Typography variant="head-s/semibold">{title}</Typography>
+          <Typography variant="body-m/semibold">{title}</Typography>
+        ) : (
+          <Typography variant="head-s/semibold">{title}</Typography>
         )}
         {children ? (
           <div className="flex h-8 w-8 items-center justify-center rounded-full bg-navy-50">
diff --git a/frontend/src/components/common/AccordionList/AccordionListItem.tsx b/frontend/src/components/common/AccordionList/AccordionListItem.tsx
index a8e9f9a8..be72f523 100644
--- a/frontend/src/components/common/AccordionList/AccordionListItem.tsx
+++ b/frontend/src/components/common/AccordionList/AccordionListItem.tsx
@@ -2,7 +2,7 @@ import { PropsWithChildren, useState } from 'react';
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
 import { generateClassNames } from '@app/utils';
 import { AccordionListItemProps } from './AccordionList.interface';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export const AccordionListItem = ({ title, children }: PropsWithChildren<AccordionListItemProps>) => {
   const [isOpen, setOpen] = useState(false);
@@ -14,7 +14,9 @@ export const AccordionListItem = ({ title, children }: PropsWithChildren<Accordi
         className={generateClassNames('flex w-full items-center justify-between', { 'cursor-auto': !children })}
         onClick={() => setOpen(!isOpen)}
       >
-        <Typography variant="body-m/medium" className="text-left text-navy-600">{title}</Typography>
+        <Typography variant="body-m/medium" className="text-left text-navy-600">
+          {title}
+        </Typography>
         <div className="flex min-h-10 min-w-10 items-center justify-center">
           {children ? (
             <ChevronRightIcon className={generateClassNames('rotate-90 text-navy-500', { '-rotate-90': isOpen })} />
diff --git a/frontend/src/components/common/BucketCard/BucketCard.tsx b/frontend/src/components/common/BucketCard/BucketCard.tsx
index 13c1e4c8..e1dfb279 100644
--- a/frontend/src/components/common/BucketCard/BucketCard.tsx
+++ b/frontend/src/components/common/BucketCard/BucketCard.tsx
@@ -13,12 +13,16 @@ export const BucketCard = ({ bucket, ladderSlug }: BucketCardProps) => {
       className="flex cursor-pointer flex-col gap-2 rounded-2xl border border-navy-200 bg-white p-6 hover:bg-navy-100"
     >
       <div className="flex justify-between">
-        <Typography variant="head-s/semibold" as="h2">{bucketName}</Typography>
+        <Typography variant="head-s/semibold" as="h2">
+          {bucketName}
+        </Typography>
         <div className="flex h-8 w-8 items-center justify-center rounded-full bg-navy-50">
           <ChevronRightIcon className="text-navy-500" />
         </div>
       </div>
-      <Typography variant="body-m/regular" className="text-navy-600">{description}</Typography>
+      <Typography variant="body-m/regular" className="text-navy-600">
+        {description}
+      </Typography>
     </Link>
   );
 };
diff --git a/frontend/src/components/common/LadderCard/LadderCard.tsx b/frontend/src/components/common/LadderCard/LadderCard.tsx
index a0fe6988..37707d7b 100644
--- a/frontend/src/components/common/LadderCard/LadderCard.tsx
+++ b/frontend/src/components/common/LadderCard/LadderCard.tsx
@@ -1,13 +1,15 @@
 import Link from 'next/link';
 import { LadderCardInterface } from './LadderCard.interface';
 import { routes } from '@app/constants';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export const LadderCard = ({ ladderName, ladderSlug }: LadderCardInterface) => (
   <Link
     href={`${routes.library.index}/${ladderSlug}`}
     className="flex h-44 cursor-pointer items-center justify-center rounded-2xl border border-navy-200 bg-white hover:bg-navy-100"
   >
-    <Typography as="h2" variant="body-l/semibold">{ladderName}</Typography>
+    <Typography as="h2" variant="body-l/semibold">
+      {ladderName}
+    </Typography>
   </Link>
 );
diff --git a/frontend/src/components/common/Typography/Typography.tsx b/frontend/src/components/common/Typography/Typography.tsx
index c56ca1a2..23b25e65 100644
--- a/frontend/src/components/common/Typography/Typography.tsx
+++ b/frontend/src/components/common/Typography/Typography.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { TypographyProps, TypographyVariants } from '@app/components/common/Typography/Typography.interface';
-import {generateClassNames} from "@app/utils";
+import { generateClassNames } from '@app/utils';
 
 const variantsStyles: {
   [key in TypographyVariants]: string;
@@ -50,27 +50,23 @@ export const Typography = ({
   className,
   children,
 }: PropsWithChildren<TypographyProps>) => {
-  const classnames = generateClassNames(
-      'text-navy-900',
-      variantsStyles[variant],
-      className ?? '',
-  );
+  const classnames = generateClassNames('text-navy-900', variantsStyles[variant], className ?? '');
 
-    switch (as) {
-      case 'h1':
-        return <h1 className={classnames}>{children}</h1>;
-      case 'h2':
-        return <h2 className={classnames}>{children}</h2>;
-      case 'h3':
-        return <h3 className={classnames}>{children}</h3>;
-      case 'h4':
-        return <h4 className={classnames}>{children}</h4>;
-      case 'h5':
-        return <h5 className={classnames}>{children}</h5>;
-      case 'h6':
-        return <p className={classnames}>{children}</p>;
-      case 'p':
-      default:
-        return <p className={classnames}>{children}</p>;
-    }
+  switch (as) {
+    case 'h1':
+      return <h1 className={classnames}>{children}</h1>;
+    case 'h2':
+      return <h2 className={classnames}>{children}</h2>;
+    case 'h3':
+      return <h3 className={classnames}>{children}</h3>;
+    case 'h4':
+      return <h4 className={classnames}>{children}</h4>;
+    case 'h5':
+      return <h5 className={classnames}>{children}</h5>;
+    case 'h6':
+      return <p className={classnames}>{children}</p>;
+    case 'p':
+    default:
+      return <p className={classnames}>{children}</p>;
+  }
 };
diff --git a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx b/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx
index c2b9780a..d87652af 100644
--- a/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx
+++ b/frontend/src/components/modules/AdvancementLevel/AdvancementLevel.tsx
@@ -6,8 +6,8 @@ import { Modal } from '@app/components/common/Modal';
 import { AdvancementLevelProps } from './AdvancemetLevel.interface';
 import { useAdvancementLevel } from '@app/components/modules/AdvancementLevel/AdvancementLevel.hooks';
 import { Markdown } from '@app/components/common/Markdown';
-import {Typography} from "@app/components/common/Typography";
-import {Button} from "@app/components/common/Button";
+import { Typography } from '@app/components/common/Typography';
+import { Button } from '@app/components/common/Button';
 
 export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVerticalLine, data }) => {
   const { hideModal, openModal, toggleAccordionOpen, modalOpen, accordionOpen } = useAdvancementLevel();
@@ -31,15 +31,19 @@ export const AdvancementLevel: React.FC<AdvancementLevelProps> = ({ showVertical
           className={`flex w-full cursor-pointer flex-col gap-4 rounded-lg ${!accordionOpen && 'hover:bg-navy-50'}`}
           onClick={toggleAccordionOpen}
         >
-          <Typography as="h3" variant="body-l/semibold">Advancement level {advancementLevel}</Typography>
-          <Typography variant="body-m/regular" className="text-navy-600">{description}</Typography>
+          <Typography as="h3" variant="body-l/semibold">
+            Advancement level {advancementLevel}
+          </Typography>
+          <Typography variant="body-m/regular" className="text-navy-600">
+            {description}
+          </Typography>
         </button>
         {accordionOpen && (
           <>
             {projects.length > 0 && (
-                <Button variant="link" onClick={openModal} className="w-fit text-sm">
-                  An example way to pass level
-                </Button>
+              <Button variant="link" onClick={openModal} className="w-fit text-sm">
+                An example way to pass level
+              </Button>
             )}
             {Object.entries(categories).map(([category, skills]) => (
               <AccordionCard
diff --git a/frontend/src/components/modules/Breadcrumbs/Breadcrumbs.tsx b/frontend/src/components/modules/Breadcrumbs/Breadcrumbs.tsx
index f65b84f4..89d88e53 100644
--- a/frontend/src/components/modules/Breadcrumbs/Breadcrumbs.tsx
+++ b/frontend/src/components/modules/Breadcrumbs/Breadcrumbs.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
 import { BreadcrumbsProps } from './Breadcrumbs.interface';
 import { generateClassNames } from '@app/utils';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export const Breadcrumbs = ({ breadcrumbs }: BreadcrumbsProps) => {
   return (
@@ -14,13 +14,15 @@ export const Breadcrumbs = ({ breadcrumbs }: BreadcrumbsProps) => {
               {index !== 0 && (
                 <ChevronRightIcon className="text-gray-400 mr-2 h-4 w-4 flex-shrink-0" aria-hidden="true" />
               )}
-              <Link
-                href={breadcrumb.href}
-                aria-current={breadcrumb.current ? 'page' : undefined}
-              >
-                <Typography variant="body-l/semibold" className={generateClassNames('text-navy-600 hover:text-navy-900', {
-                  'text-navy-900': breadcrumb.current,
-                })}>{breadcrumb.label}</Typography>
+              <Link href={breadcrumb.href} aria-current={breadcrumb.current ? 'page' : undefined}>
+                <Typography
+                  variant="body-l/semibold"
+                  className={generateClassNames('text-navy-600 hover:text-navy-900', {
+                    'text-navy-900': breadcrumb.current,
+                  })}
+                >
+                  {breadcrumb.label}
+                </Typography>
               </Link>
             </div>
           </li>
diff --git a/frontend/src/components/modules/BucketDetails/BucketDetails.tsx b/frontend/src/components/modules/BucketDetails/BucketDetails.tsx
index ba0a84e1..4c7ba687 100644
--- a/frontend/src/components/modules/BucketDetails/BucketDetails.tsx
+++ b/frontend/src/components/modules/BucketDetails/BucketDetails.tsx
@@ -1,6 +1,6 @@
 import { BucketDetailsProps } from './BucketDetails.interface';
 import { AdvancementLevel } from '@app/components/modules/AdvancementLevel';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export const BucketDetails: React.FC<BucketDetailsProps> = ({ data }) => {
   const { bucketName, description, advancementLevels } = data;
@@ -10,8 +10,12 @@ export const BucketDetails: React.FC<BucketDetailsProps> = ({ data }) => {
       <div className="mx-28 flex flex-col gap-8 rounded-2xl bg-white px-20 py-12">
         <div className="flex justify-between">
           <div className="flex flex-col gap-3">
-            <Typography variant="head-m/semibold" as="h2">{bucketName}</Typography>
-            <Typography variant="body-m/regular" className="text-navy-600">{description}</Typography>
+            <Typography variant="head-m/semibold" as="h2">
+              {bucketName}
+            </Typography>
+            <Typography variant="body-m/regular" className="text-navy-600">
+              {description}
+            </Typography>
           </div>
         </div>
         <div className="flex flex-col">
diff --git a/frontend/src/components/modules/LadderDetails/LadderDetails.tsx b/frontend/src/components/modules/LadderDetails/LadderDetails.tsx
index c1c1b33e..b0f60627 100644
--- a/frontend/src/components/modules/LadderDetails/LadderDetails.tsx
+++ b/frontend/src/components/modules/LadderDetails/LadderDetails.tsx
@@ -5,19 +5,25 @@ import { LadderBandBucket } from '@app/types/common';
 import { BucketCard } from '@app/components/common/BucketCard';
 import { AccordionCard } from '@app/components/common/AccordionCard';
 import { AccordionList } from '@app/components/common/AccordionList';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export const LadderDetails = ({ ladder, ladderName, band, ladderSlug }: LadderDetailsProps) => {
   return (
     <div className="flex flex-col gap-8 rounded-2xl bg-white px-20 py-12">
       <div className="flex justify-between">
         <div className="flex flex-col gap-3">
-          <Typography as="h2" variant="head-m/semibold">Band {band}: {ladderName}</Typography>
-          <Typography variant="body-l/medium" className="text-navy-600">Salary range: {ladder.salaryRange}</Typography>
+          <Typography as="h2" variant="head-m/semibold">
+            Band {band}: {ladderName}
+          </Typography>
+          <Typography variant="body-l/medium" className="text-navy-600">
+            Salary range: {ladder.salaryRange}
+          </Typography>
         </div>
         <div className="flex flex-col items-center rounded-xl border border-navy-200 p-4">
           <div className="flex justify-between gap-2">
-            <Typography variant="body-m/medium" className="text-navy-600">Threshold</Typography>
+            <Typography variant="body-m/medium" className="text-navy-600">
+              Threshold
+            </Typography>
             <InfoIcon
               className="text-navy-600"
               data-tooltip-id="threshold-info-tooltip"
@@ -30,9 +36,13 @@ export const LadderDetails = ({ ladder, ladderName, band, ladderSlug }: LadderDe
         </div>
       </div>
       <div className="flex flex-col gap-6">
-        <Typography variant="body-m/regular" className="text-navy-600">Buckets you need to complete to get on this band:</Typography>
+        <Typography variant="body-m/regular" className="text-navy-600">
+          Buckets you need to complete to get on this band:
+        </Typography>
         <div className="flex flex-col gap-4">
-          <Typography variant="hint/caps-medium" className="text-navy-600">Hard skills</Typography>
+          <Typography variant="hint/caps-medium" className="text-navy-600">
+            Hard skills
+          </Typography>
           <div className="flex flex-col gap-6">
             {ladder.hardSkillBuckets.map((bucket: LadderBandBucket) => (
               <BucketCard bucket={bucket} key={bucket.bucketSlug} ladderSlug={ladderSlug} />
@@ -40,7 +50,9 @@ export const LadderDetails = ({ ladder, ladderName, band, ladderSlug }: LadderDe
           </div>
         </div>
         <div className="flex flex-col gap-4">
-          <Typography variant="hint/caps-medium" className="text-navy-600">Soft skills</Typography>
+          <Typography variant="hint/caps-medium" className="text-navy-600">
+            Soft skills
+          </Typography>
           <div className="flex flex-col gap-6">
             <AccordionCard title="Time management">
               <div className="flex flex-col gap-6">
diff --git a/frontend/src/components/modules/LadderTabs/LadderTabs.tsx b/frontend/src/components/modules/LadderTabs/LadderTabs.tsx
index 4a61168d..edc66e3a 100644
--- a/frontend/src/components/modules/LadderTabs/LadderTabs.tsx
+++ b/frontend/src/components/modules/LadderTabs/LadderTabs.tsx
@@ -4,7 +4,7 @@ import { generateBandGrouping } from './utils';
 import { LadderTabsProps, LadderInterface } from './LadderTabs.interface';
 import { generateClassNames } from '@app/utils';
 import { Button } from '@app/components/common/Button';
-import {Typography} from "@app/components/common/Typography";
+import { Typography } from '@app/components/common/Typography';
 
 export const LadderTabs: React.FC<LadderTabsProps> = ({ maximumLadders, activeLadder, ladderOnClick }) => {
   const generateLadders = useCallback((maxLadders: number): LadderInterface => generateBandGrouping(maxLadders), []);
@@ -16,7 +16,9 @@ export const LadderTabs: React.FC<LadderTabsProps> = ({ maximumLadders, activeLa
       {Object.keys(ladders).map((positionName: string, index: number) => (
         <Fragment key={positionName}>
           <div className="rounded-2xl bg-white px-2 py-3">
-            <Typography as="h3" variant="hint/caps-medium" className="mb-2 text-center text-navy-600">{positionName}</Typography>
+            <Typography as="h3" variant="hint/caps-medium" className="mb-2 text-center text-navy-600">
+              {positionName}
+            </Typography>
             {ladders[positionName].map((ladder: number, index: number) => (
               <Fragment key={ladder.toString()}>
                 <Button

From 7d5fb0ec0b4e8860b86c669d2942e760342952e0 Mon Sep 17 00:00:00 2001
From: Wiktoria Salamon <wiktoriajuliasalamon@gmail.com>
Date: Wed, 3 Jul 2024 13:31:24 +0200
Subject: [PATCH 6/7] refactor

---
 .../src/components/common/AccordionCard/AccordionCard.tsx   | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/src/components/common/AccordionCard/AccordionCard.tsx b/frontend/src/components/common/AccordionCard/AccordionCard.tsx
index 420c0209..877d33bd 100644
--- a/frontend/src/components/common/AccordionCard/AccordionCard.tsx
+++ b/frontend/src/components/common/AccordionCard/AccordionCard.tsx
@@ -33,11 +33,7 @@ export const AccordionCard = ({
         )}
         onClick={() => setOpen(!isOpen)}
       >
-        {small ? (
-          <Typography variant="body-m/semibold">{title}</Typography>
-        ) : (
-          <Typography variant="head-s/semibold">{title}</Typography>
-        )}
+        <Typography variant={small ? "body-m/semibold" : "head-s/semibold"}>{title}</Typography>
         {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 })} />

From baa728f0ffd3049c9b43c3b676e0dad81534a583 Mon Sep 17 00:00:00 2001
From: Wiktoria Salamon <wiktoriajuliasalamon@gmail.com>
Date: Wed, 3 Jul 2024 13:32:53 +0200
Subject: [PATCH 7/7] linter

---
 frontend/src/components/common/AccordionCard/AccordionCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/common/AccordionCard/AccordionCard.tsx b/frontend/src/components/common/AccordionCard/AccordionCard.tsx
index 877d33bd..9b397add 100644
--- a/frontend/src/components/common/AccordionCard/AccordionCard.tsx
+++ b/frontend/src/components/common/AccordionCard/AccordionCard.tsx
@@ -33,7 +33,7 @@ export const AccordionCard = ({
         )}
         onClick={() => setOpen(!isOpen)}
       >
-        <Typography variant={small ? "body-m/semibold" : "head-s/semibold"}>{title}</Typography>
+        <Typography variant={small ? 'body-m/semibold' : 'head-s/semibold'}>{title}</Typography>
         {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 })} />