AppShelf styling

components/AppShelf/AddAppShelfItem.tsx

@@ -18,6 +18,7 @@ import { useState } from 'react';
 import { Apps } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
 import { ServiceTypeList } from '../../tools/types';
+import { AppShelfItemWrapper } from './AppShelf';
 
 export default function AddItemShelfItem(props: any) {
   const { addService } = useConfig();
@@ -34,30 +35,39 @@ export default function AddItemShelfItem(props: any) {
       >
         <AddAppShelfItemForm setOpened={setOpened} />
       </Modal>
-      <AspectRatio
-        style={{
-          minHeight: 120,
-          minWidth: 120,
-        }}
-        ratio={4 / 3}
-      >
-        <Card
-          style={{
-            backgroundColor:
-              theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-            width: 200,
-            height: 180,
-          }}
-          radius="md"
-        >
-          <Group direction="column" position="center">
-            <motion.div whileHover={{ scale: 1.2 }}>
-              <Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
-            </motion.div>
-            <Text>Add Service</Text>
+      <AppShelfItemWrapper>
+        <Card.Section>
+          <Group position="center" mx="lg">
+            <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}
+            >
+              Add a service
+            </Text>
           </Group>
-        </Card>
-      </AspectRatio>
+        </Card.Section>
+        <Card.Section>
+          <AspectRatio ratio={5 / 3} m="xl">
+            <motion.i
+              whileHover={{
+                cursor: 'pointer',
+                scale: 1.1,
+              }}
+            >
+              <Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
+            </motion.i>
+          </AspectRatio>
+        </Card.Section>
+      </AppShelfItemWrapper>
     </>
   );
 }

components/AppShelf/AppShelf.tsx

@@ -17,14 +17,25 @@ import { useConfig } from '../../tools/state';
 import { pingQbittorrent } from '../../tools/api';
 import { serviceItem } from '../../tools/types';
 
-const useStyles = createStyles((theme) => ({
-  main: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-    //TODO: #3 Fix this temporary fix and make the width and height dynamic / responsive
-    width: 200,
-    height: 180,
-  },
-}));
+export function AppShelfItemWrapper(props: any) {
+  const { children, hovering } = props;
+  const theme = useMantineTheme();
+  return (
+    <Card
+      style={{
+        boxShadow: hovering ? '0px 0px 3px rgba(0, 0, 0, 0.5)' : '0px 0px 1px rgba(0, 0, 0, 0.5)',
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
+
+        //TODO: #3 Fix this temporary fix and make the width and height dynamic / responsive
+        width: 200,
+        height: 180,
+      }}
+      radius="md"
+    >
+      {children}
+    </Card>
+  );
+}
 
 const AppShelf = (props: any) => {
   const { config, addService, removeService, setConfig } = useConfig();
@@ -58,7 +69,6 @@ export function AppShelfItem(props: any) {
   const { service }: { service: serviceItem } = props;
   const theme = useMantineTheme();
   const { removeService } = useConfig();
-  const { classes } = useStyles();
   const [hovering, setHovering] = useState(false);
   return (
     <motion.div
@@ -70,13 +80,7 @@ export function AppShelfItem(props: any) {
         setHovering(false);
       }}
     >
-      <Card
-        className={classes.main}
-        style={{
-          boxShadow: hovering ? '0px 0px 3px rgba(0, 0, 0, 0.5)' : '0px 0px 1px rgba(0, 0, 0, 0.5)',
-        }}
-        radius="md"
-      >
+      <AppShelfItemWrapper hovering={hovering}>
         <Card.Section>
           <Group position="apart" mx="lg">
             <Space />
@@ -128,7 +132,7 @@ export function AppShelfItem(props: any) {
             </motion.i>
           </AspectRatio>
         </Card.Section>
-      </Card>
+      </AppShelfItemWrapper>
     </motion.div>
   );
 }