From 3fbe423ca669c95fbabfb806484be633af9d6ff0 Mon Sep 17 00:00:00 2001
From: Tim Pechersky <tim.pechersky@gmail.com>
Date: Wed, 15 Sep 2021 16:58:14 +0200
Subject: [PATCH] v1 banner

---
 frontend/src/components/LandingNavbar.js |  4 +-
 frontend/src/components/Navbar.js        |  2 +-
 frontend/src/components/Sidebar.js       |  4 +-
 frontend/src/components/SignIn.js        |  4 +-
 frontend/src/layouts/RootLayout.js       | 63 +++++++++++++++++++++++-
 5 files changed, 69 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/LandingNavbar.js b/frontend/src/components/LandingNavbar.js
index 6437e7d6..211b8dcf 100644
--- a/frontend/src/components/LandingNavbar.js
+++ b/frontend/src/components/LandingNavbar.js
@@ -90,7 +90,7 @@ const LandingNavbar = () => {
                 </Button>
               </RouterLink>
             )}
-            {!ui.isLoggedIn && (
+            {/* {!ui.isLoggedIn && (
               <Button
                 colorScheme="whiteAlpha"
                 variant="outline"
@@ -101,7 +101,7 @@ const LandingNavbar = () => {
               >
                 Get started
               </Button>
-            )}
+            )} */}
             {!ui.isLoggedIn && (
               <Button
                 color="white"
diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
index 7d6cc257..93ac1068 100644
--- a/frontend/src/components/Navbar.js
+++ b/frontend/src/components/Navbar.js
@@ -27,7 +27,7 @@ const Navbar = () => {
       overflow="hidden"
     >
       <Suspense fallback={""}>
-        {modal === "register" && <SignUp toggleModal={toggleModal} />}
+        {/* {modal === "register" && <SignUp toggleModal={toggleModal} />} */}
         {modal === "login" && <SignIn toggleModal={toggleModal} />}
         {modal === "forgot" && <ForgotPassword toggleModal={toggleModal} />}
         {modal === "hubspot-trader" && (
diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js
index cf99bab5..2d8a6055 100644
--- a/frontend/src/components/Sidebar.js
+++ b/frontend/src/components/Sidebar.js
@@ -94,7 +94,7 @@ const Sidebar = () => {
       )}
       {!ui.isLoggedIn && (
         <SidebarContent>
-          <Menu iconShape="square">
+          {/* <Menu iconShape="square">
             <MenuItem
               onClick={() => {
                 ui.toggleModal("register");
@@ -103,7 +103,7 @@ const Sidebar = () => {
             >
               Sign up
             </MenuItem>
-          </Menu>
+          </Menu> */}
           <Menu iconShape="square">
             <MenuItem
               onClick={() => {
diff --git a/frontend/src/components/SignIn.js b/frontend/src/components/SignIn.js
index d9d680cd..4afd55cc 100644
--- a/frontend/src/components/SignIn.js
+++ b/frontend/src/components/SignIn.js
@@ -85,7 +85,7 @@ const SignIn = ({ toggleModal }) => {
         </Button>
       </form>
       <Box height="1px" width="100%" background="#eaebf8" mb="1.875rem" />
-      <Text textAlign="center" fontSize="md" color="gray.1200">
+      {/* <Text textAlign="center" fontSize="md" color="gray.1200">
         Don`t have an account?{" "}
         <Box
           cursor="pointer"
@@ -95,7 +95,7 @@ const SignIn = ({ toggleModal }) => {
         >
           Register
         </Box>
-      </Text>
+      </Text> */}
       <Text textAlign="center" fontSize="md" color="gray.1200">
         {" "}
         <Box
diff --git a/frontend/src/layouts/RootLayout.js b/frontend/src/layouts/RootLayout.js
index 5d4b3b2a..0e6449c4 100644
--- a/frontend/src/layouts/RootLayout.js
+++ b/frontend/src/layouts/RootLayout.js
@@ -1,4 +1,13 @@
-import { Flex, Spinner } from "@chakra-ui/react";
+import { CloseIcon } from "@chakra-ui/icons";
+import {
+  Flex,
+  Spinner,
+  Center,
+  Text,
+  Button,
+  Link,
+  IconButton,
+} from "@chakra-ui/react";
 import React, { Suspense, useContext, useState, useEffect } from "react";
 const Sidebar = React.lazy(() => import("../components/Sidebar"));
 const Navbar = React.lazy(() => import("../components/Navbar"));
@@ -7,6 +16,7 @@ import UIContext from "../core/providers/UIProvider/context";
 const RootLayout = (props) => {
   const ui = useContext(UIContext);
   const [showSpinner, setSpinner] = useState(true);
+  const [showBanner, setShowBanner] = useState(true);
 
   useEffect(() => {
     if (ui.isAppView && ui.isAppReady) {
@@ -39,6 +49,57 @@ const RootLayout = (props) => {
         <Suspense fallback="">
           <Navbar />
         </Suspense>
+        <Flex
+          w="100%"
+          h={showBanner ? ["6rem", "3rem", null] : "0"}
+          minH={showBanner ? ["6rem", "3rem", null] : "0"}
+          animation="linear"
+          transition="1s"
+          overflow="hidden"
+        >
+          <Flex
+            px="20px"
+            w="100%"
+            minH={["6rem", "3rem", null]}
+            h={["6rem", "3rem", null]}
+            placeContent="center"
+            bgColor="suggested.900"
+            boxShadow="md"
+            position="relative"
+            className="banner"
+          >
+            <Center>
+              {" "}
+              <Text
+                fontWeight="600"
+                textColor="primary.900"
+                fontSize={["sm", "sm", "md", null]}
+              >
+                First 1000 users will get a lifetime access and a cookie.
+                Request early access now at our
+              </Text>
+              <Button
+                variant="link"
+                colorScheme="secondary"
+                color="secondary.900"
+                as={Link}
+                href={"https://discord.gg/V3tWaP36"}
+              >
+                Discord
+              </Button>
+            </Center>
+            {/* <Spacer /> */}
+            <IconButton
+              position="absolute"
+              top="0"
+              right="0"
+              icon={<CloseIcon />}
+              colorScheme="primary"
+              variant="ghost"
+              onClick={() => setShowBanner(false)}
+            />
+          </Flex>
+        </Flex>
         {!showSpinner && props.children}
         {showSpinner && <Spinner />}
       </Flex>