- fix ios logo
This commit is contained in:
parent
81fae0a868
commit
90598e241d
@ -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",
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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} />
|
||||
))}
|
||||
|
||||
@ -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" })
|
||||
);
|
||||
|
||||
10
yarn.lock
10
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==
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user