Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-05-24 04:22:10 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Remove Mantine

Browse Source
This commit is contained in:
Kalle (Sendou) 2021-10-30 22:58:40 +03:00
parent cf63f8d6a1
commit 370d5fb13a
12 changed files with 156 additions and 1575 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/components/common/Avatar.tsx
View File

@ -1,4 +1,4 @@
import { stitchesStyled } from "stitches.config";
import { styled } from "stitches.config";
export function Avatar({ src }: { src: string }) {
return (
@ -8,7 +8,7 @@ export function Avatar({ src }: { src: string }) {
);
}
const S_Container = stitchesStyled("div", {
const S_Container = styled("div", {
"-webkit-tap-highlight-color": "transparent",
position: "relative",
userSelect: "none",
@ -19,7 +19,7 @@ const S_Container = stitchesStyled("div", {
borderRadius: "16px",
});
const S_Avatar = stitchesStyled("img", {
const S_Avatar = styled("img", {
objectFit: "cover",
width: "100%",
height: "100%",

16
frontend/components/common/Button.tsx
View File

@ -1,16 +0,0 @@
import { Button as MantineButton } from "@mantine/core";
import { ReactNode } from "react";
export function Button({
children,
icon,
}: {
children: ReactNode;
icon: ReactNode;
}) {
return (
<MantineButton radius="lg" rightIcon={icon}>
{children}
</MantineButton>
);
}

61
frontend/components/common/SearchInput.tsx Normal file
View File

@ -0,0 +1,61 @@
import { HiSearch } from "react-icons/hi";
import { styled } from "stitches.config";
export function SearchInput() {
return (
<S_Container>
<S_Input type="text" placeholder="Search" />
<HiSearch />
</S_Container>
);
}
const S_Container = styled("div", {
display: "flex",
height: "1rem",
alignItems: "center",
justifyContent: "center",
paddingX: "$4",
paddingY: "$5",
backgroundColor: "$bgLighter",
borderRadius: "$rounded",
"&:focus-within": {
outline: "2px solid $theme",
},
"&> svg": {
height: "1.25rem",
color: "$text",
},
});
const S_Input = styled("input", {
width: "12rem",
height: "2rem",
border: "none",
backgroundColor: "$bgLighter",
fontSize: "$sm",
outline: "none",
color: "$text",
flexGrow: 1,
"&::placeholder": {
color: "$textLighter",
letterSpacing: "0.5px",
fontWeight: "$semiBold",
},
});
// .bigSearchInput {
// width: 12rem;
// border: none;
// background-color: var(--input-bg);
// font-size: var(--font-xs);
// outline: none;
// }
// .bigSearchInput::placeholder {
// color: var(--input-placeholder-color);
// letter-spacing: 0.5px;
// }

38
frontend/components/common/TextInput.tsx
View File

@ -1,38 +0,0 @@
import { TextInput as MantineTextInput } from "@mantine/core";
import { createStyles, MantineSize } from "@mantine/styles";
import { ReactNode } from "react";
const useStyles = createStyles(() => ({
input: {
backgroundColor: "var(--colors-bg-lighter)",
color: "var(--colors-text)",
fontWeight: 500,
fontSize: "var(--fonts-sm)",
"::placeholder": {
color: "var(--colors-text-lighter)",
},
},
}));
export function TextInput({
placeholder,
icon,
size,
}: {
placeholder: string;
icon?: ReactNode;
size?: MantineSize;
}) {
const { classes } = useStyles();
return (
<MantineTextInput
placeholder={placeholder}
rightSection={icon}
size={size}
radius="lg"
classNames={{
input: classes.input,
}}
/>
);
}

33
frontend/components/layout.tsx
View File

@ -1,11 +1,9 @@
import { ReactNode } from "react";
import { HiChevronDown, HiSearch } from "react-icons/hi";
import { TextInput } from "./common/TextInput";
import NextImage from "next/image";
import logo from "../assets/img/logo.png";
import { Avatar } from "./common/Avatar";
import { Button } from "./common/Button";
import { stitchesStyled } from "stitches.config";
import { styled } from "stitches.config";
import { SearchInput } from "./common/SearchInput";
const navItems = [
{
@ -33,13 +31,8 @@ export function Layout({ children }: { children: ReactNode }) {
<S_LogoContainer>
<NextImage src={logo} width={30} height={30} />
</S_LogoContainer>
<TextInput
placeholder="Search for anything"
icon={<HiSearch />}
size="md"
/>
<SearchInput />
<S_RightContainer>
<Button icon={<HiChevronDown />}>Create new...</Button>
<Avatar src="https://cdn.discordapp.com/avatars/79237403620945920/fcfd65a3bea598905abb9ca25296816b.png?size=80" />
</S_RightContainer>
</S_Header>
@ -65,14 +58,14 @@ export function Layout({ children }: { children: ReactNode }) {
);
}
const S_Header = stitchesStyled("header", {
const S_Header = styled("header", {
display: "grid",
gridTemplateColumns: "repeat(3, 1fr)",
alignItems: "center",
padding: "$4",
});
const S_LogoContainer = stitchesStyled("div", {
const S_LogoContainer = styled("div", {
backgroundColor: "$bgLighter",
// TODO: scroll image on hover? ...nav too?
backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%236741d9' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E")`,
@ -83,13 +76,13 @@ const S_LogoContainer = stitchesStyled("div", {
justifySelf: "flex-start",
});
const S_RightContainer = stitchesStyled("div", {
const S_RightContainer = styled("div", {
display: "flex",
gap: "$4",
justifySelf: "flex-end",
});
const S_Nav = stitchesStyled("nav", {
const S_Nav = styled("nav", {
display: "flex",
justifyContent: "center",
backgroundColor: "$bgLighter",
@ -97,7 +90,7 @@ const S_Nav = stitchesStyled("nav", {
backgroundImage: `url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%236741d9' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E")`,
});
const S_NavItems = stitchesStyled("div", {
const S_NavItems = styled("div", {
backgroundColor: "$bgLighter",
display: "inline-flex",
justifyContent: "center",
@ -107,13 +100,13 @@ const S_NavItems = stitchesStyled("div", {
paddingX: "$8",
});
const S_NavItemColumn = stitchesStyled("div", {
const S_NavItemColumn = styled("div", {
display: "flex",
flexDirection: "column",
gap: "$2",
});
const S_NavLink = stitchesStyled("a", {
const S_NavLink = styled("a", {
display: "flex",
alignItems: "center",
color: "$text",
@ -130,18 +123,18 @@ const S_NavLink = stitchesStyled("a", {
// TODO: figure out whether to server items from asset or public and migrate all images there
// + if not using next image do some adjusting of the image size, format etc.
const S_NavLinkImage = stitchesStyled("img", {
const S_NavLinkImage = styled("img", {
width: "1.75rem",
marginRight: "$2",
});
const S_NavGroupTitle = stitchesStyled("div", {
const S_NavGroupTitle = styled("div", {
textTransform: "uppercase",
fontWeight: "$bold",
color: "$textLighter",
fontSize: "$xxs",
});
const S_Main = stitchesStyled("main", {
const S_Main = styled("main", {
paddingTop: "$8",
});

32
frontend/components/tournament/InfoBanner.tsx
View File

@ -1,5 +1,5 @@
import { FaDiscord, FaTwitter } from "react-icons/fa";
import { stitchesStyled } from "stitches.config";
import { styled } from "stitches.config";
import { useTournamentData } from "../../hooks/data/useTournamentData";
const infos = [
@ -67,7 +67,7 @@ export function InfoBanner() {
);
}
const S_Container = stitchesStyled("div", {
const S_Container = styled("div", {
width: "min(48rem, 100%)",
padding: "$6",
background: "var(--background)",
@ -75,36 +75,36 @@ const S_Container = stitchesStyled("div", {
color: "var(--text)",
});
const S_TopRow = stitchesStyled("div", {
const S_TopRow = styled("div", {
display: "flex",
flexWrap: "wrap",
justifyContent: "space-between",
gap: "$4",
});
const S_DateName = stitchesStyled("div", {
const S_DateName = styled("div", {
display: "flex",
alignItems: "center",
gap: "$4",
});
const S_MonthDate = stitchesStyled("div", {
const S_MonthDate = styled("div", {
display: "flex",
flexDirection: "column",
alignItems: "center",
lineHeight: 1.25,
});
const S_Month = stitchesStyled("div", {
const S_Month = styled("div", {
fontSize: "$xs",
});
const S_Date = stitchesStyled("div", {
const S_Date = styled("div", {
fontSize: "$lg",
fontWeight: "$bold",
});
const S_TournamentName = stitchesStyled("div", {
const S_TournamentName = styled("div", {
paddingLeft: "$4",
borderColor: "var(--text)",
borderLeft: "1px solid",
@ -112,7 +112,7 @@ const S_TournamentName = stitchesStyled("div", {
fontWeight: "$extraBold",
});
const S_BottomRow = stitchesStyled("div", {
const S_BottomRow = styled("div", {
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
@ -124,7 +124,7 @@ const S_BottomRow = stitchesStyled("div", {
},
});
const S_Infos = stitchesStyled("div", {
const S_Infos = styled("div", {
display: "flex",
flexWrap: "wrap",
marginTop: "$8",
@ -135,20 +135,20 @@ const S_Infos = stitchesStyled("div", {
},
});
const S_IconButtons = stitchesStyled("div", {
const S_IconButtons = styled("div", {
display: "flex",
gap: "$4",
});
const S_InfoContainer = stitchesStyled("div", {
const S_InfoContainer = styled("div", {
fontSize: "$xs",
});
const S_InfoLabel = stitchesStyled("label", {
const S_InfoLabel = styled("label", {
fontWeight: "$extraBold",
});
const S_IconButton = stitchesStyled("a", {
const S_IconButton = styled("a", {
display: "inline-flex",
width: "2.25rem",
height: "2.25rem",
@ -161,10 +161,6 @@ const S_IconButton = stitchesStyled("a", {
color: "inherit",
transition: "background-color 0.3s",
"> svg": {
height: "1.75rem",
},
"&:active": {
transform: "translateY(1px)",
},

1476
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
frontend/package.json
View File

@ -7,13 +7,10 @@
"start": "next start"
},
"dependencies": {
"@emotion/styled": "^11.3.0",
"@headlessui/react": "^1.4.1",
"@mantine/core": "^3.0.5",
"@mantine/hooks": "^3.0.5",
"@mantine/next": "^3.0.5",
"@stitches/react": "^1.2.5",
"next": "^12.0.1",
"normalize.css": "^8.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",

31
frontend/pages/_app.tsx
View File

@ -1,8 +1,8 @@
import "normalize.css";
import "./_app.css";
import { AppProps } from "next/app";
import Head from "next/head";
import { MantineProvider, NormalizeCSS } from "@mantine/core";
import { SWRConfig } from "swr";
import { Layout } from "../components/layout";
import { globalCss } from "stitches.config";
@ -36,27 +36,18 @@ export default function App(props: AppProps) {
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
</Head>
<MantineProvider
theme={{
colorScheme: "dark",
primaryColor: "violet",
<SWRConfig
value={{
fetcher: (resource, init) =>
fetch(process.env.NEXT_PUBLIC_BACKEND_URL + resource, init).then(
(res) => res.json()
),
}}
>
<NormalizeCSS />
<SWRConfig
value={{
fetcher: (resource, init) =>
fetch(process.env.NEXT_PUBLIC_BACKEND_URL + resource, init).then(
(res) => res.json()
),
}}
>
<Layout>
<Component {...pageProps} />
</Layout>
</SWRConfig>
</MantineProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</SWRConfig>
</>
);
}

26
frontend/pages/_document.tsx
View File

@ -1,9 +1,21 @@
import Document from "next/document";
import { createGetInitialProps } from "@mantine/next";
import NextDocument, { Html, Head, Main, NextScript } from "next/document";
import { getCssText } from "stitches.config";
const getInitialProps = createGetInitialProps();
// TODO: https://stitches.dev/blog/using-nextjs-with-stitches
export default class _Document extends Document {
static getInitialProps = getInitialProps;
export default class Document extends NextDocument {
render() {
return (
<Html lang="en">
<Head>
<style
id="stitches"
dangerouslySetInnerHTML={{ __html: getCssText() }}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

5
frontend/pages/o/[organization]/[tournament].tsx
View File

@ -1,13 +1,12 @@
import { InfoBanner } from "components/tournament/InfoBanner";
import { Tab } from "components/common/Tab";
import { stitchesStyled } from "stitches.config";
import { styled } from "stitches.config";
const tabs = [
{ name: "Overview", id: "info" },
{ name: "Map Pool", id: "map-pool" },
{ name: "Bracket", id: "bracket" },
{ name: "Teams (23)", id: "teams" },
{ name: "Matches", id: "matches" },
{ name: "Streams (4)", id: "streams" },
];
@ -34,7 +33,7 @@ export default function TournamentPage() {
);
}
const S_Container = stitchesStyled("div", {
const S_Container = styled("div", {
display: "flex",
flexDirection: "column",
alignItems: "center",

2
frontend/stitches.config.ts
View File

@ -1,7 +1,7 @@
import { createStitches } from "@stitches/react";
export const {
styled: stitchesStyled,
styled,
css,
globalCss,
keyframes,