logo layout improvement

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">
+          <Link
-              <Image
+            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
+              <ChakraAccountIconButton variant="link" colorScheme="secondary" />
-                  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"]}
+      minH="3rem"
-      // overflow="initial"
+      maxH="3rem"
       bgColor="primary.1200"
-      // flexWrap="wrap"
+      direction="row"
-      direction={["row", "row", "row", null, "row"]}
-      // zIndex={100}
       w="100%"
-      minW="100%"
-      m={0}
-      p={0}
       overflow="hidden"
     >
       <Suspense fallback={""}>