more tournaments stuff

frontend-react/src/components/tournaments/TournamentCard.tsx

@@ -5,6 +5,7 @@ import { months } from "../../utils/lists"
 import trophy from "../../assets/trophy.png"
 import WeaponImage from "../common/WeaponImage"
 import { Weapon } from "../../types"
+import Flag from "../common/Flag"
 
 interface TournamentCardProps {
   tournament: {
@@ -25,9 +26,7 @@ const TournamentCard: React.FC<TournamentCardProps> = ({
   tournament,
   styledOnHover,
 }) => {
-  const { grayWithShade, themeColorWithShade, darkerBgColor } = useContext(
-    MyThemeContext
-  )
+  const { grayWithShade } = useContext(MyThemeContext)
   const a = new Date(parseInt(tournament.date))
   const dateStr = `${a.getDate()} ${
     months[a.getMonth() + 1]
@@ -43,7 +42,8 @@ const TournamentCard: React.FC<TournamentCardProps> = ({
       h="100%"
       flexDirection="column"
       justifyContent="space-between"
-      _hover={styledOnHover ? { bg: darkerBgColor } : undefined}
+      transition="all 0.2s"
+      _hover={styledOnHover ? { transform: "translateY(-3px)" } : undefined}
     >
       <Box fontWeight="semibold" as="h4" lineHeight="tight">
         {tournament.name}
@@ -55,7 +55,7 @@ const TournamentCard: React.FC<TournamentCardProps> = ({
         fontSize="xs"
         mt="0.5em"
       >
-        {dateStr}
+        {dateStr} {tournament.jpn && <Flag code="jp" />}
       </Box>
       <Flex
         alignItems="center"

frontend-react/src/components/tournaments/TournamentDetailsPage.tsx

@@ -25,7 +25,9 @@ interface TournamentDetailsPageProps {
 
 const TournamentDetailsPage: React.FC<RouteComponentProps &
   TournamentDetailsPageProps> = ({ id }) => {
-  const { themeColorWithShade, grayWithShade } = useContext(MyThemeContext)
+  const { themeColorWithShade, grayWithShade, textColor } = useContext(
+    MyThemeContext
+  )
   const { data, error, loading } = useQuery<
     SearchForTournamentByIdData,
     SearchForTournamentByIdVars
@@ -40,7 +42,6 @@ const TournamentDetailsPage: React.FC<RouteComponentProps &
   if (!data || !data.searchForTournamentById) return <Redirect to="/404" />
 
   const tournament = data.searchForTournamentById
-  console.log({ tournament })
 
   const abilityMap = (ability: Ability, index: number) => {
     const gridArea = `3 / ${1 + index} / 4 / ${2 + index}`
@@ -117,7 +118,7 @@ const TournamentDetailsPage: React.FC<RouteComponentProps &
                   alignItems="center"
                 >
                   <Box color={grayWithShade}>VICTORY</Box>
-                  <Box color="white" fontSize="xl">
+                  <Box color={textColor} fontSize="xl">
                     {round.winning_team_name}
                   </Box>
                 </Flex>
@@ -159,7 +160,7 @@ const TournamentDetailsPage: React.FC<RouteComponentProps &
                     alignItems="center"
                   >
                     <Box color={grayWithShade}>DEFEAT</Box>
-                    <Box color="white" fontSize="xl">
+                    <Box color={textColor} fontSize="xl">
                       {round.losing_team_name}
                     </Box>
                   </Flex>

frontend-react/src/components/tournaments/TournamentFilters.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react"
+import Button from "../elements/Button"
+import { Collapse } from "@chakra-ui/core"
+
+interface TournamentFiltersProps {}
+
+const TournamentFilters: React.FC<TournamentFiltersProps> = ({}) => {
+  const [show, setShow] = useState(true)
+  return (
+    <>
+      <Button onClick={() => setShow(!show)}>
+        {show ? "Hide filters" : "Show filters"}
+      </Button>
+      <Collapse mt={4} isOpen={show}>
+        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
+        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
+        labore wes anderson cred nesciunt sapiente ea proident.
+      </Collapse>
+    </>
+  )
+}
+
+export default TournamentFilters

frontend-react/src/components/tournaments/TournamentsPage.tsx

@@ -14,6 +14,7 @@ import Loading from "../common/Loading"
 import Error from "../common/Error"
 import TournamentCard from "./TournamentCard"
 import { Box, Grid } from "@chakra-ui/core"
+import TournamentFilters from "./TournamentFilters"
 
 interface SearchForTournamentsData {
   searchForTournaments: {
@@ -77,12 +78,14 @@ const TournamentsPage: React.FC<RouteComponentProps> = ({}) => {
         <title>Tournaments | sendou.ink</title>
       </Helmet>
       <PageHeader title="Tournaments" />
+      <TournamentFilters />
       <Grid
-        gridGap="0.5em"
+        gridGap="1em"
         gridTemplateColumns="repeat(auto-fit, minmax(260px, 1fr))"
+        mt="1em"
       >
         {tournaments.map(tournament => (
-          <Box key={tournament.id} p="0.5em">
+          <Box key={tournament.id}>
             <Link to={`/tournaments/${tournament.id}`}>
               <TournamentCard tournament={tournament} styledOnHover />
             </Link>