From bda9942fffffafa772a1cd7b2333b9918e52bd21 Mon Sep 17 00:00:00 2001
From: rektdeckard <friedtm@gmail.com>
Date: Sun, 8 May 2022 14:14:30 -0600
Subject: [PATCH] feat(app): add figma banner

---
 src/components/Banner/Banner.css |  14 ++++
 src/components/Banner/Banner.tsx |  26 ++++++++
 src/components/Header/Header.tsx | 108 ++++++++++++++++---------------
 3 files changed, 96 insertions(+), 52 deletions(-)
 create mode 100644 src/components/Banner/Banner.css
 create mode 100644 src/components/Banner/Banner.tsx

diff --git a/src/components/Banner/Banner.css b/src/components/Banner/Banner.css
new file mode 100644
index 0000000..4e91d19
--- /dev/null
+++ b/src/components/Banner/Banner.css
@@ -0,0 +1,14 @@
+.banner {
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  color: white;
+  text-align: center;
+  background-color: #35313d;
+}
+
+.banner .main-button {
+  height: unset;
+  min-height: 64px;
+  margin: 8px 0 0;
+}
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
new file mode 100644
index 0000000..1fb6507
--- /dev/null
+++ b/src/components/Banner/Banner.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Medal } from "phosphor-react"; 
+
+import "./Banner.css";
+
+const Banner = () => {
+  return (
+    <div className="banner">
+       The 2022 Figma Community Awards are here!
+      <button
+        className="main-button"
+        onClick={
+            () => window.open(
+              "https://www.figma.com/community/file/903830135544202908",
+              "_blank",
+              "noopener noreferrer",
+            )
+        }>
+          <Medal size={24} weight="fill" />
+          Vote for Phosphor
+        </button>
+    </div>
+  );
+};
+
+export default Banner;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index fd2cce6..d8fc8aa 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -16,6 +16,7 @@ import receipt from "../../assets/receipt.svg";
 import receiptSpec from "../../assets/receipt-spec.svg";
 import calculator from "../../assets/calculator.svg";
 import calculatorSpec from "../../assets/calculator-spec.svg";
+import Banner from "../Banner/Banner";
 import Links from "../Links/Links";
 import "./Header.css";
 
@@ -35,61 +36,64 @@ const handleScrollToIcons = () =>
 
 const Header: React.FC<HeaderProps> = () => {
   return (
-    <header>
-      <div className="header-contents">
-        <div className="illustrations-top">
-          <img src={markerPurple} id="marker-purple" alt="" />
-          <img src={paperclips} id="paperclips" alt="" />
-          <img src={paperclipsThree} id="paperclips-three" alt="" />
-          <img className="tablet" src={tabletSpec} alt="" />
-          <img className="tablet inspectable xray" src={tablet} alt="" />
-          <img className="billiard-ball" src={billiardBallSpec} alt="" />
-          <img
-            className="billiard-ball inspectable xray"
-            src={billiardBall}
-            alt=""
-          />
+    <>
+      <Banner />
+      <header>
+        <div className="header-contents">
+          <div className="illustrations-top">
+            <img src={markerPurple} id="marker-purple" alt="" />
+            <img src={paperclips} id="paperclips" alt="" />
+            <img src={paperclipsThree} id="paperclips-three" alt="" />
+            <img className="tablet" src={tabletSpec} alt="" />
+            <img className="tablet inspectable xray" src={tablet} alt="" />
+            <img className="billiard-ball" src={billiardBallSpec} alt="" />
+            <img
+              className="billiard-ball inspectable xray"
+              src={billiardBall}
+              alt=""
+            />
 
-          <img className="warning" src={warningSpec} alt="" />
-          <img className="warning inspectable xray" src={warning} alt="" />
-        </div>
-        <div className="intro">
-          <h2>
-            Phosphor is a flexible icon family for interfaces, diagrams,
-            presentations — 
-            <wbr />
-            whatever, really.
-          </h2>
-          <div className="button-container">
-            <button className="main-button" onClick={handleGetStarted}>
-              <ArrowCircleUpRight size={24} weight="fill" />
-              Get started
-            </button>
-            <button className="main-button" onClick={handleScrollToIcons}>
-              <ArrowCircleDown size={24} weight="fill" />
-              Explore icons
-            </button>
+            <img className="warning" src={warningSpec} alt="" />
+            <img className="warning inspectable xray" src={warning} alt="" />
+          </div>
+          <div className="intro">
+            <h2>
+              Phosphor is a flexible icon family for interfaces, diagrams,
+              presentations — 
+              <wbr />
+              whatever, really.
+            </h2>
+            <div className="button-container">
+              <button className="main-button" onClick={handleGetStarted}>
+                <ArrowCircleUpRight size={24} weight="fill" />
+                Get started
+              </button>
+              <button className="main-button" onClick={handleScrollToIcons}>
+                <ArrowCircleDown size={24} weight="fill" />
+                Explore icons
+              </button>
+            </div>
+            <Links />
+          </div>
+          <div className="illustrations-bottom">
+            <img className="cutting-mat" src={cuttingMatSpec} alt="" />
+            <img
+              className="cutting-mat inspectable xray"
+              src={cuttingMat}
+              alt=""
+            />
+            <img className="receipt" src={receiptSpec} alt="" />
+            <img className="receipt inspectable xray" src={receipt} alt="" />
+            <img className="calculator" src={calculatorSpec} alt="" />
+            <img
+              className="calculator inspectable xray"
+              src={calculator}
+              alt=""
+            />
           </div>
-          <Links />
         </div>
-        <div className="illustrations-bottom">
-          <img className="cutting-mat" src={cuttingMatSpec} alt="" />
-          <img
-            className="cutting-mat inspectable xray"
-            src={cuttingMat}
-            alt=""
-          />
-          <img className="receipt" src={receiptSpec} alt="" />
-          <img className="receipt inspectable xray" src={receipt} alt="" />
-          <img className="calculator" src={calculatorSpec} alt="" />
-          <img
-            className="calculator inspectable xray"
-            src={calculator}
-            alt=""
-          />
-        </div>
-      </div>
-    </header>
+      </header>
+    </>
   );
 };