From 2ce6ca585485baad65c4244d478ed271d9e91897 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Tue, 23 Oct 2018 03:02:09 -0400
Subject: [PATCH] feat(v2): style appearance

---
 v2/lib/theme/Doc/index.js             |   1 +
 v2/lib/theme/DocsPaginator/styles.css |   6 +-
 v2/lib/theme/Layout/index.js          |   5 +
 v2/lib/theme/Markdown/anchors.js      |  11 +-
 v2/lib/theme/Markdown/index.js        |   2 +-
 v2/lib/theme/Navbar/index.js          |   2 +-
 v2/lib/theme/Navbar/styles.css        |  13 +-
 v2/lib/theme/Sidebar/index.js         |   2 +-
 v2/lib/theme/Sidebar/styles.css       |   5 +
 v2/website/pages/styles.css           |  16 +-
 v2/website/static/css/main.css        | 396 ++++++++++++++++++++++++++++++++++
 11 files changed, 435 insertions(+), 24 deletions(-)
 create mode 100644 v2/website/static/css/main.css
diff --git a/v2/lib/theme/Doc/index.js b/v2/lib/theme/Doc/index.js
index 8844f49efb..32b6a40d2f 100644
--- a/v2/lib/theme/Doc/index.js
+++ b/v2/lib/theme/Doc/index.js
@@ -29,6 +29,7 @@ class Doc extends React.Component {
           {language && <html lang={language} />}
           {language && <meta name="docsearch:language" content={language} />}
           {version && <meta name="docsearch:version" content={version} />}
+          <link rel="stylesheet" type="text/css" href="/css/main.css" />
         </Helmet>
         <Navbar docsMetadatas={docsMetadatas} />
         <Sidebar
diff --git a/v2/lib/theme/DocsPaginator/styles.css b/v2/lib/theme/DocsPaginator/styles.css
index a555199051..95d94c31b6 100644
--- a/v2/lib/theme/DocsPaginator/styles.css
+++ b/v2/lib/theme/DocsPaginator/styles.css
@@ -10,13 +10,11 @@
 
 .paginatorLink {
   background-color: #f2f3f5;
-  color: #000;
   border-radius: 30px;
-  display: inline-block;
-  height: 1.5em;
+  color: #000;
+  padding: 1.5em 1.5em 0.75em;
   text-decoration: none;
   transition: 0.3s all ease-in-out;
-  padding: 12px 24px;
 }
 
 .paginatorLink:hover {
diff --git a/v2/lib/theme/Layout/index.js b/v2/lib/theme/Layout/index.js
index 355f987613..aad70976e8 100644
--- a/v2/lib/theme/Layout/index.js
+++ b/v2/lib/theme/Layout/index.js
@@ -1,4 +1,6 @@
 import React from 'react';
+import Helmet from 'react-helmet';
+
 import Footer from '@theme/Footer'; // eslint-disable-line
 import Navbar from '@theme/Navbar'; // eslint-disable-line
 
@@ -15,6 +17,9 @@ export default class Layout extends React.Component {
     } = this.props;
     return (
       <div>
+        <Helmet>
+          <link rel="stylesheet" type="text/css" href="/css/main.css" />
+        </Helmet>
         <Navbar docsMetadatas={docsMetadatas} />
         {children}
         <Footer
diff --git a/v2/lib/theme/Markdown/anchors.js b/v2/lib/theme/Markdown/anchors.js
index 2f3ff15841..176bc9fda4 100644
--- a/v2/lib/theme/Markdown/anchors.js
+++ b/v2/lib/theme/Markdown/anchors.js
@@ -1,18 +1,19 @@
 import toSlug from './toSlug';
 
 export default function anchors(md) {
-  const originalRender = md.renderer.rules.heading_open;
+  const originalRender = md.renderer.rules.heading_close;
 
   // eslint-disable-next-line
-  md.renderer.rules.heading_open = function(tokens, idx, options, env) {
-    const textToken = tokens[idx + 1];
+  md.renderer.rules.heading_close = function(tokens, idx, options, env) {
+    const textToken = tokens[idx - 1];
 
     if (textToken.content) {
       const anchor = toSlug(textToken.content, env);
 
-      return `<h${
+      return ` <a aria-hidden="true" id="${anchor}"></a><a aria-hidden="true" class="hash-link" href="#${anchor}">#</a></h${
         tokens[idx].hLevel
-      }><a class="anchor" aria-hidden="true" id="${anchor}"></a><a href="#${anchor}" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>`;
+      }>
+`;
     }
 
     return originalRender(tokens, idx, options, env);
diff --git a/v2/lib/theme/Markdown/index.js b/v2/lib/theme/Markdown/index.js
index 16f1e0a64e..3e5bc33df3 100644
--- a/v2/lib/theme/Markdown/index.js
+++ b/v2/lib/theme/Markdown/index.js
@@ -95,7 +95,7 @@ class MarkdownBlock extends React.Component {
       {},
       {
         version: '9.12.0',
-        theme: 'default',
+        theme: 'atom-one-dark',
       },
       siteConfig.highlight,
     );
diff --git a/v2/lib/theme/Navbar/index.js b/v2/lib/theme/Navbar/index.js
index d8acc3fe75..99af1412c1 100644
--- a/v2/lib/theme/Navbar/index.js
+++ b/v2/lib/theme/Navbar/index.js
@@ -22,7 +22,7 @@ function Navbar() {
             <NavLink
               activeClassName={styles.navLinkActive}
               className={styles.navLink}
-              to="/docs/site-config">
+              to="/docs/installation">
               Docs
             </NavLink>
           </li>
diff --git a/v2/lib/theme/Navbar/styles.css b/v2/lib/theme/Navbar/styles.css
index 1324bd8684..5e5e794320 100644
--- a/v2/lib/theme/Navbar/styles.css
+++ b/v2/lib/theme/Navbar/styles.css
@@ -30,26 +30,23 @@
 }
 
 .navList {
+  height: inherit;
   list-style-type: none;
+  margin: 0;
   padding: 0;
 }
 
 .navListItem {
   box-sizing: border-box;
   display: inline-block;
+  margin-top: 0;
 }
 
 .navLink {
-  border-radius: 6px;
   color: #1c1e21;
   display: block;
   padding: 1em 1.2em;
   text-decoration: none;
-  transition: background-color 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
-}
-
-.navLink:hover {
-  background-color: #f5f6f7;
 }
 
 .navLinkActive {
@@ -58,7 +55,3 @@
   color: #25c2a0;
   margin-bottom: -4px;
 }
-
-.navLinkActive:hover {
-  background-color: inherit;
-}
diff --git a/v2/lib/theme/Sidebar/index.js b/v2/lib/theme/Sidebar/index.js
index de17501278..9cd0ef21ae 100644
--- a/v2/lib/theme/Sidebar/index.js
+++ b/v2/lib/theme/Sidebar/index.js
@@ -23,7 +23,7 @@ function Sidebar(props) {
     }
 
     return (
-      <li key={linkID}>
+      <li className={styles.sidebarListItem} key={linkID}>
         <NavLink
           activeClassName={styles.sidebarLinkActive}
           className={classnames(styles.sidebarLink, styles.sidebarItem)}
diff --git a/v2/lib/theme/Sidebar/styles.css b/v2/lib/theme/Sidebar/styles.css
index d2cde51ca3..c0488dd080 100644
--- a/v2/lib/theme/Sidebar/styles.css
+++ b/v2/lib/theme/Sidebar/styles.css
@@ -37,6 +37,10 @@
   padding-left: 0;
 }
 
+.sidebarListItem {
+  margin-top: 0;
+}
+
 .sidebarLink {
   border-radius: 6px;
   color: #717171;
@@ -48,6 +52,7 @@
 
 .sidebarLink:hover {
   background-color: #f5f6f7;
+  color: #717171;
 }
 
 .sidebarLinkActive,
diff --git a/v2/website/pages/styles.css b/v2/website/pages/styles.css
index b1aed76deb..88c1f4c919 100644
--- a/v2/website/pages/styles.css
+++ b/v2/website/pages/styles.css
@@ -59,14 +59,26 @@
 .headerLink {
   border: 1px solid #fff;
   border-radius: 2em;
-  color: #fff;
+  background-color: #fff;
+  color: #25c2a0;
   font-size: 1em;
   margin-right: 24px;
   padding: 1em 2.4em;
   text-decoration: none;
+  transition: color 300ms cubic-bezier(0.08, 0.52, 0.52, 1);
+}
+
+.headerLink:hover {
+  background-color: transparent;
+  color: #fff;
 }
 
 .gitHubLink {
+  background-color: transparent;
+  color: #fff;
+}
+
+.gitHubLink:hover {
   background-color: #fff;
   color: #25c2a0;
 }
@@ -87,7 +99,7 @@
   font-weight: bold;
   padding: 0.5em 1.2em;
   text-decoration: none;
-  transition: background-color 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
+  transition: background-color 300ms cubic-bezier(0.08, 0.52, 0.52, 1);
 }
 
 .featureListLink:hover {
diff --git a/v2/website/static/css/main.css b/v2/website/static/css/main.css
new file mode 100644
index 0000000000..b1088b6018
--- /dev/null
+++ b/v2/website/static/css/main.css
@@ -0,0 +1,396 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* Reset */
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+/* Base scaffolding taken from Markswatch theme */
+body {
+  color: #24292e;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
+    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-size: 16px;
+  line-height: 1.5;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  word-wrap: break-word;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+strong {
+  font-weight: 600;
+}
+
+input[type='checkbox'] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+a {
+  color: #25c2a0;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #25c2a0;
+  text-decoration: none;
+}
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+p {
+  margin-bottom: 1em;
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: inherit;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 16px;
+  margin-top: 1.5em;
+}
+
+h1 {
+  font-size: 32px;
+}
+
+h2 {
+  font-size: 24px;
+}
+
+h3 {
+  font-size: 20px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+h5 {
+  font-size: 14px;
+}
+
+h6 {
+  font-size: 13.6px;
+}
+
+ul,
+ol {
+  margin-bottom: 1em;
+  margin-top: 0;
+  padding-left: 2em;
+}
+
+ol ol,
+ul ol {
+  list-style-type: lower-roman;
+}
+
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+ul ul ol,
+ul ol ol,
+ol ul ol,
+ol ol ol {
+  list-style-type: lower-alpha;
+}
+
+li {
+  word-wrap: break-all;
+}
+li > p {
+  margin-top: 1em;
+}
+li + li {
+  margin-top: 0.25em;
+}
+
+img {
+  background-color: #fff;
+  border-style: none;
+  box-sizing: content-box;
+  max-width: 100%;
+}
+
+img[align='right'] {
+  padding-left: 1.25em;
+}
+
+img[align='left'] {
+  padding-right: 1.25em;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  display: block;
+  margin-bottom: 16px;
+  margin-top: 0;
+  overflow: auto;
+  width: 100%;
+}
+table tr {
+  background-color: transparent;
+  border-top: 1px solid #dfe2e5;
+}
+table tr:nth-child(2n) {
+  background-color: #f6f8fa;
+}
+table th,
+table td {
+  border: 1px solid #dfe2e5;
+  padding: 6px 13px;
+}
+table th {
+  background-color: inherit;
+  color: inherit;
+  font-weight: 600;
+}
+table td {
+  color: inherit;
+}
+
+blockquote {
+  color: #6a737d;
+  font-size: 16px;
+  margin: 0;
+  margin-bottom: 16px;
+  padding: 0 1em;
+}
+
+blockquote > :first-child {
+  margin-top: 0;
+}
+
+blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+code {
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+  color: inherit;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 85%;
+  margin: 0;
+  padding: 3.2px 6.4px;
+}
+
+pre {
+  margin-bottom: 16px;
+}
+
+pre code {
+  background-color: transparent;
+  border: 0;
+  display: inline;
+  font-size: 85%;
+  line-height: inherit;
+  margin: 0;
+  max-width: auto;
+  overflow: visible;
+  padding: 0;
+  white-space: pre;
+  word-break: normal;
+  word-wrap: normal;
+}
+
+kbd {
+  background-color: #fafbfc;
+  border: solid 1px #d1d5da;
+  border-bottom-color: #c6cbd1;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #c6cbd1;
+  color: #444d56;
+  display: inline-block;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+  font-size: 68.75%;
+  line-height: 10px;
+  padding: 3px 5px;
+  vertical-align: middle;
+}
+
+hr {
+  border-color: #dfe2e5;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: content-box;
+  margin: 1.5em 0;
+  overflow: hidden;
+  padding: 0;
+}
+hr:before {
+  content: '';
+  display: table;
+}
+hr:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+
+/* GitHub Markdown theme styles */
+h1,
+h2 {
+  padding-bottom: 0.3em;
+}
+
+h6 {
+  color: #6a737d;
+}
+
+blockquote {
+  background-color: rgb(37, 194, 160, 0.1);
+  border-left: 0.5em solid #25c2a0;
+  color: #000;
+  padding: 1em 2em 1em 1em;
+}
+
+hr {
+  background-color: #e1e4e8;
+  border: 0;
+  border-bottom: 1px solid #dfe2e5;
+  border-bottom-color: #eee;
+  height: 0.25em;
+}
+
+/* Docusaurus v2 styles */
+h1 .hash-link,
+h2 .hash-link,
+h3 .hash-link,
+h4 .hash-link,
+h5 .hash-link,
+h6 .hash-link {
+  display: none;
+  margin-left: 0.1em;
+}
+
+h1:hover .hash-link,
+h2:hover .hash-link,
+h3:hover .hash-link,
+h4:hover .hash-link,
+h5:hover .hash-link,
+h6:hover .hash-link {
+  display: inline;
+}
+
+.hljs.hljs {
+  /* Specificity hack */
+  padding: 1.25rem 1.5rem;
+}
