Skip to content

Commit

Permalink
more styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@dphuang2
dphuang2 committed Sep 29, 2023
1 parent cfb5efd commit 737b981
Show file tree
Hide file tree
Showing 8 changed files with 66 additions and 28 deletions.
30 changes: 20 additions & 10 deletions generator/konfig-next-app/src/components/DemoPortal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import { DemoLastRan } from './DemoLastRan'
import { DemoHeader } from './DemoHeader'
import type { SocialObject } from 'konfig-lib/dist/KonfigYamlCommon'
import Head from 'next/head'
import { NAVBAR_WIDTH } from './ReferenceNavbar'

type DemosInput = Demo[]

Expand Down Expand Up @@ -221,7 +222,7 @@ export const DemoPortal = observer(
<Navbar
hiddenBreakpoint="sm"
hidden={!opened}
width={{ sm: 225, lg: 325 }}
width={{ lg: NAVBAR_WIDTH }}
sx={{
overflowY: 'scroll',
height:
Expand Down Expand Up @@ -282,8 +283,8 @@ export const DemoPortal = observer(
)}
</Group>
</Navbar.Section>
<Navbar.Section pt="md" grow>
<Stack spacing="xs">
<Navbar.Section px="sm" pt="md" grow>
<Stack spacing={0}>
{state.demos.map(({ name }, i) => {
const isCurrentlySelected = state.currentDemoIndex === i
return (
Expand All @@ -302,14 +303,23 @@ export const DemoPortal = observer(
})
}}
p="xs"
variant={colorScheme === 'dark' ? 'light' : 'filled'}
sx={(theme) => ({ borderRadius: theme.radius.xs })}
rightSection={
isCurrentlySelected ? (
<IconChevronRight size="0.8rem" stroke={1.5} />
) : undefined
}
py={8}
styles={{
root: {
borderRadius: theme.radius.sm,
},
label: {
color: isCurrentlySelected
? theme.colorScheme === 'dark'
? theme.colors.brand[2]
: theme.colors.brand[8]
: undefined,
fontSize: theme.fontSizes.sm,
},
}}
sx={(theme) => ({ borderRadius: theme.radius.sm })}
label={name}
fw={isCurrentlySelected ? 'bold' : undefined}
active={isCurrentlySelected}
/>
)
Expand Down
2 changes: 1 addition & 1 deletion generator/konfig-next-app/src/components/DemoTableOfContents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const useStyles = createStyles((theme) => ({
? theme.colors.dark[1]
: theme.colors.gray[7],
borderLeft: `${rem(1)} solid transparent`,
padding: `${rem(6)} ${theme.spacing.md}`,
padding: `${rem(4)} ${theme.spacing.md}`,
marginLeft: -1,
},

Expand Down
23 changes: 20 additions & 3 deletions generator/konfig-next-app/src/components/DocNavLink.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useBasePath } from '@/utils/use-base-path'
import { NavLink, useMantineColorScheme } from '@mantine/core'
import { NavLink, useMantineColorScheme, useMantineTheme } from '@mantine/core'
import Link from 'next/link'
import { Dispatch, SetStateAction } from 'react'

Expand All @@ -18,14 +18,31 @@ export function DocNavLink({
}) {
const { colorScheme } = useMantineColorScheme()
const basePath = useBasePath({ omitOwnerAndRepo })
const theme = useMantineTheme()
console.log(theme.fontSizes)
const active = id === docId
return (
<NavLink<typeof Link>
active={id === docId}
active={active}
px="md"
onClick={() => setOpened(false)}
key={id}
py={8}
fw={active ? 'bold' : undefined}
styles={{
root: {
borderRadius: theme.radius.sm,
},
label: {
fontSize: theme.fontSizes.sm,
color: active
? theme.colorScheme === 'dark'
? theme.colors.brand[3]
: theme.colors.brand[8]
: undefined,
},
}}
component={Link}
variant={colorScheme === 'dark' ? 'light' : 'filled'}
href={`${basePath}/docs/${id}`}
label={label}
/>
Expand Down
5 changes: 5 additions & 0 deletions generator/konfig-next-app/src/components/LayoutHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ export const LayoutHeader = observer(
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
borderBottom: `1px solid ${
theme.colorScheme === 'dark'
? theme.colors.brand[8]
: theme.colors.brand[6]
}`,
}}
>
<Group spacing="xs">
Expand Down
20 changes: 16 additions & 4 deletions generator/konfig-next-app/src/components/LinksGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,6 @@ const useStyles = createStyles((theme) => ({
link: {
fontWeight: 500,
fontSize: theme.fontSizes.sm,
borderLeft: `${rem(1)} solid ${
theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
}`,
},

chevron: {
Expand Down Expand Up @@ -104,13 +101,27 @@ export function LinksGroup({
<Box className={classes.linkWrapper} key={`${link.label}:${i}`}>
<NavLink<typeof Link>
onClick={() => setNavbarOpen(false)}
py={6}
styles={{
root: {
borderRadius: theme.radius.sm,
},
label: {
color: link.active
? theme.colorScheme === 'dark'
? theme.colors.brand[3]
: theme.colors.brand[8]
: undefined,
fontSize: theme.fontSizes.sm,
},
}}
ref={ref}
component={Link}
variant={theme.colorScheme === 'dark' ? 'light' : 'filled'}
className={classes.link}
href={link.link}
label={link.label}
active={link.active}
fw={link.active ? 'bold' : undefined}
rightSection={
<HttpMethodBadge size="xs" httpMethod={link.httpMethod} />
}
Expand All @@ -124,6 +135,7 @@ export function LinksGroup({
<UnstyledButton
onClick={() => setOpened((o) => !o)}
className={classes.control}
py={8}
>
<Group position="apart" spacing={0}>
<Box>{label}</Box>
Expand Down
4 changes: 2 additions & 2 deletions generator/konfig-next-app/src/components/ReferenceNavbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { IconLink } from '@tabler/icons-react'
import { useForm } from '@mantine/form'
import { notifications } from '@mantine/notifications'

export const NAVBAR_WIDTH = 350
export const NAVBAR_WIDTH = 280

const useStyles = createStyles((theme) => ({
header: {
Expand Down Expand Up @@ -303,7 +303,7 @@ export function ReferenceNavbar({
)}
</Navbar.Section>

<Navbar.Section py="md" grow>
<Navbar.Section px="sm" py="md" grow>
{links}
</Navbar.Section>
</>
Expand Down
3 changes: 2 additions & 1 deletion generator/konfig-next-app/src/pages/[org]/[portal]/docs/[[...doc]].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ const DocumentationPage = observer(
hidden={!opened}
width={{ lg: NAVBAR_WIDTH }}
py="md"
px="sm"
sx={{
overflowY: 'scroll',
height:
Expand All @@ -184,7 +185,7 @@ const DocumentationPage = observer(
>
{section.label}
</Text>
<Stack spacing={rem(3)}>
<Stack spacing={0}>
{section.links.map((link) => {
if (link.type === 'link') {
const label = idToLabel[link.id]
Expand Down
7 changes: 0 additions & 7 deletions generator/konfig-next-app/src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,13 +46,6 @@ function App(props: AppProps) {
<MantineProvider
theme={{
colorScheme,
fontSizes: {
xs: '0.6rem',
sm: '0.75rem',
md: '0.95rem',
lg: '1rem',
xl: '1.2rem',
},
}}
withGlobalStyles
withNormalizeCSS
Expand Down

0 comments on commit 737b981

Please sign in to comment.