aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorFabio B <kandinsky454@protonmail.ch>2018-11-14 03:36:48 +0800
committerGitHub <noreply@github.com>2018-11-14 03:36:48 +0800
commit5c21d3f6af2ffc513b2bbfe92abf99181a32ceca (patch)
tree0ed5f669d7412b002e804d0edd94e10a25bd82cf /packages/website/ts/components
parenta824264da2d8cbcd76089c5d35da95fedbadd0bb (diff)
parenta4a46dc076f4e491b30671bd9006a586ab9754bc (diff)
downloaddexon-sol-tools-5c21d3f6af2ffc513b2bbfe92abf99181a32ceca.tar
dexon-sol-tools-5c21d3f6af2ffc513b2bbfe92abf99181a32ceca.tar.gz
dexon-sol-tools-5c21d3f6af2ffc513b2bbfe92abf99181a32ceca.tar.bz2
dexon-sol-tools-5c21d3f6af2ffc513b2bbfe92abf99181a32ceca.tar.lz
dexon-sol-tools-5c21d3f6af2ffc513b2bbfe92abf99181a32ceca.tar.xz
dexon-sol-tools-5c21d3f6af2ffc513b2bbfe92abf99181a32ceca.tar.zst
dexon-sol-tools-5c21d3f6af2ffc513b2bbfe92abf99181a32ceca.zip
Merge pull request #1244 from 0xProject/developerSectionNits
Remaining Developer Section Design Nits
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/documentation/docs_logo.tsx25
-rw-r--r--packages/website/ts/components/documentation/docs_top_bar.tsx8
-rw-r--r--packages/website/ts/components/documentation/sidebar_header.tsx3
-rw-r--r--packages/website/ts/components/documentation/version_drop_down.tsx2
-rw-r--r--packages/website/ts/components/dropdowns/developers_drop_down.tsx2
-rw-r--r--packages/website/ts/components/nested_sidebar_menu.tsx13
6 files changed, 40 insertions, 13 deletions
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index 2840d5960..ac331db79 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -1,17 +1,34 @@
import { Link } from '@0x/react-shared';
import * as React from 'react';
+import { styled } from 'ts/style/theme';
import { WebsitePaths } from 'ts/types';
+import { Container } from '../ui/container';
+
export interface DocsLogoProps {
- height: number;
containerStyle?: React.CSSProperties;
}
+const Image = styled.img`
+ &:hover {
+ opacity: 0.7;
+ }
+`;
+
export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
return (
- <Link to={WebsitePaths.Docs}>
- <img src="/images/docs_logo.svg" height={props.height} />
- </Link>
+ <Container className="flex">
+ <Container>
+ <Link to={WebsitePaths.Home}>
+ <Image src="/images/developers/logo/0x.svg" height={34} />
+ </Link>
+ </Container>
+ <Container paddingTop="6px" paddingLeft="7px">
+ <Link to={WebsitePaths.Docs}>
+ <Image src="/images/developers/logo/docs.svg" height={20} />
+ </Link>
+ </Container>
+ </Container>
);
};
diff --git a/packages/website/ts/components/documentation/docs_top_bar.tsx b/packages/website/ts/components/documentation/docs_top_bar.tsx
index 2054d0860..c4291b78f 100644
--- a/packages/website/ts/components/documentation/docs_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_top_bar.tsx
@@ -38,17 +38,17 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
return (
<Container height={80}>
<Container
- className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-mt1 md-mt1 sm-mt0 lg-justify-end md-justify-end sm-justify-start"
+ className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-justify-end md-justify-end sm-justify-start"
width="100%"
>
<Container className="sm-hide xs-hide">
- <Container className="flex items-center justify-between right" width="300px">
+ <Container className="flex items-center justify-between right" width="250px">
{this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)}
</Container>
</Container>
<Container className="lg-hide md-hide">
<Container paddingTop="6px">
- <DocsLogo height={30} />
+ <DocsLogo />
</Container>
</Container>
<Container className="md-hide lg-hide absolute" right="18px" top="12px">
@@ -63,7 +63,7 @@ export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState
/>
</Container>
</Container>
- <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'13px'} />
+ <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'16px'} />
{this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()}
</Container>
);
diff --git a/packages/website/ts/components/documentation/sidebar_header.tsx b/packages/website/ts/components/documentation/sidebar_header.tsx
index fece2704b..9ced52c74 100644
--- a/packages/website/ts/components/documentation/sidebar_header.tsx
+++ b/packages/website/ts/components/documentation/sidebar_header.tsx
@@ -29,6 +29,7 @@ export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({
fontColor={colors.lightLinkBlue}
fontSize={screenWidth === ScreenWidths.Sm ? '20px' : '22px'}
fontWeight="bold"
+ lineHeight="26px"
>
{title}
</Text>
@@ -36,7 +37,7 @@ export const SidebarHeader: React.StatelessComponent<SidebarHeaderProps> = ({
{!_.isUndefined(docsVersion) &&
!_.isUndefined(availableDocVersions) &&
!_.isUndefined(onVersionSelected) && (
- <div className="right" style={{ alignSelf: 'flex-end' }}>
+ <div className="right" style={{ alignSelf: 'flex-end', paddingBottom: 4 }}>
<VersionDropDown
selectedVersion={docsVersion}
versions={availableDocVersions}
diff --git a/packages/website/ts/components/documentation/version_drop_down.tsx b/packages/website/ts/components/documentation/version_drop_down.tsx
index a1c8b0547..5e77530fd 100644
--- a/packages/website/ts/components/documentation/version_drop_down.tsx
+++ b/packages/website/ts/components/documentation/version_drop_down.tsx
@@ -27,7 +27,7 @@ const PlainActiveNode: React.StatelessComponent<ActiveNodeProps> = ({ className,
const ActiveNode = styled(PlainActiveNode)`
cursor: pointer;
- border: 2px solid ${colors.beigeWhite};
+ border: 1px solid ${colors.beigeWhite};
border-radius: 4px;
padding: 4px 6px 4px 8px;
`;
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index 6e85c1499..b8a35fab0 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -89,7 +89,7 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
);
}
private _renderDropdownMenu(): React.ReactNode {
- const sectionPadding = '28px';
+ const sectionPadding = '26px';
const dropdownMenu = (
<Container>
<Container className="flex" padding={sectionPadding}>
diff --git a/packages/website/ts/components/nested_sidebar_menu.tsx b/packages/website/ts/components/nested_sidebar_menu.tsx
index db7d55261..4d4bc4617 100644
--- a/packages/website/ts/components/nested_sidebar_menu.tsx
+++ b/packages/website/ts/components/nested_sidebar_menu.tsx
@@ -4,11 +4,13 @@ import * as _ from 'lodash';
import * as React from 'react';
import { Button } from 'ts/components/ui/button';
import { Text } from 'ts/components/ui/text';
+import { ScreenWidths } from 'ts/types';
export interface NestedSidebarMenuProps {
sectionNameToLinks: ObjectMap<ALink[]>;
sidebarHeader?: React.ReactNode;
shouldReformatMenuItemNames?: boolean;
+ screenWidth: ScreenWidths;
}
export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
@@ -22,7 +24,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
...link,
title: menuItemTitle,
};
- return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} />;
+ return <MenuItem key={`menu-item-${menuItemTitle}`} link={finalLink} screenWidth={props.screenWidth} />;
});
// tslint:disable-next-line:no-unused-variable
return (
@@ -44,6 +46,7 @@ export const NestedSidebarMenu = (props: NestedSidebarMenuProps) => {
export interface MenuItemProps {
link: ALink;
+ screenWidth: ScreenWidths;
}
export interface MenuItemState {
@@ -70,7 +73,13 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
borderRadius="4px"
padding="0.4em 0.375em"
width="100%"
- backgroundColor={isActive ? colors.lightLinkBlue : colors.grey100}
+ backgroundColor={
+ isActive
+ ? colors.lightLinkBlue
+ : this.props.screenWidth === ScreenWidths.Sm
+ ? 'white'
+ : colors.grey100
+ }
fontSize="14px"
textAlign="left"
>