From f4e40a889ed60a914fe7fb6e33382e57bd79a5e8 Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Sun, 24 May 2020 23:05:02 -0400
Subject: [PATCH] ui(resources): tweak typo of header

---
 src/components/HeaderBarebone/index.tsx  |  9 ++++++++-
 src/components/HeaderBarebone/styles.tsx | 10 +++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/HeaderBarebone/index.tsx b/src/components/HeaderBarebone/index.tsx
index df3e5aa..afa7ec0 100644
--- a/src/components/HeaderBarebone/index.tsx
+++ b/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>
diff --git a/src/components/HeaderBarebone/styles.tsx b/src/components/HeaderBarebone/styles.tsx
index 4f17686..fd1d8a8 100644
--- a/src/components/HeaderBarebone/styles.tsx
+++ b/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;
-  line-height: ${modularScale(6).lineHeight}px;
+  font-size: 34px;
+  line-height: 41px;
   letter-spacing: -1.75px;
   margin-top: 0;
   margin: 0;
 
-  & + * {
-    margin-top: 16px;
+  &.has-content-below {
+    margin-bottom: 16px;
   }
 `