Rework appshell and include calendar to the main page

components/AppShelf/AddAppShelfItem.tsx

@@ -103,30 +103,34 @@ export default function AddItemShelfItem(props: any) {
           </Group>
         </form>
       </Modal>
-      <Grid.Col span={4} lg={2} sm={3}>
-        <AspectRatio ratio={4 / 3}>
-          <Box
-            sx={{
+      <AspectRatio
+        style={{
+          minHeight: 120,
+          minWidth: 120,
+        }}
+        ratio={4 / 3}
+      >
+        <Box
+          sx={{
+            backgroundColor:
+              theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+            textAlign: 'center',
+            padding: theme.spacing.xl,
+            borderRadius: theme.radius.md,
+            '&:hover': {
               backgroundColor:
-                theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-              textAlign: 'center',
-              padding: theme.spacing.xl,
-              borderRadius: theme.radius.md,
-              '&:hover': {
-                backgroundColor:
-                  theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-              },
-            }}
-          >
-            <Group direction="column" position="center">
-              <motion.div whileHover={{ scale: 1.2 }}>
-                <Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
-              </motion.div>
-              <Text>Add Service</Text>
-            </Group>
-          </Box>
-        </AspectRatio>
-      </Grid.Col>
+                theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+            },
+          }}
+        >
+          <Group direction="column" position="center">
+            <motion.div whileHover={{ scale: 1.2 }}>
+              <Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
+            </motion.div>
+            <Text>Add Service</Text>
+          </Group>
+        </Box>
+      </AspectRatio>
     </>
   );
 }

components/AppShelf/AppShelf.tsx

@@ -10,6 +10,9 @@ import {
   AspectRatio,
   createStyles,
   Center,
+  Container,
+  SimpleGrid,
+  Space,
 } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { AlertCircle, Cross, X } from 'tabler-icons-react';
@@ -24,7 +27,9 @@ const useStyles = createStyles((theme) => ({
     backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
     textAlign: 'center',
     padding: theme.spacing.xl,
-    borderRadius: theme.radius.md,
+    borderRadius: theme.radius.sm,
+    width: 200,
+    height: 180,
 
     '&:hover': {
       backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
@@ -53,39 +58,42 @@ const AppShelf = (props: any) => {
   }
 
   return (
-    <Grid m="xl" gutter="xl">
-      {config.services
-        ? config.services.map((service, i) => (
-            <Grid.Col lg={2} sm={3} key={i}>
-              <motion.div
-                onHoverStart={(e) => {
-                  setHovering(service.name);
-                }}
-                onHoverEnd={(e) => {
-                  setHovering('none');
-                }}
-              >
-                <AspectRatio ratio={4 / 3}>
-                  <Box className={classes.main}>
-                    <motion.div animate={{ opacity: hovering == service.name ? 1 : 0 }}>
-                      <AppShelfMenu removeitem={removeService} name={service.name} />
-                    </motion.div>
-                    <Group direction="column" position="center">
-                      <Anchor href={service.url} target="_blank">
-                        <motion.div whileHover={{ scale: 1.2 }}>
-                          <Image style={{ maxWidth: 60 }} src={service.icon} alt={service.name} />
-                        </motion.div>
-                      </Anchor>
-                      <Text>{service.name}</Text>
-                    </Group>
-                  </Box>
-                </AspectRatio>
+    <SimpleGrid m="xl" cols={4} spacing="xl">
+      {config.services.map((service, i) => (
+        <motion.div
+          onHoverStart={(e) => {
+            setHovering(service.name);
+          }}
+          onHoverEnd={(e) => {
+            setHovering('none');
+          }}
+        >
+          <Box className={classes.main}>
+            <Group position="center">
+              <Space />
+              <Text>{service.name}</Text>
+              <motion.div animate={{ opacity: hovering == service.name ? 1 : 0 }}>
+                <AppShelfMenu removeitem={removeService} name={service.name} />
               </motion.div>
-            </Grid.Col>
-          ))
-        : null}
-      <AddItemShelfItem additem={addService} />
-    </Grid>
+            </Group>
+            <Group direction="column" position="center">
+              <Anchor href={service.url} target="_blank">
+                <motion.div whileHover={{ scale: 1.2 }}>
+                  <Image
+                    style={{
+                      maxWidth: 100,
+                    }}
+                    fit="cover"
+                    src={service.icon}
+                    alt={service.name}
+                  />
+                </motion.div>
+              </Anchor>
+            </Group>
+          </Box>
+        </motion.div>
+      ))}
+    </SimpleGrid>
   );
 };
 

components/AppShelf/AppShelfMenu.tsx

@@ -5,7 +5,7 @@ import { Check, Edit, Trash } from 'tabler-icons-react';
 export default function AppShelfMenu(props: any) {
   const { name, removeitem: removeItem } = props;
   return (
-    <Menu sx={{ position: 'absolute', top: 3, right: 3 }}>
+    <Menu position='right'>
       <Menu.Label>Settings</Menu.Label>
       <Menu.Item
         color="primary"