refactor: change radius

This commit is contained in:
iCrawl
2022-08-23 08:18:36 +02:00
parent b31a23b37c
commit 17559becef
13 changed files with 32 additions and 32 deletions

View File

@@ -1,7 +1,7 @@
import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea, Skeleton } from '@mantine/core'; import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea, Skeleton } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks'; import { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { Fragment, ReactNode } from 'react'; import { Fragment, type ReactNode } from 'react';
import { import {
VscSymbolClass, VscSymbolClass,
VscSymbolMethod, VscSymbolMethod,
@@ -68,7 +68,7 @@ export function DocContainer({
return ( return (
<Group> <Group>
<Stack sx={{ flexGrow: 1, maxWidth: '100%' }}> <Stack sx={{ flexGrow: 1, maxWidth: '100%' }}>
<Skeleton visible={router.isFallback} radius="xs"> <Skeleton visible={router.isFallback} radius="sm">
<Title sx={{ wordBreak: 'break-all' }} order={2} ml="xs"> <Title sx={{ wordBreak: 'break-all' }} order={2} ml="xs">
<Group> <Group>
{generateIcon(kind)} {generateIcon(kind)}
@@ -77,13 +77,13 @@ export function DocContainer({
</Title> </Title>
</Skeleton> </Skeleton>
<Skeleton visible={router.isFallback} radius="xs"> <Skeleton visible={router.isFallback} radius="sm">
<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}> <Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>} {summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
</Section> </Section>
</Skeleton> </Skeleton>
<Skeleton visible={router.isFallback} radius="xs"> <Skeleton visible={router.isFallback} radius="sm">
<Box px="xs" pb="xs"> <Box px="xs" pb="xs">
<SyntaxHighlighter <SyntaxHighlighter
wrapLongLines wrapLongLines
@@ -123,7 +123,7 @@ export function DocContainer({
</Group> </Group>
) : null} ) : null}
<Skeleton visible={router.isFallback} radius="xs"> <Skeleton visible={router.isFallback} radius="sm">
<Stack> <Stack>
{typeParams?.length ? ( {typeParams?.length ? (
<Section <Section

View File

@@ -62,7 +62,7 @@ export function Section({
<Group position="apart"> <Group position="apart">
<Group> <Group>
{icon ? ( {icon ? (
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}> <ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} radius="sm" size={30}>
{icon} {icon}
</ThemeIcon> </ThemeIcon>
) : null} ) : null}

View File

@@ -1,4 +1,4 @@
import { createStyles, Group, Text, NavLink } from '@mantine/core'; import { createStyles, Group, Text, NavLink, Box } from '@mantine/core';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import type { Dispatch, SetStateAction } from 'react'; import type { Dispatch, SetStateAction } from 'react';
@@ -105,7 +105,7 @@ export function SidebarItems({
const asPathWithoutQueryAndAnchor = router.asPath.split('?')[0]?.split('#')[0]; const asPathWithoutQueryAndAnchor = router.asPath.split('?')[0]?.split('#')[0];
return ( return (
<> <Box pb="xl">
{(Object.keys(groupItems) as (keyof GroupedMembers)[]) {(Object.keys(groupItems) as (keyof GroupedMembers)[])
.filter((group) => groupItems[group].length) .filter((group) => groupItems[group].length)
.map((group, idx) => ( .map((group, idx) => (
@@ -135,6 +135,6 @@ export function SidebarItems({
))} ))}
</Section> </Section>
))} ))}
</> </Box>
); );
} }

View File

@@ -164,14 +164,14 @@ export function SidebarLayout({
<Menu <Menu
onOpen={() => setOpenedLibPicker(true)} onOpen={() => setOpenedLibPicker(true)}
onClose={() => setOpenedLibPicker(false)} onClose={() => setOpenedLibPicker(false)}
radius="xs" radius="sm"
width="target" width="target"
> >
<Menu.Target> <Menu.Target>
<UnstyledButton className={classes.control}> <UnstyledButton className={classes.control}>
<Group position="apart"> <Group position="apart">
<Group> <Group>
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}> <ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} radius="sm" size={30}>
<VscPackage size={20} /> <VscPackage size={20} />
</ThemeIcon> </ThemeIcon>
<Text weight="600" size="md"> <Text weight="600" size="md">
@@ -188,14 +188,14 @@ export function SidebarLayout({
<Menu <Menu
onOpen={() => setOpenedVersionPicker(true)} onOpen={() => setOpenedVersionPicker(true)}
onClose={() => setOpenedVersionPicker(false)} onClose={() => setOpenedVersionPicker(false)}
radius="xs" radius="sm"
width="target" width="target"
> >
<Menu.Target> <Menu.Target>
<UnstyledButton className={classes.control}> <UnstyledButton className={classes.control}>
<Group position="apart"> <Group position="apart">
<Group> <Group>
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}> <ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} radius="sm" size={30}>
<VscVersions size={20} /> <VscVersions size={20} />
</ThemeIcon> </ThemeIcon>
<Text weight="600" size="md"> <Text weight="600" size="md">
@@ -243,7 +243,7 @@ export function SidebarLayout({
</MediaQuery> </MediaQuery>
<MediaQuery smallerThan="md" styles={{ display: 'none' }}> <MediaQuery smallerThan="md" styles={{ display: 'none' }}>
<Skeleton visible={router.isFallback} radius="xs"> <Skeleton visible={router.isFallback} radius="sm">
<Breadcrumbs>{breadcrumbs}</Breadcrumbs> <Breadcrumbs>{breadcrumbs}</Breadcrumbs>
</Skeleton> </Skeleton>
</MediaQuery> </MediaQuery>
@@ -266,7 +266,7 @@ export function SidebarLayout({
color={colorScheme === 'dark' ? 'yellow' : 'blue'} color={colorScheme === 'dark' ? 'yellow' : 'blue'}
onClick={() => toggleColorScheme()} onClick={() => toggleColorScheme()}
title="Toggle color scheme" title="Toggle color scheme"
radius="xs" radius="sm"
> >
{colorScheme === 'dark' ? <WiDaySunny size={30} /> : <WiNightClear size={30} />} {colorScheme === 'dark' ? <WiDaySunny size={30} /> : <WiNightClear size={30} />}
</ActionIcon> </ActionIcon>

View File

@@ -66,16 +66,16 @@ export function TableOfContentItems({
}); });
return ( return (
<Box sx={{ wordBreak: 'break-all' }}> <Box sx={{ wordBreak: 'break-all' }} pb="xl">
<Group mt={2} mb="sm" ml={2}> <Group spacing="xs" mt={6} mb="sm" ml={6}>
<VscListSelection size={25} /> <VscListSelection size={25} />
<Text weight={600}>Table of contents</Text> <Text weight={600}>Table of contents</Text>
</Group> </Group>
<Stack spacing={0}> <Stack spacing={0} mt={26} ml={4}>
{propertyItems.length ? ( {propertyItems.length ? (
<Box> <Box>
<Group> <Group spacing="xs">
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}> <ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} radius="sm" size={30}>
<VscSymbolProperty size={20} /> <VscSymbolProperty size={20} />
</ThemeIcon> </ThemeIcon>
<Box p="sm" pl={0}> <Box p="sm" pl={0}>
@@ -90,7 +90,7 @@ export function TableOfContentItems({
{methodItems.length ? ( {methodItems.length ? (
<Box> <Box>
<Group spacing="xs"> <Group spacing="xs">
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}> <ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} radius="sm" size={30}>
<VscSymbolMethod size={20} /> <VscSymbolMethod size={20} />
</ThemeIcon> </ThemeIcon>
<Box p="sm" pl={0}> <Box p="sm" pl={0}>

View File

@@ -21,10 +21,10 @@ export function Class({ data }: { data: ApiClassJSON }) {
properties={data.properties} properties={data.properties}
> >
{data.constructor ? <ConstructorSection data={data.constructor} /> : null} {data.constructor ? <ConstructorSection data={data.constructor} /> : null}
<Skeleton visible={router.isFallback} radius="xs"> <Skeleton visible={router.isFallback} radius="sm">
<PropertiesSection data={data.properties} /> <PropertiesSection data={data.properties} />
</Skeleton> </Skeleton>
<Skeleton visible={router.isFallback} radius="xs"> <Skeleton visible={router.isFallback} radius="sm">
<MethodsSection data={data.methods} /> <MethodsSection data={data.methods} />
</Skeleton> </Skeleton>
</DocContainer> </DocContainer>

View File

@@ -13,7 +13,7 @@ export function Enum({ data }: { data: ApiEnumJSON }) {
return ( return (
<DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}> <DocContainer name={data.name} kind={data.kind} excerpt={data.excerpt} summary={data.summary}>
<Skeleton visible={router.isFallback} radius="xs"> <Skeleton visible={router.isFallback} radius="sm">
<Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}> <Section title="Members" icon={<VscSymbolEnumMember size={20} />} padded dense={matches}>
<Stack> <Stack>
{data.members.map((member) => ( {data.members.map((member) => (

View File

@@ -15,7 +15,7 @@ export function Function({ data }: { data: ApiFunctionJSON }) {
summary={data.summary} summary={data.summary}
typeParams={data.typeParameters} typeParams={data.typeParameters}
> >
<Skeleton visible={router.isFallback} radius="xs"> <Skeleton visible={router.isFallback} radius="sm">
<ParametersSection data={data.parameters} /> <ParametersSection data={data.parameters} />
</Skeleton> </Skeleton>
</DocContainer> </DocContainer>

View File

@@ -17,10 +17,10 @@ export function Interface({ data }: { data: ApiInterfaceJSON }) {
methods={data.methods} methods={data.methods}
properties={data.properties} properties={data.properties}
> >
<Skeleton visible={router.isFallback} radius="xs"> <Skeleton visible={router.isFallback} radius="sm">
<PropertiesSection data={data.properties} /> <PropertiesSection data={data.properties} />
</Skeleton> </Skeleton>
<Skeleton visible={router.isFallback} radius="xs"> <Skeleton visible={router.isFallback} radius="sm">
<MethodsSection data={data.methods} /> <MethodsSection data={data.methods} />
</Skeleton> </Skeleton>
</DocContainer> </DocContainer>

View File

@@ -24,7 +24,7 @@ export function ExampleBlock({
export function DeprecatedBlock({ children }: { children: ReactNode }): JSX.Element { export function DeprecatedBlock({ children }: { children: ReactNode }): JSX.Element {
return ( return (
<Alert icon={<VscWarning />} title="Deprecated" variant="outline" color="red" radius="xs"> <Alert icon={<VscWarning />} title="Deprecated" variant="outline" color="red" radius="sm">
{children} {children}
</Alert> </Alert>
); );

View File

@@ -96,7 +96,7 @@ export default function VersionsRoute(props: Partial<VersionProps> & { error?: s
<UnstyledButton className={classes.control} component="a"> <UnstyledButton className={classes.control} component="a">
<Group position="apart"> <Group position="apart">
<Group> <Group>
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}> <ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} radius="sm" size={30}>
<VscVersions size={20} /> <VscVersions size={20} />
</ThemeIcon> </ThemeIcon>
<Text weight={600} size="md"> <Text weight={600} size="md">

View File

@@ -41,7 +41,7 @@ export default function PackagesRoute() {
<UnstyledButton className={classes.control} component="a"> <UnstyledButton className={classes.control} component="a">
<Group position="apart"> <Group position="apart">
<Group> <Group>
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}> <ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} radius="sm" size={30}>
<VscPackage size={20} /> <VscPackage size={20} />
</ThemeIcon> </ThemeIcon>
<Text weight={600} size="md"> <Text weight={600} size="md">

View File

@@ -84,12 +84,12 @@ export default function IndexRoute() {
<Group mt={30}> <Group mt={30}>
<Link href="/docs" passHref> <Link href="/docs" passHref>
<Button component="a" radius="xl" size="md" className={classes.control}> <Button component="a" radius="sm" size="md" className={classes.control}>
Docs Docs
</Button> </Button>
</Link> </Link>
<Link href="https://discordjs.guide" passHref> <Link href="https://discordjs.guide" passHref>
<Button component="a" variant="default" radius="xl" size="md" className={classes.control}> <Button component="a" variant="default" radius="sm" size="md" className={classes.control}>
Guide Guide
</Button> </Button>
</Link> </Link>