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

💄 Normalize onboarding steps design

Browse Source
This commit is contained in:
Manuel
2023-08-21 21:23:28 +02:00
parent 480b27fea7
commit cfde1b6ece
3 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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" />}
variant="light"
rightIcon={<IconExternalLink size="1rem" />}
variant="default"
>
Open documentation
</Button>
<Divider w={400} maw="100%" />
<Button onClick={next} rightIcon={<IconArrowRight size="1rem" />}>
<Divider h={30} />
<Button onClick={next} rightIcon={<IconArrowRight size="1rem" />} fullWidth>
Finish
</Button>
</Stack>

8
src/components/Onboarding/step-onboarding-finished.tsx
View File

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