new design initial

components/builds/BuildCard.tsx

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

components/common/Breadcrumbs.tsx

@@ -22,7 +22,6 @@ const Breadcrumbs: React.FC<Props> = ({ pages }) => {
     <>
       <MyHead title={pages[pages.length - 1].name} />
       <Breadcrumb
-        mt={2}
         mb={8}
         fontWeight="bold"
         separator={

components/common/MyContainer.tsx

@@ -1,11 +1,17 @@
-import { Container } from "@chakra-ui/react";
+import { Container, ContainerProps } from "@chakra-ui/react";
 
 interface Props {
   children: React.ReactNode;
   wide?: boolean;
 }
 
-const MyContainer: React.FC<Props> = ({ children, wide = false }) => (
-  <Container maxW={wide ? "100ch" : "75ch"}>{children}</Container>
+const MyContainer: React.FC<Props & ContainerProps> = ({
+  children,
+  wide = false,
+  ...props
+}) => (
+  <Container maxW={wide ? "100ch" : "75ch"} {...props}>
+    {children}
+  </Container>
 );
 export default MyContainer;

components/common/Section.tsx

@@ -1,18 +0,0 @@
-import { Box, BoxProps } from "@chakra-ui/react";
-import { useMyTheme } from "hooks/common";
-
-const Section: React.FC<BoxProps> = (props) => {
-  const { secondaryBgColor } = useMyTheme();
-  return (
-    <Box
-      as="section"
-      bg={secondaryBgColor}
-      boxShadow="0px 0px 16px 6px rgba(0,0,0,0.1)"
-      p="1.5rem"
-      rounded="lg"
-      {...props}
-    />
-  );
-};
-
-export default Section;

components/layout/Banner.tsx

@@ -1,13 +1,12 @@
-import { Box, Image } from "@chakra-ui/react";
-import MyContainer from "components/common/MyContainer";
+import { Box, Skeleton } from "@chakra-ui/react";
 
 const event = {
-  bg: "#3F3F3F",
+  bg: "yellow",
   logoUrl: "https://abload.de/img/screenshot2021-01-29agyjt6.png",
-  staleAfter: "2021-02-08", // always +1 from when the event ends?,
+  staleAfter: "2020-03-08", // always +1 from when the event ends?,
   link: "https://twitter.com/NineWholeGrains/status/1353110481721040897",
   content:
-    "Grand Graining Grounds is happening on February 6th and 7th. Starting prize pool of $2500!",
+    "Grand Graining Grounds is happening on February 6th and 7th. Starting prize pool of $2500! ",
 } as const;
 
 const Banner = () => {
@@ -15,25 +14,19 @@ const Banner = () => {
 
   return (
     <a href={event.link}>
-      <Box
-        bg={event.bg}
-        color="white"
-        p={2}
-        fontWeight="bold"
-        textAlign="center"
-      >
-        <MyContainer>
-          <Image
-            w={10}
-            h={10}
-            mb={2}
-            mx="auto"
-            src={event.logoUrl}
-            ignoreFallback
-          />
+      <Skeleton borderRadius="md" isLoaded={true}>
+        <Box
+          bg={event.bg}
+          color="black"
+          p={2}
+          mt={4}
+          fontWeight="bold"
+          textAlign="center"
+          borderRadius="md"
+        >
           {event.content}
-        </MyContainer>
-      </Box>
+        </Box>
+      </Skeleton>
     </a>
   );
 };

components/layout/IconNavBar.tsx

@@ -128,10 +128,10 @@ const IconNavBar = () => {
     <Flex
       as="nav"
       bg={secondaryBgColor}
-      py={2}
       justifyContent="center"
       flexWrap="wrap"
-      boxShadow="md"
+      boxShadow="lg"
+      rounded="md"
     >
       {navIcons.map(({ displayName, code, menuItems }) => {
         if (!menuItems.length) {

components/layout/index.tsx

@@ -1,6 +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 { useState } from "react";
 import { SWRConfig } from "swr";
 import Banner from "./Banner";
@@ -10,10 +11,19 @@ import TopNav from "./TopNav";
 
 const DATE_KEYS = ["createdAt", "updatedAt"];
 
+const WIDE = ["analyzer", "plans", "builds", "u/"];
+
 const Layout = ({ children }: { children: React.ReactNode }) => {
+  const { secondaryBgColor } = useMyTheme();
   const [errors, setErrors] = useState(new Set<string>());
   const toast = useToast();
 
+  const isWide =
+    window &&
+    WIDE.some((widePage) =>
+      window.location.pathname.startsWith("/" + widePage)
+    );
+
   return (
     <SWRConfig
       value={{
@@ -42,11 +52,23 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         },
       }}
     >
-      <TopNav />
-      <IconNavBar />
-      <Banner />
-      <Flex flexDirection="column" minH="100vh" pt="1rem">
-        <MyContainer wide>{children}</MyContainer>
+      <MyContainer p={0}>
+        <TopNav />
+        <IconNavBar />
+        <Banner />
+      </MyContainer>
+      <Flex flexDirection="column" minH="100vh" pt={4}>
+        <MyContainer
+          wide={isWide}
+          bg={secondaryBgColor}
+          rounded="md"
+          py={5}
+          px={8}
+          boxShadow="lg"
+          minH="48rem"
+        >
+          {children}
+        </MyContainer>
         <Footer />
       </Flex>
     </SWRConfig>

components/t/TeamManagementModal.tsx

@@ -110,7 +110,12 @@ const TeamManagementModal: React.FC<Props> = ({ team }) => {
 
   return (
     <>
-      <Button leftIcon={<FiUsers />} onClick={() => setIsOpen(true)} size="sm">
+      <Button
+        leftIcon={<FiUsers />}
+        onClick={() => setIsOpen(true)}
+        size="sm"
+        variant="outline"
+      >
         <Trans>Manage team</Trans>
       </Button>
       {isOpen && (

pages/sr/player/[id].tsx

@@ -4,7 +4,6 @@ import Breadcrumbs from "components/common/Breadcrumbs";
 import LinkButton from "components/common/LinkButton";
 import MyContainer from "components/common/MyContainer";
 import MyLink from "components/common/MyLink";
-import Section from "components/common/Section";
 import SubText from "components/common/SubText";
 import UserAvatar from "components/common/UserAvatar";
 import WeaponImage from "components/common/WeaponImage";
@@ -61,7 +60,7 @@ const SalmonRunPlayerPage = (props: Props) => {
                   {/* @ts-ignore */}
                   {salmonRunCategoryToNatural[category]}
                 </Heading>
-                <Wrap spacing={4} mt={4}>
+                <Wrap spacing={8} mt={4}>
                   {salmonRunStages
                     .filter((stage) =>
                       user.salmonRunRecords.some(
@@ -80,7 +79,7 @@ const SalmonRunPlayerPage = (props: Props) => {
                     )
                     .map((record) => (
                       <WrapItem key={record.id}>
-                        <Section>
+                        <Box>
                           <SubText mb={2} mt={2}>
                             {record.rotation.stage}
                           </SubText>
@@ -133,7 +132,7 @@ const SalmonRunPlayerPage = (props: Props) => {
                               <LinkButton link={link} />
                             ))}
                           </Flex>
-                        </Section>
+                        </Box>
                       </WrapItem>
                     ))}
                 </Wrap>

pages/t/[team].tsx

@@ -196,13 +196,14 @@ const TeamPage: React.FC<Props> = (props) => {
         </Popover>
       )}
       {user?.id === team.captainId && (
-        <Center my={4}>
+        <Center mt={6} mb={8}>
           <Stack direction={["column", "row"]} spacing={4}>
             <TeamManagementModal team={team} />
             <Button
               leftIcon={<FiEdit />}
               onClick={() => setProfileModalIsOpen(true)}
               size="sm"
+              variant="outline"
             >
               <Trans>Edit team profile</Trans>
             </Button>

pages/xtrends.tsx

@@ -11,7 +11,6 @@ import { t, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
 import Breadcrumbs from "components/common/Breadcrumbs";
 import ModeSelector from "components/common/ModeSelector";
-import Section from "components/common/Section";
 import SubText from "components/common/SubText";
 import WeaponImage from "components/common/WeaponImage";
 import WeaponLineChart from "components/top500/WeaponLineChart";
@@ -159,7 +158,7 @@ function Tier({
   if (!weapons.length) return null;
 
   return (
-    <Section key={tier.criteria} display="flex" my={4}>
+    <Flex key={tier.criteria} my={4}>
       <Flex
         flexDir="column"
         w="80px"
@@ -209,7 +208,7 @@ function Tier({
           </Popover>
         ))}
       </Flex>
-    </Section>
+    </Flex>
   );
 }