diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000..aa42cd9903 Binary files /dev/null and b/.DS_Store differ diff --git a/packages/.DS_Store b/packages/.DS_Store new file mode 100644 index 0000000000..d8cd053a1f Binary files /dev/null and b/packages/.DS_Store differ diff --git a/packages/website/.DS_Store b/packages/website/.DS_Store new file mode 100644 index 0000000000..ea78940406 Binary files /dev/null and b/packages/website/.DS_Store differ diff --git a/packages/website/ts/.DS_Store b/packages/website/ts/.DS_Store new file mode 100644 index 0000000000..3cb1bd7de9 Binary files /dev/null and b/packages/website/ts/.DS_Store differ diff --git a/packages/website/ts/components/docs/code.tsx b/packages/website/ts/components/docs/code.tsx index 661a12c3c4..09075b8b51 100644 --- a/packages/website/ts/components/docs/code.tsx +++ b/packages/website/ts/components/docs/code.tsx @@ -33,25 +33,27 @@ export const Code: React.FC = ({ children, lang = 'typescript', run }; return ( - + <> {copyButtonText} - - {children} - + + + {children} + - {isRunnable && } - + {isRunnable && } + + ); }; @@ -59,7 +61,7 @@ const GUTTER = '10px'; const BORDER_RADIUS = '4px'; const CodeWrapper = styled.div` - position: relative; + clear: both; max-width: 700px; margin-bottom: 1.875rem; padding: ${GUTTER}; @@ -92,11 +94,10 @@ const CodeTag = styled.code` `; const CopyButton = styled(Button)` - position: absolute; - right: 0; - top: -48px; + float: right; height: 32px; padding: 0 12px; + margin-bottom: 13px; font-size: 14px; font-weight: 300; background: white; diff --git a/packages/website/ts/components/docs/tabs.tsx b/packages/website/ts/components/docs/tabs.tsx index 16d0ac9e99..e7b4ecc2fd 100644 --- a/packages/website/ts/components/docs/tabs.tsx +++ b/packages/website/ts/components/docs/tabs.tsx @@ -19,17 +19,12 @@ export const Tabs = styled(OriginalTabs).attrs({ selectedTabClassName: 'is-active', })` margin-bottom: 1.875rem; - - .is-active { - background-color: ${colors.backgroundLight}; - color: ${colors.brandDark}; - } + position: relative; `; export const TabPanel = styled(OriginalTabPanel).attrs({ selectedClassName: 'is-active', })` - background-color: ${colors.backgroundLight}; border-radius: 4px; display: none; @@ -40,6 +35,8 @@ export const TabPanel = styled(OriginalTabPanel).attrs({ export const TabList = styled(OriginalTabList)` display: flex; + position: absolute; + top: 5px; `; export const Tab = styled(OriginalTab)` @@ -49,4 +46,9 @@ export const Tab = styled(OriginalTab)` font-size: 16px; font-weight: 300; color: ${colors.textDarkSecondary}; + + &.is-active { + background-color: ${colors.backgroundLight}; + color: ${colors.brandDark}; + } `; diff --git a/packages/website/ts/icons/.DS_Store b/packages/website/ts/icons/.DS_Store new file mode 100644 index 0000000000..b110f803c2 Binary files /dev/null and b/packages/website/ts/icons/.DS_Store differ diff --git a/packages/website/ts/icons/illustrations/.DS_Store b/packages/website/ts/icons/illustrations/.DS_Store new file mode 100644 index 0000000000..6c1edffe6b Binary files /dev/null and b/packages/website/ts/icons/illustrations/.DS_Store differ diff --git a/packages/website/ts/icons/illustrations/0x-coreConcepts.svg b/packages/website/ts/icons/illustrations/coreConcepts.svg similarity index 100% rename from packages/website/ts/icons/illustrations/0x-coreConcepts.svg rename to packages/website/ts/icons/illustrations/coreConcepts.svg diff --git a/packages/website/ts/pages/docs/home.tsx b/packages/website/ts/pages/docs/home.tsx index bcef2027b4..daa3dce3a6 100644 --- a/packages/website/ts/pages/docs/home.tsx +++ b/packages/website/ts/pages/docs/home.tsx @@ -93,7 +93,7 @@ const shortcuts: IShortcutLinkProps[] = [ { heading: 'Core Concepts', description: 'Understand the fundamentals of 0x development', - icon: '0x-coreConcepts', + icon: 'coreConcepts', url: '/docs/core-concepts', }, { @@ -139,14 +139,14 @@ const getStartedLinks: IShortcutLinkProps[] = [ { heading: 'Launch an exchange in 30 seconds', description: 'Learn how to spin up an exchange or marketplace in seconds.', - icon: '0x-coreConcepts', + icon: 'coreConcepts', url: '/docs/core-concepts', }, { heading: 'Tap into contract-fillable liquidity', description: 'Source contract-fillable liquidity at the best prices from 0x.', icon: 'apiExplorer', - url: '/docs/core-concepts', + url: '/docs/api-explorer', }, { heading: 'Launch your in-game marketplace',