💄 Improve design

src/components/Onboarding/common-wrapper.tsx

@@ -0,0 +1,10 @@
+import { Card } from '@mantine/core';
+import { ReactNode } from 'react';
+
+export const OnboardingStepWrapper = ({ children }: { children: ReactNode }) => {
+  return (
+    <Card shadow="lg" maw={800} w="100%" mx="auto" display="block" withBorder>
+      {children}
+    </Card>
+  );
+};

src/components/Onboarding/step-create-account.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, PasswordInput, Stack, TextInput, Title } from '@mantine/core';
+import { Button, PasswordInput, Stack, TextInput, Title } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { signIn } from 'next-auth/react';
 import { useState } from 'react';
@@ -7,6 +7,8 @@ import { api } from '~/utils/api';
 import { useI18nZodResolver } from '~/utils/i18n-zod-resolver';
 import { signUpFormSchema } from '~/validations/user';
 
+import { OnboardingStepWrapper } from './common-wrapper';
+
 export const StepCreateAccount = ({ next }: { next: () => void }) => {
   const [isSigninIn, setIsSigninIn] = useState(false);
   const { mutateAsync } = api.user.createOwnerAccount.useMutation();
@@ -37,15 +39,14 @@ export const StepCreateAccount = ({ next }: { next: () => void }) => {
   };
 
   return (
-    <Card shadow="lg" withBorder>
+    <OnboardingStepWrapper>
       <Title order={2} align="center" mb="md">
         Create your administrator account
       </Title>
       <form
-        style={{ width: '100%', display: 'flex', justifyContent: 'center' }}
         onSubmit={form.onSubmit(handleSubmit)}
       >
-        <Stack w={400} maw="90%" spacing="sm" align="center">
+        <Stack>
           <TextInput
             size="md"
             w="100%"
@@ -74,6 +75,6 @@ export const StepCreateAccount = ({ next }: { next: () => void }) => {
           </Button>
         </Stack>
       </form>
-    </Card>
+    </OnboardingStepWrapper>
   );
 };

src/components/Onboarding/step-docker-import.tsx

@@ -1,9 +1,11 @@
-import { Button, Card, Stack, Title } from '@mantine/core';
+import { Button, Stack, Title } from '@mantine/core';
 import { IconArrowRight } from '@tabler/icons-react';
 
+import { OnboardingStepWrapper } from './common-wrapper';
+
 export const StepDockerImport = ({ next }: { next: () => void }) => {
   return (
-    <Card>
+    <OnboardingStepWrapper>
       <Title order={2} align="center" mb="lg">
         Automatic container import
       </Title>
@@ -13,6 +15,6 @@ export const StepDockerImport = ({ next }: { next: () => void }) => {
           Next
         </Button>
       </Stack>
-    </Card>
+    </OnboardingStepWrapper>
   );
 };

src/components/Onboarding/step-documentation.tsx

@@ -1,9 +1,11 @@
-import { Button, Card, Divider, Stack, Text, Title } from '@mantine/core';
+import { Button, Divider, Stack, Text, Title } from '@mantine/core';
 import { IconArrowRight, IconLink } from '@tabler/icons-react';
 
+import { OnboardingStepWrapper } from './common-wrapper';
+
 export const StepDocumentation = ({ next }: { next: () => void }) => {
   return (
-    <Card>
+    <OnboardingStepWrapper>
       <Title order={2} align="center" mb="lg">
         Documentation
       </Title>
@@ -20,8 +22,10 @@ export const StepDocumentation = ({ next }: { next: () => void }) => {
           Open documentation
         </Button>
         <Divider w={400} maw="100%" />
-        <Button onClick={next} rightIcon={<IconArrowRight size="1rem" />}>Finish</Button>
+        <Button onClick={next} rightIcon={<IconArrowRight size="1rem" />}>
+          Finish
+        </Button>
       </Stack>
-    </Card>
+    </OnboardingStepWrapper>
   );
 };

src/components/Onboarding/step-update-path-mappings.tsx

@@ -1,9 +1,16 @@
-import { Button, Card, Code, Group, List, Tabs, TabsValue, Text } from '@mantine/core';
+import { Box, Button, Code, Group, List, Space, Tabs, TabsValue, Text, Title } from '@mantine/core';
 import { Prism } from '@mantine/prism';
-import { IconArrowRight, IconBrandDebian, IconBrandDocker, IconInfoSquareRounded } from '@tabler/icons-react';
+import {
+  IconArrowRight,
+  IconBrandDebian,
+  IconBrandDocker,
+  IconInfoSquareRounded,
+} from '@tabler/icons-react';
 import Image from 'next/image';
 import { useState } from 'react';
 
+import { OnboardingStepWrapper } from './common-wrapper';
+
 const dockerRunCommand = `docker run  \\
 --name homarr \\
 --restart unless-stopped \\
@@ -34,18 +41,19 @@ const added = { color: 'green', label: '+' };
 export const StepUpdatePathMappings = ({ next }: { next: () => void }) => {
   const [selectedTab, setSelectedTab] = useState<TabsValue | null>(null);
   return (
-    <Card shadow="lg" withBorder>
+    <OnboardingStepWrapper>
+      <Title order={2} align="center" mb="md">
+        Update path mappings
+      </Title>
       <Text color="dimmed">
         Homarr has updated the location of the saved data. We detected, that your instance might
         need an update to function as expected. It is recommended, that you take a backup of your
         .json configuration file on the file system and copy it, in case something goes wrong.
       </Text>
 
-      <Text weight="bold" mt="xl">
+      <Space h={15} />
-        What is your installation method?
-      </Text>
       <Tabs value={selectedTab} onTabChange={(tab) => setSelectedTab(tab)} mt="xs">
-        <Tabs.List>
+        <Tabs.List position="center">
           <Tabs.Tab value="standard_docker" icon={<IconBrandDocker size={16} />}>
             Docker
           </Tabs.Tab>
@@ -67,7 +75,7 @@ export const StepUpdatePathMappings = ({ next }: { next: () => void }) => {
         </Tabs.List>
 
         <Tabs.Panel value="standard_docker" pt="xs">
-          <List>
+          <List type="ordered">
             <List.Item>
               <Text>
                 <b>Back up your configuration</b>. In case you didn't mount your configuration
@@ -103,7 +111,7 @@ export const StepUpdatePathMappings = ({ next }: { next: () => void }) => {
         </Tabs.Panel>
 
         <Tabs.Panel value="docker_compose" pt="xs">
-          <List>
+          <List type="ordered">
             <List.Item>
               <Text>
                 <b>Back up your configuration</b>. In case you didn't mount your configuration
@@ -144,26 +152,52 @@ export const StepUpdatePathMappings = ({ next }: { next: () => void }) => {
         </Tabs.Panel>
 
         <Tabs.Panel value="unraid" pt="xs">
-          <List>
+          <List type="ordered">
             <List.Item>Click on your Homarr application and click "Edit"</List.Item>
-            <List.Item>Scroll down and click on the link "Add another path, port, variable or device"</List.Item>
+            <List.Item>
-            <List.Item>After the new modal has opened, make sure that "Path" has been selected at the top</List.Item>
+              Scroll down and click on the link "Add another path, port, variable or device"
-            <List.Item>In the container path, enter <Code>/app/database</Code></List.Item>
+            </List.Item>
-            <List.Item>In the host path, enter a new path on your host system. Choose a similar path, but the innermost directory should be different, than your existing mounting points (eg. <Code>/mnt/user/appdata/homarr/data</Code>)</List.Item>
+            <List.Item>
+              After the new modal has opened, make sure that "Path" has been selected at the top
+            </List.Item>
+            <List.Item>
+              In the container path, enter <Code>/app/database</Code>
+            </List.Item>
+            <List.Item>
+              In the host path, enter a new path on your host system. Choose a similar path, but the
+              innermost directory should be different, than your existing mounting points (eg.{' '}
+              <Code>/mnt/user/appdata/homarr/data</Code>)
+            </List.Item>
           </List>
         </Tabs.Panel>
 
         <Tabs.Panel value="others" pt="xs">
-          <Text>We are sadly not able to include upgrade guides for all kind of systems. If your system was not listed, you should mount this new mounting point in your container:</Text>
+          <Text>
+            We are sadly not able to include upgrade guides for all kind of systems. If your system
+            was not listed, you should mount this new mounting point in your container:
+          </Text>
           <Code>/app/database</Code>
         </Tabs.Panel>
       </Tabs>
 
-      {selectedTab && (
+      {selectedTab ? (
         <Group align="end" mt="lg">
-          <Button onClick={next} rightIcon={<IconArrowRight />}>Continue</Button>
+          <Button
+            onClick={next}
+            rightIcon={<IconArrowRight size="0.9rem" />}
+            color="green"
+            fullWidth
+          >
+            Continue
+          </Button>
         </Group>
+      ) : (
+        <Box w="100%" p="xl">
+          <Text color="dimmed" align="center" size="xs">
+            Please select your installation method
+          </Text>
+        </Box>
       )}
-    </Card>
+    </OnboardingStepWrapper>
   );
 };