From 90598e241ddc1b1e1a5298da5fb97652601964de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enrico=20B=C3=BChler?= <buehler@unom.io>
Date: Mon, 25 Apr 2022 01:23:58 +0200
Subject: [PATCH] - improve styling - fix ios logo

---
 package.json                         |   1 +
 src/Components/Cards/Team/index.tsx  |   4 +-
 src/Components/Layout/index.tsx      |  17 ++-
 src/Components/Logo/index.tsx        |  74 ++++++++----
 src/Sections/TeamGenerator/index.tsx |  96 ++++++++++++----
 src/Styles/customTheme.ts            | 162 +++++++++++++++++++--------
 yarn.lock                            |  10 +-
 7 files changed, 271 insertions(+), 93 deletions(-)

diff --git a/package.json b/package.json
index 8faf16f..c12f719 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^1.1.7",
     "@chakra-ui/react": "^1.8.8",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
diff --git a/src/Components/Cards/Team/index.tsx b/src/Components/Cards/Team/index.tsx
index 4947527..f830cff 100644
--- a/src/Components/Cards/Team/index.tsx
+++ b/src/Components/Cards/Team/index.tsx
@@ -24,7 +24,9 @@ const CardTeam: VFC<CardTeamProps> = ({ players, index }) => {
         Team {index + 1}
       </Heading>
       {players.map((player, index) => (
-        <Text key={index}>{player}</Text>
+        <Text fontWeight={500} key={index}>
+          {player}
+        </Text>
       ))}
     </Container>
   );
diff --git a/src/Components/Layout/index.tsx b/src/Components/Layout/index.tsx
index e68c3c9..e7a9c35 100644
--- a/src/Components/Layout/index.tsx
+++ b/src/Components/Layout/index.tsx
@@ -1,4 +1,5 @@
-import { Box, Flex } from "@chakra-ui/react";
+import { Box, chakra, Flex } from "@chakra-ui/react";
+import { isValidMotionProp, motion } from "framer-motion";
 import type { ReactNode } from "react";
 
 import Footer from "./Footer";
@@ -9,15 +10,25 @@ type LayoutProps = {
   children: ReactNode;
 };
 
