get rid of mid container

components/builds/BuildCard.tsx

@@ -55,6 +55,7 @@ const BuildCard: React.FC<BuildCardProps & BoxProps> = ({
         rounded="lg"
         overflow="hidden"
         boxShadow="md"
+        bg={secondaryBgColor}
         p="20px"
         {...props}
       >

components/layout/HeaderBanner.tsx

@@ -1,6 +1,6 @@
-import Image from "next/image";
 import { Box, Flex } from "@chakra-ui/layout";
 import { useMyTheme } from "hooks/common";
+import Image from "next/image";
 
 const HeaderBanner = ({
   icon,
@@ -12,40 +12,38 @@ const HeaderBanner = ({
   subtitle: string;
 }) => {
   const { secondaryBgColor, gray } = useMyTheme();
-  const isTASL = icon === "tasl_main";
   return (
     <Flex
       bg={secondaryBgColor}
       flexWrap="wrap"
       boxShadow="lg"
-      rounded="md"
-      mt={6}
+      justify={["flex-start", null, "center"]}
+      mt={4}
       mb={2}
       h={12}
     >
-      <Box mt={isTASL ? "-0.5rem" : "-1rem"}>
+      <Box mt="-1rem" ml={[3, null, 0]}>
         <Image
           src={`/layout/${icon}.png`}
-          height={isTASL ? 60 : 80}
-          width={isTASL ? 60 : 80}
+          height={80}
+          width={80}
           alt={`${icon} logo`}
-          priority={true}
+          priority
         />
       </Box>
-      <Box
-        as="span"
-        fontSize="lg"
-        mr={2}
-        mb={6}
-        mt={3}
-        ml={2}
-        fontWeight="bold"
-      >
-        {title}
-      </Box>
-      <Box as="span" mt="16px" fontSize="sm" color={gray}>
-        {subtitle}
-      </Box>
+      <Flex align="center" mb={5}>
+        <Box mx={2} fontWeight="bold" fontSize={["1.25rem", null, "1rem"]}>
+          {title}
+        </Box>
+        <Box
+          mt="1px"
+          display={["none", null, "block"]}
+          fontSize="sm"
+          color={gray}
+        >
+          {subtitle}
+        </Box>
+      </Flex>
     </Flex>
   );
 };

components/layout/IconNavBar.tsx

@@ -119,7 +119,6 @@ const IconNavBar = () => {
       justifyContent="center"
       flexWrap="wrap"
       boxShadow="lg"
-      rounded="md"
     >
       {navIcons.map(({ displayName, code, menuItems }) => {
         if (!menuItems.length) {

components/layout/index.tsx

@@ -1,7 +1,7 @@
 import { Flex, useToast } from "@chakra-ui/react";
 import { t } from "@lingui/macro";
 import MyContainer from "components/common/MyContainer";
-import { useMyTheme } from "hooks/common";
+import { useRouter } from "next/router";
 import { useState } from "react";
 import { SWRConfig } from "swr";
 import Banner from "./Banner";
@@ -27,15 +27,13 @@ const Layout = ({
   header: React.ReactNode;
   children: React.ReactNode;
 }) => {
-  const { secondaryBgColor } = useMyTheme();
+  const router = useRouter();
   const [errors, setErrors] = useState(new Set<string>());
   const toast = useToast();
 
-  const isWide =
-    window &&
-    WIDE.some((widePage) =>
-      window.location.pathname.startsWith("/" + widePage)
-    );
+  const isWide = WIDE.some((widePage) =>
+    router.pathname.startsWith("/" + widePage)
+  );
 
   return (
     <SWRConfig
@@ -66,22 +64,12 @@ const Layout = ({
         },
       }}
     >
-      <MyContainer p={0}>
-        <TopNav />
-        <IconNavBar />
-        <Banner />
-        {header}
-      </MyContainer>
+      <TopNav />
+      <IconNavBar />
+      <Banner />
+      {header}
       <Flex flexDirection="column" minH="100vh" pt={4}>
-        <MyContainer
-          wide={isWide}
-          bg={secondaryBgColor}
-          rounded="md"
-          py={5}
-          px={7}
-          boxShadow="lg"
-          minH="24rem"
-        >
+        <MyContainer wide={isWide} mt={2}>
           {children}
         </MyContainer>
         <Footer />