🎨 Small styling changes

src/components/Settings/ModuleEnabler.tsx

@@ -12,8 +12,7 @@ export default function ModuleEnabler(props: any) {
         {modules.map((module) => (
           <Checkbox
             key={module.title}
-            size="lg"
-            style={{ cursor: 'pointer' }}
+            size="md"
             checked={config.modules?.[module.title]?.enabled ?? false}
             label={`${module.title}`}
             onChange={(e) => {

src/modules/downloads/DownloadsModule.tsx

@@ -8,7 +8,6 @@ import {
   Skeleton,
   ScrollArea,
   Center,
-  Image,
 } from '@mantine/core';
 import { IconDownload as Download } from '@tabler/icons';
 import { useEffect, useState } from 'react';

src/modules/overseerr/RequestModal.tsx

@@ -82,8 +82,11 @@ export function MovieRequestModal({
           This request will be automatically approved
         </Alert>
         <Group>
-          <Button onClick={() => setOpened(false)}>Cancel</Button>
+          <Button variant="outline" color="gray" onClick={() => setOpened(false)}>
+            Cancel
+          </Button>
           <Button
+            variant="outline"
             onClick={() => {
               askForMedia(MediaType.Movie, result.id, result.title, []);
             }}
@@ -137,7 +140,18 @@ export function TvRequestModal({
   const { secondaryColor } = useColorTheme();
 
   return (
-    <Modal onClose={() => setOpened(false)} radius="lg" size="lg" opened={opened}>
+    <Modal
+      onClose={() => setOpened(false)}
+      radius="lg"
+      size="lg"
+      opened={opened}
+      title={
+        <Group>
+          <IconDownload />
+          Ask for {result.name ?? result.originalName ?? 'a TV show'}
+        </Group>
+      }
+    >
       <Stack>
         <Alert
           icon={<IconAlertCircle size={16} />}
@@ -167,8 +181,11 @@ export function TvRequestModal({
           <tbody>{rows}</tbody>
         </Table>
         <Group>
-          <Button onClick={() => setOpened(false)}>Cancel</Button>
+          <Button variant="outline" color="gray" onClick={() => setOpened(false)}>
+            Cancel
+          </Button>
           <Button
+            variant="outline"
             disabled={selection.length === 0}
             onClick={() => {
               askForMedia(

src/pages/_app.tsx

@@ -45,6 +45,20 @@ export default function App(this: any, props: AppProps & { colorScheme: ColorSch
           <MantineProvider
             theme={{
               ...theme,
+              components: {
+                Checkbox: {
+                  styles: {
+                    input: { cursor: 'pointer' },
+                    label: { cursor: 'pointer' },
+                  },
+                },
+                Switch: {
+                  styles: {
+                    input: { cursor: 'pointer' },
+                    label: { cursor: 'pointer' },
+                  },
+                },
+              },
               primaryColor,
               primaryShade,
               colorScheme,

src/tools/styles.ts

@@ -1,13 +0,0 @@
-import { MantineProviderProps } from '@mantine/core';
-
-//TODO: Migarate this to v5.0
-// export const styles: MantineProviderProps['styles'] = {
-//   Checkbox: {
-//     input: { cursor: 'pointer' },
-//     label: { cursor: 'pointer' },
-//   },
-//   Switch: {
-//     input: { cursor: 'pointer' },
-//     label: { cursor: 'pointer' },
-//   },
-// };