From f0701ff03ab227c071b1194a8d2783d6dcf0fe9d Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 6 Sep 2024 23:29:40 +0200
Subject: [PATCH] Adjust theme preview components styling

---
 .../appearance/theme/CreateThemeButton.tsx    |  6 +-
 .../settings/appearance/theme/ThemeList.tsx   |  2 +-
 .../appearance/theme/ThemePreview.tsx         | 65 ++++++++++++-------
 3 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/src/screens/settings/appearance/theme/CreateThemeButton.tsx b/src/screens/settings/appearance/theme/CreateThemeButton.tsx
index 9ce4a053..7d4af376 100644
--- a/src/screens/settings/appearance/theme/CreateThemeButton.tsx
+++ b/src/screens/settings/appearance/theme/CreateThemeButton.tsx
@@ -23,7 +23,11 @@ export const CreateThemeButton = () => {
         <>
             <Stack sx={{ alignItems: 'center', gap: 1 }}>
                 <Button
-                    sx={{ minWidth: '150px', height: '225px', m: 1, mb: 0 }}
+                    sx={{
+                        minWidth: '150px',
+                        maxWidth: '150px',
+                        height: '225px',
+                    }}
                     variant="contained"
                     size="large"
                     {...bindTrigger(popupState)}
diff --git a/src/screens/settings/appearance/theme/ThemeList.tsx b/src/screens/settings/appearance/theme/ThemeList.tsx
index ae70cd1e..906301ee 100644
--- a/src/screens/settings/appearance/theme/ThemeList.tsx
+++ b/src/screens/settings/appearance/theme/ThemeList.tsx
@@ -60,7 +60,7 @@ export const ThemeList = () => {
     }
 
     return (
-        <Stack sx={{ flexDirection: 'row', flexWrap: 'no-wrap', overflowX: 'auto', gap: 1, mx: 1 }}>
+        <Stack sx={{ flexDirection: 'row', flexWrap: 'no-wrap', overflowX: 'auto', gap: 1, mx: 2 }}>
             <CreateThemeButton />
             {allThemes.map((theme) => (
                 <ThemePreview
diff --git a/src/screens/settings/appearance/theme/ThemePreview.tsx b/src/screens/settings/appearance/theme/ThemePreview.tsx
index 4f99e175..f907941f 100644
--- a/src/screens/settings/appearance/theme/ThemePreview.tsx
+++ b/src/screens/settings/appearance/theme/ThemePreview.tsx
@@ -25,10 +25,9 @@ import { AppTheme } from '@/lib/ui/AppThemes.ts';
 import { createTheme } from '@/theme.ts';
 import { ThemeCreationDialog } from '@/screens/settings/appearance/theme/CreateThemeDialog.tsx';
 
-const ThemePreviewBadge = styled(Box)(({ theme }) => ({
+const ThemePreviewBadge = styled(Box)(() => ({
     width: '15px',
     height: '20px',
-    borderRadius: theme.shape.borderRadius,
 }));
 
 export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: () => void }) => {
@@ -47,13 +46,11 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
         <>
             <Stack
                 sx={{
-                    m: 1,
                     justifyContent: 'center',
                     alignItems: 'center',
                     minWidth: '150px',
                     maxWidth: '150px',
                     gap: 1,
-                    position: 'relative',
                 }}
             >
                 <ThemeProvider theme={muiTheme}>
@@ -61,20 +58,34 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
                         sx={{
                             width: '100%',
                             height: '225px',
-                            outline: '4px solid',
-                            outlineColor: isSelected
-                                ? muiTheme.palette.primary.light
-                                : muiTheme.palette.background.paper,
-                            borderRadius: 1,
-                            p: 0,
+                            position: 'relative',
                         }}
                     >
+                        <Box
+                            sx={{
+                                position: 'absolute',
+                                top: 0,
+                                right: 0,
+                                bottom: 0,
+                                left: 0,
+                                border: '4px solid',
+                                borderColor: isSelected
+                                    ? muiTheme.palette.primary.light
+                                    : muiTheme.palette.background.paper,
+                                zIndex: 1,
+                                pointerEvents: 'none',
+                                borderRadius: 1,
+                            }}
+                        />
                         <CardActionArea
-                            sx={{ height: '100%', backgroundColor: 'background.default' }}
+                            sx={{
+                                height: '100%',
+                                backgroundColor: 'background.default',
+                            }}
                             onClick={() => setAppTheme(theme.id)}
                         >
-                            <Stack sx={{ height: '100%' }}>
-                                <Stack sx={{ height: '100%', gap: 2, p: 1 }}>
+                            <Stack sx={{ height: '100%', m: 0 }}>
+                                <Stack sx={{ height: '100%', gap: 2, p: 2 }}>
                                     <Stack
                                         sx={{
                                             maxHeight: '20px',
@@ -132,28 +143,36 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
                                             )}
                                         </Stack>
                                     </Stack>
-                                    <Stack
+                                    <Box
                                         sx={{
-                                            flexDirection: 'row',
                                             width: '55%',
                                             height: '65%',
                                             backgroundColor: 'background.paper',
-                                            borderRadius: 1,
                                             p: 1,
+                                            borderRadius: 1,
                                         }}
                                     >
-                                        <ThemePreviewBadge sx={{ backgroundColor: 'primary.main' }} />
-                                        <ThemePreviewBadge sx={{ backgroundColor: 'secondary.main' }} />
-                                    </Stack>
+                                        <Stack
+                                            sx={{
+                                                width: 'max-content',
+                                                flexDirection: 'row',
+                                                overflow: 'hidden',
+                                                borderRadius: 1,
+                                            }}
+                                        >
+                                            <ThemePreviewBadge sx={{ backgroundColor: 'primary.main' }} />
+                                            <ThemePreviewBadge sx={{ backgroundColor: 'secondary.main' }} />
+                                        </Stack>
+                                    </Box>
                                 </Stack>
                                 <Stack
                                     sx={{
-                                        height: '80px',
+                                        height: '25%',
                                         backgroundColor: muiTheme.palette.background.paper,
-                                        justifyContent: 'center',
                                         alignItems: 'center',
                                         flexDirection: 'row',
-                                        gap: 1,
+                                        gap: 2,
+                                        p: 2,
                                     }}
                                 >
                                     <Box
@@ -166,7 +185,7 @@ export const ThemePreview = ({ theme, onDelete }: { theme: AppTheme; onDelete: (
                                     />
                                     <Box
                                         sx={{
-                                            flexGrow: 0.75,
+                                            flexGrow: 1,
                                             height: '20px',
                                             borderRadius: 1,
                                             backgroundColor: 'primary.light',