Styling changes and add multiple popovers

components/AppShelf/AppShelf.tsx

@@ -45,7 +45,7 @@ const AppShelf = (props: any) => {
   }
 
   return (
-    <SimpleGrid m="xl" cols={4} spacing="xl">
+    <SimpleGrid m="xl" cols={5} spacing="xl">
       {config.services.map((service, i) => (
         <AppShelfItem key={service.name} service={service} />
       ))}

components/calendar/CalendarComponent.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-children-prop */
-import { Indicator, Popover, Box, Center, ScrollArea, Divider } from '@mantine/core';
+import { Indicator, Popover, Box, ScrollArea, Divider } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
@@ -83,23 +83,9 @@ function DayComponent(props: any) {
       onClick={() => {
         setOpened(true);
       }}
-      style={{ height: '100%', width: '100%' }}
     >
-      <Center>
-        {/* TODO: #6 Make the color of the indicator dependant on the type of medias avilable */}
-        <>
-          {radarrFiltered.length > 0 && (
-            <Indicator
-              size={8}
-              offset={10}
-              position="bottom-center"
-              color="yellow"
-              children={null}
-            />
-          )}
-          {sonarrFiltered.length > 0 && (
-            <Indicator size={8} offset={-12} position="top-end" color="blue" children={null} />
-          )}
+      {radarrFiltered.length > 0 && <Indicator size={7} color="yellow" children={null} />}
+      {sonarrFiltered.length > 0 && <Indicator size={7} offset={8} color="blue" children={null} />}
       <Popover
         position="left"
         width={700}
@@ -116,8 +102,6 @@ function DayComponent(props: any) {
           {radarrFiltered.length > 0 && <RadarrMediaDisplay media={radarrFiltered[0]} />}
         </ScrollArea>
       </Popover>
-        </>
-      </Center>
     </Box>
   );
 }

pages/_document.tsx

@@ -1,8 +1,22 @@
-import Document from 'next/document';
-import { createGetInitialProps } from '@mantine/next';
+import Document, { DocumentContext } from 'next/document';
+import { ServerStyles, createStylesServer } from '@mantine/next';
 
-const getInitialProps = createGetInitialProps();
+const stylesServer = createStylesServer();
 
 export default class _Document extends Document {
-  static getInitialProps = getInitialProps;
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx);
+
+    // Add your app specific logic here
+
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          <ServerStyles html={initialProps.html} server={stylesServer} />
+        </>
+      ),
+    };
+  }
 }