chore: many small stylistic changes

packages/react-docs/src/components/doc_reference.tsx

@@ -1,7 +1,9 @@
 import {
     colors,
     constants as sharedConstants,
+    Container,
     EtherscanLinkSuffixes,
+    HeaderSizes,
     Link,
     MarkdownSection,
     Networks,
@@ -101,11 +103,17 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
         const closestVersion = sortedEligibleVersions[0];
         const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdownByVersion[closestVersion][sectionName];
         if (!_.isUndefined(markdownFileIfExists)) {
+            // Special-case replace the `introduction` sectionName with the package name
+            const isIntroductionSection = sectionName === 'introduction';
+            const finalSectionName = isIntroductionSection ? this.props.docsInfo.displayName : sectionName;
+            const headerSize = isIntroductionSection ? HeaderSizes.H1 : HeaderSizes.H3;
             return (
                 <MarkdownSection
                     key={`markdown-section-${sectionName}`}
-                    sectionName={sectionName}
+                    sectionName={finalSectionName}
+                    headerSize={headerSize}
                     markdownContent={markdownFileIfExists}
+                    shouldReformatTitle={false}
                 />
             );
         }
@@ -215,6 +223,13 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
                             <div>{typeDefs}</div>
                         </div>
                     )}
+                <Container
+                    width={'100%'}
+                    height={'1px'}
+                    backgroundColor={colors.grey300}
+                    marginTop={'32px'}
+                    marginBottom={'12px'}
+                />
             </div>
         );
     }

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

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';

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>;
+    }
+}

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>
         );

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';
 

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',

packages/react-shared/tsconfig.json

@@ -4,6 +4,7 @@
         "outDir": "lib",
         "rootDir": "src",
         "jsx": "react",
+        "strictNullChecks": false,
         "baseUrl": ".",
         "paths": {
             "*": ["node_modules/@types/*", "*"]