diff --git a/src/components/Onboarding/common-wrapper.tsx b/src/components/Onboarding/common-wrapper.tsx new file mode 100644 index 000000000..09df0005f --- /dev/null +++ b/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 ( + + {children} + + ); +}; diff --git a/src/components/Onboarding/step-create-account.tsx b/src/components/Onboarding/step-create-account.tsx index 245be24f8..a2dc50fbb 100644 --- a/src/components/Onboarding/step-create-account.tsx +++ b/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 ( - + Create your administrator account
- + void }) => { -
+ ); }; diff --git a/src/components/Onboarding/step-docker-import.tsx b/src/components/Onboarding/step-docker-import.tsx index b2edd3e29..ac53983d7 100644 --- a/src/components/Onboarding/step-docker-import.tsx +++ b/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 ( - + Automatic container import @@ -13,6 +15,6 @@ export const StepDockerImport = ({ next }: { next: () => void }) => { Next - + ); }; diff --git a/src/components/Onboarding/step-documentation.tsx b/src/components/Onboarding/step-documentation.tsx index 1b5117a23..0884e44dd 100644 --- a/src/components/Onboarding/step-documentation.tsx +++ b/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 ( - + Documentation @@ -20,8 +22,10 @@ export const StepDocumentation = ({ next }: { next: () => void }) => { Open documentation - + - + ); }; diff --git a/src/components/Onboarding/step-update-path-mappings.tsx b/src/components/Onboarding/step-update-path-mappings.tsx index 5ddbf7f92..13419b770 100644 --- a/src/components/Onboarding/step-update-path-mappings.tsx +++ b/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(null); return ( - + + + Update path mappings + 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. - - What is your installation method? - + setSelectedTab(tab)} mt="xs"> - + }> Docker @@ -67,7 +75,7 @@ export const StepUpdatePathMappings = ({ next }: { next: () => void }) => { - + Back up your configuration. In case you didn't mount your configuration @@ -103,7 +111,7 @@ export const StepUpdatePathMappings = ({ next }: { next: () => void }) => { - + Back up your configuration. In case you didn't mount your configuration @@ -144,26 +152,52 @@ export const StepUpdatePathMappings = ({ next }: { next: () => void }) => { - + Click on your Homarr application and click "Edit" - Scroll down and click on the link "Add another path, port, variable or device" - After the new modal has opened, make sure that "Path" has been selected at the top - In the container path, enter /app/database - 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. /mnt/user/appdata/homarr/data) + + Scroll down and click on the link "Add another path, port, variable or device" + + + After the new modal has opened, make sure that "Path" has been selected at the top + + + In the container path, enter /app/database + + + 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.{' '} + /mnt/user/appdata/homarr/data) + - 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: + + 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: + /app/database - {selectedTab && ( + {selectedTab ? ( - + + ) : ( + + + Please select your installation method + + )} - + ); };