From e8c013c1b6071d8602cf99ad96960678d13ca1f2 Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Mon, 27 Jan 2025 10:55:07 +0100
Subject: [PATCH 1/2] refactor: header styling and reactmarkdown

---
 .../pages/Courts/CourtDetails/Description.tsx  | 18 ++++++++----------
 web/src/styles/global-style.ts                 | 10 ++++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/web/src/pages/Courts/CourtDetails/Description.tsx b/web/src/pages/Courts/CourtDetails/Description.tsx
index f9bb221c6..e65de7ce9 100644
--- a/web/src/pages/Courts/CourtDetails/Description.tsx
+++ b/web/src/pages/Courts/CourtDetails/Description.tsx
@@ -17,32 +17,30 @@ const Container = styled.div`
 const TextContainer = styled.div`
   width: 100%;
   padding: 12px 0;
+`;
 
+const StyledReactMarkdown = styled(ReactMarkdown)`
   p {
     word-break: break-word;
   }
 
-  li {
-    line-height: 1.5em;
-    margin-top: 0.5em;
+  ul,
+  ol {
+    li + li {
+      margin-top: 8px;
+    }
   }
 
   h1 {
     margin: 16px 0 16px 0;
-    font-size: 24px;
-    line-height: 32px;
   }
 
   h2 {
     margin: 16px 0 16px 0;
-    font-size: 20px;
-    line-height: 24px;
   }
 
   h3 {
     margin: 16px 0 16px 0;
-    font-size: 18px;
-    line-height: 20px;
   }
 
   a {
@@ -128,6 +126,6 @@ const Description: React.FC = () => {
 };
 
 const formatMarkdown = (markdown?: string) =>
-  markdown ? <ReactMarkdown>{markdown.replace(/\n/g, "  \n")}</ReactMarkdown> : <StyledSkeleton />;
+  markdown ? <StyledReactMarkdown>{markdown.replace(/\n/g, "  \n")}</StyledReactMarkdown> : <StyledSkeleton />;
 
 export default Description;
diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts
index fe8cba478..94edd40d4 100644
--- a/web/src/styles/global-style.ts
+++ b/web/src/styles/global-style.ts
@@ -46,7 +46,7 @@ export const GlobalStyle = createGlobalStyle`
 
   h2 {
     margin: 0 0 16px 0;
-    font-weight: 600;
+    font-weight: 400;
     font-size: 24px;
     line-height: 32px;
     color: ${({ theme }) => theme.primaryText};
@@ -93,7 +93,7 @@ export const GlobalStyle = createGlobalStyle`
     color: ${({ theme }) => theme.primaryBlue};
     transition: color 0.1s;
   }
-  
+
   hr {
     opacity: 1;
     border: 1px solid ${({ theme }) => theme.stroke};
@@ -102,12 +102,14 @@ export const GlobalStyle = createGlobalStyle`
   svg, img {
     display: inline-block;
     vertical-align: middle;
-  visibility: visible;
-
+    visibility: visible;
   }
 
   ul, ol {
     li {
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
       color: ${({ theme }) => theme.primaryText};
     }
   }

From b5a85e6634eb570c4106101ee3c9b2f8e1f2d4f4 Mon Sep 17 00:00:00 2001
From: alcercu <333aleix333@gmail.com>
Date: Mon, 27 Jan 2025 12:05:42 +0100
Subject: [PATCH 2/2] fix: use more adequate sizing for inner component

---
 web/src/pages/Courts/CourtDetails/Description.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/web/src/pages/Courts/CourtDetails/Description.tsx b/web/src/pages/Courts/CourtDetails/Description.tsx
index e65de7ce9..6cae460bc 100644
--- a/web/src/pages/Courts/CourtDetails/Description.tsx
+++ b/web/src/pages/Courts/CourtDetails/Description.tsx
@@ -33,14 +33,20 @@ const StyledReactMarkdown = styled(ReactMarkdown)`
 
   h1 {
     margin: 16px 0 16px 0;
+    font-size: 20px;
+    line-height: 26px;
   }
 
   h2 {
     margin: 16px 0 16px 0;
+    font-size: 20px;
+    line-height: 26px;
   }
 
   h3 {
     margin: 16px 0 16px 0;
+    font-size: 18px;
+    line-height: 24px;
   }
 
   a {