Centers Title With No Description

Makes the header bar title take up more space when no title is provided,
and stops the page from rendering the description.

Co-authored-by: Joe Banks <[email protected]>
Signed-off-by: Hassan Abouelela <[email protected]>

1 files changed, 14 insertions, 6 deletions

diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx
index 439851d..5c536ef 100644
--- a/src/components/HeaderBar/index.tsx
+++ b/src/components/HeaderBar/index.tsx
@@ -27,16 +27,20 @@ const headerTextStyles = css`
   font-family: "Uni Sans", "Hind", "Arial", sans-serif;
 
   margin: 0 2rem 10rem 2rem;
-  
+
   .title {
     font-size: 3vmax;
     margin-bottom: 0;
   }
-  
+
+  .full_size {
+    line-height: 200%;
+  }
+
   .description {
     font-size: 1.5vmax;
   }
-  
+
   .title, .description {
     transition: font-size 1s;
   }
@@ -49,6 +53,10 @@ const headerTextStyles = css`
       font-size: 5vmax;
     }
 
+    .full_size {
+      line-height: 100%;
+    }
+
     .description {
       font-size: 2vmax;
     }
@@ -64,7 +72,7 @@ const homeButtonStyles = css`
       transform: scale(0.15);
     }
   }
-  
+
   * {
     position: absolute;
     top: -10rem;
@@ -96,8 +104,8 @@ function HeaderBar({ title, description }: HeaderBarProps): JSX.Element {
             </div>
 
             <div css={css`${headerTextStyles}; margin-bottom: 12.5%;`}>
-                <h1 className="title">{title}</h1>
-                <h1 className="description">{description}</h1>
+                <h1 className={description ? "title" : "title full_size"}>{title}</h1>
+                {description ? <h1 className="description">{description}</h1> : null}
             </div>
 
             <Link to="/" css={homeButtonStyles}>