💄 Small UI qol update

Module download now has a different look and can be toggled on and off

src/components/modules/downloads/DownloadsModule.tsx

@@ -136,8 +136,7 @@ export default function DownloadComponent() {
     </Center>
   );
   return (
-    <Group noWrap grow direction="column">
-      <Title order={4}>Your torrents</Title>
+    <Group noWrap grow direction="column" mt="xl">
       <ScrollArea sx={{ height: 300 }}>
         {rows.length > 0 ? (
           <Table highlightOnHover>

src/components/modules/moduleWrapper.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Group, Menu, Switch, TextInput, useMantineTheme } from '@mantine/core';
+import { Button, Card, Group, Menu, Switch, TextInput } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { IModule } from './modules';
 
@@ -95,14 +95,32 @@ export function ModuleWrapper(props: any) {
   const enabledModules = config.modules ?? {};
   // Remove 'Module' from enabled modules titles
   const isShown = enabledModules[module.title]?.enabled ?? false;
-  const theme = useMantineTheme();
-  const items: JSX.Element[] = getItems(module);
 
   if (!isShown) {
     return null;
   }
   return (
     <Card {...props} hidden={!isShown} withBorder radius="lg" shadow="sm">
+      <ModuleMenu
+        module={module}
+        styles={{
+          root: {
+            position: 'absolute',
+            top: 15,
+            right: 15,
+          },
+        }}
+      />
+      <module.component />
+    </Card>
+  );
+}
+
+export function ModuleMenu(props: any) {
+  const { module, styles } = props;
+  const items: JSX.Element[] = getItems(module);
+  return (
+    <>
       {module.options && (
         <Menu
           size="lg"
@@ -112,9 +130,7 @@ export function ModuleWrapper(props: any) {
           position="left"
           styles={{
             root: {
-              position: 'absolute',
-              top: 15,
-              right: 15,
+              ...props?.styles?.root,
             },
             body: {
               // Add shadow and elevation to the body
@@ -128,7 +144,6 @@ export function ModuleWrapper(props: any) {
           ))}
         </Menu>
       )}
-      <module.component />
-    </Card>
+    </>
   );
 }