Merge pull request #186 from bugout-dev/logo-layout-and-preload-imrpovement

Logo layout and preload imrpovement

frontend/pages/_app.js

@@ -21,6 +21,7 @@ const DefaultLayout = dynamic(() => import("../src/layouts"), {
 });
 import { useRouter } from "next/router";
 import NProgress from "nprogress";
+import { WHITE_LOGO_W_TEXT_URL } from "../src/core/constants";
 
 export default function CachingApp({ Component, pageProps }) {
   const [queryClient] = useState(new QueryClient());
@@ -48,6 +49,10 @@ export default function CachingApp({ Component, pageProps }) {
   const getLayout =
     Component.getLayout || ((page) => <DefaultLayout>{page}</DefaultLayout>);
 
+  const headLinks = [
+    { rel: "preload", as: "image", href: WHITE_LOGO_W_TEXT_URL },
+  ];
+  pageProps.preloads && headLinks.push(...pageProps.preloads);
   return (
     <>
       <style global jsx>{`
@@ -62,7 +67,7 @@ export default function CachingApp({ Component, pageProps }) {
         }
       `}</style>
       {pageProps.metaTags && <HeadSEO {...pageProps.metaTags} />}
-      {pageProps.preloads && <HeadLinks links={pageProps.preloads} />}
+      <HeadLinks links={headLinks} />
       <QueryClientProvider client={queryClient}>
         <AppContext>{getLayout(<Component {...pageProps} />)}</AppContext>
       </QueryClientProvider>

frontend/src/components/LandingNavbar.js

@@ -1,13 +1,13 @@
 import React, { Fragment, useContext } from "react";
 import RouterLink from "next/link";
 import {
-  Flex,
   Button,
   Image,
   ButtonGroup,
   Spacer,
   Link,
   IconButton,
+  Flex,
 } from "@chakra-ui/react";
 import { HamburgerIcon } from "@chakra-ui/icons";
 import useModals from "../core/hooks/useModals";
@@ -22,107 +22,107 @@ const LandingNavbar = () => {
   const { toggleModal } = useModals();
   return (
     <>
-      <>
-        {ui.isMobileView && (
-          <>
-            <IconButton
-              alignSelf="flex-start"
-              colorScheme="primary"
-              variant="solid"
-              onClick={() => ui.setSidebarToggled(!ui.sidebarToggled)}
-              icon={<HamburgerIcon />}
-            />
-          </>
-        )}
-        <Flex
-          pl={ui.isMobileView ? 2 : 8}
-          justifySelf="flex-start"
-          h="full"
-          py={1}
-        >
-          <RouterLink href="/" passHref>
-            <Link h="full">
-              <Image
-                h="full"
-                src={WHITE_LOGO_W_TEXT_URL}
-                alt="Moonstream logo"
-              />
-            </Link>
-          </RouterLink>
-        </Flex>
+      {ui.isMobileView && (
+        <>
+          <IconButton
+            alignSelf="flex-start"
+            colorScheme="primary"
+            variant="solid"
+            onClick={() => ui.setSidebarToggled(!ui.sidebarToggled)}
+            icon={<HamburgerIcon />}
+          />
+        </>
+      )}
+      <Flex
+        pl={ui.isMobileView ? 2 : 8}
+        justifySelf="flex-start"
+        h="100%"
+        py={1}
+        flexBasis="200px"
+        flexGrow={1}
+        flexShirnk={1}
+        id="Logo Container"
+      >
+        <RouterLink href="/" passHref>
+          <Link
+            as={Image}
+            w="auto"
+            h="full"
+            justifyContent="left"
+            src={WHITE_LOGO_W_TEXT_URL}
+            alt="Moonstream logo"
+          />
+        </RouterLink>
+      </Flex>
 
-        {!ui.isMobileView && (
-          <>
-            <Spacer />
-            <ButtonGroup
-              variant="link"
-              colorScheme="secondary"
-              spacing={4}
-              pr={16}
-            >
-              {ALL_NAV_PATHES.map((item, idx) => (
-                <RouteButton
-                  key={`${idx}-${item.title}-landing-all-links`}
-                  variant="link"
-                  href={item.path}
-                  color="white"
-                  isActive={!!(router.pathname === item.path)}
-                >
-                  {item.title}
-                </RouteButton>
-              ))}
+      {!ui.isMobileView && (
+        <>
+          <Spacer />
+          <ButtonGroup
+            variant="link"
+            colorScheme="secondary"
+            spacing={4}
+            pr={16}
+          >
+            {ALL_NAV_PATHES.map((item, idx) => (
+              <RouteButton
+                key={`${idx}-${item.title}-landing-all-links`}
+                variant="link"
+                href={item.path}
+                color="white"
+                isActive={!!(router.pathname === item.path)}
+              >
+                {item.title}
+              </RouteButton>
+            ))}
 
-              {ui.isLoggedIn && (
-                <RouterLink href="/stream" passHref>
-                  <Button
-                    as={Link}
-                    colorScheme="secondary"
-                    variant="outline"
-                    size="sm"
-                    fontWeight="400"
-                    borderRadius="2xl"
-                  >
-                    App
-                  </Button>
-                </RouterLink>
-              )}
-              {!ui.isLoggedIn && (
+            {ui.isLoggedIn && (
+              <RouterLink href="/stream" passHref>
                 <Button
-                  colorScheme="whiteAlpha"
+                  as={Link}
+                  colorScheme="secondary"
                   variant="outline"
-                  onClick={() => toggleModal("register")}
                   size="sm"
                   fontWeight="400"
                   borderRadius="2xl"
                 >
-                  Get started
+                  App
                 </Button>
-              )}
-              {!ui.isLoggedIn && (
-                <Button
-                  color="white"
-                  onClick={() => toggleModal("login")}
-                  fontWeight="400"
-                >
-                  Log in
-                </Button>
-              )}
-              {ui.isLoggedIn && (
-                <ChakraAccountIconButton
-                  variant="link"
-                  colorScheme="secondary"
-                />
-              )}
-            </ButtonGroup>
-          </>
-        )}
-        {ui.isLoggedIn && ui.isMobileView && (
-          <>
-            <Spacer />
-            <ChakraAccountIconButton variant="link" colorScheme="secondary" />
-          </>
-        )}
-      </>
+              </RouterLink>
+            )}
+            {!ui.isLoggedIn && (
+              <Button
+                colorScheme="whiteAlpha"
+                variant="outline"
+                onClick={() => toggleModal("register")}
+                size="sm"
+                fontWeight="400"
+                borderRadius="2xl"
+              >
+                Get started
+              </Button>
+            )}
+            {!ui.isLoggedIn && (
+              <Button
+                color="white"
+                onClick={() => toggleModal("login")}
+                fontWeight="400"
+              >
+                Log in
+              </Button>
+            )}
+            {ui.isLoggedIn && (
+              <ChakraAccountIconButton variant="link" colorScheme="secondary" />
+            )}
+          </ButtonGroup>
+        </>
+      )}
+      {ui.isLoggedIn && ui.isMobileView && (
+        <>
+          <Spacer />
+          <ChakraAccountIconButton variant="link" colorScheme="secondary" />
+        </>
+      )}
     </>
   );
 };

frontend/src/components/Navbar.js

@@ -19,16 +19,11 @@ const Navbar = () => {
       boxShadow={["sm", "md"]}
       alignItems="center"
       id="Navbar"
-      minH={["3rem", "3rem", "3rem", "3rem", "3rem", "3rem"]}
-      // overflow="initial"
+      minH="3rem"
+      maxH="3rem"
       bgColor="primary.1200"
-      // flexWrap="wrap"
-      direction={["row", "row", "row", null, "row"]}
-      // zIndex={100}
+      direction="row"
       w="100%"
-      minW="100%"
-      m={0}
-      p={0}
       overflow="hidden"
     >
       <Suspense fallback={""}>