ui(resources): tweak typo of header

src/components/HeaderBarebone/index.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import cx from "classnames"
 
 import * as SC from "./styles"
 import { Container } from "../Container"
@@ -23,7 +24,13 @@ export const HeaderBarebone: React.FC<IHeaderBareboneProps> = (props) => {
         <SC.Box>
           {props.above}
 
-          <SC.Title>{props.title}</SC.Title>
+          <SC.Title
+            className={cx({
+              "has-content-below": props.content,
+            })}
+          >
+            {props.title}
+          </SC.Title>
 
           {props.content}
         </SC.Box>

src/components/HeaderBarebone/styles.tsx

@@ -1,6 +1,6 @@
 import { transparentize, darken } from "polished"
 import styled from "styled-components"
-import { fontFamily, modularScale } from "../../design/typography"
+import { fontFamily } from "../../design/typography"
 import { WavesTop, WavesBottom } from "../Waves"
 import Circles from "../../images/circles.svg"
 
@@ -104,13 +104,13 @@ export const Box = styled.div`
 
 export const Title = styled.h1`
   font-family: ${fontFamily.header};
-  font-size: ${modularScale(6).fontSize}px;
+  font-size: 34px;
-  line-height: ${modularScale(6).lineHeight}px;
+  line-height: 41px;
   letter-spacing: -1.75px;
   margin-top: 0;
   margin: 0;
 
-  & + * {
+  &.has-content-below {
-    margin-top: 16px;
+    margin-bottom: 16px;
   }
 `