+const ContentContainer = chakra(motion.main, {
+  shouldForwardProp: (prop) => isValidMotionProp(prop) || prop === "children",
+});
+
 const Layout = ({ children }: LayoutProps) => {
   return (
     <Box margin="0 auto" maxWidth={800} transition="0.5s ease-out">
       <Meta />
       <Flex wrap="wrap" margin="8" minHeight="90vh">
         <Header />
-        <Box width="full" as="main" marginY={22}>
+        <ContentContainer
+          transition={{ type: "tween", ease: "circOut" }}
+          animate={{ y: 0, opacity: 1 }}
+          initial={{ y: 100, opacity: 0 }}
+          width="full"
+          marginY={22}
+        >
           {children}
-        </Box>
+        </ContentContainer>
         <Footer />
       </Flex>
     </Box>
diff --git a/src/Components/Logo/index.tsx b/src/Components/Logo/index.tsx
index 8d04cdd..72be0a8 100644
--- a/src/Components/Logo/index.tsx
+++ b/src/Components/Logo/index.tsx
@@ -1,16 +1,21 @@
-import { Box } from "@chakra-ui/react";
+import { Box, chakra } from "@chakra-ui/react";
 import React from "react";
-
+import { useToken } from "@chakra-ui/react";
+import { motion } from "framer-motion";
 const Logo = () => {
   return (
     <Box maxW="200px">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 798.92 453.49">
+      <motion.svg
+        style={{ width: "100%" }}
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 798.92 453.49"
+      >
         <defs>
           <style>
             {`   .b,
       .c {
         fill: none;
-        stroke: #5300f9;
+        stroke: var(--chakra-colors-accent);
         stroke-miterlimit: 10;
         stroke-width: 40px;
       }
@@ -20,11 +25,13 @@ const Logo = () => {
       }
 
       .e {
-        fill: #ffca22;
+        fill: var(--chakra-colors-highlight);
       }
 
       .played {
-          fill: white;
+        fill: var(--chakra-colors-main);
+          transition: fill 0.2s linear;
+        
       }
 
       .c {
@@ -32,24 +39,51 @@ const Logo = () => {
       }`}
           </style>
         </defs>
-        <path
-          d="M56.19 101.61c266.27-71.11 171.63 434.9 399.46-31.49 61.99-126.9-79.84 503.13 12.99 302.97C531.18 238.26 682 186.15 706.22 356.36"
-          className="b"
-        ></path>
-        <path
+
+        <motion.g
+          style={{ zIndex: 0 }}
+          transition={{ type: "tween", ease: "circOut", duration: 0.5 }}
+          animate={{ scale: 1 }}
+          initial={{ scale: 0 }}
+        >
+          <motion.path
+            transition={{ delay: 1, opacity: { duration: 0.1 } }}
+            animate={{ pathLength: 1, opacity: 1 }}
+            initial={{ pathLength: 0, opacity: 0 }}
+            d="M759.76 308.57L714.51 378.92 637.05 333.59"
+            className="c"
+          ></motion.path>
+          <motion.path
+            transition={{ delay: 0.1, opacity: { duration: 0.1 } }}
+            animate={{ pathLength: 1, opacity: 1 }}
+            initial={{ pathLength: 0, opacity: 0 }}
+            d="M108.52 155.94L38.17 110.7 83.5 33.23"
+            className="c"
+          ></motion.path>
+          <motion.path
+            transition={{ type: "tween", duration: 1, ease: "circOut" }}
+            animate={{ pathLength: 1 }}
+            initial={{ pathLength: 0 }}
+            style={{ pathOffset: 34 }}
+            d="M56.19 101.61c266.27-71.11 171.63 434.9 399.46-31.49 61.99-126.9-79.84 503.13 12.99 302.97C531.18 238.26 682 186.15 706.22 356.36"
+            className="b"
+          ></motion.path>
+        </motion.g>
+        <motion.path
+          animate={{ scale: 1 }}
+          initial={{ scale: 0 }}
+          transition={{ type: "spring" }}
           d="M315.73 169.2l.75 20.36c1.08 29.53-7.23 56.08-25.21 80.02-17.7 23.57-41.19 39.88-70.75 48.73-31.28 9.37-57.48 7.07-78.59-6.89-20.83-14.05-31.77-35.7-32.86-65.23s8.06-57.2 27.4-83.57c19.34-26.37 43.94-43.89 73.5-52.74 18.65-5.59 36.03-6.45 51.83-2.77 16.09 3.59 28.55 11.16 37.97 22.54l-42.71 38.01c-8.5-10.21-25.16-13.62-44.68-7.78-15.78 4.73-28.8 13.84-38.46 27.17-9.67 13.33-14.35 28.07-13.76 44.12s5.93 27.21 16.36 34.81c10.43 7.6 24.98 8.75 43.06 3.33 23.25-6.96 38.42-20.49 45.24-40.22l-48.79 14.61-1.62-44.15 101.31-30.35zM391.34 304.36l78.16 35.59v48.46l-129.79-59.1v-201.9l128.35 58.44v48.17l-76.72-34.93v27.98l69.51 31.65v47.59l-69.51-31.65v29.71zM606.36 52.68l51.34-24.49v201.9l-39.8 18.99-71.24-67.54v101.53l-51.63 24.63V105.79l40.09-19.13 71.24 67.54V52.68z"
           className="e"
-        ></path>
-        <path
-          d="M759.76 308.57L714.51 378.92 637.05 333.59"
-          className="c"
-        ></path>
-        <path d="M108.52 155.94L38.17 110.7 83.5 33.23" className="c"></path>
-        <path
+        ></motion.path>
+        <motion.path
+          animate={{ scale: 1 }}
+          initial={{ scale: 2 }}
+          transition={{ type: "tween", duration: 0.3 }}
           d="M256.3 210.31l1.47 5.29.18-.05c3.57-6.6 7.64-8.91 13.21-10.46 12.95-3.6 25.16.37 28.95 13.96 3.48 12.5-3.97 23.51-16.56 27.02-7.39 2.06-13.52 1.21-17.04-1.55l-.18.05 5.51 19.79-13.13 3.66-15.08-54.18 12.68-3.53zm20.89 27.4c6.66-1.85 11.34-7.28 9.28-14.67-2.06-7.39-8.87-9.62-15.53-7.77-6.57 1.83-11.25 7.26-9.19 14.65 2.06 7.39 8.87 9.62 15.44 7.79zM329.61 193.54l-11.34 53.25-13.33-2.84 11.34-53.25 13.33 2.84zM353.23 248.28c-10.77 1.62-18.81-.91-20.2-10.18-1.45-9.64 7.04-13.03 15.2-14.83l14.18-3.09c4.08-.9 5.37-1.86 4.89-5.04s-3.42-4.27-11.28-3.09c-5.71.86-8.65 1.68-9.79 7.5l-13.01 1.96c-.25-12.5 11.24-15.67 22.29-17.33 19.29-2.9 24.32 2.57 25.43 9.96l4.18 27.81-12.83 1.93-.63-4.21c-4.02 5.1-12.34 7.7-18.43 8.61zm8.26-20.87l-7.77 1.84c-4.72 1.09-6.86 2.76-6.33 6.31s4.29 5 9.35 4.24c6.83-1.03 13.94-5.35 12.94-12l-.49-3.28c-2.34 1.6-5.11 2.3-7.71 2.88zM410.7 262.01c-4.03 6.47-7.99 7.61-15.5 6.7-3.2-.39-6.37-.97-9.54-1.54l1.14-9.4c1.95.43 3.91.76 5.89 1 3.29.4 4.95-.73 6.89-3.36l1.67-2.75-14.58-41.64 14.66 1.79 8.57 28.32 14.65-25.5 14.47 1.76-28.33 44.62zM470.33 259.52c-16.19 3.07-28.18-1.2-31-16.09-2.84-14.98 6.75-23.35 22.93-26.42 17.67-3.36 27.87 3.67 30.7 18.55l.23 1.21-39.35 7.47.02.09c.72 3.81 5.82 8.82 14.93 7.09 5.4-1.02 8.87-3.52 10.17-7.33l14.33-2.72c-2.12 10.14-10.68 15.81-22.96 18.14zm7.52-27.93c-.41-2.14-4.56-8.29-14.33-6.44-10.6 2.01-11.35 10.25-11.16 11.27l.02.09 25.49-4.84-.02-.09zM512.39 236.55c-12.59-3.13-20.78-12.58-17.4-26.18 3.15-12.68 15.04-18.51 27.72-15.36 7.44 1.85 12.39 5.52 14.09 9.65l.09.02 4.61-18.56 13.32 3.31-13.13 52.84-12.86-3.2 1.21-4.87-.09-.02c-5.55 3.89-11.5 3.87-17.56 2.37zm6.03-8.55c6.62 1.64 13.36-.78 15.21-8.22 1.85-7.44-2.98-12.74-9.6-14.38-6.71-1.67-13.46.75-15.3 8.2-1.85 7.44 2.98 12.74 9.69 14.41z"
           className="played"
-        ></path>
-      </svg>
+        ></motion.path>
+      </motion.svg>
     </Box>
   );
 };
diff --git a/src/Sections/TeamGenerator/index.tsx b/src/Sections/TeamGenerator/index.tsx
index e92374d..71b0315 100644
--- a/src/Sections/TeamGenerator/index.tsx
+++ b/src/Sections/TeamGenerator/index.tsx
@@ -1,14 +1,19 @@
+import { CloseIcon } from "@chakra-ui/icons";
 import {
   Box,
   Button,
   FormControl,
   FormLabel,
   Text,
-  Input,
   Stack,
   SimpleGrid,
+  chakra,
+  Input,
+  InputRightElement,
+  InputGroup,
 } from "@chakra-ui/react";
 import CardTeam from "Components/Cards/Team";
+import { AnimatePresence, isValidMotionProp, motion } from "framer-motion";
 import { useState } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 
@@ -49,28 +54,71 @@ const SectionTeamGenerator = () => {
           setTeams(teams);
         })}
       >
