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";
@@ -21,7 +21,6 @@ const LandingNavbar = () => {
   const ui = useContext(UIContext);
   const { toggleModal } = useModals();
   return (
-    <>
     <>
       {ui.isMobileView && (
         <>
@@ -37,17 +36,22 @@ const LandingNavbar = () => {
       <Flex
         pl={ui.isMobileView ? 2 : 8}
         justifySelf="flex-start"
-          h="full"
+        h="100%"
         py={1}
+        flexBasis="200px"
+        flexGrow={1}
+        flexShirnk={1}
+        id="Logo Container"
       >
         <RouterLink href="/" passHref>
-            <Link h="full">
-              <Image
+          <Link
+            as={Image}
+            w="auto"
             h="full"
+            justifyContent="left"
             src={WHITE_LOGO_W_TEXT_URL}
             alt="Moonstream logo"
           />
-            </Link>
         </RouterLink>
       </Flex>
 
@@ -108,10 +112,7 @@ const LandingNavbar = () => {
               </Button>
             )}
             {ui.isLoggedIn && (
-                <ChakraAccountIconButton
-                  variant="link"
-                  colorScheme="secondary"
-                />
+              <ChakraAccountIconButton variant="link" colorScheme="secondary" />
             )}
           </ButtonGroup>
         </>
@@ -123,7 +124,6 @@ const LandingNavbar = () => {
         </>
       )}
     </>
-    </>
   );
 };
 

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={""}>