From 6769ca701ccc6336ba5ad16c203d9fe13ff12523 Mon Sep 17 00:00:00 2001
From: Aj - Thomas <thomascamlong@gmail.com>
Date: Wed, 4 May 2022 07:49:29 +0200
Subject: [PATCH] Fix right menu position and a typo

---
 components/AppShelf/AppShelf.tsx     | 40 ++++++++++++++++++++--------
 components/AppShelf/AppShelfMenu.tsx |  9 ++-----
 components/Settings/SettingsMenu.tsx |  2 +-
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/components/AppShelf/AppShelf.tsx b/components/AppShelf/AppShelf.tsx
index 956591065..eeb1a5ce9 100644
--- a/components/AppShelf/AppShelf.tsx
+++ b/components/AppShelf/AppShelf.tsx
@@ -4,11 +4,12 @@ import {
   Text,
   AspectRatio,
   createStyles,
-  Center,
   SimpleGrid,
   Card,
   useMantineTheme,
   Image,
+  Group,
+  Space,
 } from '@mantine/core';
 import AppShelfMenu from './AppShelfMenu';
 import AddItemShelfItem from './AddAppShelfItem';
@@ -60,6 +61,7 @@ export function AppShelfItem(props: any) {
   const [hovering, setHovering] = useState(false);
   return (
     <motion.div
+      key={service.name}
       onHoverStart={(e) => {
         setHovering(true);
       }}
@@ -74,19 +76,35 @@ export function AppShelfItem(props: any) {
         }}
         radius="md"
       >
-        <motion.div
-          animate={{
-            opacity: hovering ? 1 : 0,
-          }}
-        >
-          <AppShelfMenu name={service.name} removeitem={removeService} />
-        </motion.div>
         <Card.Section>
-          <Center>
-            <Text mt="sm" weight={500}>
+          <Group position="apart" mx="lg">
+            <Space />
+            <Text
+              // TODO: #1 Remove this hack to get the text to be centered.
+              ml={15}
+              style={{
+                alignSelf: 'center',
+                alignContent: 'center',
+                alignItems: 'center',
+                justifyContent: 'center',
+                justifyItems: 'center',
+              }}
+              mt="sm"
+              weight={500}
+            >
               {service.name}
             </Text>
-          </Center>
+            <motion.div
+              style={{
+                alignSelf: 'flex-end',
+              }}
+              animate={{
+                opacity: hovering ? 1 : 0,
+              }}
+            >
+              <AppShelfMenu name={service.name} removeitem={removeService} />
+            </motion.div>
+          </Group>
         </Card.Section>
         <Card.Section>
           <AspectRatio ratio={5 / 3} m="xl">
diff --git a/components/AppShelf/AppShelfMenu.tsx b/components/AppShelf/AppShelfMenu.tsx
index 801d5d4ed..d11b7c2e7 100644
--- a/components/AppShelf/AppShelfMenu.tsx
+++ b/components/AppShelf/AppShelfMenu.tsx
@@ -5,17 +5,12 @@ import { Check, Edit, Trash } from 'tabler-icons-react';
 export default function AppShelfMenu(props: any) {
   const { name, removeitem: removeItem } = props;
   return (
-    <Menu
-      style={{
-        position: 'absolute',
-        top: 10,
-        right: 10,
-      }}
-    >
+    <Menu position="right">
       <Menu.Label>Settings</Menu.Label>
       <Menu.Item
         color="primary"
         icon={<Edit size={14} />}
+        // TODO: #2 Add the ability to edit the service.
         onClick={() => {
           showNotification({
             color: 'red',
diff --git a/components/Settings/SettingsMenu.tsx b/components/Settings/SettingsMenu.tsx
index feac65c84..4d0607458 100644
--- a/components/Settings/SettingsMenu.tsx
+++ b/components/Settings/SettingsMenu.tsx
@@ -46,7 +46,7 @@ function SettingsMenu(props: any) {
           color: '#a0aec0',
         }}
       >
-        tip: You can upload your config file by dragging and dropping it into the page
+        tip: You can upload your config file by dragging and dropping it onto the page
       </Text>
     </Group>
   );