Styling modules

components/modules/calendar/CalendarModule.tsx

@@ -121,6 +121,9 @@ function DayComponent(props: any) {
       {sonarrFiltered.length > 0 && <Indicator size={7} offset={8} color="blue" children={null} />}
       <Popover
         position="left"
+        radius="lg"
+        shadow="xl"
+        transition="pop"
         width={700}
         onClose={() => setOpened(false)}
         opened={opened}

components/modules/calendar/MediaDisplay.tsx

@@ -15,7 +15,14 @@ function MediaDisplay(props: { media: IMedia }) {
   const { media }: { media: IMedia } = props;
   return (
     <Group noWrap align="self-start" mr={15}>
-      <Image fit="cover" src={media.poster} alt={media.title} width={300} height={400} />
+      <Image
+        radius="md"
+        fit="cover"
+        src={media.poster}
+        alt={media.title}
+        width={300}
+        height={400}
+      />
       <Stack
         justify="space-between"
         sx={(theme) => ({

components/modules/moduleWrapper.tsx

@@ -20,7 +20,7 @@ export default function ModuleWrapper(props: any) {
       shadow="sm"
       style={{
         // Make background color of the card depend on the theme
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : 'white',
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : 'white',
       }}
     >
       <module.component />