✨ Add more transparency areas and fix bugs

src/components/AppShelf/AppShelf.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion, createStyles, Grid, Group } from '@mantine/core';
+import { Accordion, createStyles, Grid, Group, Paper, useMantineColorScheme } from '@mantine/core';
 import {
   closestCenter,
   DndContext,
@@ -42,6 +42,7 @@ const AppShelf = (props: any) => {
   });
   const [activeId, setActiveId] = useState(null);
   const { config, setConfig } = useConfig();
+  const { colorScheme } = useMantineColorScheme();
 
   const sensors = useSensors(
     useSensor(TouchSensor, {
@@ -164,7 +165,16 @@ const AppShelf = (props: any) => {
           ) : null}
           <Accordion.Item key="Downloads" label="Your downloads">
             <ModuleMenu module={DownloadsModule} />
-            <DownloadComponent />
+            <Paper
+              style={{
+                background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+                ${(config.settings.appOpacity || 100) / 100}`,
+                borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+                ${(config.settings.appOpacity || 100) / 100}`,
+              }}
+            >
+              <DownloadComponent />
+            </Paper>
           </Accordion.Item>
         </Accordion>
       </Group>

src/components/layout/Aside.tsx

@@ -34,14 +34,16 @@ export default function Aside(props: any) {
         base: 'auto',
       }}
     >
-      {matches && (
-        <Group my="sm" grow direction="column" style={{ width: 300 }}>
-          <ModuleWrapper module={CalendarModule} />
-          <ModuleWrapper module={TotalDownloadsModule} />
-          <ModuleWrapper module={WeatherModule} />
-          <ModuleWrapper module={DateModule} />
-        </Group>
-      )}
+      <>
+        {matches && (
+          <Group my="sm" grow direction="column" style={{ width: 300 }}>
+            <ModuleWrapper module={CalendarModule} />
+            <ModuleWrapper module={TotalDownloadsModule} />
+            <ModuleWrapper module={WeatherModule} />
+            <ModuleWrapper module={DateModule} />
+          </Group>
+        )}
+      </>
     </MantineAside>
   );
 }

src/components/modules/downloads/DownloadsModule.tsx

@@ -55,7 +55,7 @@ export default function DownloadComponent() {
         setTorrents(response.data);
         setIsLoading(false);
       });
-    }, 1000);
+    }, 5000);
   }, [config.services]);
 
   if (downloadServices.length === 0) {

src/components/modules/moduleWrapper.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, Group, Menu, Switch, TextInput } from '@mantine/core';
+import { Button, Card, Group, Menu, Switch, TextInput, useMantineColorScheme } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { IModule } from './modules';
 
@@ -91,6 +91,7 @@ function getItems(module: IModule) {
 
 export function ModuleWrapper(props: any) {
   const { module }: { module: IModule } = props;
+  const { colorScheme } = useMantineColorScheme();
   const { config, setConfig } = useConfig();
   const enabledModules = config.modules ?? {};
   // Remove 'Module' from enabled modules titles
@@ -99,8 +100,21 @@ export function ModuleWrapper(props: any) {
   if (!isShown) {
     return null;
   }
+
   return (
-    <Card {...props} hidden={!isShown} withBorder radius="lg" shadow="sm">
+    <Card
+      {...props}
+      hidden={!isShown}
+      withBorder
+      radius="lg"
+      shadow="sm"
+      style={{
+        background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+        borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
+          ${(config.settings.appOpacity || 100) / 100}`,
+      }}
+    >
       <ModuleMenu
         module={module}
         styles={{