From 54a3b3b8be5ad2530ac13278728a2bcceec7a05a Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Tue, 17 Feb 2026 04:47:29 +0100
Subject: [PATCH] added frosted design

---
 frontend/src/pages/CommunityFeed.tsx        | 11 ++++-
 frontend/src/pages/MainPage.tsx             | 40 +++++++++++----
 frontend/src/pages/flavors/FlavorDetail.tsx | 55 ++++++++++++++++-----
 frontend/src/theme.ts                       | 23 +++++++--
 4 files changed, 102 insertions(+), 27 deletions(-)

diff --git a/frontend/src/pages/CommunityFeed.tsx b/frontend/src/pages/CommunityFeed.tsx
index 0be2472..4536971 100644
--- a/frontend/src/pages/CommunityFeed.tsx
+++ b/frontend/src/pages/CommunityFeed.tsx
@@ -18,7 +18,8 @@ import {
   ListItemButton,
   Pagination,
   TextField,
-  InputAdornment
+  InputAdornment,
+  alpha
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import { Link } from 'react-router-dom';
@@ -216,7 +217,13 @@ const CommunityFeed: React.FC = () => {
           <Grid size={{ xs: 12, md: 4 }} sx={{ display: { xs: 'none', md: 'block' } }}>
               <Card sx={{ borderRadius: 3, position: { md: 'sticky' }, top: { md: 100 } }}>
                   <CardContent sx={{ p: 0 }}>
-                      <Box sx={{ p: 2, bgcolor: 'action.hover', borderBottom: '1px solid', borderColor: 'divider' }}>
+                      <Box sx={{ 
+                          p: 2, 
+                          bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4), 
+                          backdropFilter: 'blur(8px)',
+                          borderBottom: '1px solid', 
+                          borderColor: 'divider' 
+                      }}>
                           <Typography variant="h6" sx={{ fontWeight: 'bold', mb: 1 }}>Following ({following.length})</Typography>
                           <TextField
                             fullWidth
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
index f0cddba..2113170 100644
--- a/frontend/src/pages/MainPage.tsx
+++ b/frontend/src/pages/MainPage.tsx
@@ -12,7 +12,8 @@ import {
   Chip,
   Container,
   IconButton,
-  useMediaQuery
+  useMediaQuery,
+  alpha
 } from '@mui/material';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -225,8 +226,8 @@ const MainPage: React.FC = () => {
             py: { xs: 4, md: 8 }, 
             px: { xs: 2, sm: 4, md: 6 },
             background: (theme) => theme.palette.mode === 'dark' 
-                ? 'linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%)' 
-                : 'linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%)',
+                ? `linear-gradient(180deg, ${alpha('#000', 0.4)} 0%, ${alpha('#000', 0)} 100%)` 
+                : `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.05)} 0%, ${alpha(theme.palette.primary.main, 0)} 100%)`,
             borderBottom: '1px solid',
             borderColor: 'divider',
             mb: 4
@@ -251,7 +252,18 @@ const MainPage: React.FC = () => {
                 ) : (
                     <Box sx={{ display: 'grid', gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }, gap: 3 }}>
                         {feedRatings.map(rating => (
-                            <Card key={rating.id} sx={{ borderRadius: 3, transition: 'transform 0.2s', '&:hover': { transform: 'translateY(-4px)' } }}>
+                            <Card 
+                                key={rating.id} 
+                                sx={{ 
+                                    borderRadius: 3, 
+                                    transition: 'all 0.3s ease', 
+                                    '&:hover': { transform: 'translateY(-4px)', boxShadow: '0 12px 24px rgba(0,0,0,0.15)' },
+                                    bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4),
+                                    backdropFilter: 'blur(10px)',
+                                    border: '1px solid',
+                                    borderColor: (theme) => alpha(theme.palette.text.primary, 0.05)
+                                }}
+                            >
                                 <CardContent sx={{ p: { xs: 1.5, sm: 2 } }}>
                                     <Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
                                         <Link to={`/profile/${rating.user}`} style={{ textDecoration: 'none', color: 'inherit', display: 'flex', alignItems: 'center' }}>
@@ -306,13 +318,15 @@ const MainPage: React.FC = () => {
                 mb: 4, 
                 borderRadius: 0, 
                 background: (theme) => theme.palette.mode === 'dark' 
-                    ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)' 
-                    : 'linear-gradient(135deg, #fdf6f7 0%, #f8e1e5 100%)',
+                    ? `radial-gradient(circle at top right, ${alpha(theme.palette.primary.main, 0.15)}, transparent), linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%)` 
+                    : `radial-gradient(circle at top right, ${alpha(theme.palette.primary.main, 0.1)}, transparent), linear-gradient(135deg, #fdf6f7 0%, #f8e1e5 100%)`,
                 textAlign: 'center',
-                borderBottom: '1px solid rgba(255,255,255,0.1)',
+                borderBottom: '1px solid',
+                borderColor: 'divider',
                 width: '100%',
                 boxSizing: 'border-box',
-                overflow: 'hidden'
+                overflow: 'hidden',
+                position: 'relative'
             }}
         >
             <Typography variant="h2" component="h1" gutterBottom sx={{ fontWeight: 'bold', fontSize: { xs: '2.2rem', sm: '3rem', md: '4.5rem' }, overflowWrap: 'break-word', px: 2 }}>
@@ -395,7 +409,15 @@ const MainPage: React.FC = () => {
                             </Box>
 
                             {featuredReview && (
-                                <Box sx={{ mt: 1, p: { xs: 2, md: 3 }, bgcolor: 'action.hover', borderRadius: 3, position: 'relative' }}>
+                                <Box sx={{ 
+                                    mt: 1, p: { xs: 2, md: 3 }, 
+                                    bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4), 
+                                    backdropFilter: 'blur(8px)',
+                                    borderRadius: 3, 
+                                    border: '1px solid',
+                                    borderColor: (theme) => alpha(theme.palette.text.primary, 0.05),
+                                    position: 'relative' 
+                                }}>
                                     <Typography variant="body2" sx={{ fontStyle: 'italic', mb: 1, fontSize: { xs: '0.9rem', md: '1.1rem' }, display: '-webkit-box', overflow: 'hidden', WebkitBoxOrient: 'vertical', WebkitLineClamp: 3 }}>
                                         "{featuredReview.comment}"
                                     </Typography>
diff --git a/frontend/src/pages/flavors/FlavorDetail.tsx b/frontend/src/pages/flavors/FlavorDetail.tsx
index dca26f5..eff4848 100644
--- a/frontend/src/pages/flavors/FlavorDetail.tsx
+++ b/frontend/src/pages/flavors/FlavorDetail.tsx
@@ -15,7 +15,8 @@ import {
   Container,
   Grid,
   Chip,
-  Stack
+  Stack,
+  alpha
 } from '@mui/material';
 import api from '../../api';
 import { useTitle } from '../../hooks/useTitle';
@@ -189,19 +190,21 @@ const FlavorDetail: React.FC = () => {
                     display: 'flex', 
                     alignItems: 'center', 
                     justifyContent: 'center', 
-                    bgcolor: 'background.paper',
+                    bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4),
+                    backdropFilter: 'blur(10px)',
                     borderRadius: 4,
                     overflow: 'hidden',
                     border: '1px solid',
-                    borderColor: 'divider',
-                    position: 'relative'
+                    borderColor: (theme) => alpha(theme.palette.text.primary, 0.05),
+                    position: 'relative',
+                    boxShadow: '0 20px 40px rgba(0,0,0,0.1)'
                 }}
               >
                   {!flavor.is_available && (
                         <Chip 
                             label={flavor.is_legacy ? "Unavailable" : "Out of Stock"} 
                             color={flavor.is_legacy ? "warning" : "error"}
-                            sx={{ position: 'absolute', top: 16, right: 16, fontWeight: 'bold' }}
+                            sx={{ position: 'absolute', top: 16, right: 16, fontWeight: 'bold', backdropFilter: 'blur(4px)', bgcolor: (theme) => alpha(theme.palette[flavor.is_legacy ? 'warning' : 'error'].main, 0.8) }}
                         />
                   )}
                   {flavor.image_url ? (
@@ -209,10 +212,10 @@ const FlavorDetail: React.FC = () => {
                         component="img" 
                         src={flavor.image_url} 
                         sx={{ 
-                            width: '80%', 
-                            height: '80%', 
+                            width: '85%', 
+                            height: '85%', 
                             objectFit: 'contain',
-                            filter: 'drop-shadow(0px 10px 20px rgba(0,0,0,0.15))'
+                            filter: 'drop-shadow(0px 15px 30px rgba(0,0,0,0.2))'
                         }} 
                       />
                   ) : (
@@ -276,7 +279,18 @@ const FlavorDetail: React.FC = () => {
 
           {/* New Rating Form */}
           {currentUser && flavor.user_rating === null && (
-              <Paper variant="outlined" sx={{ p: 4, mb: 6, borderRadius: 3, bgcolor: 'action.hover', border: '1px dashed', borderColor: 'divider' }}>
+              <Paper 
+                variant="outlined" 
+                sx={{ 
+                    p: 4, mb: 6, 
+                    borderRadius: 3, 
+                    bgcolor: (theme) => alpha(theme.palette.background.paper, 0.3), 
+                    backdropFilter: 'blur(8px)',
+                    border: '1px dashed', 
+                    borderColor: 'divider',
+                    boxShadow: 'none'
+                }}
+              >
                   <Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>Rate this flavor</Typography>
                   <form onSubmit={handleRatingSubmit}>
                       <Box sx={{ mb: 3 }}>
@@ -343,9 +357,18 @@ const FlavorDetail: React.FC = () => {
                                                 </Typography>
                                             </Box>
                                         </Box>
-                                        <Box sx={{ display: 'flex', alignItems: 'center', bgcolor: 'action.selected', px: 1.5, py: 0.5, borderRadius: 2 }}>
+                                        <Box sx={{ 
+                                            display: 'flex', 
+                                            alignItems: 'center', 
+                                            bgcolor: (theme) => alpha(theme.palette.primary.main, 0.1), 
+                                            backdropFilter: 'blur(4px)',
+                                            px: 1.5, py: 0.5, 
+                                            borderRadius: 2,
+                                            border: '1px solid',
+                                            borderColor: (theme) => alpha(theme.palette.primary.main, 0.1)
+                                        }}>
                                             <StarIcon sx={{ fontSize: '1rem', color: 'primary.main', mr: 0.5 }} />
-                                            <Typography variant="body2" sx={{ fontWeight: 'bold' }}>{rating.score}/10</Typography>
+                                            <Typography variant="body2" sx={{ fontWeight: 'bold', color: 'primary.main' }}>{rating.score}/10</Typography>
                                         </Box>
                                     </Box>
 
@@ -370,7 +393,15 @@ const FlavorDetail: React.FC = () => {
 
                             {/* Replies */}
                             {rating.replies.length > 0 && (
-                                <Box sx={{ mt: 2, bgcolor: 'action.hover', p: 2, borderRadius: 2 }}>
+                                <Box sx={{ 
+                                    mt: 2, 
+                                    bgcolor: (theme) => alpha(theme.palette.text.primary, 0.03), 
+                                    backdropFilter: 'blur(4px)',
+                                    p: 2, 
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: (theme) => alpha(theme.palette.text.primary, 0.05)
+                                }}>
                                     {rating.replies.map((reply: any) => (
                                         <Box key={reply.id} sx={{ mb: 1.5, '&:last-child': { mb: 0 } }}>
                                             <Typography variant="subtitle2" sx={{ fontWeight: 'bold', fontSize: '0.85rem' }}>
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
index ee134e6..4f7aec1 100644
--- a/frontend/src/theme.ts
+++ b/frontend/src/theme.ts
@@ -1,4 +1,4 @@
-import { createTheme, type ThemeOptions } from '@mui/material/styles';
+import { createTheme, type ThemeOptions, alpha } from '@mui/material/styles';
 import { flavors } from '@catppuccin/palette';
 
 export type CatppuccinTheme = 
@@ -173,18 +173,33 @@ export const getTheme = (mode: CatppuccinTheme) => {
       fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
     },
     components: {
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: alpha(palette.surface0.hex, 0.7),
+                    backdropFilter: 'blur(12px)',
+                    border: '1px solid',
+                    borderColor: alpha(palette.text.hex, 0.1),
+                    boxShadow: '0 4px 30px rgba(0, 0, 0, 0.1)',
+                }
+            }
+        },
         MuiCard: {
             styleOverrides: {
                 root: {
-                    backgroundColor: palette.surface0.hex,
-                    color: palette.text.hex,
+                    backgroundColor: alpha(palette.surface0.hex, 0.6),
+                    backdropFilter: 'blur(10px)',
+                    border: '1px solid',
+                    borderColor: alpha(palette.text.hex, 0.1),
+                    borderRadius: '16px',
                 }
             }
         },
         MuiAppBar: {
             styleOverrides: {
                 root: {
-                    backgroundColor: palette.crust.hex,
+                    backgroundColor: alpha(palette.crust.hex, 0.8),
+                    backdropFilter: 'blur(16px)',
                     color: palette.text.hex,
                 }
             }