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]>

3 files changed, 115 insertions, 42 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;
diff --git a/src/components/HeaderBar/logo.svg b/src/components/HeaderBar/logo.svg
new file mode 100644
index 0000000..e7f43fc
--- /dev/null
+++ b/src/components/HeaderBar/logo.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="463.86" height="463.86" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata>
+	<path d="m296.09 80.929-11.506 3.3086c-12.223-1.8051-24.757-2.597-36.895-2.5078-13.5 0.1-26.498 1.1992-37.898 3.1992-3.6998 0.65161-7.0474 1.386-10.107 2.1992h-35.893v18.801h4.5v7.6992h2.7832c-0.63936 3.7142-0.88476 7.7997-0.88476 12.301v4h-15.398l-2.2012 11 17.6 15.014v0.0859h79.201v10h-79.201-29.699c-23 0-43.2 13.8-49.5 40-7.3 30-7.6 48.801 0 80.201 0.49734 2.0782 1.0605 4.0985 1.6836 6.0625l-1.1836 10.438 13.346 11.549c7.032 7.5103 16.371 11.951 28.254 11.951h27.201v-36c0-26 22.6-49 49.5-49h79.199c22 0 39.6-18.102 39.6-40.102v-75.199c0-12.9-6.5819-23.831-16.516-31.273zm76.801 77.6-14.301 7.4004h-20.1v0.0996 10.301 24.699c0 27.2-23.1 50-49.5 50h-79.1c-21.7 0-39.6 18.5-39.6 40.1v75.102c0 21.4 18.7 34 39.6 40.1 25.1 7.3 49.1 8.7 79.1 0 19.9-5.7 39.6-17.3 39.6-40.1v-27.9-2.0996-0.10156h-0.11914l-11.721-10h11.84 39.6c23 0 31.602-16 39.602-40 8.3-24.7 7.9-48.499 0-80.199-3.6226-14.491-9.3525-26.71-18.947-33.699zm-123.4 167.6h57.5v10h-57.5z" fill-opacity=".20554"/><path class="st2" d="m229.99 66.629c-13.5 0.1-26.5 1.2-37.9 3.2-33.5 5.9-39.6 18.2-39.6 41v30.1h79.2v10h-79.2-29.7c-23 0-43.2 13.8-49.5 40-7.3 30-7.6 48.8 0 80.2 5.6 23.4 19.1 40 42.1 40h27.2v-36c0-26 22.6-49 49.5-49h79.1c22 0 39.6-18.1 39.6-40.1v-75.2c0-21.4-18.1-37.4-39.6-41-13.5-2.3-27.6-3.3-41.2-3.2zm-42.8 24.2c8.2 0 14.9 6.8 14.9 15.1 0 8.3-6.7 15-14.9 15s-14.9-6.7-14.9-15c0-8.4 6.7-15.1 14.9-15.1z" fill="#cbd6ff"/><path class="st3" d="m320.79 150.93v35c0 27.2-23.1 50-49.5 50h-79.1c-21.7 0-39.6 18.5-39.6 40.1v75.1c0 21.4 18.7 34 39.6 40.1 25.1 7.3 49.1 8.7 79.1 0 19.9-5.7 39.6-17.3 39.6-40.1v-30.1h-79.1v-10h79.1 39.6c23 0 31.6-16 39.6-40 8.3-24.7 7.9-48.5 0-80.2-5.7-22.8-16.6-40-39.6-40h-29.7zm-44.5 190.2c8.2 0 14.9 6.7 14.9 15s-6.7 15.1-14.9 15.1-14.9-6.8-14.9-15.1 6.7-15 14.9-15z" fill="#fff"/></svg>
diff --git a/src/tests/components/HeaderBar.test.tsx b/src/tests/components/HeaderBar.test.tsx
index 9c232ad..dd77c8b 100644
--- a/src/tests/components/HeaderBar.test.tsx
+++ b/src/tests/components/HeaderBar.test.tsx
@@ -2,16 +2,35 @@ import React from "react";
 import { render } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import HeaderBar from "../../components/HeaderBar";
+import { MemoryRouter } from "react-router-dom";
 
 test("renders header bar with title", () => {
-    const { getByText } = render(<HeaderBar />);
+    const { getByText } = render(<MemoryRouter><HeaderBar /></MemoryRouter>);
     const formListing = getByText(/Python Discord Forms/i);
     expect(formListing).toBeInTheDocument();
 });
 
 test("renders header bar with custom title", () => {
-    const { getByText } = render(<HeaderBar title="Testing title"/>);
+    const { getByText } = render(<MemoryRouter><HeaderBar title="Testing title"/></MemoryRouter>);
     const formListing = getByText(/Testing title/i);
     expect(formListing).toBeInTheDocument();
 });
 
+test("renders header bar with custom description", () => {
+    const { getByText } = render(<MemoryRouter><HeaderBar description="Testing description"/></MemoryRouter>);
+    const formListing = getByText(/Testing description/i);
+    expect(formListing).toBeInTheDocument();
+});
+
+test("renders header bar with custom title and description", () => {
+    const { getByText } = render(
+        <MemoryRouter>
+            <HeaderBar title="Testing Title" description="Testing description"/>
+        </MemoryRouter>
+    );
+
+    const title = getByText(/Testing title/i);
+    const description = getByText(/Testing description/i);
+    expect(title).toBeInTheDocument();
+    expect(description).toBeInTheDocument();
+});