💄 Normalize onboarding steps design

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

@@ -11,7 +11,7 @@ export const StepDockerImport = ({ next }: { next: () => void }) => {
       </Title>
 
       <Stack align="center">
-        <Button onClick={next} rightIcon={<IconArrowRight size="1rem" />}>
+        <Button onClick={next} rightIcon={<IconArrowRight size="1rem" />} fullWidth>
           Next
         </Button>
       </Stack>

src/components/Onboarding/step-documentation.tsx

@@ -1,5 +1,5 @@
 import { Button, Divider, Stack, Text, Title } from '@mantine/core';
-import { IconArrowRight, IconLink } from '@tabler/icons-react';
+import { IconArrowRight, IconExternalLink } from '@tabler/icons-react';
 
 import { OnboardingStepWrapper } from './common-wrapper';
 
@@ -16,13 +16,13 @@ export const StepDocumentation = ({ next }: { next: () => void }) => {
           component="a"
           href="https://homarr.dev/docs/introduction/after-the-installation"
           target="_blank"
-          leftIcon={<IconLink size="1rem" />}
+          rightIcon={<IconExternalLink size="1rem" />}
-          variant="light"
+          variant="default"
         >
           Open documentation
         </Button>
-        <Divider w={400} maw="100%" />
+        <Divider h={30} />
-        <Button onClick={next} rightIcon={<IconArrowRight size="1rem" />}>
+        <Button onClick={next} rightIcon={<IconArrowRight size="1rem" />} fullWidth>
           Finish
         </Button>
       </Stack>

src/components/Onboarding/step-onboarding-finished.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, NavLink, Stack, Text, Title, createStyles } from '@mantine/core';
+import { NavLink, Stack, Text, Title, createStyles } from '@mantine/core';
 import {
   IconChevronRight,
   IconDashboard,
@@ -7,10 +7,12 @@ import {
 } from '@tabler/icons-react';
 import Image from 'next/image';
 
+import { OnboardingStepWrapper } from './common-wrapper';
+
 export const StepOnboardingFinished = () => {
   const { classes } = useStyles();
   return (
-    <Card>
+    <OnboardingStepWrapper>
       <Stack align="center">
         <Image src="/imgs/logo/logo.svg" alt="" width={50} height={50} />
         <Title order={2} align="center">
@@ -45,7 +47,7 @@ export const StepOnboardingFinished = () => {
           />
         </Stack>
       </Stack>
-    </Card>
+    </OnboardingStepWrapper>
   );
 };