From e043d9a93379ab962ff7ad12f0a4e2a9b4b15eae Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Wed, 18 Feb 2026 05:11:40 +0100
Subject: [PATCH] reverted some of the rounded corners

---
 frontend/src/components/RatingBadge.tsx     | 34 +++++------
 frontend/src/pages/PublicProfile.tsx        | 65 ++++++++++-----------
 frontend/src/pages/flavors/FlavorDetail.tsx |  2 +-
 frontend/src/theme.ts                       | 14 ++++-
 4 files changed, 61 insertions(+), 54 deletions(-)

diff --git a/frontend/src/components/RatingBadge.tsx b/frontend/src/components/RatingBadge.tsx
index 30cf83b..9fc6eff 100644
--- a/frontend/src/components/RatingBadge.tsx
+++ b/frontend/src/components/RatingBadge.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Typography, alpha, useTheme } from '@mui/material';
+import { Box, Typography, useTheme } from '@mui/material';
 
 interface RatingBadgeProps {
     score: number;
@@ -15,32 +15,32 @@ const RatingBadge: React.FC<RatingBadgeProps> = ({ score, size = 'medium', sx })
     return (
         <Box sx={{ 
             display: 'flex', 
-            flexDirection: 'column', 
-            alignItems: 'center', 
-            bgcolor: alpha(theme.palette.primary.main, 0.1),
-            color: 'primary.main',
-            px: isLarge ? 2.5 : (isSmall ? 1 : 1.5), 
-            py: isLarge ? 0.8 : (isSmall ? 0.2 : 0.5), 
-            borderRadius: isLarge ? 2.5 : (isSmall ? 1 : 2),
-            minWidth: isLarge ? 70 : (isSmall ? 40 : 50),
-            border: '1px solid',
-            borderColor: alpha(theme.palette.primary.main, 0.2),
-            lineHeight: 1,
+            flexDirection: 'row', 
+            alignItems: 'baseline',
+            gap: 0.5,
+            bgcolor: 'primary.main',
+            color: 'primary.contrastText',
+            px: isLarge ? 2 : (isSmall ? 1 : 1.5), 
+            py: isLarge ? 0.8 : (isSmall ? 0.3 : 0.5), 
+            borderRadius: 1.5,
+            minWidth: '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 }}
             >
-                {typeof score === 'number' ? score.toFixed(isLarge ? 1 : 0) : score}
+                {typeof score === 'number' ? (isLarge ? score.toFixed(1) : score.toFixed(0)) : score}
             </Typography>
             <Typography 
                 variant="caption" 
                 sx={{ 
-                    fontSize: isLarge ? '0.7rem' : (isSmall ? '0.5rem' : '0.6rem'), 
-                    fontWeight: 'bold', 
-                    opacity: 0.8,
-                    mt: 0.2
+                    fontSize: isLarge ? '0.75rem' : (isSmall ? '0.55rem' : '0.65rem'), 
+                    fontWeight: '900', 
+                    opacity: 0.9,
                 }}
             >
                 / 10
diff --git a/frontend/src/pages/PublicProfile.tsx b/frontend/src/pages/PublicProfile.tsx
index 3087d06..086390c 100644
--- a/frontend/src/pages/PublicProfile.tsx
+++ b/frontend/src/pages/PublicProfile.tsx
@@ -231,7 +231,8 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
           bgcolor: (theme) => alpha(theme.palette.background.paper, 0.6),
           backdropFilter: 'blur(20px)',
           mb: 4,
-          overflow: 'hidden'
+          overflow: 'hidden',
+          position: 'relative'
       }}>
           <Box sx={{ 
               height: { xs: 120, sm: 180 }, 
@@ -255,7 +256,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                         sx={{ 
                             width: { xs: 140, sm: 180 }, 
                             height: { xs: 140, sm: 180 }, 
-                            border: '4px solid', 
+                            border: '6px solid', 
                             borderColor: (theme) => theme.palette.background.paper,
                             boxShadow: '0 12px 40px rgba(0,0,0,0.2)',
                             fontSize: '4.5rem',
@@ -322,7 +323,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                                   { label: 'Following', val: data.following_count }
                               ].map((stat, i) => (
                                   <React.Fragment key={stat.label}>
-                                      <Box sx={{ py: 1.2, px: { xs: 2, sm: 3 }, textAlign: 'center', minWidth: { xs: 80, sm: 110 } }}>
+                                      <Box sx={{ py: 1.2, width: { xs: 85, sm: 115 }, textAlign: 'center' }}>
                                           <Typography variant="h6" sx={{ fontWeight: '900', lineHeight: 1, color: 'text.primary' }}>{stat.val}</Typography>
                                           <Typography variant="caption" sx={{ fontWeight: '900', textTransform: 'uppercase', opacity: 0.5, fontSize: '0.6rem', letterSpacing: 1 }}>{stat.label}</Typography>
                                       </Box>
@@ -365,7 +366,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
             onChange={(_, v) => setActiveTab(v)} 
             variant="fullWidth"
             sx={{ 
-                '& .MuiTab-root': { fontWeight: '900', textTransform: 'none', fontSize: '1rem' },
+                '& .MuiTab-root': { fontWeight: '900', textTransform: 'none', fontSize: '1rem', borderRadius: 2 },
                 '& .Mui-selected': { color: 'primary.main' }
             }}
           >
@@ -410,13 +411,13 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                                       <Paper sx={{ 
                                           width: 64, height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center', 
                                           bgcolor: tier.color, color: 'black', fontWeight: '900', fontSize: '2rem',
-                                          borderRadius: 3, boxShadow: `0 12px 32px ${alpha(tier.color, 0.5)}`
+                                          borderRadius: 2, boxShadow: `0 12px 32px ${alpha(tier.color, 0.5)}`
                                       }}>
                                           {tier.key}
                                       </Paper>
                                       <Box>
                                           <Typography variant="h4" sx={{ fontWeight: '900', lineHeight: 1.1, letterSpacing: -0.5 }}>{tier.title}</Typography>
-                                          <Typography variant="subtitle2" color="text.secondary" sx={{ fontWeight: 'bold', opacity: 0.7 }}>{items.length} total items</Typography>
+                                          <Typography variant="subtitle2" color="text.secondary" sx={{ fontWeight: 'bold', opacity: 0.7 }}>{items.length} items</Typography>
                                       </Box>
                                       <Divider sx={{ flexGrow: 1, borderStyle: 'dashed', opacity: 0.3 }} />
                                   </Box>
@@ -425,32 +426,30 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                                       {items.map((rating: Rating) => (
                                           <Grid key={rating.id} size={{ xs: 6, sm: 4, md: 3, lg: 2 }}>
                                               <Card sx={{ 
-                                                  height: '100%', borderRadius: 4, border: '1px solid', borderColor: 'divider',
+                                                  height: '100%', borderRadius: 3, border: '1px solid', borderColor: 'divider',
                                                   bgcolor: (theme) => alpha(theme.palette.background.paper, 0.4),
-                                                  transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)', 
-                                                  '&:hover': { transform: 'translateY(-12px)', borderColor: 'primary.main', boxShadow: '0 20px 48px rgba(0,0,0,0.15)' }
+                                                  transition: 'all 0.3s ease', 
+                                                  '&:hover': { transform: 'translateY(-8px)', borderColor: 'primary.main', boxShadow: '0 12px 32px rgba(0,0,0,0.1)' }
                                               }}>
                                                   <Link to={`/flavor/${rating.flavor}`} style={{ textDecoration: 'none', color: 'inherit' }}>
-                                                      <Box sx={{ position: 'relative', aspectRatio: '1/1', bgcolor: alpha(theme.palette.text.primary, 0.03), display: 'flex', alignItems: 'center', justifyContent: 'center', p: 3 }}>
-                                                          <Box component="img" src={rating.flavor_image || undefined} sx={{ height: '90%', width: '90%', objectFit: 'contain', filter: 'drop-shadow(0 16px 24px rgba(0,0,0,0.12))' }} />
-                                                          <Box sx={{ position: 'absolute', top: 12, right: 12, zIndex: 2 }}>
-                                                              <Box sx={{ bgcolor: 'background.paper', borderRadius: 2, p: 0.5, boxShadow: 2, border: '1px solid', borderColor: 'divider' }}>
-                                                                  <RatingBadge score={rating.score} size="small" />
-                                                              </Box>
+                                                      <Box sx={{ position: 'relative', aspectRatio: '1/1', bgcolor: alpha(theme.palette.text.primary, 0.03), display: 'flex', alignItems: 'center', justifyContent: 'center', p: 2 }}>
+                                                          <Box component="img" src={rating.flavor_image || undefined} sx={{ height: '90%', width: '90%', objectFit: 'contain', filter: 'drop-shadow(0 12px 24px rgba(0,0,0,0.1))' }} />
+                                                          <Box sx={{ position: 'absolute', top: 10, right: 10, zIndex: 2 }}>
+                                                              <RatingBadge score={rating.score} size="small" />
                                                           </Box>
                                                       </Box>
-                                                      <CardContent sx={{ p: 2, textAlign: 'center' }}>
-                                                          <Typography variant="subtitle2" sx={{ fontWeight: '900', fontSize: '0.9rem', lineHeight: 1.3, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
+                                                      <CardContent sx={{ p: 1.5, textAlign: 'center' }}>
+                                                          <Typography variant="subtitle2" sx={{ fontWeight: '900', fontSize: '0.85rem', lineHeight: 1.2, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
                                                               {rating.flavor_name}
                                                           </Typography>
                                                       </CardContent>
                                                   </Link>
                                                   {adminMode && (
-                                                      <Box sx={{ px: 1.5, pb: 1.5 }}>
+                                                      <Box sx={{ px: 1, pb: 1 }}>
                                                           <Button 
                                                             size="small" fullWidth variant="outlined" color="secondary"
                                                             onClick={(e) => { e.preventDefault(); e.stopPropagation(); navigate(`/admin-panel/rating/${rating.id}`); }}
-                                                            sx={{ borderRadius: 2, textTransform: 'none', fontSize: '0.65rem', py: 0.5, fontWeight: 'bold' }}
+                                                            sx={{ borderRadius: 1.5, textTransform: 'none', fontSize: '0.6rem', py: 0, fontWeight: 'bold' }}
                                                           >
                                                               Manage
                                                           </Button>
@@ -470,16 +469,16 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
           {activeTab === 1 && (
               <Box maxWidth="md" sx={{ mx: 'auto' }}>
                   {currentUser && (
-                      <Paper sx={{ p: 4, mb: 5, borderRadius: 5, border: '1px solid', borderColor: 'primary.main', bgcolor: alpha(theme.palette.primary.main, 0.02), boxShadow: `0 8px 32px ${alpha(theme.palette.primary.main, 0.05)}` }}>
+                      <Paper sx={{ p: 4, mb: 5, borderRadius: 4, border: '1px solid', borderColor: 'primary.main', bgcolor: alpha(theme.palette.primary.main, 0.02) }}>
                           <Typography variant="h5" gutterBottom sx={{ fontWeight: '900', mb: 2 }}>Leave a message</Typography>
                           <form onSubmit={handleAddComment}>
                               <TextField 
                                 fullWidth multiline rows={3} placeholder="Say something about their taste..." 
                                 value={newComment} onChange={(e) => setNewComment(e.target.value)}
-                                sx={{ mb: 3, '& .MuiOutlinedInput-root': { borderRadius: 4, bgcolor: 'background.paper' } }}
+                                sx={{ mb: 3, '& .MuiOutlinedInput-root': { borderRadius: 3, bgcolor: 'background.paper' } }}
                               />
-                              <Button variant="contained" type="submit" endIcon={<SendIcon />} sx={{ borderRadius: 3, px: 5, py: 1.2, fontWeight: '900', fontSize: '1rem', textTransform: 'none' }}>
-                                Send to Guestbook
+                              <Button variant="contained" type="submit" endIcon={<SendIcon />} sx={{ borderRadius: 2, px: 5, py: 1.2, fontWeight: '900', fontSize: '1rem', textTransform: 'none' }}>
+                                Send Message
                               </Button>
                           </form>
                       </Paper>
@@ -487,18 +486,18 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
 
                   <Stack spacing={2.5}>
                       {data.comments.length === 0 ? (
-                          <Box sx={{ py: 12, textAlign: 'center', bgcolor: alpha(theme.palette.action.hover, 0.5), borderRadius: 6, border: '2px dashed', borderColor: 'divider' }}>
+                          <Box sx={{ py: 12, textAlign: 'center', bgcolor: alpha(theme.palette.action.hover, 0.5), borderRadius: 4, border: '2px dashed', borderColor: 'divider' }}>
                               <Typography color="text.secondary" variant="h6" sx={{ fontWeight: 'bold' }}>No entries in the guestbook yet.</Typography>
                               <Typography variant="body2" color="text.secondary">Be the first to leave a message!</Typography>
                           </Box>
                       ) : (
                           data.comments.map(comment => (
-                              <Card key={comment.id} elevation={0} sx={{ borderRadius: 4, border: '1px solid', borderColor: 'divider', transition: 'all 0.2s', '&:hover': { borderColor: 'primary.main', bgcolor: alpha(theme.palette.background.paper, 0.8) } }}>
+                              <Card key={comment.id} elevation={0} sx={{ borderRadius: 3, border: '1px solid', borderColor: 'divider', transition: 'all 0.2s', '&:hover': { borderColor: 'primary.main', bgcolor: alpha(theme.palette.background.paper, 0.8) } }}>
                                   <CardContent sx={{ p: 3 }}>
                                       <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                                           <Stack direction="row" spacing={2.5} alignItems="center">
                                               <Link to={`/profile/${comment.author_username}`} style={{ textDecoration: 'none' }}>
-                                                  <Avatar src={comment.author_avatar || undefined} sx={{ width: 52, height: 52, boxShadow: '0 4px 16px rgba(0,0,0,0.1)', border: '2px solid white' }}>
+                                                  <Avatar src={comment.author_avatar || undefined} sx={{ width: 48, height: 48, boxShadow: '0 4px 12px rgba(0,0,0,0.1)', border: '2px solid white' }}>
                                                       {comment.author_username.charAt(0).toUpperCase()}
                                                   </Avatar>
                                               </Link>
@@ -515,7 +514,7 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                                               </IconButton>
                                           )}
                                       </Box>
-                                      <Typography variant="body1" sx={{ mt: 3, pl: { xs: 0, sm: 9.5 }, lineHeight: 1.7, fontSize: '1.05rem' }}>
+                                      <Typography variant="body1" sx={{ mt: 3, pl: { xs: 0, sm: 9.5 }, lineHeight: 1.7, fontSize: '1rem' }}>
                                           <RichText text={comment.text} />
                                       </Typography>
                                   </CardContent>
@@ -533,9 +532,9 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                   ) : (
                       data.followers.map(user => (
                           <Grid key={user.id} size={{ xs: 12, sm: 6, md: 4 }}>
-                              <Card sx={{ borderRadius: 4, border: '1px solid', borderColor: 'divider', overflow: 'hidden', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', '&:hover': { borderColor: 'primary.main', transform: 'translateY(-6px)', boxShadow: '0 12px 32px rgba(0,0,0,0.1)' } }}>
-                                  <Box sx={{ display: 'flex', alignItems: 'center', p: 2.5, gap: 2.5 }}>
-                                      <Avatar component={Link} to={`/profile/${user.username}`} src={user.avatar || undefined} sx={{ width: 64, height: 64, cursor: 'pointer', border: '2px solid', borderColor: 'divider' }}>{user.username.charAt(0)}</Avatar>
+                              <Card sx={{ borderRadius: 3, border: '1px solid', borderColor: 'divider', overflow: 'hidden', transition: 'all 0.3s ease', '&:hover': { borderColor: 'primary.main', transform: 'translateY(-4px)' } }}>
+                                  <Box sx={{ display: 'flex', alignItems: 'center', p: 2, gap: 2 }}>
+                                      <Avatar component={Link} to={`/profile/${user.username}`} src={user.avatar || undefined} sx={{ width: 56, height: 56, cursor: 'pointer', border: '2px solid', borderColor: 'divider' }}>{user.username.charAt(0)}</Avatar>
                                       <Box sx={{ flex: 1, minWidth: 0 }}>
                                           <Typography component={Link} to={`/profile/${user.username}`} variant="subtitle1" sx={{ fontWeight: '900', color: 'text.primary', textDecoration: 'none', '&:hover': { color: 'primary.main' }, display: 'block', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                               {user.username}
@@ -566,9 +565,9 @@ const PublicProfile: React.FC<PublicProfileProps> = ({ adminMode }) => {
                   ) : (
                       data.following.map(user => (
                           <Grid key={user.id} size={{ xs: 12, sm: 6, md: 4 }}>
-                              <Card sx={{ borderRadius: 4, border: '1px solid', borderColor: 'divider', overflow: 'hidden', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', '&:hover': { borderColor: 'primary.main', transform: 'translateY(-6px)', boxShadow: '0 12px 32px rgba(0,0,0,0.1)' } }}>
-                                  <Box sx={{ display: 'flex', alignItems: 'center', p: 2.5, gap: 2.5 }}>
-                                      <Avatar component={Link} to={`/profile/${user.username}`} src={user.avatar || undefined} sx={{ width: 64, height: 64, cursor: 'pointer', border: '2px solid', borderColor: 'divider' }}>{user.username.charAt(0)}</Avatar>
+                              <Card sx={{ borderRadius: 3, border: '1px solid', borderColor: 'divider', overflow: 'hidden', transition: 'all 0.3s ease', '&:hover': { borderColor: 'primary.main', transform: 'translateY(-4px)' } }}>
+                                  <Box sx={{ display: 'flex', alignItems: 'center', p: 2, gap: 2 }}>
+                                      <Avatar component={Link} to={`/profile/${user.username}`} src={user.avatar || undefined} sx={{ width: 56, height: 56, cursor: 'pointer', border: '2px solid', borderColor: 'divider' }}>{user.username.charAt(0)}</Avatar>
                                       <Box sx={{ flex: 1, minWidth: 0 }}>
                                           <Typography component={Link} to={`/profile/${user.username}`} variant="subtitle1" sx={{ fontWeight: '900', color: 'text.primary', textDecoration: 'none', '&:hover': { color: 'primary.main' }, display: 'block', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                               {user.username}
diff --git a/frontend/src/pages/flavors/FlavorDetail.tsx b/frontend/src/pages/flavors/FlavorDetail.tsx
index 85f5f7c..8830cbe 100644
--- a/frontend/src/pages/flavors/FlavorDetail.tsx
+++ b/frontend/src/pages/flavors/FlavorDetail.tsx
@@ -295,7 +295,7 @@ const FlavorDetail: React.FC<FlavorDetailProps> = ({ adminMode }) => {
                           </Box>
 
                           <Typography variant="body2" sx={{ lineHeight: 1.7, color: 'text.secondary', mb: 4 }}>
-                              {flavor.description}
+                              <RichText text={flavor.description} />
                           </Typography>
 
                           {flavor.shop_url && (
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
index 7842f98..0c6f089 100644
--- a/frontend/src/theme.ts
+++ b/frontend/src/theme.ts
@@ -143,7 +143,7 @@ export const getTheme = (mode: CatppuccinTheme) => {
       }
     },
     shape: {
-        borderRadius: 12,
+        borderRadius: 8,
     },
     typography: {
       fontFamily: '"Plus Jakarta Sans", "Inter", "Roboto", sans-serif',
@@ -193,7 +193,7 @@ export const getTheme = (mode: CatppuccinTheme) => {
                     backdropFilter: 'blur(12px)',
                     border: '1px solid',
                     borderColor: alpha(palette.text.hex, 0.1),
-                    borderRadius: '20px',
+                    borderRadius: '12px',
                     transition: 'all 0.2s ease-in-out',
                 }
             }
@@ -212,7 +212,7 @@ export const getTheme = (mode: CatppuccinTheme) => {
         MuiButton: {
             styleOverrides: {
                 root: {
-                    borderRadius: '10px',
+                    borderRadius: '8px',
                     padding: '8px 20px',
                 },
                 containedPrimary: {
@@ -228,6 +228,14 @@ export const getTheme = (mode: CatppuccinTheme) => {
                 root: {
                     minHeight: '48px',
                     fontWeight: 700,
+                    borderRadius: '8px',
+                }
+            }
+        },
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: {
+                    borderRadius: '8px',
                 }
             }
         }