🎨 Improve design for element selector

src/components/Dashboard/Modals/SelectElement/Components/IntegrationsTab/AvailableIntegrationsTab.tsx

@@ -1,4 +1,4 @@
-import { Stack, Text, Title } from '@mantine/core';
+import { Grid, Text } from '@mantine/core';
 import {
   IconArrowsUpDown,
   IconCalendarTime,
@@ -27,7 +27,7 @@ export const AvailableIntegrationElements = ({
         applications. They usually require a few configurations before use.
       </Text>
 
-      <Stack spacing="xs">
+      <Grid>
         <GenericAvailableElementType
           name="Usenet downloads"
           description="Display and manage your Usenet downloads directly from Homarr"
@@ -63,7 +63,7 @@ export const AvailableIntegrationElements = ({
           description="Display the current download & upload of your torrent clients"
           image={<IconArrowsUpDown />}
         />
-      </Stack>
+      </Grid>
     </>
   );
 };

src/components/Dashboard/Modals/SelectElement/Components/Shared/GenericElementType.tsx

@@ -1,4 +1,4 @@
-import { Button, Stack, Text } from '@mantine/core';
+import { Box, Button, Card, Center, Grid, Stack, Text, UnstyledButton } from '@mantine/core';
 import { IconChevronRight } from '@tabler/icons';
 import Image from 'next/image';
 import React, { ReactNode } from 'react';
@@ -28,34 +28,27 @@ export const GenericAvailableElementType = ({
   };
 
   return (
-    <Button
-      className={classes.styledButton}
-      leftIcon={<Icon />}
-      rightIcon={<IconChevronRight opacity={0.5} />}
-      styles={{
-        root: {
-          height: 'auto',
-          padding: '8px 12px',
-        },
-        inner: {
-          justifyContent: 'left',
-        },
-        label: {
-          justifyContent: 'space-between',
-          width: '100%',
-        },
-      }}
-      disabled={disabled}
-      fullWidth
-    >
-      <Stack spacing={0}>
-        <Text className={classes.elementText}>{name}</Text>
-        {description && (
-          <Text className={classes.elementText} size="xs" color="dimmed">
-            {description}
-          </Text>
-        )}
-      </Stack>
-    </Button>
+    <Grid.Col span={3}>
+      <Card style={{ height: '100%' }}>
+        <Stack justify="space-between" style={{ height: '100%' }}>
+          <Stack spacing="xs">
+            <Center>
+              <Icon />
+            </Center>
+            <Text className={classes.elementText} align="center">
+              {name}
+            </Text>
+            {description && (
+              <Text className={classes.elementText} size="xs" align="center" color="dimmed">
+                {description}
+              </Text>
+            )}
+          </Stack>
+          <Button disabled={disabled} variant="light" size="xs" mt="auto" radius="md" fullWidth>
+            Add to Dashboard
+          </Button>
+        </Stack>
+      </Card>
+    </Grid.Col>
   );
 };

src/components/Dashboard/Modals/SelectElement/Components/Shared/styles.tsx

@@ -11,7 +11,7 @@ export const useStyles = createStyles((theme) => ({
   elementButton: {
     width: '100%',
     height: '100%',
-    borderRadius: theme.radius.sm
+    borderRadius: theme.radius.sm,
   },
   elementStack: {
     width: '100%',

src/components/Dashboard/Modals/SelectElement/Components/StaticElementsTab/AvailableStaticElementsTab.tsx

@@ -1,4 +1,4 @@
-import { Stack, Text, Title } from '@mantine/core';
+import { Grid, Text } from '@mantine/core';
 import { IconCursorText } from '@tabler/icons';
 import { useTranslation } from 'next-i18next';
 import { GenericAvailableElementType } from '../Shared/GenericElementType';
@@ -19,13 +19,13 @@ export const AvailableStaticTypes = ({ onClickBack }: AvailableStaticTypesProps)
         they don't integrate with any services and their content never changes.
       </Text>
 
-      <Stack>
+      <Grid>
         <GenericAvailableElementType
           name="Static Text"
           description="Display a fixed string on your dashboard"
           image={<IconCursorText />}
         />
-      </Stack>
+      </Grid>
     </>
   );
 };