aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/sidebar_header.tsx46
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx5
-rw-r--r--packages/website/ts/pages/documentation/doc_page.tsx2
-rw-r--r--packages/website/ts/pages/wiki/wiki.tsx3
4 files changed, 53 insertions, 3 deletions
diff --git a/packages/website/ts/components/sidebar_header.tsx b/packages/website/ts/components/sidebar_header.tsx
new file mode 100644
index 000000000..132606ddd
--- /dev/null
+++ b/packages/website/ts/components/sidebar_header.tsx
@@ -0,0 +1,46 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+const SHOW_DURATION_MS = 4000;
+
+const titleToIcon: { [title: string]: string } = {
+ '0x.js': 'zeroExJs.png',
+ '0x Connect': 'connect.png',
+ '0x Smart Contracts': 'contracts.png',
+ Wiki: 'wiki.png',
+};
+
+interface SidebarHeaderProps {
+ title: string;
+}
+
+interface SidebarHeaderState {}
+
+export class SidebarHeader extends React.Component<SidebarHeaderProps, SidebarHeaderState> {
+ public render() {
+ return (
+ <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
+ <div className="flex" style={{ fontSize: 25 }}>
+ <div className="robotoMono" style={{ fontWeight: 'bold' }}>
+ 0x
+ </div>
+ <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
+ docs
+ </div>
+ </div>
+ <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
+ |
+ </div>
+ <div className="flex">
+ <div>
+ <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" />
+ </div>
+ <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
+ {this.props.title}
+ </div>
+ </div>
+ </div>
+ );
+ }
+}
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 0161da2d3..2d6f2b235 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';
import ReactTooltip = require('react-tooltip');
import { Blockchain } from 'ts/blockchain';
import { PortalMenu } from 'ts/components/portal_menu';
+import { SidebarHeader } from 'ts/components/sidebar_header';
import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
import { DropDown } from 'ts/components/ui/drop_down';
@@ -314,7 +315,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<NestedSidebarMenu
topLevelMenu={this.props.menu}
menuSubsectionsBySection={this.props.menuSubsectionsBySection}
- title={this.props.docsInfo.displayName}
+ sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} />}
shouldDisplaySectionHeaders={false}
onMenuItemClick={this._onMenuButtonClick.bind(this)}
selectedVersion={this.props.docsVersion}
@@ -333,7 +334,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
<NestedSidebarMenu
topLevelMenu={this.props.menuSubsectionsBySection}
menuSubsectionsBySection={this.props.menuSubsectionsBySection}
- title={this.props.translate.get(Key.Wiki, Deco.Cap)}
+ sidebarHeader={<SidebarHeader title="Wiki" />}
shouldDisplaySectionHeaders={false}
onMenuItemClick={this._onMenuButtonClick.bind(this)}
/>
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index cf2111b29..bc01dc728 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -5,6 +5,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
import semverSort = require('semver-sort');
+import { SidebarHeader } from 'ts/components/sidebar_header';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { Dispatcher } from 'ts/redux/dispatcher';
import { DocPackages, Environments } from 'ts/types';
@@ -85,6 +86,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
availableVersions={this.props.availableDocVersions}
docsInfo={this.props.docsInfo}
docAgnosticFormat={this.state.docAgnosticFormat}
+ sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} />}
sourceUrl={sourceUrl}
/>
</div>
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index f338ed9c2..18074c302 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -14,6 +14,7 @@ import RaisedButton from 'material-ui/RaisedButton';
import * as React from 'react';
import DocumentTitle = require('react-document-title');
import { scroller } from 'react-scroll';
+import { SidebarHeader } from 'ts/components/sidebar_header';
import { TopBar } from 'ts/components/top_bar/top_bar';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Article, ArticlesBySection, WebsitePaths } from 'ts/types';
@@ -128,7 +129,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
<NestedSidebarMenu
topLevelMenu={menuSubsectionsBySection}
menuSubsectionsBySection={menuSubsectionsBySection}
- title="Wiki"
+ sidebarHeader={<SidebarHeader title="Wiki" />}
/>
</div>
</div>