From b7fc9e8542ed487330260eef77ab64fd50426e68 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Tue, 9 Feb 2021 01:09:58 +0200
Subject: [PATCH] new design initial

---
 components/builds/BuildCard.tsx      |  1 -
 components/common/Breadcrumbs.tsx    |  1 -
 components/common/MyContainer.tsx    | 12 ++++++---
 components/common/Section.tsx        | 18 -------------
 components/layout/Banner.tsx         | 39 ++++++++++++----------------
 components/layout/IconNavBar.tsx     |  4 +--
 components/layout/index.tsx          | 32 +++++++++++++++++++----
 components/t/TeamManagementModal.tsx |  7 ++++-
 pages/sr/player/[id].tsx             |  7 +++--
 pages/t/[team].tsx                   |  3 ++-
 pages/xtrends.tsx                    |  5 ++--
 11 files changed, 67 insertions(+), 62 deletions(-)
 delete mode 100644 components/common/Section.tsx

diff --git a/components/builds/BuildCard.tsx b/components/builds/BuildCard.tsx
index 4dfb6c6b9..d162f5fbc 100644
--- a/components/builds/BuildCard.tsx
+++ b/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}
       >
diff --git a/components/common/Breadcrumbs.tsx b/components/common/Breadcrumbs.tsx
index c11d403be..349da1ac6 100644
--- a/components/common/Breadcrumbs.tsx
+++ b/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={
diff --git a/components/common/MyContainer.tsx b/components/common/MyContainer.tsx
index 0aa700897..cd63f6101 100644
--- a/components/common/MyContainer.tsx
+++ b/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;
diff --git a/components/common/Section.tsx b/components/common/Section.tsx
deleted file mode 100644
index f7a40b070..000000000
--- a/components/common/Section.tsx
+++ /dev/null
@@ -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;
diff --git a/components/layout/Banner.tsx b/components/layout/Banner.tsx
index 89d5979e2..ae2002707 100644
--- a/components/layout/Banner.tsx
+++ b/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>
   );
 };
diff --git a/components/layout/IconNavBar.tsx b/components/layout/IconNavBar.tsx
index 6ccc50af3..24be5e70f 100644
--- a/components/layout/IconNavBar.tsx
+++ b/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) {
diff --git a/components/layout/index.tsx b/components/layout/index.tsx
index d26e1d117..f9bf0acc1 100644
--- a/components/layout/index.tsx
+++ b/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>
diff --git a/components/t/TeamManagementModal.tsx b/components/t/TeamManagementModal.tsx
index 4e12f2c4e..27b184564 100644
--- a/components/t/TeamManagementModal.tsx
+++ b/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 && (
diff --git a/pages/sr/player/[id].tsx b/pages/sr/player/[id].tsx
index 49fe65e14..e504762a1 100644
--- a/pages/sr/player/[id].tsx
+++ b/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>
diff --git a/pages/t/[team].tsx b/pages/t/[team].tsx
index 3f7ce0410..19e46711d 100644
--- a/pages/t/[team].tsx
+++ b/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>
diff --git a/pages/xtrends.tsx b/pages/xtrends.tsx
index 54c0c389d..c149cb843 100644
--- a/pages/xtrends.tsx
+++ b/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>
   );
 }