Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-14 01:15:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

💄 Improve design

Browse Source
This commit is contained in:
Manuel
2023-08-21 21:10:44 +02:00
parent 64764a253b
commit 3623d871f8
5 changed files with 81 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Onboarding/common-wrapper.tsx Normal file
View File

@@ -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>
);
};

11
src/components/Onboarding/step-create-account.tsx
View File

@@ -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>
);
};

8
src/components/Onboarding/step-docker-import.tsx
View File

@@ -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>
);
};

12
src/components/Onboarding/step-documentation.tsx
View File

@@ -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>
);
};

70
src/components/Onboarding/step-update-path-mappings.tsx
View File

@@ -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">
What is your installation method?
</Text>
<Space h={15} />
<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>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.Item>
Scroll down and click on the link "Add another path, port, variable or device"
</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>
);
};