make design consistent with docs

* dev: sbe design fixes * Dev: added arb docs butto * Dev: update arrow color * Dev: reset toggle
OffchainLabs · Oct 16, 2024 · 806762a · 806762a
1 parent cfceede
commit 806762a
Show file tree

Hide file tree

Showing 16 changed files with 209 additions and 176 deletions.
diff --git a/mdx-components.tsx b/mdx-components.tsx
@@ -65,7 +65,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
           fontFamily: 'mono',
           mt: '5',
           mb: '2',
-          fontSize: '18px',
+          fontSize: '16px',
         })}
       >
         {children}
@@ -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',
@@ -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"
@@ -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>
       );

diff --git a/public/arbitrum_logo.svg b/public/arbitrum_logo.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -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,
 });
 
@@ -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 />
@@ -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 />

diff --git a/src/app/side_nav.tsx b/src/app/side_nav.tsx
@@ -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();
@@ -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)',
@@ -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",
           },
         })}
@@ -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)',
@@ -75,7 +75,7 @@ export default function SideNav() {
           },
         },
         _scrollbar: {
-          w: '10px',
+          w: '1px',
         },
         _scrollbarThumb: {
           background: 'stone.400',

diff --git a/src/components/app/breadcrumbs.tsx b/src/components/app/breadcrumbs.tsx
@@ -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',
@@ -38,7 +37,7 @@ function HomeButton() {
             w: ICON_SIZE,
           })}
         />
-        home
+        Home
       </Link>
     </Button>
   );
@@ -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"
@@ -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>
       ))}

diff --git a/src/components/app/code_panel.tsx b/src/components/app/code_panel.tsx
@@ -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}
@@ -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}