Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

make design consistent with docs #43

Merged
merged 4 commits into from
Oct 16, 2024
Merged

make design consistent with docs #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4560d1e
dev: sbe design fixes
dewanshparashar Oct 9, 2024
b1ae9d7
Dev: added arb docs butto
dewanshparashar Oct 9, 2024
0751492
Dev: update arrow color
dewanshparashar Oct 9, 2024
0763843
Dev: reset toggle
dewanshparashar Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 4 additions & 12 deletions mdx-components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
fontFamily: 'mono',
mt: '5',
mb: '2',
fontSize: '18px',
fontSize: '16px',
})}
>
{children}
Expand All @@ -75,7 +75,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
p: ({ children }) => (
<p
className={css({
fontSize: '18px',
fontSize: '16px',
mt: '3',
mb: '3',
lineHeight: '1.75',
Expand All @@ -89,7 +89,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
<styled.ul
listStyle="inside"
fontFamily="body"
fontSize="18px"
fontSize="16px"
ml="0"
pl="1em"
pr="-1em"
Expand All @@ -100,15 +100,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
),
a: ({ children, href }) => {
return (
<styled.a
textDecoration="underline"
target="_blank"
cursor="pointer"
href={href}
_hover={{
color: 'pink.400',
}}
>
<styled.a textDecoration="none" target="_blank" cursor="pointer" href={href}>
{children}
</styled.a>
);
Expand Down
29 changes: 29 additions & 0 deletions public/arbitrum_logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 21 additions & 25 deletions src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import type { Metadata } from 'next';

import { HStack, Stack } from '@/styled-system/jsx';
import { css, cx } from '@/styled-system/css';
import { container, flex, stack } from '@/styled-system/patterns';
import { css } from '@/styled-system/css';
import { container } from '@/styled-system/patterns';
import Navigation from '@/components/app/navigation';
import { font_mono, font_body, font_heading } from '@/styles/font';

import "./globals.css";
import { ThemeProvider } from "./theme_provider";
import SideNav from "./side_nav";
import { Breadcrumbs } from "@/components/app/breadcrumbs";
import { PageScroll } from "@/components/app/page_scroll";
import { PHProvider } from "./providers";
import dynamic from "next/dynamic";
import './globals.css';
import { ThemeProvider } from './theme_provider';
import SideNav from './side_nav';
import { Breadcrumbs } from '@/components/app/breadcrumbs';
import { PageScroll } from '@/components/app/page_scroll';
import { PHProvider } from './providers';
import dynamic from 'next/dynamic';

const PostHogPageView = dynamic(() => import("./PostHogPageView"), {
const PostHogPageView = dynamic(() => import('./PostHogPageView'), {
ssr: false,
});

Expand All @@ -25,17 +24,14 @@ export const metadata: Metadata = {

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html
suppressHydrationWarning
className={`${font_mono.variable} ${font_body.variable} ${font_heading.variable}`}
>
<html suppressHydrationWarning>
<PHProvider>
<body
className={css({
overflow: "hidden",
h: "100dvh",
w: "100dvw",
fontFamily: "body",
overflow: 'hidden',
h: '100dvh',
w: '100dvw',
fontFamily: 'system-ui, Roboto, sans-serif',
})}
>
<PostHogPageView />
Expand All @@ -46,22 +42,22 @@ export default function RootLayout({ children }: { children: React.ReactNode })
h="full"
w="full"
overflow="hidden"
bg="stone.50"
flexDir={{ base: "column-reverse", md: "column" }}
_dark={{ bg: "stone.800" }}
bg="#ffffff"
flexDir={{ base: 'column-reverse', md: 'column' }}
_dark={{ bg: '#1b1b1d' }}
>
<Navigation />
<HStack
className={css({
flexGrow: "1",
overflow: "hidden",
flexGrow: '1',
overflow: 'hidden',
})}
>
<SideNav />
<PageScroll>
<div
className={container({
maxW: "5xl",
maxW: '5xl',
})}
>
<Breadcrumbs />
Expand Down
20 changes: 10 additions & 10 deletions src/app/side_nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Sidebar } from '@/components/app/sidebar';
import { Stack } from '@/styled-system/jsx';
import { css } from '@/styled-system/css';

const SIDEBAR_WIDTH = { 'base': '0', 'md': '256px', '2xl': '368px' };
const SIDEBAR_WIDTH = { 'base': '0', 'md': '256px', '2xl': '300px' };

export default function SideNav() {
const { resolvedTheme } = useTheme();
Expand All @@ -20,11 +20,11 @@ export default function SideNav() {
overflowY: 'auto',
borderRightWidth: '1px',
borderColor: 'stone.200',
background: 'stone.100',
background: '#ffffff',
display: { base: 'none !important', md: 'flex !important' },
_dark: {
borderColor: 'stone.950',
background: 'stone.900',
borderColor: '#444950',
background: '#1b1b1d',
},
scrollbarWidth: 'thin',
scrollbarColor: 'stone.700 rgba(255,255,255,0)',
Expand All @@ -34,15 +34,15 @@ export default function SideNav() {
},
},
_scrollbar: {
w: '10px',
w: '1px',
},
_scrollbarThumb: {
background: 'stone.700',
borderRadius: '14px',
display: 'none',
},
_scrollbarTrack: {
background: 'stone.900',
background: '#1b1b1d',
// display: "none",
},
})}
Expand All @@ -61,11 +61,11 @@ export default function SideNav() {
overflowY: 'auto',
borderRightWidth: '1px',
borderColor: 'stone.200',
background: 'stone.100',
background: '#ffffff',
display: { base: 'none !important', md: 'flex !important' },
_dark: {
borderColor: 'stone.950',
background: 'stone.900',
borderColor: '#444950',
background: '#1b1b1d',
},
scrollbarWidth: 'thin',
scrollbarColor: 'stone.400 rgba(255,255,255,0)',
Expand All @@ -75,7 +75,7 @@ export default function SideNav() {
},
},
_scrollbar: {
w: '10px',
w: '1px',
},
_scrollbarThumb: {
background: 'stone.400',
Expand Down
22 changes: 15 additions & 7 deletions src/components/app/breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,11 @@ import { HStack } from '@/styled-system/jsx';
import { useSelectedLayoutSegments } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { css } from '@/styled-system/css';
import { styled } from '@/styled-system/jsx';
import Link from 'next/link';
import { HomeIcon } from '@radix-ui/react-icons';
import { HomeIcon, ChevronRightIcon } from '@radix-ui/react-icons';

const FONT_SIZE = { 'base': '14px', '2xl': '16px' };
const ICON_SIZE = { 'base': '16px', '2xl': '18px' };
const ICON_SIZE = { 'base': '16px', '2xl': '16px' };
const TEXT_COLOR = {
_dark: 'stone.400',
_light: 'stone.500',
Expand Down Expand Up @@ -38,7 +37,7 @@ function HomeButton() {
w: ICON_SIZE,
})}
/>
home
Home
</Link>
</Button>
);
Expand All @@ -60,7 +59,14 @@ export function Breadcrumbs() {
})}
key={`${segment}-${index}`}
>
<styled.span>{`=>`}</styled.span>
<ChevronRightIcon
className={css({
color: SEPARATOR_COLOR,
h: ICON_SIZE,
w: ICON_SIZE,
})}
/>

<Button
asChild
variant="link"
Expand All @@ -70,10 +76,12 @@ export function Breadcrumbs() {
fontSize: FONT_SIZE,
h: { 'base': '20px', '2xl': '24px' },
color: segment === LAST_SEGMENT ? ACTIVE_ROUTE_COLOR : TEXT_COLOR,
textDecoration: segment === LAST_SEGMENT ? 'underline' : '',
textTransform: 'capitalize',
})}
>
<Link href={`/${segments.slice(0, index + 1).join('/')}`}>{segment}</Link>
<Link href={`/${segments.slice(0, index + 1).join('/')}`}>
{segment.split('_').join(' ')}
</Link>
</Button>
</HStack>
))}
Expand Down
4 changes: 2 additions & 2 deletions src/components/app/code_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function CodePanel({ children, language = 'rust' }: CodePanelProps) {
style={dracula}
customStyle={{ margin: 0 }}
codeTagProps={{
style: { fontFamily: 'var(--font-mono)', fontSize: '16px' },
style: { fontFamily: 'var(--font-mono)', fontSize: '12px' },
}}
wrapLines={true}
showLineNumbers={true}
Expand All @@ -54,7 +54,7 @@ export function CodePanel({ children, language = 'rust' }: CodePanelProps) {
style={prism}
customStyle={{ margin: 0 }}
codeTagProps={{
style: { fontFamily: 'var(--font-mono)', fontSize: '16px' },
style: { fontFamily: 'var(--font-mono)', fontSize: '12px' },
}}
wrapLines={true}
showLineNumbers={true}
Expand Down
Loading
Loading