feat: improve design and layout of design selector

src/components/Settings/Customization/Layout/LayoutSelector.tsx

@@ -1,9 +1,9 @@
 import {
   ActionIcon,
-  Box,
   Center,
   Checkbox,
   createStyles,
+  Flex,
   Group,
   Paper,
   Stack,
@@ -11,7 +11,6 @@ import {
   Title,
   useMantineTheme,
 } from '@mantine/core';
-import { IconBrandDocker, IconLayout, IconSearch } from '@tabler/icons';
 import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
@@ -65,17 +64,8 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
   };
 
   return (
-    <Box className={classes.box} p="xl" pb="sm">
     <Stack spacing="xs">
-        <Group spacing={5}>
-          <IconLayout size={20} />
       <Title order={6}>Dashboard layout</Title>
-        </Group>
-
-        <Text color="dimmed" size="sm">
-          You can adjust the layout of the Dashboard to your preferences. The main are cannot be
-          turned on or off
-        </Text>
 
       <Paper px="xs" py={4} withBorder>
         <Group position="apart">
@@ -98,27 +88,37 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
 
       <Group align="stretch">
         {leftSidebar && (
-            <Paper p="xs" withBorder>
-              <Center style={{ height: '100%' }}>
+          <Paper className={classes.secondaryWrapper} p="xs" withBorder>
+            <Flex align="center" justify="center" direction="column">
               <Text align="center">Sidebar</Text>
-              </Center>
+              <Text color="dimmed" size="xs" align="center">
+                Only for
+                <br />
+                services &<br />
+                integrations
+              </Text>
+            </Flex>
           </Paper>
         )}
 
-          <Paper className={classes.main} p="xs" withBorder>
+        <Paper className={classes.primaryWrapper} p="xs" withBorder>
           <Text align="center">Main</Text>
           <Text color="dimmed" size="xs" align="center">
-              Can be used for categories,
-              <br />
-              services and integrations
+            Cannot be turned of.
           </Text>
         </Paper>
 
         {rightSidebar && (
-            <Paper p="xs" withBorder>
-              <Center style={{ height: '100%' }}>
+          <Paper className={classes.secondaryWrapper} p="xs" withBorder>
+            <Flex align="center" justify="center" direction="column">
               <Text align="center">Sidebar</Text>
-              </Center>
+              <Text color="dimmed" size="xs" align="center">
+                Only for
+                <br />
+                services &<br />
+                integrations
+              </Text>
+            </Flex>
           </Paper>
         )}
       </Group>
@@ -153,16 +153,15 @@ export const LayoutSelector = ({ defaultLayout }: LayoutSelectorProps) => {
         />
       </Stack>
     </Stack>
-    </Box>
   );
 };
 
 const useStyles = createStyles((theme) => ({
-  main: {
-    flexGrow: 1,
+  primaryWrapper: {
+    flexGrow: 2,
   },
-  box: {
-    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
-    borderRadius: theme.radius.md,
+  secondaryWrapper: {
+    flexGrow: 1,
+    maxWidth: 100,
   },
 }));