change the design of the admin page (#1484)

podkrepi-bg · Jul 13, 2023 · 71cf5df · 71cf5df
1 parent 8473f04
commit 71cf5df
Showing 1 changed file with 29 additions and 7 deletions.
diff --git a/src/components/admin/AdminPage.tsx b/src/components/admin/AdminPage.tsx
@@ -9,10 +9,13 @@ import AdminLayout from 'components/common/navigation/AdminLayout'
 import { adminCards } from 'components/common/navigation/adminMenu'
 import AdminContainer from 'components/common/navigation/AdminContainer'
 
+const colors = ['#0179a8', '#346cb0', '#5f4b8b', '#b76ba3', '#a7c796', '#00a28a', '#3686a0']
+
 export default function AdminPage() {
   const { t } = useTranslation()
   const router = useRouter()
   const { data: session, status } = useSession()
+
   if (status !== 'authenticated') {
     return (
       <AdminLayout>
@@ -43,20 +46,39 @@ export default function AdminPage() {
         <Box p={4}>
           <Typography variant="h6">{'Добре дошли!'}</Typography>
         </Box>
-        <Grid container spacing={2} rowSpacing={4} px={4} pb={4}>
+        <Grid container spacing={2} rowSpacing={4} px={4} pb={4} mb={2}>
           {adminCards.map(({ label, href, icon: Icon }, index) => (
-            <Grid xs={12} sm={6} md={4} lg={2} item key={index}>
-              <Card sx={{ maxWidth: 345 }}>
-                <CardActionArea onClick={() => router.push(href)}>
+            <Grid xs={12} sm={6} md={4} lg={2.4} item key={index}>
+              <Card
+                sx={{
+                  height: 130,
+                  maxWidth: 345,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  borderRadius: 2,
+                  boxShadow: '0px 2px 4px ' + `${colors[index % colors.length]}9A`,
+                  color: colors[index % colors.length],
+                  transition: 'transform 0.3s ease',
+                  '&:hover': {
+                    transform: 'translateY(-5px)',
+                    boxShadow: '0px 4px 8px ' + `${colors[index % colors.length]}9A`,
+                    backgroundColor: `${colors[index % colors.length]}1A`,
+                    border: '1px solid ' + `${colors[index % colors.length]}9A`,
+                  },
+                  border: '1px solid ' + `${colors[index % colors.length]}7A`,
+                }}>
+                <div onClick={() => router.push(href)} style={{ cursor: 'pointer' }}>
                   <CardContent>
                     <Box textAlign="center">
-                      <Icon fontSize="medium" />
+                      <Icon fontSize="large" />
                     </Box>
-                    <Typography gutterBottom variant="h6" component="div" textAlign="center">
+                    <Typography variant="h6" component="div" textAlign="center" fontWeight="bold">
                       {label}
                     </Typography>
                   </CardContent>
-                </CardActionArea>
+                </div>
               </Card>
             </Grid>
           ))}