Updates HeaderBar

Changes header bar component to accept a description, and render it
properly on different screens. Additionally adds a button to return to
the home page. Updates tests.

Signed-off-by: Hassan Abouelela <[email protected]>

1 files changed, 91 insertions, 40 deletions

diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx
index dfe3957..439851d 100644
--- a/src/components/HeaderBar/index.tsx
+++ b/src/components/HeaderBar/index.tsx
@@ -1,59 +1,110 @@
 /** @jsx jsx */
-import { css, jsx } from "@emotion/react";
+import { jsx, css } from "@emotion/react";
 
 import Header1 from "./header_1.svg";
 import Header2 from "./header_2.svg";
+import Logo from "./logo.svg";
+
+import { Link } from "react-router-dom";
 
 interface HeaderBarProps {
-  title?: string
+    title?: string
+    description?: string
 }
 
 const headerImageStyles = css`
-z-index: -1;
-top: 0;
-position: absolute;
-width: 100%;
-transition: height 1s;
+  * {
+    z-index: -1;
+    top: 0;
+    position: absolute;
+    width: 100%;
+    transition: height 1s;
+  }
+`;
+
+const headerTextStyles = css`
+  transition: margin 1s;
+  font-family: "Uni Sans", "Hind", "Arial", sans-serif;
+
+  margin: 0 2rem 10rem 2rem;
+  
+  .title {
+    font-size: 3vmax;
+    margin-bottom: 0;
+  }
+  
+  .description {
+    font-size: 1.5vmax;
+  }
+  
+  .title, .description {
+    transition: font-size 1s;
+  }
+
+  @media (max-width: 480px) {
+    margin-top: 7rem;
+    text-align: center;
+
+    .title {
+      font-size: 5vmax;
+    }
+
+    .description {
+      font-size: 2vmax;
+    }
+  }
+`;
+
+const homeButtonStyles = css`
+  svg {
+    transform: scale(0.25);
+    transition: top 300ms, transform 300ms;
+
+    @media (max-width: 480px) {
+      transform: scale(0.15);
+    }
+  }
+  
+  * {
+    position: absolute;
+    top: -10rem;
+    right: 1rem;
+
+    z-index: 0;
+    transform-origin: right;
+
+    @media (max-width: 700px) {
+      top: -11.5rem;
+    }
+
+    @media (max-width: 480px) {
+      top: -12.5rem;
+    }
+  }
 `;
 
-function HeaderBar({ title }: HeaderBarProps): JSX.Element {
+function HeaderBar({ title, description }: HeaderBarProps): JSX.Element {
     if (!title) {
         title = "Python Discord Forms";
     }
-  
-    return <div>
+
+    return (
         <div>
-            <Header1 css={headerImageStyles}/>
-            <Header2 css={headerImageStyles}/>
+            <div css={headerImageStyles}>
+                <Header1/>
+                <Header2/>
+            </div>
+
+            <div css={css`${headerTextStyles}; margin-bottom: 12.5%;`}>
+                <h1 className="title">{title}</h1>
+                <h1 className="description">{description}</h1>
+            </div>
+
+            <Link to="/" css={homeButtonStyles}>
+                <Logo/>
+            </Link>
         </div>
-        <h1 css={css`
-      font-size: 4vw;
-      margin: 0;
-      margin-top: 30px;
-      margin-left: 30px;
-      margin-bottom: 200px;
-      transition-property: font-size, margin-bottom;
-      transition-duration: 1s;
-      font-family: "Uni Sans", "Hind", "Arial", sans-serif;
-
-      @media (max-width: 1000px) {
-        margin-top: 15px;
-        font-size: 8vw;
-      }
-
-      @media (max-width: 770px) {
-        margin-top: 15px;
-        font-size: 6vw;
-        margin-bottom: 100px;
-      }
-      @media (max-width: 450px) {
-        text-align: center;
-        margin-left: 0;
-      }
-    `}>
-            {title}
-        </h1>
-    </div>;
+    );
 }
 
 export default HeaderBar;