Merge pull request #260 from bugout-dev/1k-user-banner

1k user banner

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"

frontend/src/components/Navbar.js

@@ -6,7 +6,6 @@ import { Flex } from "@chakra-ui/react";
 import UIContext from "../core/providers/UIProvider/context";
 const ForgotPassword = React.lazy(() => import("./ForgotPassword"));
 const SignIn = React.lazy(() => import("./SignIn"));
-const SignUp = React.lazy(() => import("./SignUp"));
 const LandingNavbar = React.lazy(() => import("./LandingNavbar"));
 const AppNavbar = React.lazy(() => import("./AppNavbar"));
 const HubspotForm = React.lazy(() => import("./HubspotForm"));
@@ -27,7 +26,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" && (

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={() => {

frontend/src/components/SignIn.js

@@ -13,6 +13,7 @@ import {
   InputGroup,
   Button,
   Input,
+  Link,
   InputRightElement,
 } from "@chakra-ui/react";
 import CustomIcon from "./CustomIcon";
@@ -84,18 +85,6 @@ const SignIn = ({ toggleModal }) => {
           Login
         </Button>
       </form>
-      <Box height="1px" width="100%" background="#eaebf8" mb="1.875rem" />
-      <Text textAlign="center" fontSize="md" color="gray.1200">
-        Don`t have an account?{" "}
-        <Box
-          cursor="pointer"
-          color="primary.800"
-          as="span"
-          onClick={() => toggleModal("register")}
-        >
-          Register
-        </Box>
-      </Text>
       <Text textAlign="center" fontSize="md" color="gray.1200">
         {" "}
         <Box
@@ -106,6 +95,22 @@ const SignIn = ({ toggleModal }) => {
         >
           Forgot your password?
         </Box>
+        <Box height="1px" width="100%" background="#eaebf8" mb="1.875rem" />
+      </Text>
+      <Text textAlign="center" fontSize="md" color="gray.1200">
+        {/* Don`t have an account?{" "} */}
+        We are in early access. If you would like to use Moonstream,{" "}
+        <Link href={"https://discord.gg/V3tWaP36"} color="secondary.900">
+          contact us on Discord.
+        </Link>
+        {/* <Box
+          cursor="pointer"
+          color="primary.800"
+          as="span"
+          onClick={() => toggleModal("register")}
+        >
+          Register
+        </Box> */}
       </Text>
     </Modal>
   );

frontend/src/layouts/RootLayout.js

@@ -1,4 +1,12 @@
-import { Flex, Spinner } from "@chakra-ui/react";
+import { CloseIcon } from "@chakra-ui/icons";
+import {
+  Flex,
+  Spinner,
+  Center,
+  Text,
+  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 +15,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 +48,54 @@ const RootLayout = (props) => {
         <Suspense fallback="">
           <Navbar />
         </Suspense>
+        <Flex
+          w="100%"
+          h={showBanner ? ["6.5rem", "4.5rem", "3rem", null] : "0"}
+          minH={showBanner ? ["6.5rem", "4.5rem", "3rem", null] : "0"}
+          animation="linear"
+          transition="1s"
+          overflow="hidden"
+        >
+          <Flex
+            px="20px"
+            w="100%"
+            minH={["6.5rem", "4.5rem", "3rem", null]}
+            h={["6.5rem", "4.5rem", "3rem", null]}
+            placeContent="center"
+            bgColor="suggested.900"
+            boxShadow="md"
+            position="relative"
+            className="banner"
+          >
+            <Center w="calc(100% - 60px)">
+              {" "}
+              <Text
+                fontWeight="600"
+                textColor="primary.900"
+                fontSize={["sm", "sm", "md", null]}
+              >
+                Join early. Our first 1000 users get free lifetime access to
+                blockchain analytics. Contact our team on{" "}
+                <Link
+                  href={"https://discord.gg/V3tWaP36"}
+                  color="secondary.900"
+                >
+                  Discord
+                </Link>
+              </Text>
+            </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>