From 19b08b274266458c90d7b90da79f9fb1c1b2d114 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Sun, 4 Sep 2022 09:25:09 +0200
Subject: [PATCH] :art: Improve UI by changing dark mode colors

---
 src/components/AppShelf/AppShelf.tsx    | 30 ++++++++-----------------
 src/modules/torrents/TorrentsModule.tsx |  4 ++--
 2 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index a825e651a..c4e59219a 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -157,9 +157,9 @@ const AppShelf = (props: any) => {
           {categoryList.map((category, idx) => (
             <Accordion.Item
               style={{
-                background: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '255, 255, 255,'} \
+                background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
               ${(config.settings.appOpacity || 100) / 100}`,
-                borderColor: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '233, 236, 239,'} \
+                borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
               ${(config.settings.appOpacity || 100) / 100}`,
               }}
               key={category}
@@ -173,9 +173,9 @@ const AppShelf = (props: any) => {
           {noCategory && noCategory.length > 0 ? (
             <Accordion.Item
               style={{
-                background: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '255, 255, 255,'} \
+                background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
             ${(config.settings.appOpacity || 100) / 100}`,
-                borderColor: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '233, 236, 239,'} \
+                borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
             ${(config.settings.appOpacity || 100) / 100}`,
               }}
               key="Other"
@@ -188,9 +188,11 @@ const AppShelf = (props: any) => {
           {downloadEnabled ? (
             <Accordion.Item
               style={{
-                background: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '255, 255, 255,'} \
+                color: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
+                ${(config.settings.appOpacity || 100) / 100}`,
+                background: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '255, 255, 255,'} \
             ${(config.settings.appOpacity || 100) / 100}`,
-                borderColor: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '233, 236, 239,'} \
+                borderColor: `rgba(${colorScheme === 'dark' ? '32, 33, 35,' : '233, 236, 239,'} \
             ${(config.settings.appOpacity || 100) / 100}`,
               }}
               key="Downloads"
@@ -198,20 +200,9 @@ const AppShelf = (props: any) => {
             >
               <Accordion.Control>{t('accordions.downloads.text')}</Accordion.Control>
               <Accordion.Panel>
-                <Paper
-                  radius="lg"
-                  style={{
-                    background: `rgba(${colorScheme === 'dark' ? '26, 27, 30,' : '255, 255, 255,'} \
-                  ${(config.settings.appOpacity || 100) / 100}`,
-                    borderColor: `rgba(${
-                      colorScheme === 'dark' ? '26, 27, 30,' : '233, 236, 239,'
-                    } \
-                  ${(config.settings.appOpacity || 100) / 100}`,
-                  }}
-                >
+                <Paper radius="lg">
                   {torrentEnabled && (
                     <>
-                      <Title size="h2">Torrents</Title>
                       <ModuleMenu module={TorrentsModule} />
                       <TorrentsComponent />
                     </>
@@ -219,9 +210,6 @@ const AppShelf = (props: any) => {
                   {usenetEnabled && (
                     <>
                       {torrentEnabled && <Divider my="sm" />}
-                      <Title size="h2" mt={0}>
-                        Usenet
-                      </Title>
                       <ModuleMenu module={UsenetModule} />
                       <UsenetComponent />
                     </>
diff --git a/src/modules/torrents/TorrentsModule.tsx b/src/modules/torrents/TorrentsModule.tsx
index 3a5b641d7..aa4e12a18 100644
--- a/src/modules/torrents/TorrentsModule.tsx
+++ b/src/modules/torrents/TorrentsModule.tsx
@@ -193,9 +193,9 @@ export default function TorrentsComponent() {
     });
 
   return (
-    <ScrollArea mt="xl" sx={{ height: 300, width: '100%' }}>
+    <ScrollArea sx={{ height: 300, width: '100%' }}>
       {rows.length > 0 ? (
-        <Table highlightOnHover>
+        <Table highlightOnHover p="sm">
           <thead>{ths}</thead>
           <tbody>{rows}</tbody>
         </Table>