Merge branch 'development'

* development: (175 commits)
  small README fixes
  Update docs list in README
  Add manual postpublish command to all public packages and update CHANGELOG.json
  Fix postpublish util to ignore namespace
  Fix release notes bug
  Should print out `lerna publish` stdout so we can see if anything went wrong
  Publish
  Updated CHANGELOGS
  Generate CHANGELOG.json files
  Fix hasty find/replace
  Default to 4sp
  Update moment, no longer need separate moment types
  Move prettify command to utils and also call it on CHANGELOG.md
  Add prettier run on generated CHANGELOG.json and fix scripts
  Remove semi-colons from monorepo-scripts package.json
  Get rid of ; in top-level package.json
  Fix TSLint error
  Make dry-run configurable from top-level package.json
  Improve naming
  Run prettier, update deployer CHANGELOG
  ...

5 files changed, 32 insertions, 9 deletions

diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx
index d24a43dcb..449e8a045 100644
--- a/packages/react-shared/src/components/markdown_section.tsx
+++ b/packages/react-shared/src/components/markdown_section.tsx
@@ -43,6 +43,7 @@ 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.convertDashesToSpaces(sectionName);
         return (
             <div
                 className="md-px1 sm-px2 overflow-hidden"
@@ -55,7 +56,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                             <span style={{ textTransform: 'capitalize', color: colors.grey700 }}>
                                 <AnchorTitle
                                     headerSize={headerSize}
-                                    title={sectionName}
+                                    title={finalSectionName}
                                     id={id}
                                     shouldShowAnchor={this.state.shouldShowAnchor}
                                 />
diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx
index 2225bd197..f49d6fcf7 100644
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -45,7 +45,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     };
     public render() {
         const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => {
-            const finalSectionName = sectionName.replace(/-/g, ' ');
+            const finalSectionName = utils.convertDashesToSpaces(sectionName);
             if (this.props.shouldDisplaySectionHeaders) {
                 const id = utils.getIdFromName(sectionName);
                 return (
@@ -85,6 +85,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
             : styles.menuItemWithoutHeaders;
         const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
         const menuItems = _.map(menuItemNames, menuItemName => {
+            const finalMenuItemName = utils.convertDashesToSpaces(menuItemName);
             const id = utils.getIdFromName(menuItemName);
             return (
                 <div key={menuItemName}>
@@ -96,11 +97,11 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                         containerId={constants.DOCS_CONTAINER_ID}
                     >
                         <MenuItem
-                            onTouchTap={this._onMenuItemClick.bind(this, menuItemName)}
+                            onTouchTap={this._onMenuItemClick.bind(this, finalMenuItemName)}
                             style={menuItemStyles}
                             innerDivStyle={menuItemInnerDivStyles}
                         >
-                            <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span>
+                            <span style={{ textTransform: 'capitalize' }}>{finalMenuItemName}</span>
                         </MenuItem>
                     </ScrollLink>
                     {this._renderMenuItemSubsections(menuItemName)}
@@ -122,7 +123,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                     const name = `${menuItemName}-${entityName}`;
                     const id = utils.getIdFromName(name);
                     return (
-                        <li key={`menuItem-${entityName}`}>
+                        <li key={`menuSubsectionItem-${name}`}>
                             <ScrollLink
                                 to={id}
                                 offset={0}
diff --git a/packages/react-shared/src/components/section_header.tsx b/packages/react-shared/src/components/section_header.tsx
index ee34a6c09..0224c2127 100644
--- a/packages/react-shared/src/components/section_header.tsx
+++ b/packages/react-shared/src/components/section_header.tsx
@@ -35,7 +35,7 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe
     public render() {
         const { sectionName, headerSize } = this.props as PropsWithDefaults;
 
-        const finalSectionName = this.props.sectionName.replace(/-/g, ' ');
+        const finalSectionName = utils.convertDashesToSpaces(this.props.sectionName);
         const id = utils.getIdFromName(finalSectionName);
         return (
             <div
@@ -48,7 +48,7 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe
                         title={
                             <span
                                 style={{
-                                    textTransform: 'uppercase',
+                                    textTransform: 'capitalize',
                                     color: colors.grey,
                                     fontFamily: 'Roboto Mono',
                                     fontWeight: 300,
diff --git a/packages/react-shared/src/utils/colors.ts b/packages/react-shared/src/utils/colors.ts
index 2eead95c7..7613414ae 100644
--- a/packages/react-shared/src/utils/colors.ts
+++ b/packages/react-shared/src/utils/colors.ts
@@ -1,7 +1,6 @@
 import { colors as materialUiColors } from 'material-ui/styles';
 
-export const colors = {
-    ...materialUiColors,
+const baseColors = {
     gray40: '#F8F8F8',
     grey50: '#FAFAFA',
     grey100: '#F5F5F5',
@@ -27,6 +26,7 @@ export const colors = {
     lightBlue: '#60A4F4',
     lightBlueA700: '#0091EA',
     linkBlue: '#1D5CDE',
+    mediumBlue: '#488AEA',
     darkBlue: '#4D5481',
     turquois: '#058789',
     lightPurple: '#A81CA6',
@@ -46,3 +46,21 @@ export const colors = {
     amber800: '#FF8F00',
     darkYellow: '#caca03',
 };
+
+const appColors = {
+    // wallet specific colors
+    walletBoxShadow: 'rgba(56, 59, 137, 0.2)',
+    walletBorder: '#ededee',
+    walletDefaultItemBackground: '#fbfbfc',
+    walletFocusedItemBackground: '#f0f1f4',
+    allowanceToggleShadow: 'rgba(0, 0, 0, 0)',
+    allowanceToggleOffTrack: '#adadad',
+    allowanceToggleOnTrack: baseColors.mediumBlue,
+    wrapEtherConfirmationButton: baseColors.mediumBlue,
+};
+
+export const colors = {
+    ...materialUiColors,
+    ...baseColors,
+    ...appColors,
+};
diff --git a/packages/react-shared/src/utils/utils.ts b/packages/react-shared/src/utils/utils.ts
index b3acb081e..1538dd087 100644
--- a/packages/react-shared/src/utils/utils.ts
+++ b/packages/react-shared/src/utils/utils.ts
@@ -30,6 +30,9 @@ export const utils = {
         const id = name.replace(/ /g, '-');
         return id;
     },
+    convertDashesToSpaces(text: string) {
+        return text.replace(/-/g, ' ');
+    },
     getEtherScanLinkIfExists(
         addressOrTxHash: string,
         networkId: number,