nvrl/holy-flavor-rater
1
0 Fork 0
mirror of https://github.com/narrrl/holy-flavor-rater.git synced 2026-11-03 16:41:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into narl.io

Browse Source
This commit is contained in:
nvrl committed 2026-02-17 04:46:58 +01:00
2 parents 879e3e9e98 54a3b3b8be
commit 833d05a5e7
4 files changed
+102 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/pages/CommunityFeed.tsx
+9 -2
View File
@@ -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
frontend/src/pages/MainPage.tsx
+31 -9
View File
@@ -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>
frontend/src/pages/flavors/FlavorDetail.tsx
+43 -12
View File
@@ -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' }}>
frontend/src/theme.ts
+19 -4
View File
@@ -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,
}
}