From 086398d256e840b8de754c34573eeca5fc7dcc5f Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Thu, 7 Dec 2023 10:23:38 +0100
Subject: [PATCH] Add typography for headers

---
 .../components/shared/Typography/index.tsx    | 72 +++++++++++++++++++
 dapp/src/theme/utils/fonts.ts                 | 28 +++++---
 2 files changed, 92 insertions(+), 8 deletions(-)

diff --git a/dapp/src/components/shared/Typography/index.tsx b/dapp/src/components/shared/Typography/index.tsx
index 6e1231239..842069313 100644
--- a/dapp/src/components/shared/Typography/index.tsx
+++ b/dapp/src/components/shared/Typography/index.tsx
@@ -2,6 +2,78 @@
 import React from "react"
 import { Text, TextProps } from "@chakra-ui/react"
 
+export function Header2Xl(props: TextProps) {
+  return (
+    <Text
+      as="h1"
+      fontWeight="medium"
+      fontSize="h2Xl"
+      lineHeight="h2Xl"
+      {...props}
+    />
+  )
+}
+
+export function HeaderXl(props: TextProps) {
+  return (
+    <Text
+      as="h2"
+      fontWeight="medium"
+      fontSize="hXl"
+      lineHeight="hXl"
+      {...props}
+    />
+  )
+}
+
+export function HeaderLg(props: TextProps) {
+  return (
+    <Text
+      as="h3"
+      fontWeight="medium"
+      fontSize="hLg"
+      lineHeight="hLg"
+      {...props}
+    />
+  )
+}
+
+export function HeaderMd(props: TextProps) {
+  return (
+    <Text
+      as="h4"
+      fontWeight="medium"
+      fontSize="hMd"
+      lineHeight="hMd"
+      {...props}
+    />
+  )
+}
+
+export function HeaderSm(props: TextProps) {
+  return (
+    <Text
+      as="h5"
+      fontWeight="medium"
+      fontSize="hSm"
+      lineHeight="hSm"
+      {...props}
+    />
+  )
+}
+
+export function HeaderXs(props: TextProps) {
+  return (
+    <Text
+      as="h6"
+      fontWeight="medium"
+      fontSize="hXs"
+      lineHeight="hXs"
+      {...props}
+    />
+  )
+}
+
 export function TextXl(props: TextProps) {
   return (
     <Text as="p" fontWeight="medium" fontSize="xl" lineHeight="xl" {...props} />
diff --git a/dapp/src/theme/utils/fonts.ts b/dapp/src/theme/utils/fonts.ts
index 533af2b4e..efa338c48 100644
--- a/dapp/src/theme/utils/fonts.ts
+++ b/dapp/src/theme/utils/fonts.ts
@@ -1,9 +1,15 @@
 export const fontSizes = {
-  xs: "0.75rem",
-  sm: "0.875rem",
-  md: "1rem",
-  lg: "1.125rem",
+  h2Xl: "4.5rem",
+  hXl: "3.75rem",
+  hLg: "3rem",
+  hMd: "2.25rem",
+  hSm: "1.875rem",
+  hXs: "1.5rem",
   xl: "1.25rem",
+  lg: "1.125rem",
+  md: "1rem",
+  sm: "0.875rem",
+  xs: "0.75rem",
 }
 
 export const fontWeights = {
@@ -15,11 +21,17 @@ export const fontWeights = {
 }
 
 export const lineHeights = {
-  xs: "1.125rem",
-  sm: "1.25rem",
-  md: "1.5rem",
-  lg: "1.75rem",
+  h2Xl: "5.625rem",
+  hXl: "4.5rem",
+  hLg: "3.75rem",
+  hMd: "2.75rem",
+  hSm: "2.375rem",
+  hXs: "2rem",
   xl: "1.875rem",
+  lg: "1.75rem",
+  md: "1.5rem",
+  sm: "1.25rem",
+  xs: "1.125rem",
 }
 
 export const fonts = {