Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-11 09:03:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: icons and head

Browse Source
This commit is contained in:
iCrawl
2022-08-22 15:34:21 +02:00
parent abb968de81
commit 4fb4492b17
11 changed files with 105 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/website/src/components/DocContainer.tsx
View File

@@ -53,7 +53,7 @@ export function DocContainer({
</Group>
</Title>
<Section title="Summary" icon={<VscListSelection />} padded dense={matches}>
<Section title="Summary" icon={<VscListSelection size={20} />} padded dense={matches}>
{summary ? <TSDoc node={summary} /> : <Text>No summary provided.</Text>}
</Section>
@@ -97,7 +97,13 @@ export function DocContainer({
<Stack>
{typeParams?.length ? (
<Section title="Type Parameters" icon={<VscSymbolParameter />} padded dense={matches} defaultClosed>
<Section
title="Type Parameters"
icon={<VscSymbolParameter size={20} />}
padded
dense={matches}
defaultClosed
>
<TypeParamTable data={typeParams} />
</Section>
) : null}

7
packages/website/src/components/Section.tsx
View File

@@ -8,7 +8,6 @@ const useStyles = createStyles((theme, { opened }: { opened: boolean }) => ({
width: '100%',
padding: `${theme.spacing.xs}px ${theme.spacing.xs}px`,
color: theme.colorScheme === 'dark' ? theme.colors.dark![0] : theme.black,
fontSize: theme.fontSizes.sm,
'&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
@@ -45,11 +44,7 @@ export function Section({
<UnstyledButton className={classes.control} onClick={() => setOpened((o) => !o)}>
<Group position="apart">
<Group>
{icon ? (
<ThemeIcon variant="outline" size={30}>
{icon}
</ThemeIcon>
) : null}
{icon ? <ThemeIcon size={30}>{icon}</ThemeIcon> : null}
<Text weight={600} size="md">
{title}
</Text>

8
packages/website/src/components/Sections.tsx
View File

@@ -14,7 +14,7 @@ export function PropertiesSection({ data }: { data: ApiClassJSON['properties'] |
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return data.length ? (
<Section title="Properties" icon={<VscSymbolProperty />} padded dense={matches}>
<Section title="Properties" icon={<VscSymbolProperty size={20} />} padded dense={matches}>
<PropertyList data={data} />
</Section>
) : null;
@@ -24,7 +24,7 @@ export function MethodsSection({ data }: { data: ApiClassJSON['methods'] | ApiIn
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return data.length ? (
<Section title="Methods" icon={<VscSymbolMethod />} padded dense={matches}>
<Section title="Methods" icon={<VscSymbolMethod size={20} />} padded dense={matches}>
<MethodList data={data} />
</Section>
) : null;
@@ -34,7 +34,7 @@ export function ParametersSection({ data }: { data: ParameterDocumentation[] })
const matches = useMediaQuery('(max-width: 768px)', true, { getInitialValueInEffect: false });
return data.length ? (
<Section title="Parameters" icon={<VscSymbolConstant />} padded dense={matches}>
<Section title="Parameters" icon={<VscSymbolConstant size={20} />} padded dense={matches}>
<ParameterTable data={data} />
</Section>
) : null;
@@ -53,7 +53,7 @@ export function ConstructorSection({ data }: { data: ApiConstructorJSON }) {
}, '')})`;
return data.parameters.length ? (
<Section title="Constructor" icon={<VscSymbolMethod />} padded dense={matches}>
<Section title="Constructor" icon={<VscSymbolMethod size={20} />} padded dense={matches}>
<Stack id={`${data.name}`} className="scroll-mt-30" spacing="xs">
<Group>
<Stack>

12
packages/website/src/components/SidebarItems.tsx
View File

@@ -51,17 +51,17 @@ function groupMembers(members: Members): GroupedMembers {
function resolveIcon(item: keyof GroupedMembers) {
switch (item) {
case 'Classes':
return <VscSymbolClass />;
return <VscSymbolClass size={20} />;
case 'Enums':
return <VscSymbolEnum />;
return <VscSymbolEnum size={20} />;
case 'Interfaces':
return <VscSymbolInterface />;
return <VscSymbolInterface size={20} />;
case 'Types':
return <VscSymbolField />;
return <VscSymbolField size={20} />;
case 'Variables':
return <VscSymbolVariable />;
return <VscSymbolVariable size={20} />;
case 'Functions':
return <VscSymbolMethod />;
return <VscSymbolMethod size={20} />;
}
}

4
packages/website/src/components/SidebarLayout.tsx
View File

@@ -130,8 +130,8 @@ export function SidebarLayout({ packageName, data, children }: PropsWithChildren
<UnstyledButton className={classes.control}>
<Group position="apart">
<Group>
<ThemeIcon variant="outline" size={30}>
<VscPackage />
<ThemeIcon size={30}>
<VscPackage size={20} />
</ThemeIcon>
<Text weight="600" size="md">
{packageName}

37
packages/website/src/components/TableOfContentItems.tsx
View File

@@ -1,5 +1,5 @@
import { createStyles, Group, Text, Box, Stack } from '@mantine/core';
import { VscListSelection } from 'react-icons/vsc';
import { createStyles, Group, Text, Box, Stack, ThemeIcon } from '@mantine/core';
import { VscListSelection, VscSymbolMethod, VscSymbolProperty } from 'react-icons/vsc';
import type { ApiClassJSON, ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
const useStyles = createStyles((theme) => ({
@@ -13,13 +13,14 @@ const useStyles = createStyles((theme) => ({
fontSize: theme.fontSizes.sm,
padding: theme.spacing.xs,
paddingLeft: theme.spacing.md,
marginLeft: 8,
marginLeft: 14,
borderTopRightRadius: theme.radius.sm,
borderBottomRightRadius: theme.radius.sm,
borderLeft: `1px solid ${theme.colorScheme === 'dark' ? theme.colors.dark![4] : theme.colors.gray![3]}`,
'&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
color: theme.colorScheme === 'dark' ? theme.white : theme.black,
},
},
}));
@@ -64,20 +65,38 @@ export function TableOfContentItems({
return (
<Box>
<Group mb="md">
<VscListSelection size={20} />
<Text>Table of content</Text>
<Group mb="md" ml={2}>
<VscListSelection size={25} />
<Text>Table of contents</Text>
</Group>
<Stack>
<Stack spacing={0}>
{propertyItems.length ? (
<Box>
<Text>Properties</Text>
<Group>
<ThemeIcon size={30}>
<VscSymbolProperty size={20} />
</ThemeIcon>
<Box p="sm" pl={0}>
<Text weight={600} size="md">
Properties
</Text>
</Box>
</Group>
{propertyItems}
</Box>
) : null}
{methodItems.length ? (
<Box>
<Text>Methods</Text>
<Group spacing="xs">
<ThemeIcon size={30}>
<VscSymbolMethod size={20} />
</ThemeIcon>
<Box p="sm" pl={0}>
<Text weight={600} size="md">
Methods
</Text>
</Box>
</Group>
{methodItems}
</Box>
) : null}

2
packages/website/src/components/model/Enum.tsx
View File

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