-        <Stack spacing={3}>
-          {fields.map((field, index) => (
-            <Input
-              placeholder={`Player ${index + 1} name`}
-              key={field.id}
-              size="md"
-              type="name"
-              {...register(`players.${index}.value`)}
-              autoFocus={index === fields.length}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" && index === fields.length - 1) {
-                  e.preventDefault();
-                  const value = getValues(`players.${index}.value`);
-                  if (value !== "") {
-                    append({ value: "" });
-                  } else {
-                    remove(index);
-                  }
-                }
-              }}
-            />
-          ))}
+        <Stack mb={6} spacing={3}>
+          <FormControl>
+            <FormLabel htmlFor="team-count">Player names</FormLabel>
+            <Stack spacing={3}>
+              <AnimatePresence>
+                {fields.map((field, index) => (
+                  <InputGroup
+                    as={motion.div}
+                    animate={{
+                      scale: 1,
+                      transition: {
+                        type: "spring",
+                        stiffness: 200,
+                        damping: 15,
+                        mass: 1,
+                      },
+                    }}
+                    transition="none"
+                    initial={{ scale: 0 }}
+                    exit={{
+                      scale: 0,
+                      transition: {
+                        type: "tween",
+                        ease: "circIn",
+                        duration: 0.2,
+                      },
+                    }}
+                  >
+                    {index !== 0 && (
+                      <InputRightElement>
+                        <Button
+                          mr="0.25rem"
+                          size="sm"
+                          onClick={() => remove(index)}
+                        >
+                          <CloseIcon />
+                        </Button>
+                      </InputRightElement>
+                    )}
+                    <Input
+                      placeholder={`Player ${index + 1} name`}
+                      key={field.id}
+                      size="md"
+                      type="name"
+                      {...register(`players.${index}.value`)}
+                      autoFocus={index === fields.length}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && index === fields.length - 1) {
+                          e.preventDefault();
+                          const value = getValues(`players.${index}.value`);
+                          if (value !== "") {
+                            append({ value: "" });
+                          } else {
+                            remove(index);
+                          }
+                        }
+                      }}
+                    />
+                  </InputGroup>
+                ))}
+              </AnimatePresence>
+            </Stack>
+          </FormControl>
+        </Stack>
+        <Stack spacing={6} as={motion.div} layout>
           <FormControl>
             <FormLabel htmlFor="team-count">Team count</FormLabel>
             <Input
