From b0be26300e89cf8b328f6a79ee805f512de06288 Mon Sep 17 00:00:00 2001
From: ajnart <thomascamlong@gmail.com>
Date: Wed, 18 May 2022 22:10:31 +0200
Subject: [PATCH] :lipstick: Update AppShell menu and item styling

Co-authored-by: Bjorn L. <walkxnl@gmail.com>
---
 src/components/AppShelf/AppShelf.tsx     |  4 ++--
 src/components/AppShelf/AppShelfMenu.tsx | 16 +++++++++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index 761320294..41ac8baf5 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -52,8 +52,8 @@ export function AppShelfItem(props: any) {
           <motion.div
             style={{
               position: 'absolute',
-              top: 5,
-              right: 5,
+              top: 15,
+              right: 15,
               alignSelf: 'flex-end',
             }}
             animate={{
diff --git a/src/components/AppShelf/AppShelfMenu.tsx b/src/components/AppShelf/AppShelfMenu.tsx
index ae905dfbf..257d61629 100644
--- a/src/components/AppShelf/AppShelfMenu.tsx
+++ b/src/components/AppShelf/AppShelfMenu.tsx
@@ -1,4 +1,4 @@
-import { Menu, Modal, Text } from '@mantine/core';
+import { Menu, Modal, Text, useMantineTheme } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { useState } from 'react';
 import { Check, Edit, Trash } from 'tabler-icons-react';
@@ -8,12 +8,13 @@ import { AddAppShelfItemForm } from './AddAppShelfItem';
 export default function AppShelfMenu(props: any) {
   const { service } = props;
   const { config, setConfig } = useConfig();
+  const theme = useMantineTheme();
   const [opened, setOpened] = useState(false);
   return (
     <>
       <Modal
         size="xl"
-        radius="lg"
+        radius="md"
         opened={props.opened || opened}
         onClose={() => setOpened(false)}
         title="Modify a service"
@@ -28,7 +29,16 @@ export default function AppShelfMenu(props: any) {
           message="Save service"
         />
       </Modal>
-      <Menu position="right">
+      <Menu
+        position="right"
+        radius="md"
+        styles={{
+          body: {
+            backgroundColor:
+              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+          },
+        }}
+      >
         <Menu.Label>Settings</Menu.Label>
         <Menu.Item
           color="primary"