Use header_image and fine-tune cards

grubersjoe · Jun 5, 2023 · dfbd04a · dfbd04a
1 parent 2d5011f
commit dfbd04a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 41 deletions.
diff --git a/src/components/Match/MatchCard.tsx b/src/components/Match/MatchCard.tsx
@@ -34,7 +34,7 @@ type Props = {
   setPageMetadata?: boolean;
 };
 
-export const styles = ({ spacing, breakpoints }: Theme) =>
+export const styles = ({ spacing, breakpoints, palette }: Theme) =>
   ({
     card: {
       height: '100%',
@@ -49,37 +49,26 @@ export const styles = ({ spacing, breakpoints }: Theme) =>
       },
     },
     media: {
-      height: '42vw',
+      height: '44vw',
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'flex-end',
+      imageRendering: 'pixelated',
+      filter: 'drop-shadow(0px 0px 6px #111)',
+      borderBottom: `1px solid ${palette.background.paper}`,
 
       [breakpoints.up('sm')]: {
-        height: 170,
+        height: 180,
       },
 
       [breakpoints.up('lg')]: {
-        height: 200,
+        height: 220,
       },
 
       [breakpoints.up('xl')]: {
-        height: 240,
+        height: 250,
       },
     },
-    title: {
-      width: '100%',
-      height: spacing(10),
-      display: 'flex',
-      alignItems: 'flex-end',
-      justifyContent: 'space-between',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-    },
-    titleItem: {
-      padding: `${spacing(4)} ${spacing(2)} ${spacing(1.5)} ${spacing(2)}`,
-      fontWeight: 600,
-      textShadow: '1px 1px 1px #111',
-    },
     list: {
       margin: '1rem 0 0',
       paddingLeft: '2em',
@@ -114,9 +103,7 @@ const MatchCard: FunctionComponent<Props> = ({
     game.steamAppId,
   );
 
-  const image = steamApp
-    ? new URL(steamApp.screenshots[0].path_thumbnail)
-    : null;
+  const image = steamApp ? new URL(steamApp.header_image) : null;
 
   // It should be possible to join a match until the end of its date
   const isJoinable = isFuture(endOfDay(match.date.toDate()));
@@ -157,20 +144,6 @@ const MatchCard: FunctionComponent<Props> = ({
 
             {!image && <FallbackBanner game={game} />}
 
-            <Box
-              sx={{
-                ...sx.title,
-                ...(image && {
-                  background: 'linear-gradient(transparent, rgba(0, 0, 0, 1))',
-                }),
-              }}
-            >
-              <Typography sx={sx.titleItem}>{game.name}</Typography>
-              <Typography sx={sx.titleItem}>
-                {formatTime(match.date)} Uhr
-              </Typography>
-            </Box>
-
             {game.maxPlayers && (
               <Grid container item>
                 <ProgressBar
@@ -189,11 +162,12 @@ const MatchCard: FunctionComponent<Props> = ({
           justifyContent="space-between"
         >
           <CardContent sx={sx.cardContent}>
-            <Typography color="textSecondary" sx={{ mb: 2 }}>
-              {formatDate(match.date)}
+            <Typography color="textSecondary" mb={2}>
+              {formatDate(match.date)} {formatTime(match.date)} Uhr
               <Separator />
               <Link to={`/matches/${match.id}`}>Permalink</Link>
             </Typography>
+
             {match.description && (
               <Typography
                 sx={{

diff --git a/src/components/Match/Menu.tsx b/src/components/Match/Menu.tsx
@@ -75,7 +75,7 @@ const Menu: FunctionComponent<Props> = ({ game, match }) => {
 
   const shareMatch = (match: Match) => {
     if (navigator.share) {
-      const date = `${formatDate(match.date, false)} um ${formatTime(
+      const date = `${formatDate(match.date, false)} ${formatTime(
         match.date,
       )} Uhr`;
 

diff --git a/src/constants/date.ts b/src/constants/date.ts
@@ -1,6 +1,6 @@
 import { TimeString } from '../types';
 
-export const DATE_FORMAT = 'dd.MM.';
+export const DATE_FORMAT = 'dd. MMM';
 export const TIME_FORMAT = 'HH:mm';
 
 export const DEFAULT_TIME_INCREMENT = 15; // minutes

diff --git a/src/utils/date.ts b/src/utils/date.ts
@@ -49,7 +49,7 @@ export function formatDate(timestamp: Timestamp, smartWeekday = true): string {
     }
   }
 
-  return format(date, `EEEE ${DATE_FORMAT}`, { locale: de });
+  return format(date, DATE_FORMAT, { locale: de });
 }
 
 export function formatTime<R extends string = string>(