@@ -85,7 +133,7 @@ const SectionTeamGenerator = () => {
         </Stack>
       </form>
 
-      <SimpleGrid columns={2} mt="1rem" spacing="1.5rem">
+      <SimpleGrid as={motion.div} columns={2} mt="1rem" spacing="1.5rem">
         {teams.map((team, index) => (
           <CardTeam players={team} index={index} key={index} />
         ))}
diff --git a/src/Styles/customTheme.ts b/src/Styles/customTheme.ts
index f36176f..9acf699 100644
--- a/src/Styles/customTheme.ts
+++ b/src/Styles/customTheme.ts
@@ -1,13 +1,21 @@
-import { extendTheme } from "@chakra-ui/react";
+import {
+  extendTheme,
+  theme as baseTheme,
+  withDefaultColorScheme,
+} from "@chakra-ui/react";
 
 const Card = {
-  baseStyle: {
+  baseStyle: (props: any) => ({
     display: "flex",
     flexDirection: "column",
     background: "neutral",
+    transition: "background-color 0.1s linear",
     alignItems: "center",
+    borderWidth: "2px",
+    borderStyle: "solid",
+    borderColor: props.colorMode === "dark" ? "gray.800" : "gray.100",
     gap: 6,
-  },
+  }),
   // Two variants: rounded and smooth
   variants: {
     rounded: {
@@ -27,50 +35,116 @@ const Card = {
   },
 };
 
-export const theme = extendTheme({
-  fonts: {
-    heading: "Raleway, sans-serif",
-    body: "Inter, sans-serif",
-  },
-  config: {
-    initialColorMode: "dark",
-  },
-  semanticTokens: {
-    color: {
-      neutral: {
-        default: "white.50",
-        _dark: "black.50",
+export const theme = extendTheme(
+  {
+    colors: {
+      yellow: {
+        50: "#fff4da",
+        100: "#ffe5ad",
+        200: "#ffd77d",
+        300: "#ffce4b",
+        400: "#ffc81a",
+        500: "#e69f00",
+        600: "#b37000",
+        700: "#804700",
+        800: "#4e2500",
+        900: "#1d0900",
+      },
+      brand: {
+        50: "#f0e3ff",
+        100: "#cdb2ff",
+        200: "#aa7fff",
+        300: "#884dff",
+        400: "#661aff",
+        500: "#4d00e6",
+        600: "#3c00b4",
+        700: "#2a0082",
+        800: "#190050",
+        900: "#0a0020",
+      },
+
+      purple: {
+        50: "#f0e3ff",
+        100: "#cdb2ff",
+        200: "#aa7fff",
+        300: "#884dff",
+        400: "#661aff",
+        500: "#4d00e6",
+        600: "#3c00b4",
+        700: "#2a0082",
+        800: "#190050",
+        900: "#0a0020",
+      },
+      gray: {
+        "50": "#F2F2F2",
+        "100": "#DBDBDB",
+        "200": "#C4C4C4",
+        "300": "#ADADAD",
+        "400": "#969696",
+        "500": "#808080",
+        "600": "#666666",
+        "700": "#4D4D4D",
+        "800": "#333333",
+        "900": "#1A1A1A",
       },
     },
   },
-  components: {
-    Card,
-  },
-  styles: {
-    global: (props: any) => ({
-      "html, body": {
-        fontSize: "sm",
-        color: props.colorMode === "dark" ? "white" : "gray.600",
-        background: props.colorMode === "dark" ? "black" : "white",
-        lineHeight: "tall",
+  {
+    semanticTokens: {
+      colors: {
+        main: {
+          default: "black",
+          _dark: "white",
+        },
+        accent: {
+          default: "brand.600",
+          _dark: "brand.300",
+        },
+        highlight: {
+          default: "yellow.400",
+          _dark: "yellow.400",
+        },
+        neutral: {
+          default: "white",
+          _dark: "black",
+        },
       },
-      a: {
-        color: props.colorMode === "dark" ? "teal.300" : "teal.500",
-      },
-    }),
-  },
-  colors: {
-    gray: {
-      "50": "#F2F2F2",
-      "100": "#DBDBDB",
-      "200": "#C4C4C4",
-      "300": "#ADADAD",
-      "400": "#969696",
-      "500": "#808080",
-      "600": "#666666",
-      "700": "#4D4D4D",
-      "800": "#333333",
-      "900": "#1A1A1A",
     },
   },
-});
+  {
+    fonts: {
+      heading: "Raleway, sans-serif",
+      body: "Inter, sans-serif",
+    },
+    config: {
+      initialColorMode: "dark",
+    },
+
+    components: {
+      Card,
+      Input: {
+        defaultProps: {
+          focusBorderColor: "brand.200",
+        },
+      },
+    },
+    shadows: {
+      outline: "0 0 0 3px purple.300",
+    },
+
+    styles: {
+      global: (props: any) => ({
+        body: {
+          fontSize: "sm",
+          color: props.colorMode === "dark" ? "white" : "gray.600",
+          background: props.colorMode === "dark" ? "black" : "white",
+          lineHeight: "tall",
+        },
+        a: {
+          color: props.colorMode === "dark" ? "teal.300" : "teal.500",
+        },
+      }),
+    },
+  },
+  withDefaultColorScheme({ colorScheme: "brand" })
+);
diff --git a/yarn.lock b/yarn.lock
index 0c0cfb3..97f884a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -536,6 +536,14 @@
   dependencies:
     "@chakra-ui/utils" "1.10.4"
 
+"@chakra-ui/icons@^1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-1.1.7.tgz#f8c0c44a969c8654b90026b7d375b550c4bfbc49"
+  integrity sha512-YIHxey/B4M2PyFASlHXtAWFyW+tsAtGAChOJ8dsM2kpu1MbVUqm/6nMI1KIFd7Te5IWuNYA75rAHBdLI0Yu61A==
+  dependencies:
+    "@chakra-ui/icon" "2.0.5"
+    "@types/react" "^17.0.15"
+
 "@chakra-ui/image@1.1.10":
   version "1.1.10"
   resolved "https://registry.yarnpkg.com/@chakra-ui/image/-/image-1.1.10.tgz#65bae4086559937d25c728660ae743bce9360cb2"
@@ -2241,7 +2249,7 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@^17", "@types/react@^17.0.44":
+"@types/react@^17", "@types/react@^17.0.15", "@types/react@^17.0.44":
   version "17.0.44"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
   integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==