Merge pull request #1849 from kleros/refactor(frontend)/header-styling

Refactor: header styling and reactmarkdown

Author: jaybuidl

web/src/pages/Courts/CourtDetails/Description.tsx

@@ -17,32 +17,36 @@ 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;
+    font-size: 20px;
+    line-height: 26px;
   }
 
   h2 {
     margin: 16px 0 16px 0;
     font-size: 20px;
-    line-height: 24px;
+    line-height: 26px;
   }
 
   h3 {
     margin: 16px 0 16px 0;
     font-size: 18px;
-    line-height: 20px;
+    line-height: 24px;
   }
 
   a {
@@ -128,6 +132,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;

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};
     }
   }