changed flavor cards

frontend/src/components/RatingBadge.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Typography, useTheme } from '@mui/material';
+import { Box, Typography, alpha, useTheme } from '@mui/material';
 
 interface RatingBadgeProps {
   score: number;
@@ -7,46 +7,74 @@ interface RatingBadgeProps {
   sx?: any;
 }
 
+const sizeMap = {
+  small: {
+    px: 1,
+    py: 0.25,
+    score: '0.75rem',
+    suffix: '0.55rem',
+    gap: 0.25,
+  },
+  medium: {
+    px: 1.25,
+    py: 0.4,
+    score: '0.95rem',
+    suffix: '0.625rem',
+    gap: 0.35,
+  },
+  large: {
+    px: 1.75,
+    py: 0.6,
+    score: '1.4rem',
+    suffix: '0.7rem',
+    gap: 0.5,
+  },
+} as const;
+
 const RatingBadge: React.FC<RatingBadgeProps> = ({ score, size = 'medium', sx }) => {
   const theme = useTheme();
+  const dims = sizeMap[size];
   const isLarge = size === 'large';
-  const isSmall = size === 'small';
+  const numeric = typeof score === 'number';
+  const display = numeric ? (isLarge ? score.toFixed(1) : score.toFixed(0)) : score;
 
   return (
     <Box
       sx={{
         display: 'inline-flex',
-        alignItems: 'center',
+        alignItems: 'baseline',
         justifyContent: 'center',
-        gap: 0.5,
-        bgcolor: 'primary.main',
-        color: 'primary.contrastText',
-        px: isLarge ? 2 : isSmall ? 1 : 1.5,
-        py: isLarge ? 0.5 : isSmall ? 0.2 : 0.4,
-        borderRadius: 2,
+        gap: dims.gap,
+        px: dims.px,
+        py: dims.py,
+        borderRadius: theme.tokens.radius.pill + 'px',
+        background: theme.tokens.accent.gradient,
+        color: theme.palette.primary.contrastText,
+        boxShadow: `0 6px 16px ${alpha(theme.palette.primary.main, 0.28)}, inset 0 1px 0 ${alpha('#ffffff', 0.2)}`,
         minWidth: 'fit-content',
-        height: 'fit-content',
-        boxShadow:
-          theme.palette.mode === 'dark'
-            ? '0 4px 12px rgba(0,0,0,0.4)'
-            : '0 2px 8px rgba(0,0,0,0.1)',
         ...sx,
       }}
     >
       <Typography
-        variant={isLarge ? 'h5' : isSmall ? 'caption' : 'subtitle1'}
-        sx={{ fontWeight: '900', lineHeight: 1, display: 'flex', alignItems: 'center' }}
+        component="span"
+        sx={{
+          fontWeight: 800,
+          lineHeight: 1,
+          fontSize: dims.score,
+          fontVariantNumeric: 'tabular-nums',
+          letterSpacing: '-0.02em',
+        }}
       >
-        {typeof score === 'number' ? (isLarge ? score.toFixed(1) : score.toFixed(0)) : score}
+        {display}
       </Typography>
       <Typography
-        variant="caption"
+        component="span"
         sx={{
-          fontSize: isLarge ? '0.75rem' : isSmall ? '0.55rem' : '0.65rem',
-          fontWeight: '900',
-          opacity: 0.9,
+          fontWeight: 700,
           lineHeight: 1,
-          mt: 0.2,
+          fontSize: dims.suffix,
+          opacity: 0.75,
+          letterSpacing: '0.02em',
         }}
       >
         / 10

frontend/src/components/StatusBadge.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Box, Typography, alpha, useTheme } from '@mui/material';
-import HistoryIcon from '@mui/icons-material/History';
-import BlockIcon from '@mui/icons-material/Block';
+import { useTranslation } from 'react-i18next';
 
 interface StatusBadgeProps {
   isLegacy?: boolean;
@@ -10,6 +9,11 @@ interface StatusBadgeProps {
   sx?: any;
 }
 
+const sizeMap = {
+  small: { px: 0.85, py: 0.3, dot: 5, font: '0.55rem', gap: 0.5 },
+  medium: { px: 1.1, py: 0.45, dot: 6, font: '0.65rem', gap: 0.6 },
+} as const;
+
 const StatusBadge: React.FC<StatusBadgeProps> = ({
   isLegacy,
   isAvailable,
@@ -17,41 +21,57 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
   sx,
 }) => {
   const theme = useTheme();
-  const isSmall = size === 'small';
+  const { t } = useTranslation();
 
   if (isAvailable && !isLegacy) return null;
 
-  const label = isLegacy ? 'Limited' : 'Out of Stock';
-  const color = isLegacy ? theme.palette.warning.main : theme.palette.error.main;
-  const Icon = isLegacy ? HistoryIcon : BlockIcon;
+  const dims = sizeMap[size];
+  const accent = isLegacy ? theme.palette.warning.main : theme.palette.error.main;
+  const label = isLegacy
+    ? t('status.limited', { defaultValue: 'Limited' })
+    : t('status.outOfStock', { defaultValue: 'Out of Stock' });
+
+  const isLight = theme.palette.mode === 'light';
+  const surface = alpha(theme.palette.background.paper, isLight ? 0.85 : 0.55);
 
   return (
     <Box
       sx={{
         display: 'inline-flex',
         alignItems: 'center',
-        gap: 0.5,
-        bgcolor: alpha(color, 0.9),
-        color: '#fff',
-        px: isSmall ? 0.8 : 1.2,
-        py: isSmall ? 0.2 : 0.4,
-        borderRadius: 1.5,
-        boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
-        backdropFilter: 'blur(4px)',
+        gap: dims.gap,
+        bgcolor: surface,
+        backdropFilter: theme.tokens.glass.blur,
+        WebkitBackdropFilter: theme.tokens.glass.blur,
+        color: 'text.primary',
+        px: dims.px,
+        py: dims.py,
+        borderRadius: theme.tokens.radius.pill + 'px',
         border: '1px solid',
-        borderColor: alpha('#fff', 0.2),
+        borderColor: alpha(accent, 0.4),
+        boxShadow: `0 2px 8px ${alpha(accent, 0.18)}`,
         ...sx,
       }}
     >
-      <Icon sx={{ fontSize: isSmall ? '0.7rem' : '0.9rem' }} />
-      <Typography
-        variant="caption"
+      <Box
         sx={{
-          fontWeight: '900',
+          width: dims.dot,
+          height: dims.dot,
+          borderRadius: '50%',
+          bgcolor: accent,
+          boxShadow: `0 0 0 2px ${alpha(accent, 0.2)}`,
+          flexShrink: 0,
+        }}
+      />
+      <Typography
+        component="span"
+        sx={{
+          fontWeight: 700,
           textTransform: 'uppercase',
-          letterSpacing: 0.5,
-          fontSize: isSmall ? '0.55rem' : '0.65rem',
+          letterSpacing: '0.06em',
+          fontSize: dims.font,
           lineHeight: 1,
+          color: 'text.primary',
         }}
       >
         {label}

frontend/src/components/ui/FlavorCard.tsx

@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
+import { alpha, useTheme } from '@mui/material/styles';
 import { GlassCard } from './Glass';
 import RatingBadge from '../RatingBadge';
 import StatusBadge from '../StatusBadge';
@@ -28,92 +29,193 @@ export const FlavorCard = ({
   caption,
   showCategory = true,
   compact = false,
-}: FlavorCardProps) => (
-  <Link
-    to={`/flavor/${flavor.id}`}
-    style={{ textDecoration: 'none', color: 'inherit', display: 'block', height: '100%' }}
-  >
-    <GlassCard
-      intensity="subtle"
-      sx={{
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        position: 'relative',
-        overflow: 'hidden',
-        transition: 'transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease',
-        '&:hover': {
-          transform: 'translateY(-3px)',
-          borderColor: 'primary.main',
-          boxShadow: (theme) => theme.tokens.elevation.md,
-        },
-      }}
-    >
-      <Box sx={{ position: 'absolute', top: 10, right: 10, zIndex: 1 }}>
-        <StatusBadge isLegacy={flavor.is_legacy} isAvailable={flavor.is_available} size="small" />
-      </Box>
+}: FlavorCardProps) => {
+  const theme = useTheme();
+  const hasRating = typeof flavor.average_rating === 'number' && flavor.average_rating > 0;
 
-      {flavor.image_url && (
+  return (
+    <Link
+      to={`/flavor/${flavor.id}`}
+      style={{ textDecoration: 'none', color: 'inherit', display: 'block', height: '100%' }}
+    >
+      <GlassCard
+        intensity="subtle"
+        sx={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          position: 'relative',
+          overflow: 'hidden',
+          transition:
+            'border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease',
+          '&:hover': {
+            borderColor: alpha(theme.palette.primary.main, 0.5),
+            boxShadow: theme.tokens.elevation.md,
+            '& .flavor-card-image': { transform: 'scale(1.04)' },
+          },
+        }}
+      >
         <Box
           sx={{
+            position: 'relative',
             width: '100%',
             aspectRatio: '1 / 1',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
             bgcolor: 'background.default',
             borderBottom: '1px solid',
             borderColor: 'divider',
             overflow: 'hidden',
           }}
         >
+          {flavor.image_url ? (
+            <Box
+              component="img"
+              className="flavor-card-image"
+              src={flavor.image_url}
+              loading="lazy"
+              alt={flavor.name}
+              sx={{
+                width: '100%',
+                height: '100%',
+                objectFit: 'cover',
+                transition: 'transform 600ms ease',
+              }}
+            />
+          ) : (
+            <Box
+              sx={{
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: alpha(theme.palette.primary.main, 0.04),
+              }}
+            >
+              <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
+                {flavor.name.charAt(0).toUpperCase()}
+              </Typography>
+            </Box>
+          )}
+
+          {/* Bottom fade for legibility of overlays */}
           <Box
-            component="img"
-            src={flavor.image_url}
-            loading="lazy"
-            alt={flavor.name}
             sx={{
-              width: '100%',
-              height: '100%',
-              objectFit: 'cover',
-              transition: 'transform 500ms ease',
-              '&:hover': { transform: 'scale(1.05)' },
+              position: 'absolute',
+              inset: 'auto 0 0 0',
+              height: '40%',
+              pointerEvents: 'none',
+              background: `linear-gradient(to top, ${alpha(theme.palette.background.paper, 0.55)} 0%, transparent 100%)`,
             }}
           />
-        </Box>
-      )}
 
-      <CardContent sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 0.75 }}>
-        <Typography
-          variant="h6"
-          sx={{ fontSize: compact ? '0.95rem' : '1rem', lineHeight: 1.25 }}
-          noWrap
-        >
-          {flavor.name}
-        </Typography>
+          {/* Status badge — top-right */}
+          <Box sx={{ position: 'absolute', top: 8, right: 8, zIndex: 1 }}>
+            <StatusBadge
+              isLegacy={flavor.is_legacy}
+              isAvailable={flavor.is_available}
+              size="small"
+            />
+          </Box>
 
-        {showCategory && flavor.category_name && (
-          <Typography variant="caption" color="text.secondary" noWrap>
-            {flavor.category_name}
-          </Typography>
-        )}
-
-        <Box
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            mt: 'auto',
-          }}
-        >
-          <RatingBadge score={flavor.average_rating || 0} size="small" />
-          {caption && (
-            <Typography variant="caption" color="text.secondary" noWrap>
-              {caption}
-            </Typography>
+          {/* Category chip — bottom-left */}
+          {showCategory && flavor.category_name && (
+            <Box
+              sx={{
+                position: 'absolute',
+                bottom: 8,
+                left: 8,
+                zIndex: 1,
+                display: 'inline-flex',
+                alignItems: 'center',
+                px: 0.85,
+                py: 0.35,
+                borderRadius: theme.tokens.radius.pill + 'px',
+                bgcolor: alpha(theme.palette.background.paper, 0.85),
+                backdropFilter: theme.tokens.glass.blur,
+                WebkitBackdropFilter: theme.tokens.glass.blur,
+                border: '1px solid',
+                borderColor: alpha(theme.palette.text.primary, 0.08),
+              }}
+            >
+              <Typography
+                variant="caption"
+                sx={{
+                  fontWeight: 700,
+                  fontSize: '0.6rem',
+                  letterSpacing: '0.04em',
+                  textTransform: 'uppercase',
+                  color: 'text.secondary',
+                  lineHeight: 1,
+                }}
+                noWrap
+              >
+                {flavor.category_name}
+              </Typography>
+            </Box>
           )}
         </Box>
-      </CardContent>
-    </GlassCard>
-  </Link>
-);
+
+        <CardContent
+          sx={{
+            flexGrow: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: compact ? 0.5 : 0.75,
+            p: compact ? 1.5 : 2,
+            '&:last-child': { pb: compact ? 1.5 : 2 },
+          }}
+        >
+          <Typography
+            variant="subtitle1"
+            sx={{
+              fontWeight: 700,
+              fontSize: compact ? '0.9rem' : '1rem',
+              lineHeight: 1.25,
+              letterSpacing: '-0.01em',
+            }}
+            noWrap
+          >
+            {flavor.name}
+          </Typography>
+
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 1,
+              mt: 'auto',
+            }}
+          >
+            {hasRating ? (
+              <RatingBadge score={flavor.average_rating || 0} size="small" />
+            ) : (
+              <Typography
+                variant="caption"
+                color="text.secondary"
+                sx={{
+                  fontWeight: 600,
+                  fontSize: '0.7rem',
+                  letterSpacing: '0.04em',
+                  textTransform: 'uppercase',
+                }}
+              >
+                —
+              </Typography>
+            )}
+            {caption && (
+              <Typography
+                variant="caption"
+                color="text.secondary"
+                noWrap
+                sx={{ fontWeight: 600, fontSize: '0.7rem' }}
+              >
+                {caption}
+              </Typography>
+            )}
+          </Box>
+        </CardContent>
+      </GlassCard>
+    </Link>
+  );
+};

frontend/src/i18n.ts

@@ -135,6 +135,10 @@ const resources = {
         save: 'Save',
         cancel: 'Cancel',
       },
+      status: {
+        limited: 'Limited',
+        outOfStock: 'Out of Stock',
+      },
       flavorDetail: {
         rateThisFlavor: 'Rate this flavor',
         scoreLabel: 'Your score, 1 to 10',
@@ -433,6 +437,10 @@ const resources = {
         save: 'Speichern',
         cancel: 'Abbrechen',
       },
+      status: {
+        limited: 'Limitiert',
+        outOfStock: 'Ausverkauft',
+      },
       flavorDetail: {
         rateThisFlavor: 'Diese Sorte bewerten',
         scoreLabel: 'Deine Bewertung, 1 bis 10',