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 { useMediaQuery } from '@mantine/hooks';
import { useRouter } from 'next/router';
import { Fragment, ReactNode } from 'react';
import { Fragment, type ReactNode } from 'react';
import {
VscSymbolClass,
VscSymbolMethod,
@@ -68,7 +68,7 @@ export function DocContainer({
return (
<Group>
<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">
<Group>
{generateIcon(kind)}
@@ -77,13 +77,13 @@ export function DocContainer({
</Title>
</Skeleton>
<Skeleton visible={router.isFallback} radius="xs">
<Skeleton visible={router.isFallback} radius="sm">
<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
</Section>
</Skeleton>
<Skeleton visible={router.isFallback} radius="xs">
<Skeleton visible={router.isFallback} radius="sm">
<Box px="xs" pb="xs">
<SyntaxHighlighter
wrapLongLines
@@ -123,7 +123,7 @@ export function DocContainer({
</Group>
) : null}
<Skeleton visible={router.isFallback} radius="xs">
<Skeleton visible={router.isFallback} radius="sm">
<Stack>
{typeParams?.length ? (
<Section

View File

@@ -62,7 +62,7 @@ export function Section({
<Group position="apart">
<Group>
{icon ? (
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} size={30}>
<ThemeIcon variant={colorScheme === 'dark' ? 'filled' : 'outline'} radius="sm" size={30}>
{icon}
</ThemeIcon>
) : 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 { useRouter } from 'next/router';
import type { Dispatch, SetStateAction } from 'react';
@@ -105,7 +105,7 @@ export function SidebarItems({
const asPathWithoutQueryAndAnchor = router.asPath.split('?')[0]?.split('#')[0];
return (
<>
<Box pb="xl">
{(Object.keys(groupItems) as (keyof GroupedMembers)[])
.filter((group) => groupItems[group].length)
.map((group, idx) => (
@@ -135,6 +135,6 @@ export function SidebarItems({
))}
</Section>
))}
</>
</Box>
);
}

View File

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

View File

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

View File

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

View File

@@ -13,7 +13,7 @@ export function Enum({ data }: { data: ApiEnumJSON }) {
return (
<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}>
<Stack>
{data.members.map((member) => (

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -84,12 +84,12 @@ export default function IndexRoute() {
<Group mt={30}>
<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
</Button>
</Link>
<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
</Button>
</Link>