From c08e8446b50aca9b3ea0439a31e89a5dd9f7aa2f Mon Sep 17 00:00:00 2001
From: Jean-Philippe Sirois <jp@veksen.net>
Date: Fri, 24 Jul 2020 13:28:23 -0400
Subject: [PATCH] ui: tweak header, make it much smaller

---
 src/components/HeaderBarebone/index.tsx  |  1 +
 src/components/HeaderBarebone/styles.tsx | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/HeaderBarebone/index.tsx b/src/components/HeaderBarebone/index.tsx
index afa7ec0..f30d69c 100644
--- a/src/components/HeaderBarebone/index.tsx
+++ b/src/components/HeaderBarebone/index.tsx
@@ -26,6 +26,7 @@ export const HeaderBarebone: React.FC<IHeaderBareboneProps> = (props) => {
 
           <SC.Title
             className={cx({
+              "has-content-above": props.above,
               "has-content-below": props.content,
             })}
           >
diff --git a/src/components/HeaderBarebone/styles.tsx b/src/components/HeaderBarebone/styles.tsx
index fd1d8a8..d7ed677 100644
--- a/src/components/HeaderBarebone/styles.tsx
+++ b/src/components/HeaderBarebone/styles.tsx
@@ -4,9 +4,11 @@ import { fontFamily } from "../../design/typography"
 import { WavesTop, WavesBottom } from "../Waves"
 import Circles from "../../images/circles.svg"
 
+const height = 250
+
 export const HeaderWrapper = styled.div`
   width: 100%;
-  height: 391px;
+  height: ${height}px;
   padding-top: 67px;
   position: relative;
 
@@ -24,12 +26,12 @@ export const HeaderWrapper = styled.div`
     display: flex;
     align-items: flex-end;
     height: auto;
-    min-height: 391px;
+    min-height: ${height}px;
   }
 `
 
 export const BackgroundWrapper = styled.div`
-  height: 391px;
+  height: ${height}px;
   padding-top: 67px;
   overflow: hidden;
   position: absolute;
@@ -108,9 +110,13 @@ export const Title = styled.h1`
   line-height: 41px;
   letter-spacing: -1.75px;
   margin-top: 0;
-  margin: 0;
+  margin-bottom: 0;
+
+  &.has-content-above {
+    margin-top: 8px;
+  }
 
   &.has-content-below {
-    margin-bottom: 16px;
+    margin-bottom: 8px;
   }
 `