diff options
Diffstat (limited to 'packages/react-shared/src')
6 files changed, 93 insertions, 8 deletions
diff --git a/packages/react-shared/src/components/anchor_title.tsx b/packages/react-shared/src/components/anchor_title.tsx index a83881b67..dabdfff9b 100644 --- a/packages/react-shared/src/components/anchor_title.tsx +++ b/packages/react-shared/src/components/anchor_title.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Link as ScrollLink } from 'react-scroll'; import { HeaderSizes, Styles } from '../types'; +import { colors } from '../utils/colors'; import { constants } from '../utils/constants'; const headerSizeToScrollOffset: { [headerSize: string]: number } = { @@ -27,7 +28,7 @@ const styles: Styles = { cursor: 'pointer', }, h1: { - fontSize: '1.8em', + fontSize: '30px', }, h2: { fontSize: '1.5em', @@ -63,7 +64,7 @@ export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleSt } as any } > - <div className="inline-block" style={{ paddingRight: 4 }}> + <div className="inline-block" style={{ paddingRight: 4, color: colors.darkestGrey }}> {this.props.title} </div> <ScrollLink diff --git a/packages/react-shared/src/components/container.tsx b/packages/react-shared/src/components/container.tsx new file mode 100644 index 000000000..f2ae68b70 --- /dev/null +++ b/packages/react-shared/src/components/container.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; + +type StringOrNum = string | number; + +export type ContainerTag = 'div' | 'span'; + +export interface ContainerProps { + marginTop?: StringOrNum; + marginBottom?: StringOrNum; + marginRight?: StringOrNum; + marginLeft?: StringOrNum; + padding?: StringOrNum; + paddingTop?: StringOrNum; + paddingBottom?: StringOrNum; + paddingRight?: StringOrNum; + paddingLeft?: StringOrNum; + backgroundColor?: string; + borderRadius?: StringOrNum; + maxWidth?: StringOrNum; + maxHeight?: StringOrNum; + width?: StringOrNum; + height?: StringOrNum; + minWidth?: StringOrNum; + minHeight?: StringOrNum; + isHidden?: boolean; + className?: string; + position?: 'absolute' | 'fixed' | 'relative' | 'unset'; + display?: 'inline-block' | 'block' | 'inline-flex' | 'inline'; + top?: string; + left?: string; + right?: string; + bottom?: string; + zIndex?: number; + Tag?: ContainerTag; + cursor?: string; + id?: string; + onClick?: (event: React.MouseEvent<HTMLElement>) => void; + overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; +} + +export const Container: React.StatelessComponent<ContainerProps> = props => { + const { children, className, Tag, isHidden, id, onClick, ...style } = props; + const visibility = isHidden ? 'hidden' : undefined; + return ( + <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}> + {children} + </Tag> + ); +}; + +Container.defaultProps = { + Tag: 'div', +}; + +Container.displayName = 'Container'; diff --git a/packages/react-shared/src/components/markdown_paragraph_block.tsx b/packages/react-shared/src/components/markdown_paragraph_block.tsx new file mode 100644 index 000000000..519638446 --- /dev/null +++ b/packages/react-shared/src/components/markdown_paragraph_block.tsx @@ -0,0 +1,14 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { colors } from '../utils/colors'; + +export interface MarkdownParagraphBlockProps {} + +export interface MarkdownParagraphBlockState {} + +export class MarkdownParagraphBlock extends React.Component<MarkdownParagraphBlockProps, MarkdownParagraphBlockState> { + public render(): React.ReactNode { + return <span style={{ color: colors.greyTheme, lineHeight: '26px' }}>{this.props.children}</span>; + } +} diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index e84d2b078..3dc3efe12 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -8,15 +8,18 @@ import { colors } from '../utils/colors'; import { utils } from '../utils/utils'; import { AnchorTitle } from './anchor_title'; +import { Container } from './container'; import { Link } from './link'; import { MarkdownCodeBlock } from './markdown_code_block'; import { MarkdownLinkBlock } from './markdown_link_block'; +import { MarkdownParagraphBlock } from './markdown_paragraph_block'; export interface MarkdownSectionProps { sectionName: string; markdownContent: string; headerSize?: HeaderSizes; githubLink?: string; + shouldReformatTitle?: boolean; } interface DefaultMarkdownSectionProps { @@ -32,6 +35,7 @@ export interface MarkdownSectionState { export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> { public static defaultProps: Partial<MarkdownSectionProps> = { headerSize: HeaderSizes.H3, + shouldReformatTitle: true, }; constructor(props: MarkdownSectionProps) { super(props); @@ -43,7 +47,9 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; const id = utils.getIdFromName(sectionName); - const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); + const finalSectionName = this.props.shouldReformatTitle + ? utils.convertCamelCaseToSpaces(sectionName) + : sectionName; return ( <div className="md-px1 sm-px2 overflow-hidden" @@ -51,12 +57,12 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd onMouseOut={this._setAnchorVisibility.bind(this, false)} > <ScrollElement name={id}> - <div className="clearfix pt3"> + <Container className="clearfix" marginBottom="20px"> <div className="col lg-col-8 md-col-8 sm-col-12"> - <span style={{ textTransform: 'capitalize', color: colors.grey700 }}> + <span style={{ color: colors.grey700 }}> <AnchorTitle headerSize={headerSize} - title={finalSectionName} + title={_.capitalize(finalSectionName)} id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> @@ -71,16 +77,23 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd </div> )} </div> - </div> - <hr style={{ border: `1px solid ${colors.lightestGrey}` }} /> + </Container> <ReactMarkdown source={markdownContent} escapeHtml={false} renderers={{ code: MarkdownCodeBlock, link: MarkdownLinkBlock, + paragraph: MarkdownParagraphBlock, }} /> + <Container + width={'100%'} + height={'1px'} + backgroundColor={colors.grey300} + marginTop={'32px'} + marginBottom={'32px'} + /> </ScrollElement> </div> ); diff --git a/packages/react-shared/src/index.ts b/packages/react-shared/src/index.ts index e33b09f19..2ab9b393e 100644 --- a/packages/react-shared/src/index.ts +++ b/packages/react-shared/src/index.ts @@ -5,6 +5,7 @@ export { MarkdownSection } from './components/markdown_section'; export { NestedSidebarMenu } from './components/nested_sidebar_menu'; export { SectionHeader } from './components/section_header'; export { Link } from './components/link'; +export { Container } from './components/container'; export { HeaderSizes, Styles, EtherscanLinkSuffixes, Networks, ALink } from './types'; diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts index 596c17e83..a4dd7fefa 100644 --- a/packages/react-shared/src/utils/colors.ts +++ b/packages/react-shared/src/utils/colors.ts @@ -18,6 +18,7 @@ const baseColors = { darkGrey: '#818181', landingLinkGrey: '#919191', linkSectionGrey: '#999999', + greyTheme: '#666666', grey700: '#616161', grey750: '#515151', grey800: '#424242', |