🔀 Merge pull request #260 from walkxcode/dev

💄 Changes AppShelf category styling

src/components/AppShelf/AppShelf.tsx

@@ -20,15 +20,30 @@ import DownloadComponent from '../modules/downloads/DownloadsModule';
 
 const useStyles = createStyles((theme, _params) => ({
   item: {
-    borderBottom: 0,
     overflow: 'hidden',
-    border: '1px solid transparent',
+    borderLeft: '3px solid transparent',
-    borderRadius: theme.radius.lg,
+    borderRight: '3px solid transparent',
+    borderBottom: '3px solid transparent',
+    borderRadius: '20px',
+    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
     marginTop: theme.spacing.md,
   },
 
-  itemOpened: {
+  control: {
-    borderColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[3],
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    borderRadius: theme.spacing.md,
+
+    '&:hover': {
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+    },
+  },
+
+  content: {
+    margin: theme.spacing.md,
+  },
+
+  label: {
+    overflow: 'visible',
   },
 }));
 
@@ -147,11 +162,6 @@ const AppShelf = (props: any) => {
           order={2}
           iconPosition="right"
           multiple
-          styles={{
-            item: {
-              borderRadius: '20px',
-            },
-          }}
           initialState={toggledCategories}
           onChange={(idx) => settoggledCategories(idx)}
         >