[#77] update gatsby library

2020-06-28 15:59:17 +09:00 · 2020-06-28 15:59:17 +09:00 · ff0d4192e7
--- a/docs/.eslintrc.json
+++ b/docs/.eslintrc.json
@ -1,15 +1,48 @@
 {
-  "env": {
-    "browser": true
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier",
+    "prettier/react"
+  ],
+  "plugins": ["react", "import", "jsx-a11y"],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
  },
-  "globals": {
-    "graphql": false
+  "rules": {
+    "react/prop-types": 0,
+    "react/react-in-jsx-scope": "off",
+    "lines-between-class-members": ["error", "always"],
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
+      {
+        "blankLine": "always",
+        "prev": ["const", "let", "var"],
+        "next": ["const", "let", "var"]
+      },
+      { "blankLine": "always", "prev": "directive", "next": "*" },
+      { "blankLine": "any", "prev": "directive", "next": "directive" }
+    ]
  },
+  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 10,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
+  },
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "graphql": false
  }
 }
--- a/docs/.gitignore
+++ b/docs/.gitignore
--- a/docs/.prettierrc
+++ b/docs/.prettierrc
@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "jsxBracketSameLine": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
--- a/docs/config.js
+++ b/docs/config.js
@ -12,6 +12,7 @@ const config = {
    githubUrl: 'https://github.com/8398a7/action-slack',
    helpUrl: '',
    tweetText: '',
+    twitter: '8398a7',
    links: [{ text: '', link: '' }],
    search: {
      enabled: false,
@ -22,13 +23,7 @@ const config = {
    },
  },
  sidebar: {
-    forcedNavOrder: [
-      '/usage',
-      '/with',
-      '/migration',
-      '/usecase',
-      '/contributors',
-    ],
+    forcedNavOrder: ['/usage', '/with', '/migration', '/usecase', '/contributors'],
    collapsedNav: [
      '/usecase', // add trailing slash if enabled above
      '/migration',
@ -36,13 +31,13 @@ const config = {
    links: [{ text: 'GitHub', link: 'https://github.com/8398a7/action-slack' }],
    frontline: false,
    ignoreIndex: true,
+    title: '',
  },
  siteMetadata: {
    title: 'action-slack | 8398a7',
    description: '',
    ogImage: null,
-    docsLocation:
-      'https://github.com/8398a7/action-slack/tree/master/docs/content',
+    docsLocation: 'https://github.com/8398a7/action-slack/tree/master/docs/content',
    favicon: 'This is the action-slack documentation site.',
  },
  pwa: {
--- a/docs/gatsby-config.js
+++ b/docs/gatsby-config.js
@ -1,41 +1,41 @@
-require('dotenv').config();
-const queries = require('./src/utils/algolia');
-const config = require('./config');
+require("dotenv").config();
+const queries = require("./src/utils/algolia");
+const config = require("./config");
 const plugins = [
  'gatsby-plugin-sitemap',
  'gatsby-plugin-sharp',
  {
    resolve: `gatsby-plugin-layout`,
    options: {
-      component: require.resolve(`./src/templates/docs.js`),
-    },
+        component: require.resolve(`./src/templates/docs.js`)
+    }
  },
  'gatsby-plugin-emotion',
  'gatsby-plugin-react-helmet',
  {
-    resolve: 'gatsby-source-filesystem',
+    resolve: "gatsby-source-filesystem",
    options: {
-      name: 'docs',
-      path: `${__dirname}/content/`,
-    },
+      name: "docs",
+      path: `${__dirname}/content/`
+    }
  },
  {
    resolve: 'gatsby-plugin-mdx',
    options: {
      gatsbyRemarkPlugins: [
        {
-          resolve: 'gatsby-remark-images',
+          resolve: "gatsby-remark-images",
          options: {
            maxWidth: 1035,
-            sizeByPixelDensity: true,
-          },
+            sizeByPixelDensity: true
+          }
        },
        {
-          resolve: 'gatsby-remark-copy-linked-files',
-        },
+          resolve: 'gatsby-remark-copy-linked-files'
+        }
      ],
-      extensions: ['.mdx', '.md'],
-    },
+      extensions: [".mdx", ".md"]
+    }
  },
  {
    resolve: `gatsby-plugin-gtag`,
@ -50,12 +50,7 @@ const plugins = [
  },
 ];
 // check and add algolia
-if (
-  config.header.search &&
-  config.header.search.enabled &&
-  config.header.search.algoliaAppId &&
-  config.header.search.algoliaAdminKey
-) {
+if (config.header.search && config.header.search.enabled && config.header.search.algoliaAppId && config.header.search.algoliaAdminKey) {
  plugins.push({
    resolve: `gatsby-plugin-algolia`,
    options: {
@ -63,14 +58,14 @@ if (
      apiKey: config.header.search.algoliaAdminKey, // algolia admin key to index
      queries,
      chunkSize: 10000, // default: 1000
-    },
-  });
+    }}
+  )
 }
 // check and add pwa functionality
 if (config.pwa && config.pwa.enabled && config.pwa.manifest) {
  plugins.push({
-    resolve: `gatsby-plugin-manifest`,
-    options: { ...config.pwa.manifest },
+      resolve: `gatsby-plugin-manifest`,
+      options: {...config.pwa.manifest},
  });
  plugins.push({
    resolve: 'gatsby-plugin-offline',
@ -95,10 +90,7 @@ module.exports = {
    docsLocation: config.siteMetadata.docsLocation,
    ogImage: config.siteMetadata.ogImage,
    favicon: config.siteMetadata.favicon,
-    logo: {
-      link: config.header.logoLink ? config.header.logoLink : '/',
-      image: config.header.logo,
-    }, // backwards compatible
+    logo: { link: config.header.logoLink ? config.header.logoLink : '/', image: config.header.logo }, // backwards compatible
    headerTitle: config.header.title,
    githubUrl: config.header.githubUrl,
    helpUrl: config.header.helpUrl,
@ -106,5 +98,5 @@ module.exports = {
    headerLinks: config.header.links,
    siteUrl: config.gatsby.siteUrl,
  },
-  plugins: plugins,
+  plugins: plugins
 };
--- a/docs/gatsby-node.js
+++ b/docs/gatsby-node.js
@ -1,10 +1,14 @@
-const componentWithMDXScope = require("gatsby-plugin-mdx/component-with-mdx-scope");
-const path = require("path");
-const startCase = require("lodash.startcase");
-const config = require("./config");
+const componentWithMDXScope = require('gatsby-plugin-mdx/component-with-mdx-scope');
+
+const path = require('path');
+
+const startCase = require('lodash.startcase');
+
+const config = require('./config');

 exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
+
  return new Promise((resolve, reject) => {
    resolve(
      graphql(
@ -34,11 +38,11 @@ exports.createPages = ({ graphql, actions }) => {
        // Create blog posts pages.
        result.data.allMdx.edges.forEach(({ node }) => {
          createPage({
-            path: node.fields.slug ? node.fields.slug : "/",
-            component: path.resolve("./src/templates/docs.js"),
+            path: node.fields.slug ? node.fields.slug : '/',
+            component: path.resolve('./src/templates/docs.js'),
            context: {
-              id: node.fields.id
-            }
+              id: node.fields.id,
+            },
          });
        });
      })
@ -49,18 +53,18 @@ exports.createPages = ({ graphql, actions }) => {
 exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
-      modules: [path.resolve(__dirname, "src"), "node_modules"],
-      alias: { 
-        $components: path.resolve(__dirname, "src/components"),
-        buble: '@philpl/buble' // to reduce bundle size
-      }
-    }
+      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
+      alias: {
+        $components: path.resolve(__dirname, 'src/components'),
+        buble: '@philpl/buble', // to reduce bundle size
+      },
+    },
  });
 };

 exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
-    name: "@babel/plugin-proposal-export-default-from"
+    name: '@babel/plugin-proposal-export-default-from',
  });
 };

@ -69,36 +73,37 @@ exports.onCreateNode = ({ node, getNode, actions }) => {

  if (node.internal.type === `Mdx`) {
    const parent = getNode(node.parent);
-    let value = parent.relativePath.replace(parent.ext, "");

-    if (value === "index") {
-      value = "";
+    let value = parent.relativePath.replace(parent.ext, '');
+
+    if (value === 'index') {
+      value = '';
    }

-    if(config.gatsby && config.gatsby.trailingSlash) {
+    if (config.gatsby && config.gatsby.trailingSlash) {
      createNodeField({
        name: `slug`,
        node,
-        value: value === "" ? `/` : `/${value}/`
+        value: value === '' ? `/` : `/${value}/`,
      });
    } else {
      createNodeField({
        name: `slug`,
        node,
-        value: `/${value}`
+        value: `/${value}`,
      });
    }

    createNodeField({
-      name: "id",
+      name: 'id',
      node,
-      value: node.id
+      value: node.id,
    });

    createNodeField({
-      name: "title",
+      name: 'title',
      node,
-      value: node.frontmatter.title || startCase(parent.name)
+      value: node.frontmatter.title || startCase(parent.name),
    });
  }
 };
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
--- a/docs/package.json
+++ b/docs/package.json
@ -1,9 +1,8 @@
 {
-  "name": "gatsby-gitbook-boilerplate",
-  "private": true,
+  "name": "action-slack-docs",
  "description": "Documentation, built with mdx",
-  "author": "Praveen <praveen@hasura.io> (@praveenweb)",
-  "version": "0.0.1",
+  "author": "839 <8398a7@gmail.com> (@8398a7)",
+  "version": "1.0.0",
  "dependencies": {
    "@babel/plugin-proposal-export-default-from": "^7.7.4",
    "@emotion/core": "^10.0.22",
@ -56,10 +55,20 @@
  "main": "n/a",
  "scripts": {
    "start": "gatsby develop",
-    "build": "gatsby build --prefix-paths"
+    "build": "gatsby build --prefix-paths",
+    "format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",
+    "lint": "eslint --fix \"src/**/*.{js,jsx}\""
  },
  "devDependencies": {
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.19.0",
    "gatsby-plugin-remove-trailing-slashes": "^2.1.17",
+    "prettier": "^1.19.1",
    "prism-react-renderer": "^1.0.2"
  }
 }
--- a/docs/src/CommunityAuthor.js
+++ b/docs/src/CommunityAuthor.js
@ -1,27 +1,40 @@
 import React from 'react';
-import './components/styles.css';

-const CommunityAuthor = ({name, imageUrl, twitterUrl, githubUrl, description}) => {
-    return(
-        <>
-        	<h2 className="communitySection">About the community author</h2>
-        	<div className="authorSection">
-        		<div className="authorImg">
-        			<img src={imageUrl} alt={name} />
-        		</div>
-        		<div className="authorDetails">
-	        		<div className="authorName">
-	        			<strong>{name}</strong>
-	        			{twitterUrl ? (<a href={twitterUrl} target="_blank" rel="noopener"><img src="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/social-media/twitter-icon.svg" alt="Twitter Icon" aria-label="Twitter" /></a>) : null}
-	        			{githubUrl ? (<a href={githubUrl} target="_blank" rel="noopener"><img src="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/social-media/github-icon.svg" alt="Github Icon" aria-label="Github" /></a>) : null}
-	        		</div>
-	        		<div className="authorDesc">
-                        {description}
-	        		</div>
-        		</div>
-        	</div>
-        </>
-    )
+const CommunityAuthor = ({ name, imageUrl, twitterUrl, githubUrl, description }) => {
+  return (
+    <>
+      <h2 className="communitySection">About the community author</h2>
+      <div className="authorSection">
+        <div className="authorImg">
+          <img src={imageUrl} alt={name} />
+        </div>
+        <div className="authorDetails">
+          <div className="authorName">
+            <strong>{name}</strong>
+            {twitterUrl ? (
+              <a href={twitterUrl} target="_blank" rel="noopener noreferrer">
+                <img
+                  src="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/social-media/twitter-icon.svg"
+                  alt="Twitter Icon"
+                  aria-label="Twitter"
+                />
+              </a>
+            ) : null}
+            {githubUrl ? (
+              <a href={githubUrl} target="_blank" rel="noopener noreferrer">
+                <img
+                  src="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/social-media/github-icon.svg"
+                  alt="Github Icon"
+                  aria-label="Github"
+                />
+              </a>
+            ) : null}
+          </div>
+          <div className="authorDesc">{description}</div>
+        </div>
+      </div>
+    </>
+  );
 };

 export default CommunityAuthor;
--- a/docs/src/GithubLink.js
+++ b/docs/src/GithubLink.js
@ -1,14 +1,13 @@
 import React from 'react';
 const githubIcon = require('./components/images/github.svg');
-import './components/styles.css';

-const GithubLink = ({link, text}) => {
-	return (
-		<a href={link} className="githubSection">
-			<img className="githubIcon" src={githubIcon} alt="github"/>
-			{text}
-		</a>
-	);
-}
+const GithubLink = ({ link, text }) => {
+  return (
+    <a href={link} className="githubSection">
+      <img className="githubIcon" src={githubIcon} alt="github" />
+      {text}
+    </a>
+  );
+};

-export default GithubLink;
+export default GithubLink;
--- a/docs/src/YoutubeEmbed.js
+++ b/docs/src/YoutubeEmbed.js
@ -1,13 +1,19 @@
 import React from 'react';
-import './components/styles.css';

-const YoutubeEmbed = ({link}) => {
-	return (
-		<div className="video-responsive">
-			<iframe width="750" height="422" src={link} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen>
-			</iframe>
-		</div>
-	);
-}
+const YoutubeEmbed = ({ link }) => {
+  return (
+    <div className="video-responsive">
+      <iframe
+        width="750"
+        title="Youtube"
+        height="422"
+        src={link}
+        frameBorder="0"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      ></iframe>
+    </div>
+  );
+};

-export default YoutubeEmbed;
+export default YoutubeEmbed;
--- a/docs/src/components/DarkModeSwitch.js
+++ b/docs/src/components/DarkModeSwitch.js
@ -0,0 +1,94 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import NightImage from './images/night.png';
+import DayImage from './images/day.png';
+
+const StyledSwitch = styled('div')`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 0 20px 0 25px;
+
+  /* The switch - the box around the slider */
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 20px;
+  }
+
+  /* Hide default HTML checkbox */
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  /* The slider */
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+  }
+
+  .slider:before {
+    position: absolute;
+    content: '';
+    height: 30px;
+    width: 30px;
+    left: 0px;
+    bottom: 4px;
+    top: 0;
+    bottom: 0;
+    margin: auto 0;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    box-shadow: 0 0px 15px #2020203d;
+    background: white url(${NightImage});
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  input:checked + .slider {
+    background: linear-gradient(to right, #fefb72, #f0bb31);
+  }
+
+  input:checked + .slider:before {
+    -webkit-transform: translateX(24px);
+    -ms-transform: translateX(24px);
+    transform: translateX(24px);
+    background: white url(${DayImage});
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  /* Rounded sliders */
+  .slider.round {
+    border-radius: 34px;
+  }
+
+  .slider.round:before {
+    border-radius: 50%;
+  }
+`;
+
+export const DarkModeSwitch = ({ isDarkThemeActive, toggleActiveTheme }) => (
+  <StyledSwitch>
+    <label id="switch" className="switch">
+      <input
+        type="checkbox"
+        id="slider"
+        onChange={toggleActiveTheme}
+        checked={isDarkThemeActive ? false : true}
+      />
+      <span className="slider round"></span>
+    </label>
+  </StyledSwitch>
+);
--- a/docs/src/components/Header.js
+++ b/docs/src/components/Header.js
@ -1,18 +1,20 @@
 import React from 'react';
+import styled from '@emotion/styled';
 import { StaticQuery, graphql } from 'gatsby';
 import GitHubButton from 'react-github-btn';
 import Link from './link';
-import './styles.css';
-import config from '../../config.js';
-
 import Loadable from 'react-loadable';
+
+import config from '../../config.js';
 import LoadingProvider from './mdxComponents/loading';
+import { DarkModeSwitch } from './DarkModeSwitch';

 const help = require('./images/help.svg');
-const isSearchEnabled =
-  config.header.search && config.header.search.enabled ? true : false;
+
+const isSearchEnabled = config.header.search && config.header.search.enabled ? true : false;

 let searchIndices = [];
+
 if (isSearchEnabled && config.header.search.indexName) {
  searchIndices.push({
    name: `${config.header.search.indexName}`,
@ -30,6 +32,7 @@ const LoadableComponent = Loadable({

 function myFunction() {
  var x = document.getElementById('navbar');
+
  if (x.className === 'topnav') {
    x.className += ' responsive';
  } else {
@ -37,7 +40,20 @@ function myFunction() {
  }
 }

-const Header = ({ location }) => (
+const StyledBgDiv = styled('div')`
+  height: 60px;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  background-color: #f8f8f8;
+  position: relative;
+  display: none;
+  background: ${props => (props.isDarkThemeActive ? '#001932' : undefined)};
+
+  @media (max-width: 767px) {
+    display: block;
+  }
+`;
+
+const Header = ({ location, isDarkThemeActive, toggleActiveTheme }) => (
  <StaticQuery
    query={graphql`
      query headerTitleQuery {
@ -61,28 +77,26 @@ const Header = ({ location }) => (
    `}
    render={data => {
      const logoImg = require('./images/logo.png');
+
      const twitter = require('./images/twitter.svg');
+
+      const twitterBrandsBlock = require('./images/twitter-brands-block.svg');
+
      const {
        site: {
-          siteMetadata: {
-            headerTitle,
-            githubUrl,
-            helpUrl,
-            tweetText,
-            logo,
-            headerLinks,
-          },
+          siteMetadata: { headerTitle, githubUrl, helpUrl, tweetText, logo, headerLinks },
        },
      } = data;
-      const finalLogoLink = logo.link !== '' ? logo.link : '/';
+
      return (
        <div className={'navBarWrapper'}>
          <nav className={'navBarDefault'}>
            <div className={'navBarHeader'}>
-              <Link to={finalLogoLink} className={'navBarBrand'}>
+              <Link to="/" className={'navBarBrand'}>
                <img
+                  style={{ width: 'auto', height: '75px' }}
                  className={'img-responsive displayInline'}
-                  src={logo.image !== '' ? logo.image : logoImg}
+                  src={logoImg}
                  alt={'logo'}
                />
              </Link>
@ -90,12 +104,22 @@ const Header = ({ location }) => (
                className={'headerTitle displayInline'}
                dangerouslySetInnerHTML={{ __html: headerTitle }}
              />
-              <span onClick={myFunction} className={'navBarToggle'}>
-                <span className={'iconBar'}></span>
-                <span className={'iconBar'}></span>
-                <span className={'iconBar'}></span>
-              </span>
            </div>
+            {config.header.twitter ? (
+              <ul className="socialWrapper visibleMobileView">
+                <li>
+                  <a
+                    href={`https://twitter.com/${config.header.twitter}`}
+                    target="_blank"
+                    rel="noopener"
+                  >
+                    <div className="twitterBtn">
+                      <img src={twitterBrandsBlock} alt={'Twitter'} />
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            ) : null}
            {isSearchEnabled ? (
              <div className={'searchWrapper hiddenMobile navBarUL'}>
                <LoadableComponent collapse={true} indices={searchIndices} />
@ -105,14 +129,6 @@ const Header = ({ location }) => (
              <div className={'visibleMobile'}>
                <Sidebar location={location} />
                <hr />
-                {isSearchEnabled ? (
-                  <div className={'searchWrapper'}>
-                    <LoadableComponent
-                      collapse={true}
-                      indices={searchIndices}
-                    />
-                  </div>
-                ) : null}
              </div>
              <ul className={'navBarUL navBarNav navBarULRight'}>
                {headerLinks.map((link, key) => {
@ -123,7 +139,7 @@ const Header = ({ location }) => (
                          className="sidebarLink"
                          href={link.link}
                          target="_blank"
-                          rel="noopener"
+                          rel="noopener noreferrer"
                          dangerouslySetInnerHTML={{ __html: link.text }}
                        />
                      </li>
@ -137,26 +153,38 @@ const Header = ({ location }) => (
                    </a>
                  </li>
                ) : null}
-                {tweetText !== '' || githubUrl !== '' ? (
-                  <li className="divider hiddenMobile"></li>
-                ) : null}
+
                {tweetText !== '' ? (
                  <li>
                    <a
-                      href={
-                        'https://twitter.com/intent/tweet?&text=' + tweetText
-                      }
+                      href={'https://twitter.com/intent/tweet?&text=' + tweetText}
                      target="_blank"
-                      rel="noopener"
+                      rel="noopener noreferrer"
                    >
-                      <img
-                        className={'shareIcon'}
-                        src={twitter}
-                        alt={'Twitter'}
-                      />
+                      <img className={'shareIcon'} src={twitter} alt={'Twitter'} />
                    </a>
                  </li>
                ) : null}
+                {tweetText !== '' || githubUrl !== '' ? (
+                  <li className="divider hiddenMobile"></li>
+                ) : null}
+                {config.header.twitter ? (
+                  <li className="hiddenMobile">
+                    <ul className="socialWrapper">
+                      <li>
+                        <a
+                          href={`https://twitter.com/${config.header.twitter}`}
+                          target="_blank"
+                          rel="noopener"
+                        >
+                          <div className="twitterBtn">
+                            <img src={twitterBrandsBlock} alt={'Twitter'} />
+                          </div>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                ) : null}
                {githubUrl !== '' ? (
                  <li className={'githubBtn'}>
                    <GitHubButton
@ -168,9 +196,35 @@ const Header = ({ location }) => (
                    </GitHubButton>
                  </li>
                ) : null}
+                <li>
+                  <DarkModeSwitch
+                    isDarkThemeActive={isDarkThemeActive}
+                    toggleActiveTheme={toggleActiveTheme}
+                  />
+                </li>
              </ul>
            </div>
          </nav>
+          <StyledBgDiv isDarkThemeActive={isDarkThemeActive}>
+            <div className={'navBarDefault removePadd'}>
+              <span
+                onClick={myFunction}
+                className={'navBarToggle'}
+                onKeyDown={myFunction}
+                role="button"
+                tabIndex={0}
+              >
+                <span className={'iconBar'}></span>
+                <span className={'iconBar'}></span>
+                <span className={'iconBar'}></span>
+              </span>
+            </div>
+            {isSearchEnabled ? (
+              <div className={'searchWrapper'}>
+                <LoadableComponent collapse={true} indices={searchIndices} />
+              </div>
+            ) : null}
+          </StyledBgDiv>
        </div>
      );
    }}
--- a/docs/src/components/NextPrevious.js
+++ b/docs/src/components/NextPrevious.js
@ -1,78 +1,120 @@
 import React from 'react';
-import Link from "./link";
-import './styles.css';
-class NextPrevious extends React.Component {
-  render() {
-    const { mdx, nav } = this.props;
-    let currentIndex;
-    const currentPaginationInfo = nav.map((el, index) => {
-      if (el && (el.url === mdx.fields.slug)) {
-        currentIndex = index;
-      }
-    });
-    const nextInfo = {};
-    const previousInfo = {};
-    if (currentIndex === undefined) { // index
-      if(nav[0]) {
-        nextInfo.url = nav[0].url;
-        nextInfo.title = nav[0].title;
-      }
-      previousInfo.url = null;
-      previousInfo.title = null;
-      currentIndex = -1;
-    } else if (currentIndex === 0) { // first page
-      nextInfo.url = nav[currentIndex+1] ? nav[currentIndex+1].url : null;
-      nextInfo.title = nav[currentIndex+1] ? nav[currentIndex+1].title : null;
-      previousInfo.url = null;
-      previousInfo.title = null;
-    } else if (currentIndex === (nav.length-1)) { // last page
-      nextInfo.url = null;
-      nextInfo.title = null;
-      previousInfo.url = nav[currentIndex-1] ? nav[currentIndex-1].url : null;
-      previousInfo.title = nav[currentIndex-1] ? nav[currentIndex-1].title : null;
-    } else if (currentIndex) { // any other page
-      nextInfo.url = nav[currentIndex+1].url;
-      nextInfo.title = nav[currentIndex+1].title;
-      if(nav[currentIndex-1]) {
-        previousInfo.url = nav[currentIndex-1].url;
-        previousInfo.title = nav[currentIndex-1].title;
-      }
+import Link from './link';
+
+import { StyledNextPrevious } from './styles/PageNavigationButtons';
+
+const NextPrevious = ({ mdx, nav }) => {
+  let currentIndex;
+
+  const currentPaginationInfo = nav.map((el, index) => {
+    if (el && el.url === mdx.fields.slug) {
+      currentIndex = index;
+    }
+  });
+
+  const nextInfo = {};
+
+  const previousInfo = {};
+
+  if (currentIndex === undefined) {
+    // index
+    if (nav[0]) {
+      nextInfo.url = nav[0].url;
+      nextInfo.title = nav[0].title;
+    }
+    previousInfo.url = null;
+    previousInfo.title = null;
+    currentIndex = -1;
+  } else if (currentIndex === 0) {
+    // first page
+    nextInfo.url = nav[currentIndex + 1] ? nav[currentIndex + 1].url : null;
+    nextInfo.title = nav[currentIndex + 1] ? nav[currentIndex + 1].title : null;
+    previousInfo.url = null;
+    previousInfo.title = null;
+  } else if (currentIndex === nav.length - 1) {
+    // last page
+    nextInfo.url = null;
+    nextInfo.title = null;
+    previousInfo.url = nav[currentIndex - 1] ? nav[currentIndex - 1].url : null;
+    previousInfo.title = nav[currentIndex - 1] ? nav[currentIndex - 1].title : null;
+  } else if (currentIndex) {
+    // any other page
+    nextInfo.url = nav[currentIndex + 1].url;
+    nextInfo.title = nav[currentIndex + 1].title;
+    if (nav[currentIndex - 1]) {
+      previousInfo.url = nav[currentIndex - 1].url;
+      previousInfo.title = nav[currentIndex - 1].title;
    }
-    return (
-      <div className={'nextPreviousWrapper'}>
-        {previousInfo.url && currentIndex >= 0 ? 
-          (<Link to={nav[currentIndex-1].url} className={'previousBtn'}>
-            <div className={'leftArrow'}>
-              <svg preserveAspectRatio="xMidYMid meet" height="1em" width="1em" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" stroke="currentColor" className="_13gjrqj"><g><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></g></svg>
-            </div>
-            <div className={'preRightWrapper'}>
-              <div className={'smallContent'}>
-                <span>Previous</span>
-              </div>
-              <div className={'nextPreviousTitle'}>
-                <span>{nav[currentIndex-1].title}</span>
-              </div>
-            </div>
-          </Link>) : null
-        }
-        {nextInfo.url && currentIndex >= 0 ?
-          (<Link to={nav[currentIndex+1].url} className={'nextBtn'}>
-            <div className={'nextRightWrapper'}>
-              <div className={'smallContent'}>
-                <span>Next</span>
-              </div>
-              <div className={'nextPreviousTitle'}>
-                <span>{nav[currentIndex+1] && nav[currentIndex+1].title}</span>
-              </div>
-            </div>
-            <div className={'rightArrow'}>
-              <svg preserveAspectRatio="xMidYMid meet" height="1em" width="1em" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" stroke="currentColor" className="_13gjrqj"><g><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></g></svg>
-            </div>
-          </Link>) : null
-        }
-      </div>
-    );
  }
-}
+
+  return (
+    <StyledNextPrevious>
+      {previousInfo.url && currentIndex >= 0 ? (
+        <Link to={nav[currentIndex - 1].url} className={'previousBtn'}>
+          <div className={'leftArrow'}>
+            <svg
+              preserveAspectRatio="xMidYMid meet"
+              height="1em"
+              width="1em"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              stroke="currentColor"
+              className="_13gjrqj"
+            >
+              <g>
+                <line x1="19" y1="12" x2="5" y2="12" />
+                <polyline points="12 19 5 12 12 5" />
+              </g>
+            </svg>
+          </div>
+          <div className={'preRightWrapper'}>
+            <div className={'smallContent'}>
+              <span>Previous</span>
+            </div>
+            <div className={'nextPreviousTitle'}>
+              <span>{nav[currentIndex - 1].title}</span>
+            </div>
+          </div>
+        </Link>
+      ) : null}
+      {nextInfo.url && currentIndex >= 0 ? (
+        <Link to={nav[currentIndex + 1].url} className={'nextBtn'}>
+          <div className={'nextRightWrapper'}>
+            <div className={'smallContent'}>
+              <span>Next</span>
+            </div>
+            <div className={'nextPreviousTitle'}>
+              <span>{nav[currentIndex + 1] && nav[currentIndex + 1].title}</span>
+            </div>
+          </div>
+          <div className={'rightArrow'}>
+            <svg
+              preserveAspectRatio="xMidYMid meet"
+              height="1em"
+              width="1em"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              stroke="currentColor"
+              className="_13gjrqj"
+            >
+              <g>
+                <line x1="5" y1="12" x2="19" y2="12" />
+                <polyline points="12 5 19 12 12 19" />
+              </g>
+            </svg>
+          </div>
+        </Link>
+      ) : null}
+    </StyledNextPrevious>
+  );
+};

 export default NextPrevious;
--- a/docs/src/components/images/closed.js
+++ b/docs/src/components/images/closed.js
@ -1,7 +1,9 @@
 import React from 'react';

 const ClosedSvg = () => (
- 	<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg>
-)
+  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
+    <path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z" />
+  </svg>
+);

 export default ClosedSvg;
--- a/docs/src/components/images/day.png
+++ b/docs/src/components/images/day.png
--- a/docs/src/components/images/discord-brands-block.svg
+++ b/docs/src/components/images/discord-brands-block.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="11.559" height="13.211" viewBox="0 0 11.559 13.211">
+    <defs>
+        <style>
+            .cls-1{fill:#24292e}
+        </style>
+    </defs>
+    <path id="discord-brands" d="M7.669 6.275A.676.676 0 1 1 7 5.542a.7.7 0 0 1 .669.733zm-3.085-.733a.736.736 0 0 0 0 1.466.7.7 0 0 0 .674-.733.7.7 0 0 0-.674-.733zm6.975-4.181v11.85c-1.659-1.471-1.132-.984-3.065-2.781l.35 1.222h-7.49A1.357 1.357 0 0 1 0 10.291v-8.93A1.357 1.357 0 0 1 1.354 0h8.851a1.357 1.357 0 0 1 1.354 1.361zM9.677 7.623a8.846 8.846 0 0 0-.951-3.851 3.266 3.266 0 0 0-1.856-.694l-.092.106a4.4 4.4 0 0 1 1.645.839 5.612 5.612 0 0 0-4.934-.192c-.244.112-.39.192-.39.192a4.456 4.456 0 0 1 1.737-.865l-.066-.079a3.266 3.266 0 0 0-1.856.694 8.846 8.846 0 0 0-.951 3.851 2.4 2.4 0 0 0 2.015 1s.244-.3.443-.548A2.054 2.054 0 0 1 3.263 7.3c.1.068.257.156.271.165a4.815 4.815 0 0 0 4.122.235 3.78 3.78 0 0 0 .76-.39 2.084 2.084 0 0 1-1.2.786c.2.251.436.535.436.535a2.415 2.415 0 0 0 2.021-1z" class="cls-1"/>
+</svg>
--- a/docs/src/components/images/night.png
+++ b/docs/src/components/images/night.png
--- a/docs/src/components/images/opened.js
+++ b/docs/src/components/images/opened.js
@ -1,7 +1,9 @@
 import React from 'react';

 const OpenedSvg = () => (
-	<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
+    <path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" />
+  </svg>
 );

 export default OpenedSvg;
--- a/docs/src/components/images/twitter-brands-block.svg
+++ b/docs/src/components/images/twitter-brands-block.svg
@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12.517" height="10.166" viewBox="0 0 12.517 10.166">
+    <defs>
+        <style>
+            .cls-1{fill:#24292e}
+        </style>
+    </defs>
+    <path id="twitter-brands" d="M11.23 50.616c.008.111.008.222.008.334a7.249 7.249 0 0 1-7.3 7.3A7.249 7.249 0 0 1 0 57.1a5.307 5.307 0 0 0 .619.032 5.138 5.138 0 0 0 3.185-1.1 2.57 2.57 0 0 1-2.4-1.779 3.235 3.235 0 0 0 .484.04 2.713 2.713 0 0 0 .675-.087 2.566 2.566 0 0 1-2.055-2.518v-.032a2.584 2.584 0 0 0 1.16.326 2.569 2.569 0 0 1-.794-3.431 7.292 7.292 0 0 0 5.29 2.684 2.9 2.9 0 0 1-.064-.588 2.568 2.568 0 0 1 4.44-1.755 5.051 5.051 0 0 0 1.628-.619 2.558 2.558 0 0 1-1.128 1.414 5.143 5.143 0 0 0 1.477-.4 5.515 5.515 0 0 1-1.287 1.326z" class="cls-1" transform="translate(0 -48.082)"/>
+</svg>
--- a/docs/src/components/index.js
+++ b/docs/src/components/index.js
@ -1,5 +1,5 @@
-export theme from "./theme";
-export mdxComponents from "./mdxComponents";
-export ThemeProvider from "./themeProvider";
-export Layout from "./layout";
-export Link from "./link";
+export * from './theme';
+export mdxComponents from './mdxComponents';
+export ThemeProvider from './theme/themeProvider';
+export Layout from './layout';
+export Link from './link';
--- a/docs/src/components/layout.js
+++ b/docs/src/components/layout.js
@ -1,14 +1,28 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { MDXProvider } from "@mdx-js/react";
-import ThemeProvider from "./themeProvider";
-import mdxComponents from "./mdxComponents";
-import Sidebar from "./sidebar";
-import RightSidebar from "./rightSidebar";
+import React from 'react';
+import styled from '@emotion/styled';
+import { MDXProvider } from '@mdx-js/react';
+
+import ThemeProvider from './theme/themeProvider';
+import mdxComponents from './mdxComponents';
+import Sidebar from './sidebar';
+import RightSidebar from './rightSidebar';
+import config from '../../config.js';

 const Wrapper = styled('div')`
  display: flex;
  justify-content: space-between;
+  background: ${({ theme }) => theme.colors.background};
+
+  .sideBarUL li a {
+    color: ${({ theme }) => theme.colors.text};
+  }
+
+  .sideBarUL .item > a:hover {
+    background-color: #1ed3c6;
+    color: #fff !important;
+
+    /* background: #F8F8F8 */
+  }

  @media only screen and (max-width: 767px) {
    display: block;
@ -19,28 +33,35 @@ const Content = styled('main')`
  display: flex;
  flex-grow: 1;
  margin: 0px 88px;
-  margin-top: 3rem;
+  padding-top: 3rem;
+  background: ${({ theme }) => theme.colors.background};
+
+  table tr {
+    background: ${({ theme }) => theme.colors.background};
+  }

  @media only screen and (max-width: 1023px) {
    padding-left: 0;
    margin: 0 10px;
-    margin-top: 3rem;
+    padding-top: 3rem;
  }
 `;

 const MaxWidth = styled('div')`
-
  @media only screen and (max-width: 50rem) {
    width: 100%;
    position: relative;
  }
 `;
+
 const LeftSideBarWidth = styled('div')`
  width: 298px;
 `;
+
 const RightSideBarWidth = styled('div')`
  width: 224px;
 `;
+
 const Layout = ({ children, location }) => (
  <ThemeProvider location={location}>
    <MDXProvider components={mdxComponents}>
@ -48,6 +69,12 @@ const Layout = ({ children, location }) => (
        <LeftSideBarWidth className={'hiddenMobile'}>
          <Sidebar location={location} />
        </LeftSideBarWidth>
+        {config.sidebar.title ? (
+          <div
+            className={'sidebarTitle sideBarShow'}
+            dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
+          />
+        ) : null}
        <Content>
          <MaxWidth>{children}</MaxWidth>
        </Content>
--- a/docs/src/components/link.js
+++ b/docs/src/components/link.js
@ -1,10 +1,12 @@
-import React from "react";
-import { Link as GatsbyLink } from "gatsby";
-import isAbsoluteUrl from "is-absolute-url";
+import React from 'react';
+import { Link as GatsbyLink } from 'gatsby';
+import isAbsoluteUrl from 'is-absolute-url';

 const Link = ({ to, ...props }) =>
  isAbsoluteUrl(to) ? (
-    <a href={to} {...props} />
+    <a href={to} {...props}>
+      {props.children}
+    </a>
  ) : (
    <GatsbyLink to={to} {...props} />
  );
--- a/docs/src/components/mdxComponents/LiveProvider.js
+++ b/docs/src/components/mdxComponents/LiveProvider.js
@ -1,5 +1,5 @@
-import * as React from "react";
-import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
+import * as React from 'react';
+import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';

 const ReactLiveProvider = ({ code }) => {
  return (
--- a/docs/src/components/mdxComponents/anchor.js
+++ b/docs/src/components/mdxComponents/anchor.js
@ -6,7 +6,7 @@ const AnchorTag = ({ children: link, ...props }) => {
      return <a href={props.href}>{link}</a>;
    } else {
      return (
-        <a href={props.href} target="_blank" rel="noopener">
+        <a href={props.href} target="_blank" rel="noopener noreferrer">
          {link}
        </a>
      );
--- a/docs/src/components/mdxComponents/codeBlock.js
+++ b/docs/src/components/mdxComponents/codeBlock.js
@ -1,17 +1,18 @@
 import * as React from 'react';
 import Highlight, { defaultProps } from 'prism-react-renderer';
-import prismTheme from 'prism-react-renderer/themes/github';
+import prismTheme from 'prism-react-renderer/themes/vsDark';
 import Loadable from 'react-loadable';
 import LoadingProvider from './loading';
-import '../styles.css';

 /** Removes the last token from a code example if it's empty. */
 function cleanTokens(tokens) {
  const tokensLength = tokens.length;
+
  if (tokensLength === 0) {
    return tokens;
  }
  const lastToken = tokens[tokensLength - 1];
+
  if (lastToken.length === 1 && lastToken[0].empty) {
    return tokens.slice(0, tokensLength - 1);
  }
@ -29,64 +30,45 @@ const CodeBlock = ({ children: exampleCode, ...props }) => {
    return <LoadableComponent code={exampleCode} />;
  } else {
    return (
-      <Highlight
-        {...defaultProps}
-        code={exampleCode}
-        language="javascript"
-        theme={prismTheme}
-      >
+      <Highlight {...defaultProps} code={exampleCode} language="javascript" theme={prismTheme}>
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <pre className={className + ' pre'} style={style} p={3}>
            {cleanTokens(tokens).map((line, i) => {
              let lineClass = {};
+
              let isDiff = false;
-              if (
-                line[0] &&
-                line[0].content.length &&
-                line[0].content[0] === '+'
-              ) {
+
+              if (line[0] && line[0].content.length && line[0].content[0] === '+') {
                lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };
                isDiff = true;
-              } else if (
-                line[0] &&
-                line[0].content.length &&
-                line[0].content[0] === '-'
-              ) {
+              } else if (line[0] && line[0].content.length && line[0].content[0] === '-') {
                lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };
                isDiff = true;
-              } else if (
-                line[0] &&
-                line[0].content === '' &&
-                line[1] &&
-                line[1].content === '+'
-              ) {
+              } else if (line[0] && line[0].content === '' && line[1] && line[1].content === '+') {
                lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };
                isDiff = true;
-              } else if (
-                line[0] &&
-                line[0].content === '' &&
-                line[1] &&
-                line[1].content === '-'
-              ) {
+              } else if (line[0] && line[0].content === '' && line[1] && line[1].content === '-') {
                lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };
                isDiff = true;
              }
              const lineProps = getLineProps({ line, key: i });
+
              lineProps.style = lineClass;
              const diffStyle = {
                userSelect: 'none',
                MozUserSelect: '-moz-none',
                WebkitUserSelect: 'none',
              };
+
              let splitToken;
+
              return (
                <div {...lineProps} key={line + i}>
                  {line.map((token, key) => {
                    if (isDiff) {
                      if (
                        (key === 0 || key === 1) &
-                        (token.content.charAt(0) === '+' ||
-                          token.content.charAt(0) === '-')
+                        (token.content.charAt(0) === '+' || token.content.charAt(0) === '-')
                      ) {
                        if (token.content.length > 1) {
                          splitToken = {
@ -97,24 +79,18 @@ const CodeBlock = ({ children: exampleCode, ...props }) => {
                            types: ['operator'],
                            content: token.content.charAt(0),
                          };
+
                          return (
                            <React.Fragment key={token + key}>
                              <span
                                {...getTokenProps({ token: firstChar, key })}
                                style={diffStyle}
                              />
-                              <span
-                                {...getTokenProps({ token: splitToken, key })}
-                              />
+                              <span {...getTokenProps({ token: splitToken, key })} />
                            </React.Fragment>
                          );
                        } else {
-                          return (
-                            <span
-                              {...getTokenProps({ token, key })}
-                              style={diffStyle}
-                            />
-                          );
+                          return <span {...getTokenProps({ token, key })} style={diffStyle} />;
                        }
                      }
                    }
--- a/docs/src/components/mdxComponents/index.js
+++ b/docs/src/components/mdxComponents/index.js
@ -1,19 +1,41 @@
-import React from "react";
-import CodeBlock from "./codeBlock";
-import AnchorTag from "./anchor";
-import '../styles.css';
+import React from 'react';
+import styled from '@emotion/styled';
+
+import CodeBlock from './codeBlock';
+import AnchorTag from './anchor';
+
+const StyledPre = styled('pre')`
+  padding: 16px;
+  background: ${props => props.theme.colors.preFormattedText};
+`;

 export default {
-  h1: props => <h1 className='heading1' id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />,
-  h2: props => <h2 className='heading2' id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />,
-  h3: props => <h3 className='heading3' id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />,
-  h4: props => <h4 className='heading4' id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />,
-  h5: props => <h5 className='heading5' id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />,
-  h6: props => <h6 className='heading6' id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />,
-  p: props => <p className='paragraph' {...props} />,
-  pre: props => <pre className='pre' {...props} />,
+  h1: props => (
+    <h1 className="heading1" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
+  ),
+  h2: props => (
+    <h2 className="heading2" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
+  ),
+  h3: props => (
+    <h3 className="heading3" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
+  ),
+  h4: props => (
+    <h4 className="heading4" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
+  ),
+  h5: props => (
+    <h5 className="heading5" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
+  ),
+  h6: props => (
+    <h6 className="heading6" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
+  ),
+  p: props => <p className="paragraph" {...props} />,
+  pre: props => (
+    <StyledPre>
+      <pre {...props} />
+    </StyledPre>
+  ),
  code: CodeBlock,
-  a: AnchorTag
+  a: AnchorTag,
  // TODO add `img`
  // TODO add `blockquote`
  // TODO add `ul`
--- a/docs/src/components/mdxComponents/loading.js
+++ b/docs/src/components/mdxComponents/loading.js
@ -1,9 +1,7 @@
-import * as React from "react";
+import * as React from 'react';

 const LoadingProvider = ({ ...props }) => {
-  return (
-  	<div></div>
-  );
+  return <div></div>;
 };

 export default LoadingProvider;
--- a/docs/src/components/rightSidebar.js
+++ b/docs/src/components/rightSidebar.js
@ -1,65 +1,9 @@
-import React from "react";
-import { StaticQuery, graphql } from "gatsby";
-import styled from "@emotion/styled";
-import Link from "./link";
-import './styles.css';
+import React from 'react';
+import { StaticQuery, graphql } from 'gatsby';
+
+// import Link from './link';
 import config from '../../config';
-
-const Sidebar = styled('aside')`
-  width: 100%;
-  background-color: #fff;
-  border-right: 1px solid #ede7f3;
-  height: 100vh;
-  overflow: auto;
-  position: fixed;
-  padding-left: 24px;
-  position: -webkit-sticky;
-  position: -moz-sticky;
-  position: sticky;
-  top: 0;
-  @media only screen and (max-width: 50rem) {
-    width: 100%;
-    position: relative;
-  }
-`;
-
-// eslint-disable-next-line no-unused-vars
-const ListItem = styled(({ className, active, level, ...props }) => {
-    return (
-      <li className={className}>
-        <a href={props.to} {...props} />
-      </li>
-    );
-})`
-  list-style: none;
-
-  a {
-    color: #5C6975;
-    text-decoration: none;
-    font-weight: ${({ level }) => (level === 0 ? 700 : 400)};
-    padding: 0.45rem 0 0.45rem ${props => 2 + (props.level || 0) * 1}rem;
-    display: block;
-    position: relative;
-
-    &:hover {
-      color: rgb(116, 76, 188) !important;
-    }
-
-    ${props =>
-      props.active &&
-      `
-      color: #663399;
-      border-color: rgb(230,236,241) !important;
-      border-style: solid none solid solid;
-      border-width: 1px 0px 1px 1px;
-      background-color: #fff;
-    `} // external link icon
-    svg {
-      float: right;
-      margin-right: 1rem;
-    }
-  }
-`;
+import { Sidebar, ListItem } from './styles/Sidebar';

 const SidebarLayout = ({ location }) => (
  <StaticQuery
@ -79,21 +23,26 @@ const SidebarLayout = ({ location }) => (
    `}
    render={({ allMdx }) => {
      let navItems = [];
+
      let finalNavItems;
+
      if (allMdx.edges !== undefined && allMdx.edges.length > 0) {
        const navItems = allMdx.edges.map((item, index) => {
          let innerItems;
-          if(item !== undefined) {
-            if ((item.node.fields.slug === location.pathname) || (config.gatsby.pathPrefix + item.node.fields.slug) === location.pathname) {
+
+          if (item !== undefined) {
+            if (
+              item.node.fields.slug === location.pathname ||
+              config.gatsby.pathPrefix + item.node.fields.slug === location.pathname
+            ) {
              if (item.node.tableOfContents.items) {
                innerItems = item.node.tableOfContents.items.map((innerItem, index) => {
-                  const itemId = innerItem.title ? innerItem.title.replace(/\s+/g, '').toLowerCase() : '#';
+                  const itemId = innerItem.title
+                    ? innerItem.title.replace(/\s+/g, '').toLowerCase()
+                    : '#';
+
                  return (
-                    <ListItem
-                      key={index}
-                      to={`#${itemId}`}
-                      level={1}
-                    >
+                    <ListItem key={index} to={`#${itemId}`} level={1}>
                      {innerItem.title}
                    </ListItem>
                  );
--- a/docs/src/components/search/hitComps.js
+++ b/docs/src/components/search/hitComps.js
@ -1,6 +1,6 @@
-import React, { Fragment } from "react"
-import { Highlight, Snippet } from "react-instantsearch-dom"
-import { Link } from "gatsby"
+import React from 'react';
+import { Highlight, Snippet } from 'react-instantsearch-dom';
+import { Link } from 'gatsby';

 export const PageHit = clickHandler => ({ hit }) => (
  <div>
@ -11,4 +11,4 @@ export const PageHit = clickHandler => ({ hit }) => (
    </Link>
    <Snippet attribute="excerpt" hit={hit} tagName="mark" />
  </div>
-)
+);
--- a/docs/src/components/search/index.js
+++ b/docs/src/components/search/index.js
@ -1,4 +1,4 @@
-import React, { useState, useEffect, createRef } from "react";
+import React, { useState, useEffect, createRef } from 'react';
 import {
  InstantSearch,
  Index,
@ -6,17 +6,16 @@ import {
  Configure,
  Pagination,
  connectStateResults,
-} from "react-instantsearch-dom";
-import algoliasearch from "algoliasearch/lite";
-import config from "../../../config.js";
+} from 'react-instantsearch-dom';
+import algoliasearch from 'algoliasearch/lite';
+import config from '../../../config.js';

-import styled from "@emotion/styled";
-import { css } from "@emotion/core";
-import { PoweredBy } from "./styles"
-import { Search } from "styled-icons/fa-solid/Search"
-import Input from "./input"
-import * as hitComps from "./hitComps"
-import '../styles.css';
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import { PoweredBy } from './styles';
+import { Search } from 'styled-icons/fa-solid/Search';
+import Input from './input';
+import * as hitComps from './hitComps';

 const SearchIcon = styled(Search)`
  width: 1em;
@ -86,7 +85,8 @@ const HitsWrapper = styled.div`
    color: black;
    margin-bottom: 0.3em;
  }
-`
+`;
+
 const Root = styled.div`
  position: relative;
  display: grid;
@ -94,38 +94,41 @@ const Root = styled.div`
  @media only screen and (max-width: 767px) {
    width: 100%;
  }
-`
+`;

 const Results = connectStateResults(
  ({ searching, searchState: state, searchResults: res }) =>
-    (searching && `Searching...`) ||
-    (res && res.nbHits === 0 && `No results for '${state.query}'`)
-)
+    (searching && `Searching...`) || (res && res.nbHits === 0 && `No results for '${state.query}'`)
+);

 const useClickOutside = (ref, handler, events) => {
-  if (!events) events = [`mousedown`, `touchstart`]
+  if (!events) events = [`mousedown`, `touchstart`];
  const detectClickOutside = event =>
-    ref && ref.current && !ref.current.contains(event.target) && handler()
+    ref && ref.current && !ref.current.contains(event.target) && handler();
+
  useEffect(() => {
-    for (const event of events)
-      document.addEventListener(event, detectClickOutside)
+    for (const event of events) document.addEventListener(event, detectClickOutside);
    return () => {
-      for (const event of events)
-        document.removeEventListener(event, detectClickOutside)
-    }
-  })
-}
+      for (const event of events) document.removeEventListener(event, detectClickOutside);
+    };
+  });
+};

 export default function SearchComponent({ indices, collapse, hitsAsGrid }) {
-  const ref = createRef()
-  const [query, setQuery] = useState(``)
-  const [focus, setFocus] = useState(false)
+  const ref = createRef();
+
+  const [query, setQuery] = useState(``);
+
+  const [focus, setFocus] = useState(false);
+
  const searchClient = algoliasearch(
    config.header.search.algoliaAppId,
    config.header.search.algoliaSearchKey
-  )
-  useClickOutside(ref, () => setFocus(false))
-  const displayResult = (query.length > 0 && focus) ? 'showResults' : 'hideResults';
+  );
+
+  useClickOutside(ref, () => setFocus(false));
+  const displayResult = query.length > 0 && focus ? 'showResults' : 'hideResults';
+
  return (
    <InstantSearch
      searchClient={searchClient}
@ -134,17 +137,22 @@ export default function SearchComponent({ indices, collapse, hitsAsGrid }) {
      root={{ Root, props: { ref } }}
    >
      <Input onFocus={() => setFocus(true)} {...{ collapse, focus }} />
-      <HitsWrapper className={'hitWrapper ' + displayResult} show={query.length > 0 && focus} asGrid={hitsAsGrid}>
+      <HitsWrapper
+        className={'hitWrapper ' + displayResult}
+        show={query.length > 0 && focus}
+        asGrid={hitsAsGrid}
+      >
        {indices.map(({ name, title, hitComp, type }) => {
          return (
            <Index key={name} indexName={name}>
              <Results />
              <Hits hitComponent={hitComps[hitComp](() => setFocus(false))} />
            </Index>
-          )})}
+          );
+        })}
        <PoweredBy />
      </HitsWrapper>
      <Configure hitsPerPage={5} />
    </InstantSearch>
-  )
+  );
 }
--- a/docs/src/components/search/input.js
+++ b/docs/src/components/search/input.js
@ -1,16 +1,20 @@
-import React from "react"
-import { connectSearchBox } from "react-instantsearch-dom"
+import React from 'react';
+import { connectSearchBox } from 'react-instantsearch-dom';

-import styled from "@emotion/styled";
-import { css } from "@emotion/core";
-import { Search } from "styled-icons/fa-solid/Search";
+import styled from '@emotion/styled';
+import { css } from '@emotion/core';
+import { Search } from 'styled-icons/fa-solid/Search';

 const SearchIcon = styled(Search)`
  width: 1em;
  pointer-events: none;
-  margin-right: 10px
-`
-const focus = (props) => css`
+  margin-right: 10px;
+  position: absolute;
+  left: 15px;
+  color: #2fd2c5;
+`;
+
+const focus = props => css`
  background: white;
  color: ${props => props.theme.darkBlue};
  cursor: text;
@ -19,8 +23,9 @@ const focus = (props) => css`
    color: ${props => props.theme.darkBlue};
    margin: 0.3em;
  }
-`
-const collapse = (props) => css`
+`;
+
+const collapse = props => css`
  width: 0;
  cursor: pointer;
  color: ${props => props.theme.lightBlue};
@ -33,8 +38,9 @@ const collapse = (props) => css`
  ::placeholder {
    color: ${props => props.theme.gray};
  }
-`
-const expand = (props) => css`
+`;
+
+const expand = props => css`
  background: ${props => props.theme.veryLightGray};
  width: 6em;
  margin-left: -1.6em;
@ -42,11 +48,11 @@ const expand = (props) => css`
  + ${SearchIcon} {
    margin: 0.3em;
  }
-`
+`;

-const collapseExpand = (props) => css`
+const collapseExpand = props => css`
  ${props => (props.collapse ? collapse() : expand())}
-`
+`;

 const Input = styled.input`
  outline: none;
@ -56,21 +62,22 @@ const Input = styled.input`
  transition: ${props => props.theme.shortTrans};
  border-radius: ${props => props.theme.smallBorderRadius};
  {collapseExpand}
-`
+`;
+
 const Form = styled.form`
  display: flex;
-  flex-direction: row-reverse;
  align-items: center;
  @media only screen and (max-width: 767px) {
    width: 100%;
    margin-left: 15px;
  }
-`
+`;

 export default connectSearchBox(({ refine, ...rest }) => {
-  const preventSubmit = (e) => {
+  const preventSubmit = e => {
    e.preventDefault();
-  }
+  };
+
  return (
    <Form className={'formElement'} onSubmit={preventSubmit}>
      <SearchIcon />
@ -83,5 +90,5 @@ export default connectSearchBox(({ refine, ...rest }) => {
        {...rest}
      />
    </Form>
-  )}
-);
+  );
+});
--- a/docs/src/components/search/styles.js
+++ b/docs/src/components/search/styles.js
@ -1,12 +1,11 @@
-import React from "react"
-import { Algolia } from "styled-icons/fa-brands/Algolia"
-import "../styles.css";
+import React from 'react';
+import { Algolia } from 'styled-icons/fa-brands/Algolia';

 export const PoweredBy = () => (
-  <span className='poweredBy'>
+  <span className="poweredBy">
    Powered by{` `}
    <a href="https://algolia.com">
      <Algolia size="1em" /> Algolia
    </a>
  </span>
-)
+);
--- a/docs/src/components/sidebar/index.js
+++ b/docs/src/components/sidebar/index.js
@ -1,23 +1,24 @@
-import React from "react";
+import React from 'react';
 import Tree from './tree';
-import {StaticQuery, graphql} from "gatsby";
-import styled from "@emotion/styled";
-import {ExternalLink} from "react-feather";
-import '../styles.css';
+import { StaticQuery, graphql } from 'gatsby';
+import styled from '@emotion/styled';
+import { ExternalLink } from 'react-feather';
 import config from '../../../config';

 // eslint-disable-next-line no-unused-vars
 const ListItem = styled(({ className, active, level, ...props }) => {
-    return (
-      <li className={className}>
-        <a href={props.to} {...props} />
-      </li>
-    );
+  return (
+    <li className={className}>
+      <a href={props.to} {...props} target="_blank" rel="noopener noreferrer">
+        {props.children}
+      </a>
+    </li>
+  );
 })`
  list-style: none;

  a {
-    color: #5C6975;
+    color: #5c6975;
    text-decoration: none;
    font-weight: ${({ level }) => (level === 0 ? 700 : 400)};
    padding: 0.45rem 0 0.45rem ${props => 2 + (props.level || 0) * 1}rem;
@ -25,13 +26,13 @@ const ListItem = styled(({ className, active, level, ...props }) => {
    position: relative;

    &:hover {
-      color: rgb(116, 76, 188) !important;
+      color: #1ed3c6 !important;
    }

    ${props =>
      props.active &&
      `
-      color: #663399;
+      // color: #663399;
      border-color: rgb(230,236,241) !important;
      border-style: solid none solid solid;
      border-width: 1px 0px 1px 1px;
@ -46,8 +47,6 @@ const ListItem = styled(({ className, active, level, ...props }) => {

 const Sidebar = styled('aside')`
  width: 100%;
-  /* background-color: rgb(245, 247, 249); */
-  /* border-right: 1px solid #ede7f3; */
  height: 100vh;
  overflow: auto;
  position: fixed;
@ -57,37 +56,24 @@ const Sidebar = styled('aside')`
  position: sticky;
  top: 0;
  padding-right: 0;
-  background-color: #372476;
-  /* Safari 4-5, Chrome 1-9 */
-  background: linear-gradient(#372476, #3b173b);
-  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#372476), to(#3b173b));
-  /* Safari 5.1, Chrome 10+ */
-  background: -webkit-linear-gradient(top, #372476, #3b173b);
-  /* Firefox 3.6+ */
-  background: -moz-linear-gradient(top, #372476, #3b173b);
-  /* IE 10 */
-  background: -ms-linear-gradient(top, #372476, #3b173b);
-  /* Opera 11.10+ */
-  background: -o-linear-gradient(top, #372476, #3b173b);
+  -webkit-box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.4);

  @media only screen and (max-width: 1023px) {
    width: 100%;
    /* position: relative; */
    height: 100vh;
  }
-  @media (min-width: 767px) and (max-width:1023px)
-  {
+
+  @media (min-width: 767px) and (max-width: 1023px) {
    padding-left: 0;
  }
+
  @media only screen and (max-width: 767px) {
    padding-left: 0px;
-    background-color: #372476;
-    background: #372476;
    height: auto;
  }
 `;

-
 const Divider = styled(props => (
  <li {...props}>
    <hr />
@ -104,8 +90,7 @@ const Divider = styled(props => (
  }
 `;

-
-const SidebarLayout = ({location}) => (
+const SidebarLayout = ({ location }) => (
  <StaticQuery
    query={graphql`
      query {
@ -121,18 +106,18 @@ const SidebarLayout = ({location}) => (
        }
      }
    `}
-    render={({allMdx}) => {
+    render={({ allMdx }) => {
      return (
        <Sidebar>
-          <ul className={'sideBarUL'}>
-            <Tree
-              edges={allMdx.edges}
+          {config.sidebar.title ? (
+            <div
+              className={'sidebarTitle hiddenMobile'}
+              dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
            />
-            {
-              config.sidebar.links
-                && config.sidebar.links.length > 0
-                && (<Divider />)
-            }
+          ) : null}
+          <ul className={'sideBarUL'}>
+            <Tree edges={allMdx.edges} />
+            {config.sidebar.links && config.sidebar.links.length > 0 && <Divider />}
            {config.sidebar.links.map((link, key) => {
              if (link.link !== '' && link.text !== '') {
                return (
--- a/docs/src/components/sidebar/tree.js
+++ b/docs/src/components/sidebar/tree.js
@ -1,88 +1,127 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import config from '../../../config';
 import TreeNode from './treeNode';

 const calculateTreeData = edges => {
-  const originalData = config.sidebar.ignoreIndex ? edges.filter(({node: {fields: {slug}}}) => slug !== '/') : edges;
-  const tree = originalData.reduce((accu, {node: {fields: {slug, title}}}) => {
-    const parts = slug.split('/');
-    let {items: prevItems} = accu;
-    const slicedParts = config.gatsby && config.gatsby.trailingSlash ? parts.slice(1, -2) : parts.slice(1, -1);
-    for (const part of slicedParts) {
-      let tmp = prevItems && prevItems.find(({label}) => label == part);
-      if (tmp) {
-        if (!tmp.items) {
-          tmp.items = [];
-        }
-      } else {
-        tmp = {label: part, items: []};
-        prevItems.push(tmp)
+  const originalData = config.sidebar.ignoreIndex
+    ? edges.filter(
+        ({
+          node: {
+            fields: { slug },
+          },
+        }) => slug !== '/'
+      )
+    : edges;
+
+  const tree = originalData.reduce(
+    (
+      accu,
+      {
+        node: {
+          fields: { slug, title },
+        },
      }
-      prevItems = tmp.items;
-    }
-    const slicedLength = config.gatsby && config.gatsby.trailingSlash ? parts.length - 2 : parts.length - 1;
-    const existingItem = prevItems.find(({label}) => label === parts[slicedLength]);
-    if (existingItem) {
-      existingItem.url = slug;
-      existingItem.title = title;
-    } else {
-      prevItems.push({
-        label: parts[slicedLength],
-        url: slug,
-        items: [],
-        title
-      });
-    }
-    return accu;
-  }, {items: []});
-  const {sidebar: {forcedNavOrder = []}} = config;
+    ) => {
+      const parts = slug.split('/');
+
+      let { items: prevItems } = accu;
+
+      const slicedParts =
+        config.gatsby && config.gatsby.trailingSlash ? parts.slice(1, -2) : parts.slice(1, -1);
+
+      for (const part of slicedParts) {
+        let tmp = prevItems && prevItems.find(({ label }) => label == part);
+
+        if (tmp) {
+          if (!tmp.items) {
+            tmp.items = [];
+          }
+        } else {
+          tmp = { label: part, items: [] };
+          prevItems.push(tmp);
+        }
+        prevItems = tmp.items;
+      }
+      const slicedLength =
+        config.gatsby && config.gatsby.trailingSlash ? parts.length - 2 : parts.length - 1;
+
+      const existingItem = prevItems.find(({ label }) => label === parts[slicedLength]);
+
+      if (existingItem) {
+        existingItem.url = slug;
+        existingItem.title = title;
+      } else {
+        prevItems.push({
+          label: parts[slicedLength],
+          url: slug,
+          items: [],
+          title,
+        });
+      }
+      return accu;
+    },
+    { items: [] }
+  );
+
+  const {
+    sidebar: { forcedNavOrder = [] },
+  } = config;
+
  const tmp = [...forcedNavOrder];
-  if(config.gatsby && config.gatsby.trailingSlash) {
+
+  if (config.gatsby && config.gatsby.trailingSlash) {
  }
  tmp.reverse();
  return tmp.reduce((accu, slug) => {
    const parts = slug.split('/');
-    let {items: prevItems} = accu;
-    const slicedParts = config.gatsby && config.gatsby.trailingSlash ? parts.slice(1, -2) : parts.slice(1, -1);
+
+    let { items: prevItems } = accu;
+
+    const slicedParts =
+      config.gatsby && config.gatsby.trailingSlash ? parts.slice(1, -2) : parts.slice(1, -1);
+
    for (const part of slicedParts) {
-      let tmp = prevItems.find((item) => item && item.label == part);
+      let tmp = prevItems.find(item => item && item.label == part);
+
      if (tmp) {
        if (!tmp.items) {
          tmp.items = [];
        }
      } else {
-        tmp = {label: part, items: []};
-        prevItems.push(tmp)
+        tmp = { label: part, items: [] };
+        prevItems.push(tmp);
      }
-      if(tmp && tmp.items) {
+      if (tmp && tmp.items) {
        prevItems = tmp.items;
      }
    }
    // sort items alphabetically.
-    prevItems.map((item) => {
-      item.items = item.items
-        .sort(function (a, b) {
-          if (a.label < b.label)
-            return -1;
-          if (a.label > b.label)
-            return 1;
-          return 0;
-        });
-    })
-    const slicedLength = config.gatsby && config.gatsby.trailingSlash ? (parts.length - 2) : (parts.length - 1);
-    const index = prevItems.findIndex(({label}) => label === parts[slicedLength]);
-    if(prevItems.length) {
+    prevItems.map(item => {
+      item.items = item.items.sort(function(a, b) {
+        if (a.label < b.label) return -1;
+        if (a.label > b.label) return 1;
+        return 0;
+      });
+    });
+    const slicedLength =
+      config.gatsby && config.gatsby.trailingSlash ? parts.length - 2 : parts.length - 1;
+
+    const index = prevItems.findIndex(({ label }) => label === parts[slicedLength]);
+
+    if (prevItems.length) {
      accu.items.unshift(prevItems.splice(index, 1)[0]);
    }
    return accu;
  }, tree);
-}
+};

-const Tree = ({edges}) => {
+const Tree = ({ edges }) => {
  let [treeData] = useState(() => {
    return calculateTreeData(edges);
  });
+
  const defaultCollapsed = {};
+
  treeData.items.forEach(item => {
    if (config.sidebar.collapsedNav && config.sidebar.collapsedNav.includes(item.url)) {
      defaultCollapsed[item.url] = true;
@ -91,12 +130,14 @@ const Tree = ({edges}) => {
    }
  });
  const [collapsed, setCollapsed] = useState(defaultCollapsed);
-  const toggle = (url) => {
+
+  const toggle = url => {
    setCollapsed({
      ...collapsed,
      [url]: !collapsed[url],
    });
-  }
+  };
+
  return (
    <TreeNode
      className={`${config.sidebar.frontLine ? 'showFrontLine' : 'hideFrontLine'} firstLevel`}
@ -105,6 +146,6 @@ const Tree = ({edges}) => {
      {...treeData}
    />
  );
-}
+};

-export default Tree
+export default Tree;
--- a/docs/src/components/sidebar/treeNode.js
+++ b/docs/src/components/sidebar/treeNode.js
@ -1,41 +1,40 @@
-import React from "react";
+import React from 'react';
 import OpenedSvg from '../images/opened';
 import ClosedSvg from '../images/closed';
 import config from '../../../config';
-import Link from "../link";
+import Link from '../link';

-const TreeNode = ({className = '', setCollapsed, collapsed, url, title, items, ...rest}) => {
+const TreeNode = ({ className = '', setCollapsed, collapsed, url, title, items, ...rest }) => {
  const isCollapsed = collapsed[url];
+
  const collapse = () => {
    setCollapsed(url);
-  }
+  };
+
  const hasChildren = items.length !== 0;
+
  let location;
-  if(typeof(document) != 'undefined') {
+
+  if (typeof document != 'undefined') {
    location = document.location;
  }
  const active =
-    location && (location.pathname === url || location.pathname === (config.gatsby.pathPrefix + url));
+    location && (location.pathname === url || location.pathname === config.gatsby.pathPrefix + url);
+
  const calculatedClassName = `${className} item ${active ? 'active' : ''}`;
+
  return (
-    <li
-      className={calculatedClassName}
-    >
+    <li className={calculatedClassName}>
      {title && (
-        <Link
-          to={url}
-        >
+        <Link to={url}>
          {title}
          {!config.sidebar.frontLine && title && hasChildren ? (
-            <button
-              onClick={collapse}
-              aria-label='collapse'
-              className='collapser'>
+            <button onClick={collapse} aria-label="collapse" className="collapser">
              {!isCollapsed ? <OpenedSvg /> : <ClosedSvg />}
            </button>
          ) : null}
-        </Link>)
-      }
+        </Link>
+      )}

      {!isCollapsed && hasChildren ? (
        <ul>
@ -51,5 +50,6 @@ const TreeNode = ({className = '', setCollapsed, collapsed, url, title, items, .
      ) : null}
    </li>
  );
-}
-export default TreeNode
+};
+
+export default TreeNode;
--- a/docs/src/components/styles.css
+++ b/docs/src/components/styles.css
@ -1,971 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-display: swap;
-}
-::-webkit-input-placeholder { /* Edge */
-  color: #C2C2C2;
-}
-
-:-ms-input-placeholder { /* Internet Explorer */
-  color: #C2C2C2;
-}
-
-::placeholder {
-  color: #C2C2C2;
-}
-html, body {
-  font-family: -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    "Roboto",
-    "Roboto Light",
-    "Oxygen",
-    "Ubuntu",
-    "Cantarell",
-    "Fira Sans",
-    "Droid Sans",
-    "Helvetica Neue",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
-
-  font-size: 16px;
-}
-
-a {
-  transition: color 0.15s;
-  color: #663399;
-}
-
-
-body {
-  font-family: 'Roboto';
-}
-.visibleMobile {
-  display: none;
-}
-
-.video-responsive {
-  position: relative;
-  padding-bottom: 56.2%;
-}
-a {
-  text-decoration: none;
-}
-a:hover {
-  text-decoration: none;
-}
-.displayInline {
-  display: inline-block;
-}
-.navBarToggle {
-  border: 1px solid #fff;
-  border-radius: 4px;
-  width: 36px;
-  height: 33px;
-  position: absolute;
-  right: 20px;
-  padding: 8px 5px;
-  display: none;
-}
-.navBarToggle .iconBar {
-  display: block;
-  width: 22px;
-  height: 2px;
-  border-radius: 1px;
-  margin: 0 auto;
-  margin-top: 4px;
-  background-color: #fff;
-}
-.navBarToggle .iconBar:first-child {
-  margin-top: 0px;
-}
-.video-responsive iframe{
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-.diffNewLine {
-  color: #22863a;
-  background-color: #f0fff4;
-}
-
-.diffRemoveLine {
-  color: red;
-  background-color: #ffcccc;
-}
-.navBarParent
-{
-  width: 100%;
-  float: left;
-  display: flex;
-  align-items: center;
-}
-.divider
-{
-  height: 30px;
-  margin: 0 15px;
-  border-right: 1px solid rgba(255, 255, 255, 0.3);
-}
-.navBarULRight {
-  /* position: absolute;
-  right: 30px; */
-}
-.githubIcon {
-  width: 15px;
-  margin-right: 5px;
-}
-
-.githubSection {
-  display: flex;
-  align-items: center;
-  color: #000;
-  opacity: 0.7;
-}
-
-.githubSection:hover {
-  text-decoration: none;
-  opacity: 1;
-}
-
-.navbar-default .navbar-toggle .icon-bar {
-  background-color: #fff !important;
-}
-
-.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
-  background-color: #542683;
-}
-
-.headerWrapper {
-  border-bottom: 1px solid rgb(212, 218, 223);
-  box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
-  display: flex;
-  align-items: center;
-}
-.formElement
-{
-  background-color: transparent;
-  padding: 4px;
-  /* border-radius: 4px; */
-  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
-}
-.formElement:focus {
-  outline: none;
-  border: none;
-}
-.formElement svg path {
-  fill: #fff;
-}
-.searchInput {
-  width: calc(100% - 26px);
-  background-color: transparent !important;
-  border-width: 0 !important;
-  color: #C2C2C2;
-
-}
-.searchInput:focus, .searchInput:visited, .searchInput:hover, .searchInput:focus-within {
-  outline: none;
-  border: 0;
-}
-.searchWrapper
-{
-  padding-left: 0px;
-  padding-right: 20px;
-  flex: 1;
-  max-width: 600px;
-  position: relative;
-}
-.searchWrapper a {
-  font-weight: 500;
-}
-.hitWrapper
-{
-  background-color: #fff;
-  padding: 0.7em 1em 0.4em;
-  border-radius: 4px;
-  position: absolute;
-  width: 80vw;
-  max-width: 30em;
-  top: 40px;
-  border: 1px solid #ccc;
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16);
-  height: auto;
-  max-height: 80vh;
-  overflow: scroll;
-  left: 0;
-}
-.hitWrapper ul li {
-  margin-top: 0.7em;
-  padding-top: 0.7em;
-  border-top: 1px solid;
-  list-style-type: none;
-}
-.hitWrapper ul li:first-child {
-  border-top: 0px;
-  margin-top: 0px;
-  color: black !important;
-  padding: 0px;
-}
-.showResults {
-  display: block;
-}
-.hideResults {
-  display: none;
-}
-.hitWrapper span {
-  color: black;
-  font-size: 14px;
-}
-.headerTitle {
-  height: auto;
-  font-size: 28px;
-  line-height: 1.5;
-  font-weight: 500;
-  color: #fff !important;
-}
-.headerTitle a {
-  color: #fff;
-}
-
-.headerTitle a:hover {
-  text-decoration: none;
-  opacity: 0.8;
-}
-.logoWrapper {
-  padding: 21px 0;
-  padding-left: 20px;
-}
-
-.logoContent {
-  font-family: 'Roboto';
-  margin-left: 16px;
-  font-size: 28px;
-  line-height: 1.5;
-  font-weight: 500;
-  padding-right: 10px;
-}
-
-/* Header section starts here */
-.navBarDefault {
-  background-color: #372476;
-  border-radius: 0;
-  border-top: 0;
-  margin-bottom: 0;
-  border: 0;
-  display: flex;
-  align-items: center;
-  box-shadow: -1px 0px 4px 1px rgba(175,158,232,.4);
-  -webkit-box-shadow: -1px 0px 4px 1px rgba(175,158,232,.4);
-  -moz-box-shadow: -1px 0px 4px 1px rgba(175,158,232,.8);
-  -o-box-shadow: -1px 0px 4px 1px rgba(175,158,232,.4);
-  z-index: 1;
-  padding: 15px;
-  position: relative;
-}
-.navBarHeader {
-  min-width: 335px;
-  padding-right: 20px;
-  flex: 1;
-  display: flex;
-  align-items: center;
-}
-.navBarBrand {
-  padding: 0px 0px;
-  display: flex;
-  align-items: center;
-}
-
-.navBarBrand img {
-  width: 40px;
-  margin-right: 16px;
-  display: inline-block;
-}
-.navBarUL li {
-  list-style-type: none;
-}
-.navBarUL {
-  -webkit-overflow-scrolling: touch;
-}
-.navBarUL li a {
-  font-family: 'Roboto';
-  color: #fff !important;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 1em;
-  opacity: 1;
-  padding: 10px 15px;
-}
-.navBarNav
-{
-  display: flex;
-  align-items: center;
-}
-.navBarUL li a img, .navBarUL li a .shareIcon
-{
-  width: 20px;
-}
-.mainWrapper {
-  color: rgb(59, 69, 78);
-  max-width: 750px;
-}
-.navBarUL li a:hover {
-  opacity: .7;
-}
-pre {
-  border: 0 !important;
-  background-color: rgb(245, 247, 249); /* !important; */
-}
-
-blockquote {
-  color: rgb(116, 129, 141);
-  margin: 0px 0px 24px;
-  padding: 0px 0px 0px 12px;
-  border-left: 4px solid rgb(230, 236, 241);
-  border-color: rgb(230, 236, 241);
-}
-
-.mainWrapper ul, .mainWrapper ol {
-  -webkit-padding-start: 40px;
-  -moz-padding-start: 40px;
-  -o-padding-start: 40px;
-  margin: 24px 0px;
-  padding: 0px 0px 0px 2em;
-}
-
-.mainWrapper ul li, .mainWrapper ol li {
-  font-size: 16px;
-  line-height: 1.8;
-  font-weight: 400;
-}
-
-/* Header section ends here */
-.headerNav {
-  font-family: 'Roboto';
-  padding: 0px 24px;
-  color: rgb(116, 76, 188);
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 1em;
-}
-
-.headerNav a {
-  color: rgb(116, 76, 188);
-  text-decoration: none;
-}
-
-.headerNav a:hover {
-  text-decoration: none;
-}
-
-.logoWrapper img {
-  width: 40px;
-}
-
-.sideBarUL {
-  margin-top: 32px;
-}
-
-.sideBarUL li {
-  list-style-type: none;
-  width: auto;
-}
-
-.sideBarUL li a {
-  color: #fff;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.5;
-  padding: 7px 24px 7px 16px;
-  padding-left: 10px;
-  padding-right: 25px;
-  border-style: solid none solid solid;
-  border-width: 1px 0px 1px 1px;
-  border-color: transparent currentcolor transparent transparent;
-}
-
-.rightSideTitle {
-  font-size: 10px;
-  line-height: 1;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 1.2px;
-  padding: 7px 24px 7px 16px;
-  border-left: 1px solid #e6ecf1;
-  border-left-color: rgb(230, 236, 241);
-  color: #4C5767;
-}
-
-.rightSideBarUL {
-  margin-top: 32px;
-}
-
-.rightSideBarUL li {
-  list-style-type: none;
-  border-left: 1px solid #e6ecf1;
-  border-left-color: rgb(230, 236, 241);
-}
-
-.rightSideBarUL li a {
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1.5;
-  padding: 7px 24px 7px 16px;
-}
-
-.hideFrontLine .collapser {
-  background: transparent;
-  border: none;
-  outline: none;
-  position: absolute;
-  right: 20px;
-  z-index: 1;
-  cursor: pointer;
-}
-
-.hideFrontLine  .active >a{
-  background-color: #542683;
-  color: #fff !important;
-}
-.firstLevel ul li .collapser svg path {
-  fill: #fff !important;
-}
-.active .collapser >svg >path {
-  fill: #663399 !important;
-}
-
-.firstLevel ul .item ul .item {
-  border-left: 1px solid #e6ecf1;
-}
-
-.sideBarUL .item{
-  list-style: none;
-  padding: 0;
-}
-.sideBarUL .item >a {
-  color: #fff;
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  position: relative;
-  width: 100%;
-  padding-right: 35px;
-  padding-left: 15px;
-}
-.sideBarUL .item>a:hover {
-  background-color: #542683;
-  color: #fff !important;
-}
-.showFrontLine .item >a:hover {
-  background-color: #542683;
-}
-.showFrontLine .active >a {
-  color: #fff;
-  background-color: #473485;
-}
-
-.sideBarUL  .item .item{
-  margin-left: 16px;
-}
-
-.firstLevel>ul>.item{
-  margin-left: 0 !important;
-}
-
-.showFrontLine  .item .item {
-  border-left: 1px solid #e6ecf1;
-  border-left-color: rgb(230, 236, 241);
-  padding: 0;
-  width: calc(100% - 16px) !important;
-}
-
-.showFrontLine .item .active>a {
-  border-color: rgb(230,236,241) !important;
-  border-style: solid none solid solid;
-  border-width: 1px 0px 1px 1px;
-  background-color: #542683;
-  color: #fff;
-}
-
-.titleWrapper {
-  display: flex;
-  align-items: center;
-  padding-bottom: 40px;
-  border-bottom: 1px solid rgb(230, 236, 241);
-  margin-bottom: 32px;
-}
-
-.title {
-  font-size: 32px;
-  line-height: 1.5;
-  font-weight: 500;
-  border-left: 2px solid rgb(116, 76, 188);
-  padding: 0 16px;
-  flex: 1;
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.gitBtn {
-  height: 30px;
-  min-height: 30px;
-  display: flex;
-  align-items: center;
-}
-
-.gitBtn img {
-  width: 15px;
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.addPaddTopBottom {
-  padding: 50px 0;
-}
-
-.nextPreviousWrapper {
-  margin: 0px;
-  padding: 0px;
-  width: auto;
-  display: grid;
-  grid-template-rows: auto;
-  column-gap: 24px;
-  grid-template-columns: calc(50% - 8px) calc(50% - 8px);
-}
-
-.previousBtn {
-  cursor: pointer;
-  -moz-box-align: center;
-  -moz-box-direction: normal;
-  -moz-box-orient: horizontal;
-  margin: 0px;
-  padding: 0px;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  place-self: stretch;
-  color: rgb(36, 42, 49);
-  background-color: rgb(255, 255, 255);
-  border-radius: 3px;
-  border: 1px solid rgb(230, 236, 241);
-  transition: border 200ms ease 0s;
-  box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
-  text-decoration: none;
-}
-
-.leftArrow {
-  display: block;
-  margin: 0px;
-  color: rgb(157, 170, 182);
-  flex: 0 0 auto;
-  font-size: 24px;
-  transition: color 200ms ease 0s;
-  padding: 16px;
-  padding-right: 16px;
-}
-
-.preRightWrapper {
-  display: block;
-  margin: 0px;
-  flex: 1 1 0%;
-  padding: 16px;
-  text-align: right;
-}
-
-.smallContent {
-  display: block;
-  margin: 0px;
-  padding: 0px;
-  color: #6E6E6E;
-}
-
-.smallContent span {
-  font-size: 12px;
-  line-height: 1.625;
-  font-weight: 400;
-}
-
-.nextPreviousTitle {
-  display: block;
-  margin: 0px;
-  padding: 0px;
-  transition: color 200ms ease 0s;
-}
-
-.nextPreviousTitle span {
-  font-size: 16px;
-  line-height: 1.5;
-  font-weight: 500;
-}
-
-.nextBtn {
-  cursor: pointer;
-  -moz-box-align: center;
-  -moz-box-direction: normal;
-  -moz-box-orient: horizontal;
-  margin: 0px;
-  padding: 0px;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  place-self: stretch;
-  color: rgb(36, 42, 49);
-  background-color: rgb(255, 255, 255);
-  border-radius: 3px;
-  border: 1px solid rgb(230, 236, 241);
-  transition: border 200ms ease 0s;
-  box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
-  text-decoration: none;
-}
-
-.rightArrow {
-  flex: 0 0 auto;
-  font-size: 24px;
-  transition: color 200ms ease 0s;
-  padding: 16px;
-  padding-left: 16px;
-  display: block;
-  margin: 0px;
-  color: rgb(157, 170, 182);
-}
-
-.nextRightWrapper {
-  display: block;
-  margin: 0px;
-  padding: 16px;
-  flex: 1 1 0%;
-}
-
-.nextBtn:hover, .previousBtn:hover {
-  color: rgb(116, 76, 188);
-  text-decoration: none;
-  border: 1px solid rgb(116, 76, 188);
-}
-
-.nextBtn:hover .rightArrow, .previousBtn:hover .leftArrow {
-  color: rgb(116, 76, 188);
-}
-
-/* tables.css */
-table {
-padding: 0; }
-
-table tr {
-  border-top: 1px solid #cccccc;
-  background-color: white;
-  margin: 0;
-padding: 0; }
-
-table tr:nth-child(2n) {
-  background-color: #f8f8f8; }
-
-table tr th {
-  font-weight: bold;
-  border: 1px solid #cccccc;
-  text-align: left;
-  margin: 0;
-padding: 6px 13px; }
-
-table tr td {
-  border: 1px solid #cccccc;
-  text-align: left;
-  margin: 0;
-padding: 6px 13px; }
-
-table tr th :first-child, table tr td :first-child {
-margin-top: 0; }
-
-table tr th :last-child, table tr td :last-child {
-margin-bottom: 0; }
-/* end - tables.css */
-
-/* Image styling */
-img {
-  max-width: 100%;
-}
-/* end image */
-.githubBtn {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  padding: 10px 0px;
-  padding-left: 15px;
-  max-height: 40px;
-}
-.githubBtn span span {
-  display: flex;
-  align-items: center;
-}
-
-.communitySection {
-  font-size: 24px;
-  font-weight: 700;
-}
-.authorSection {
-  padding: 20px 0;
-}
-.authorSection, .authorName {
-  display: flex;
-  align-items: center;
-}
-.authorImg img
-{
-  width: 75px;
-  height: 75px;
-  border-radius: 50%;
-  min-width: 75px;
-  max-width: 75px;
-  min-height: 75px;
-  max-height: 75px;
-}
-.authorDetails
-{
-  padding-left: 10px;
-}
-.authorDesc
-{
-  padding-top: 5px;
-  font-size: 14px;
-}
-.authorName img {
-  margin-left: 10px;
-  display: inline-block;
-  width: 20px;
-}
-.authorName img:hover {
-  opacity: 0.7;
-}
-
-.heading1 {
-  font-size: 26px;
-  font-weight: 800;
-  line-height: 1.5;
-  margin-bottom: 16px;
-  margin-top: 32px;
-}
-
-.heading2 {
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 1.5;
-  margin-bottom: 16px;
-  margin-top: 32px;
-}
-
-.heading3 {
-  font-size: 20px;
-  font-weight: 600;
-  line-height: 1.5;
-  margin-bottom: 16px;
-  margin-top: 32px;
-}
-
-.heading4 {
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 1.5;
-  margin-bottom: 16px;
-  margin-top: 32px;
-}
-
-.heading5 {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 1.5;
-  margin-bottom: 16px;
-  margin-top: 32px;
-}
-
-.heading6 {
-  font-size: 14px;
-  font-weight: 300;
-  line-height: 1.5;
-  margin-bottom: 16px;
-  margin-top: 32px;
-}
-
-.paragraph {
-  margin: 16px 0px 32px;
-  line-height: 1.625;
-}
-
-.pre {
-  font-size: 14px;
-  margin: 0px;
-  padding: 16px;
-  overflow: auto;
-}
-
-.mainWrapper code {
-  background: #f9f7fb;
-  border: 1px solid #ede7f3;
-  border-radius: 4px;
-  padding: 2px 6px;
-  font-size: 0.9375em;
-}
-
-.poweredBy {
-  font-size: 0.6em;
-  text-align: end;
-  padding: 0;
-}
-.topnav {
-  -webkit-transition: top 0.5s, bottom 0.5s;
-}
-
-@media (max-width: 767px) {
-  .responsive {
-    margin-top: 15px;
-    position: relative;
-    padding-bottom: 20px;
-    border-top: 1px solid #fff;
-  }
-  .headerTitle {
-    padding-right: 50px;
-    font-size: 20px;
-  }
-  .navBarBrand {
-    min-height: 40px;
-  }
-  .navBarBrand img {
-    margin-right: 8px;
-  }
-  .topnav.responsive .visibleMobile {
-    display: block;
-  }
-  .topnav .navBarUL {
-    display: none;
-  }
-  .topnav.responsive .navBarUL{
-    display: block;
-    text-align: left;
-  }
-  .hiddenMobile {
-    display: none !important;
-  }
-  hr {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  .navBarParent {
-    display: block;
-  }
-  .separator {
-    margin-top: 20px;
-    margin-bottom: 20px;
-  }
-  .navBarULRight {
-    position: static;
-  }
-  .navBarUL {
-    display: flex;
-    align-items: center;
-    margin: 7.5px 0px;
-  }
-  .navBarUL li {
-    height: 37px;
-  }
-  .navBarUL li a {
-    font-size: 14px;
-    padding: 10px 15px;
-  }
-
-  .navBarDefault {
-    display: block;
-  }
-
-  .navBarToggle {
-    margin-right: 0;
-    display: block;
-  }
-  .navBarHeader {
-    display: flex;
-    min-width: auto;
-    padding-right: 0;
-    align-items: center;
-  }
-  .navBarBrand {
-    font-size: 20px;
-    padding: 0 0;
-    padding-left: 0;
-    flex: initial;
-    padding-right: 15px;
-  }
-
-  .titleWrapper {
-    padding: 0 15px;
-    display: block;
-  }
-
-  .gitBtn {
-    display: inline-block;
-  }
-
-  .mainWrapper {
-    padding: 0 15px;
-  }
-
-  .nextPreviousWrapper {
-    display: block;
-    padding: 0 15px;
-  }
-
-  .previousBtn {
-    margin-bottom: 20px;
-  }
-
-  .mobileView {
-    text-align: left !important;
-    padding-left: 0 !important;
-  }
-  .searchWrapper {
-    padding: 0px 0;
-    padding-top: 20px;
-    position: absolute;
-    bottom: 0px;
-    width: calc(100% - 30px);
-  }
-  .hitWrapper {
-    width: 100%;
-    right: 0;
-    top: 35px;
-    max-height: fit-content;
-    position: static;
-  }
-}
-
-@media (min-width: 768px) and (max-width: 991px) {
-  .navBarDefault {
-    padding: 10px;
-  }
-  .navBarBrand {
-    font-size: 22px;
-  }
-  .navBarHeader {
-    min-width: 240px;
-    flex: initial;
-  }
-  .githubBtn {
-    padding: 10px 10px;
-  }
-  .divider {
-    margin: 0 5px;
-    height: 20px;
-  }
-  .hitWrapper {
-    max-width: 500px;
-  }
-  .navBarUL li a {
-    padding: 10px 5px;
-  }
-  .searchWrapper {
-    padding-left: 0px;
-  }
-}
--- a/docs/src/components/styles/Docs.js
+++ b/docs/src/components/styles/Docs.js
@ -0,0 +1,77 @@
+import styled from '@emotion/styled';
+
+export const StyledHeading = styled('h1')`
+  font-size: 32px;
+  line-height: 1.5;
+  font-weight: 500;
+  border-left: 2px solid #1ed3c6;
+  padding: 0 16px;
+  flex: 1;
+  margin-top: 0;
+  padding-top: 0;
+  color: ${props => props.theme.colors.heading};
+`;
+
+export const Edit = styled('div')`
+  padding: 1rem 1.5rem;
+  text-align: right;
+
+  a {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1em;
+    text-decoration: none;
+    color: #555;
+    border: 1px solid rgb(211, 220, 228);
+    cursor: pointer;
+    border-radius: 3px;
+    transition: all 0.2s ease-out 0s;
+    text-decoration: none;
+    color: rgb(36, 42, 49);
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
+    height: 30px;
+    padding: 5px 16px;
+    &:hover {
+      background-color: rgb(245, 247, 249);
+    }
+  }
+`;
+
+export const StyledMainWrapper = styled.div`
+  max-width: 750px;
+  color: ${props => props.theme.colors.text};
+
+  ul,
+  ol {
+    -webkit-padding-start: 40px;
+    -moz-padding-start: 40px;
+    -o-padding-start: 40px;
+    margin: 24px 0px;
+    padding: 0px 0px 0px 2em;
+
+    li {
+      font-size: 16px;
+      line-height: 1.8;
+      font-weight: 400;
+    }
+  }
+
+  a {
+    transition: color 0.15s;
+    color: ${props => props.theme.colors.link};
+  }
+
+  code {
+    border: 1px solid #ede7f3;
+    border-radius: 4px;
+    padding: 2px 6px;
+    font-size: 0.9375em;
+
+    background: ${props => props.theme.colors.background};
+  }
+
+  @media (max-width: 767px) {
+    padding: 0 15px;
+  }
+`;
--- a/docs/src/components/styles/GlobalStyles.js
+++ b/docs/src/components/styles/GlobalStyles.js
@ -0,0 +1,896 @@
+import { injectGlobal } from 'emotion';
+
+export const baseStyles = injectGlobal`
+  @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
+  @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap');
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-display: swap;
+  }
+  ::-webkit-input-placeholder {
+    /* Edge */
+    color: #c2c2c2;
+  }
+
+  :-ms-input-placeholder {
+    /* Internet Explorer */
+    color: #c2c2c2;
+  }
+
+  ::placeholder {
+    color: #c2c2c2;
+  }
+  html,
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Roboto Light', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif,
+      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+    font-size: 16px;
+    scroll-behavior: smooth;
+  }
+
+  a {
+    transition: color 0.15s;
+    /* color: #663399; */
+  }
+
+  body {
+    font-family: 'Roboto';
+  }
+  .visibleMobile {
+    display: none;
+  }
+  .visibleMobileView {
+    display: none !important;
+  }
+  .video-responsive {
+    position: relative;
+    padding-bottom: 56.2%;
+  }
+  a {
+    text-decoration: none;
+  }
+  a:hover {
+    text-decoration: none;
+  }
+  .displayInline {
+    display: inline-block;
+  }
+  .navBarToggle {
+    border: 0px solid #fff;
+    border-radius: 4px;
+    width: 36px;
+    height: 33px;
+    position: absolute;
+    right: 20px;
+    padding: 8px 5px;
+    display: none;
+  }
+  .navBarToggle .iconBar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    border-radius: 1px;
+    margin: 0 auto;
+    margin-top: 4px;
+    background-color: #001934;
+  }
+  .navBarToggle .iconBar:first-child {
+    margin-top: 0px;
+  }
+  .video-responsive iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .diffNewLine {
+    color: #22863a;
+    background-color: #f0fff4;
+  }
+
+  .diffRemoveLine {
+    color: red;
+    background-color: #ffcccc;
+  }
+  .navBarParent {
+    width: 100%;
+    float: left;
+    display: flex;
+    align-items: center;
+  }
+  .divider {
+    height: 30px;
+    margin: 0 15px;
+    border-right: 1px solid rgba(255, 255, 255, 0.3);
+  }
+  .navBarULRight {
+    /* position: absolute;
+  right: 30px; */
+  }
+  .githubIcon {
+    width: 15px;
+    margin-right: 5px;
+  }
+
+  .githubSection {
+    display: flex;
+    align-items: center;
+    color: #000;
+    opacity: 0.7;
+  }
+
+  .githubSection:hover {
+    text-decoration: none;
+    opacity: 1;
+  }
+
+  .navbar-default .navbar-toggle .icon-bar {
+    background-color: #fff !important;
+  }
+
+  .navbar-default .navbar-toggle:focus,
+  .navbar-default .navbar-toggle:hover {
+    background-color: #001933;
+  }
+
+  .headerWrapper {
+    border-bottom: 1px solid rgb(212, 218, 223);
+    box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
+    display: flex;
+    align-items: center;
+  }
+  .formElement {
+    background-color: transparent;
+    padding: 4px;
+    border-radius: 5px;
+    position: relative;
+  }
+  .formElement:focus {
+    outline: none;
+    border: none;
+  }
+  .formElement svg path {
+    fill: #2fd2c5;
+  }
+  .searchInput {
+    width: 100%;
+    background-color: rgba(28,211,198,.12) !important;
+    border-width: 0 !important;
+    color: #C2C2C2;
+    padding: 10px;
+    border-radius: 5px;
+    color: #fff;
+    opacity: .6;
+    padding-left: 38px;
+    max-width: 600px;
+  }
+  .searchInput:focus,
+  .searchInput:visited,
+  .searchInput:hover,
+  .searchInput:focus-within {
+    outline: none;
+    border: 0;
+  }
+  .searchWrapper {
+    padding-left: 0px;
+    padding-right: 20px;
+    flex: 1;
+    position: relative;
+  }
+  .searchWrapper a {
+    font-weight: 500;
+  }
+  .hitWrapper {
+    background-color: #fff;
+    padding: 0.7em 1em 0.4em;
+    border-radius: 4px;
+    position: absolute;
+    width: 80vw;
+    max-width: 30em;
+    top: 40px;
+    border: 1px solid #ccc;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16);
+    height: auto;
+    max-height: 80vh;
+    overflow: scroll;
+    left: 0;
+  }
+  .hitWrapper ul li {
+    margin-top: 0.7em;
+    padding-top: 0.7em;
+    border-top: 1px solid;
+    list-style-type: none;
+  }
+  .hitWrapper ul li:first-child {
+    border-top: 0px;
+    margin-top: 0px;
+    color: black !important;
+    padding: 0px;
+  }
+  .showResults {
+    display: block;
+  }
+  .hideResults {
+    display: none;
+  }
+  .hitWrapper span {
+    color: black;
+    font-size: 14px;
+  }
+  .headerTitle {
+    height: auto;
+    font-size: 16px;
+    line-height: 1.5;
+    font-weight: 300;
+    color: #fff !important;
+    margin-top: 16px;
+    text-transform: uppercase;
+  }
+  .headerTitle a {
+    color: #fff;
+  }
+
+  .headerTitle a:hover {
+    text-decoration: none;
+    opacity: 0.8;
+  }
+  .logoWrapper {
+    padding: 21px 0;
+    padding-left: 20px;
+  }
+
+  .logoContent {
+    font-family: 'Roboto';
+    margin-left: 16px;
+    font-size: 28px;
+    line-height: 1.5;
+    font-weight: 500;
+    padding-right: 10px;
+  }
+
+  /* Header section starts here */
+  .removePadd {
+    padding: 0 !important;
+  }
+  .navBarDefault {
+    background-color: #001934;
+    border-radius: 0;
+    border-top: 0;
+    margin-bottom: 0;
+    border: 0;
+    display: flex;
+    align-items: center;
+    box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.4);
+    -webkit-box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.4);
+    -moz-box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.8);
+    -o-box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.4);
+    z-index: 1;
+    padding: 15px;
+    position: relative;
+    height: 80px;
+  }
+  .navBarHeader {
+    min-width: 335px;
+    padding-right: 20px;
+    display: flex;
+    align-items: center;
+  }
+  .navBarBrand {
+    padding: 0px 0px;
+    display: flex;
+    align-items: center;
+  }
+
+  .navBarBrand img {
+    width: 120px;
+    margin-right: 6px;
+    display: inline-block;
+  }
+  .navBarUL li {
+    list-style-type: none;
+  }
+  .navBarUL {
+    -webkit-overflow-scrolling: touch;
+  }
+  .navBarUL li a {
+    font-family: 'Roboto';
+    color: #fff !important;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1em;
+    opacity: 1;
+    padding: 10px 15px;
+  }
+  .navBarNav {
+    display: flex;
+    align-items: center;
+  }
+  .navBarUL li a img,
+  .navBarUL li a .shareIcon {
+    width: 20px;
+  }
+  .navBarUL li a:hover {
+    opacity: 0.7;
+  }
+  pre {
+    border: 0 !important;
+    background-color: rgb(245, 247, 249); /* !important; */
+  }
+  
+  blockquote {
+    color: rgb(116, 129, 141);
+    margin: 0px 0px 24px;
+    padding: 0px 0px 0px 12px;
+    border-left: 4px solid rgb(230, 236, 241);
+    border-color: rgb(230, 236, 241);
+  }
+  .socialWrapper {
+    display: flex;
+    align-items: center;
+  }
+  .socialWrapper li {
+    display: inline-block;
+  }
+  .socialWrapper li a {
+    display: contents;
+  }
+  .discordBtn, .twitterBtn {
+    border-radius: 4px;
+    border: solid 1px #d1d2d3;
+    background-color: #f1f5f8;
+    width: 20px;
+    height: 20px;
+    padding-top: 2px;
+    margin-left: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: .8;
+    cursor: pointer;
+  }
+  .twitterBtn img {
+    width: 12px !important;
+  }
+  .discordBtn img {
+    width: 10px !important;
+  }
+  .discordBtn:hover, .twitterBtn:hover {
+    opacity: 1;
+  }
+  .discordBtn {
+    img {
+      width: 10px;
+    }
+  }
+  /* Header section ends here */
+  .sidebarTitle {
+    /* box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); */
+    background-color: #f8f8f8;
+    padding: 18px 16px;
+    font-family: 'Poppins';
+    font-size: 18px;
+    font-weight: 600;
+    color: #001934;
+    display: flex;
+    align-items: center;
+  }
+
+  .sideBarShow {
+    display: none;
+  }
+
+  .sidebarTitle a {
+    color: #001934;
+  }
+
+  .greenCircle {
+    width: 8px;
+    height: 8px;
+    background-color: #1cd3c6;
+    border-radius: 50%;
+    margin: 0 12px;
+  }
+
+  .headerNav {
+    font-family: 'Roboto';
+    padding: 0px 24px;
+    color: #001933;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1em;
+  }
+
+  .headerNav a {
+    color: #001933;
+    text-decoration: none;
+  }
+
+  .headerNav a:hover {
+    text-decoration: none;
+  }
+
+  .logoWrapper img {
+    width: 40px;
+  }
+
+  .sideBarUL {
+    margin-top: 32px;
+  }
+
+  .sideBarUL li {
+    list-style-type: none;
+    width: auto;
+  }
+
+  .sideBarUL li a {
+    /* color: #fff; */
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.5;
+    padding: 7px 24px 7px 16px;
+    padding-left: 10px;
+    padding-right: 25px;
+    border-style: solid none solid solid;
+    border-width: 1px 0px 1px 1px;
+    border-color: transparent currentcolor transparent transparent;
+  }
+
+  .hideFrontLine .collapser {
+    background: transparent;
+    border: none;
+    outline: none;
+    position: absolute;
+    right: 20px;
+    z-index: 1;
+    cursor: pointer;
+  }
+
+  .hideFrontLine .active > a {
+    background-color: #1ed3c6;
+    color: #fff !important;
+  }
+  .firstLevel ul li .collapser svg path {
+    fill: #fff !important;
+  }
+  .active .collapser > svg > path {
+    fill: #001933 !important;
+  }
+
+  .firstLevel ul .item ul .item {
+    border-left: 1px solid #e6ecf1;
+  }
+
+  .sideBarUL .item {
+    list-style: none;
+    padding: 0;
+  }
+
+  .sideBarUL .item > a {
+    color: #1ED3C6;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 100%;
+    padding-right: 35px;
+    padding-left: 15px;
+  }
+
+  .showFrontLine .item > a:hover {
+    background-color: #001933;
+  }
+
+  .showFrontLine .active > a {
+    /* color: #fff; */
+    background-color: #001933;
+  }
+
+  .sideBarUL .item .item {
+    margin-left: 16px;
+  }
+
+  .firstLevel > ul > .item {
+    margin-left: 0 !important;
+  }
+
+  .showFrontLine .item .item {
+    border-left: 1px solid #e6ecf1;
+    border-left-color: rgb(230, 236, 241);
+    padding: 0;
+    width: calc(100% - 16px) !important;
+  }
+
+  .showFrontLine .item .active > a {
+    border-color: rgb(230, 236, 241) !important;
+    border-style: solid none solid solid;
+    border-width: 1px 0px 1px 1px;
+    background-color: #1ed3c6 !important;
+    color: #fff;
+  }
+
+  .titleWrapper {
+    display: flex;
+    align-items: center;
+    padding-bottom: 40px;
+    border-bottom: 1px solid rgb(230, 236, 241);
+    margin-bottom: 32px;
+  }
+
+  .gitBtn {
+    height: 30px;
+    min-height: 30px;
+    display: flex;
+    align-items: center;
+  }
+
+  .gitBtn img {
+    width: 15px;
+    display: inline-block;
+    margin-right: 5px;
+  }
+
+  .addPaddTopBottom {
+    padding: 50px 0;
+  }
+
+  .preRightWrapper {
+    display: block;
+    margin: 0px;
+    flex: 1 1 0%;
+    padding: 16px;
+    text-align: right;
+  }
+
+  .smallContent {
+    display: block;
+    margin: 0px;
+    padding: 0px;
+    color: #6e6e6e;
+  }
+
+  .smallContent span {
+    font-size: 12px;
+    line-height: 1.625;
+    font-weight: 400;
+  }
+
+  /* **************************** */
+
+  .nextRightWrapper {
+    display: block;
+    margin: 0px;
+    padding: 16px;
+    flex: 1 1 0%;
+  }
+
+  /* tables.css */
+  table {
+    padding: 0;
+  }
+
+  table tr {
+    border-top: 1px solid #cccccc;
+    margin: 0;
+    padding: 0;
+  }
+
+  table tr:nth-child(2n) {
+    background-color: #f8f8f8;
+  }
+
+  table tr th {
+    font-weight: bold;
+    border: 1px solid #cccccc;
+    text-align: left;
+    margin: 0;
+    padding: 6px 13px;
+  }
+
+  table tr td {
+    border: 1px solid #cccccc;
+    text-align: left;
+    margin: 0;
+    padding: 6px 13px;
+  }
+
+  table tr th :first-child,
+  table tr td :first-child {
+    margin-top: 0;
+  }
+
+  table tr th :last-child,
+  table tr td :last-child {
+    margin-bottom: 0;
+  }
+  /* end - tables.css */
+
+  /* Image styling */
+  img {
+    max-width: 100%;
+  }
+  /* end image */
+  .githubBtn {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    padding: 10px 0px;
+    padding-left: 15px;
+    max-height: 40px;
+  }
+  .githubBtn span span {
+    display: flex;
+    align-items: center;
+  }
+
+  .communitySection {
+    font-size: 24px;
+    font-weight: 700;
+  }
+  .authorSection {
+    padding: 20px 0;
+  }
+  .authorSection,
+  .authorName {
+    display: flex;
+    align-items: center;
+  }
+  .authorImg img {
+    width: 75px;
+    height: 75px;
+    border-radius: 50%;
+    min-width: 75px;
+    max-width: 75px;
+    min-height: 75px;
+    max-height: 75px;
+  }
+  .authorDetails {
+    padding-left: 10px;
+  }
+  .authorDesc {
+    padding-top: 5px;
+    font-size: 14px;
+  }
+  .authorName img {
+    margin-left: 10px;
+    display: inline-block;
+    width: 20px;
+  }
+  .authorName img:hover {
+    opacity: 0.7;
+  }
+
+  .heading1 {
+    font-size: 26px;
+    font-weight: 800;
+    line-height: 1.5;
+    margin-bottom: 16px;
+    margin-top: 32px;
+  }
+
+  .heading2 {
+    font-size: 24px;
+    font-weight: 700;
+    line-height: 1.5;
+    margin-bottom: 16px;
+    margin-top: 32px;
+  }
+
+  .heading3 {
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.5;
+    margin-bottom: 16px;
+    margin-top: 32px;
+  }
+
+  .heading4 {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 1.5;
+    margin-bottom: 16px;
+    margin-top: 32px;
+  }
+
+  .heading5 {
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+    margin-bottom: 16px;
+    margin-top: 32px;
+  }
+
+  .heading6 {
+    font-size: 14px;
+    font-weight: 300;
+    line-height: 1.5;
+    margin-bottom: 16px;
+    margin-top: 32px;
+  }
+
+  .paragraph {
+    margin: 16px 0px 32px;
+    line-height: 1.625;
+  }
+
+  .pre {
+    font-size: 14px;
+    margin: 0px;
+    padding: 16px;
+    overflow: auto;
+  }
+
+  .poweredBy {
+    font-size: 0.6em;
+    text-align: end;
+    padding: 0;
+  }
+  .topnav {
+    -webkit-transition: top 0.5s, bottom 0.5s;
+  }
+
+  @media (max-width: 767px) {
+    .formElement svg path {
+      fill: #001934;
+    }
+    .visibleMobileView {
+      display: block !important;
+    }
+    .searchInput {
+      color: #001934;
+    }
+    .socialWrapper {
+      position: absolute;
+      right: 10px;
+      top: 29px;
+    }
+    .responsive {
+      margin-top: 15px;
+      position: relative;
+      padding-bottom: 20px;
+      border-top: 1px solid #fff;
+    }
+    .headerTitle {
+      padding-right: 50px;
+      font-size: 16px;
+    }
+    .navBarBrand {
+      min-height: 40px;
+    }
+    .navBarBrand img {
+      margin-right: 8px;
+    }
+    .topnav.responsive .visibleMobile {
+      display: block;
+    }
+    .topnav .navBarUL {
+      display: none;
+    }
+    .topnav.responsive .navBarUL {
+      display: block;
+      text-align: left;
+    }
+    .hiddenMobile {
+      display: none !important;
+    }
+    hr {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    .navBarParent {
+      display: block;
+    }
+    .separator {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+    .navBarULRight {
+      position: static;
+    }
+    .navBarUL {
+      display: flex;
+      align-items: center;
+      margin: 7.5px 0px;
+    }
+    .navBarUL li {
+      height: 37px;
+    }
+    .navBarUL li a {
+      font-size: 14px;
+      padding: 10px 15px;
+    }
+
+    .navBarDefault {
+      display: block;
+      height: auto;
+    }
+
+    .navBarToggle {
+      margin-right: 0;
+      display: block;
+      position: absolute;
+      left: 11px;
+      top: 15px;
+      background: #fff;
+    }
+
+    .navBarHeader {
+      display: flex;
+      min-width: auto;
+      padding-right: 0;
+      align-items: center;
+    }
+
+    .navBarBrand {
+      font-size: 20px;
+      padding: 0 0;
+      padding-left: 0;
+      flex: initial;
+      padding-right: 15px;
+    }
+
+    .titleWrapper {
+      padding: 0 15px;
+      display: block;
+    }
+
+    .gitBtn {
+      display: inline-block;
+    }
+
+    .mobileView {
+      text-align: left !important;
+      padding-left: 0 !important;
+    }
+
+    .searchWrapper {
+      padding: 0px 0;
+      padding-top: 0px;
+      position: absolute;
+      bottom: 0px;
+      width: calc(100% - 70px);
+      position: absolute;
+      left: 40px;
+      top: 8px;
+    }
+    .hitWrapper {
+      width: 100%;
+      right: 0;
+      top: 35px;
+      max-height: fit-content;
+      position: static;
+    }
+  }
+
+  @media (min-width: 768px) and (max-width: 991px) {
+    .navBarDefault {
+      padding: 10px;
+    }
+    .navBarBrand {
+      font-size: 22px;
+    }
+    .navBarHeader {
+      min-width: 240px;
+      flex: initial;
+    }
+    .githubBtn {
+      padding: 10px 10px;
+    }
+    .divider {
+      margin: 0 5px;
+      height: 20px;
+    }
+    .hitWrapper {
+      max-width: 500px;
+    }
+    .navBarUL li a {
+      padding: 10px 5px;
+    }
+    .searchWrapper {
+      padding-left: 0px;
+    }
+  }
+`;
--- a/docs/src/components/styles/PageNavigationButtons.js
+++ b/docs/src/components/styles/PageNavigationButtons.js
@ -0,0 +1,110 @@
+import styled from '@emotion/styled';
+
+export const StyledNextPrevious = styled('div')`
+  margin: 0px;
+  padding: 0px;
+  width: auto;
+  display: grid;
+  grid-template-rows: auto;
+  column-gap: 24px;
+  grid-template-columns: calc(50% - 8px) calc(50% - 8px);
+
+  .previousBtn {
+    cursor: pointer;
+    -moz-box-align: center;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+    margin: 0px;
+    padding: 0px;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    place-self: stretch;
+    border-radius: 3px;
+    border: 1px solid rgb(230, 236, 241);
+    transition: border 200ms ease 0s;
+    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
+    text-decoration: none;
+
+    background-color: ${props => props.theme.colors.background};
+    color: ${props => props.theme.colors.text};
+  }
+
+  .nextBtn {
+    cursor: pointer;
+    -moz-box-align: center;
+    -moz-box-direction: normal;
+    -moz-box-orient: horizontal;
+    margin: 0px;
+    padding: 0px;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    place-self: stretch;
+    border-radius: 3px;
+    border: 1px solid rgb(230, 236, 241);
+    transition: border 200ms ease 0s;
+    box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
+    text-decoration: none;
+
+    background-color: ${props => props.theme.colors.background};
+    color: ${props => props.theme.colors.text};
+  }
+
+  .nextBtn:hover,
+  .previousBtn:hover {
+    text-decoration: none;
+    border: 1px solid #1ed3c6;
+  }
+
+  .nextBtn:hover .rightArrow,
+  .previousBtn:hover .leftArrow {
+    color: #1ed3c6;
+  }
+
+  .leftArrow {
+    display: block;
+    margin: 0px;
+    color: rgb(157, 170, 182);
+    flex: 0 0 auto;
+    font-size: 24px;
+    transition: color 200ms ease 0s;
+    padding: 16px;
+    padding-right: 16px;
+  }
+
+  .rightArrow {
+    flex: 0 0 auto;
+    font-size: 24px;
+    transition: color 200ms ease 0s;
+    padding: 16px;
+    padding-left: 16px;
+    display: block;
+    margin: 0px;
+    color: rgb(157, 170, 182);
+  }
+
+  .nextPreviousTitle {
+    display: block;
+    margin: 0px;
+    padding: 0px;
+    transition: color 200ms ease 0s;
+  }
+
+  .nextPreviousTitle span {
+    font-size: 16px;
+    line-height: 1.5;
+    font-weight: 500;
+  }
+
+  @media (max-width: 767px) {
+    display: block;
+    padding: 0 15px;
+
+    .previousBtn {
+      margin-bottom: 20px;
+    }
+  }
+`;
--- a/docs/src/components/styles/Sidebar.js
+++ b/docs/src/components/styles/Sidebar.js
@ -0,0 +1,92 @@
+import styled from '@emotion/styled';
+
+export const Sidebar = styled('aside')`
+  width: 100%;
+  border-right: 1px solid #ede7f3;
+  height: 100vh;
+  overflow: auto;
+  position: fixed;
+  padding-left: 24px;
+  position: -webkit-sticky;
+  position: -moz-sticky;
+  position: sticky;
+  top: 0;
+
+  background: ${props => props.theme.colors.background};
+
+  .rightSideTitle {
+    font-size: 10px;
+    line-height: 1;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    padding: 7px 24px 7px 16px;
+    border-left: 1px solid #e6ecf1;
+    border-left-color: rgb(230, 236, 241);
+
+    color: ${props => props.theme.colors.text};
+  }
+
+  .rightSideBarUL {
+    margin-top: 32px;
+  }
+
+  .rightSideBarUL li {
+    list-style-type: none;
+    border-left: 1px solid #e6ecf1;
+    border-left-color: rgb(230, 236, 241);
+  }
+
+  .rightSideBarUL li a {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1.5;
+    padding: 7px 24px 7px 16px;
+
+    color: ${props => props.theme.colors.text};
+  }
+
+  @media only screen and (max-width: 50rem) {
+    width: 100%;
+    position: relative;
+  }
+`;
+
+export const ListItem = styled(({ className, active, level, ...props }) => {
+  return (
+    <li className={className}>
+      <a href={props.to} {...props}>
+        {props.children}
+      </a>
+    </li>
+  );
+})`
+  list-style: none;
+
+  a {
+    color: #5c6975;
+    text-decoration: none;
+    font-weight: ${({ level }) => (level === 0 ? 700 : 400)};
+    padding: 0.45rem 0 0.45rem ${props => 2 + (props.level || 0) * 1}rem;
+    display: block;
+    position: relative;
+
+    &:hover {
+      color: #1ed3c6 !important;
+    }
+
+    ${props =>
+      props.active &&
+      `
+      color: #1ED3C6;
+      border-color: rgb(230,236,241) !important;
+      border-style: solid none solid solid;
+      border-width: 1px 0px 1px 1px;
+      background-color: #fff;
+    `} // external link icon
+    svg {
+      float: right;
+      margin-right: 1rem;
+    }
+  }
+`;
--- a/docs/src/components/theme.js
+++ b/docs/src/components/theme.js
@ -1,5 +1,5 @@
 export default {
  fonts: {
-    mono: '"SF Mono", "Roboto Mono", Menlo, monospace'
-  }
+    mono: '"SF Mono", "Roboto Mono", Menlo, monospace',
+  },
 };
--- a/docs/src/components/theme/index.js
+++ b/docs/src/components/theme/index.js
@ -0,0 +1,29 @@
+const baseTheme = {
+  fonts: {
+    mono: '"SF Mono", "Roboto Mono", Menlo, monospace',
+  },
+};
+
+const lightTheme = {
+  ...baseTheme,
+  colors: {
+    background: '#fff',
+    heading: '#000',
+    text: '#3B454E',
+    preFormattedText: 'rgb(245, 247, 249)',
+    link: '#1000EE',
+  },
+};
+
+const darkTheme = {
+  ...baseTheme,
+  colors: {
+    background: '#001933',
+    heading: '#fff',
+    text: '#fff',
+    preFormattedText: '#000',
+    link: '#1ED3C6',
+  },
+};
+
+export { lightTheme, darkTheme };
--- a/docs/src/components/theme/themeProvider.js
+++ b/docs/src/components/theme/themeProvider.js
@ -0,0 +1,51 @@
+import * as React from 'react';
+import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
+import { Global } from '@emotion/core';
+
+import { lightTheme, darkTheme } from './index';
+import Header from '../Header';
+import { baseStyles } from '../styles/GlobalStyles';
+
+class ThemeProvider extends React.Component {
+  state = {
+    isDarkThemeActive: false,
+  };
+
+  componentDidMount() {
+    this.retrieveActiveTheme();
+  }
+
+  retrieveActiveTheme = () => {
+    const isDarkThemeActive = JSON.parse(window.localStorage.getItem('isDarkThemeActive'));
+
+    this.setState({ isDarkThemeActive });
+  };
+
+  toggleActiveTheme = () => {
+    this.setState(prevState => ({ isDarkThemeActive: !prevState.isDarkThemeActive }));
+
+    window.localStorage.setItem('isDarkThemeActive', JSON.stringify(!this.state.isDarkThemeActive));
+  };
+
+  render() {
+    const { children, location } = this.props;
+
+    const { isDarkThemeActive } = this.state;
+
+    const currentActiveTheme = isDarkThemeActive ? darkTheme : lightTheme;
+
+    return (
+      <div>
+        <Global styles={baseStyles} />
+        <Header
+          location={location}
+          isDarkThemeActive={isDarkThemeActive}
+          toggleActiveTheme={this.toggleActiveTheme}
+        />
+        <EmotionThemeProvider theme={currentActiveTheme}>{children}</EmotionThemeProvider>
+      </div>
+    );
+  }
+}
+
+export default ThemeProvider;
--- a/docs/src/components/themeProvider.js
+++ b/docs/src/components/themeProvider.js
@ -1,16 +1,13 @@
-import * as React from "react";
-import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";
-import { default as defaultTheme } from "./theme";
+import * as React from 'react';
+import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
+import { default as defaultTheme } from './theme';
 import Header from './Header';
-import './styles.css';

-export default function ThemeProvider({ children, theme={}, location }) {
-	return (
-  	<div>
-  		<Header location={location} />
-	    <EmotionThemeProvider theme={{ ...defaultTheme, ...theme }}>
-	      {children}
-	    </EmotionThemeProvider>
+export default function ThemeProvider({ children, theme = {}, location }) {
+  return (
+    <div>
+      <Header location={location} />
+      <EmotionThemeProvider theme={{ ...defaultTheme, ...theme }}>{children}</EmotionThemeProvider>
    </div>
  );
 }
--- a/docs/src/custom-sw-code.js
+++ b/docs/src/custom-sw-code.js
@ -1,6 +1,6 @@
 workbox.routing.registerRoute(
-    new RegExp('https:.*min\.(css|js)'),
-    workbox.strategies.staleWhileRevalidate({
-        cacheName: 'cdn-cache'
-    })
-);
+  new RegExp('https:.*min.(css|js)'),
+  workbox.strategies.staleWhileRevalidate({
+    cacheName: 'cdn-cache',
+  })
+);
--- a/docs/src/html.js
+++ b/docs/src/html.js
@ -1,6 +1,6 @@
-import React from "react"
-import PropTypes from "prop-types"
-import config from "../config";
+import React from 'react';
+import PropTypes from 'prop-types';
+import config from '../config';

 export default class HTML extends React.Component {
  render() {
@ -9,35 +9,28 @@ export default class HTML extends React.Component {
        <head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1, shrink-to-fit=no"
-          />
-          {config.siteMetadata.ogImage ?
-            (<meta property="og:image" content={config.siteMetadata.ogImage} />) : null
-          }
+          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+          {config.siteMetadata.ogImage ? (
+            <meta property="og:image" content={config.siteMetadata.ogImage} />
+          ) : null}
          <meta property="twitter:card" content="summary_large_image" />
-          {config.siteMetadata.ogImage ?
-            (<meta property="twitter:image" content={config.siteMetadata.ogImage} />) : null
-          }
-          {config.siteMetadata.favicon ?
-            (<link rel="shortcut icon" type="image/svg" href={config.siteMetadata.favicon} />) : null
-          }
+          {config.siteMetadata.ogImage ? (
+            <meta property="twitter:image" content={config.siteMetadata.ogImage} />
+          ) : null}
+          {config.siteMetadata.favicon ? (
+            <link rel="shortcut icon" type="image/svg" href={config.siteMetadata.favicon} />
+          ) : null}
          <noscript key="noscript"></noscript>
          {this.props.headComponents}
        </head>
        <body {...this.props.bodyAttributes}>
          {this.props.preBodyComponents}
-          <div
-            key={`body`}
-            id="___gatsby"
-            dangerouslySetInnerHTML={{ __html: this.props.body }}
-          />
+          <div key={`body`} id="___gatsby" dangerouslySetInnerHTML={{ __html: this.props.body }} />
          {this.props.postBodyComponents}
          <script
-          defer
-          dangerouslySetInnerHTML={{
-            __html: `
+            defer
+            dangerouslySetInnerHTML={{
+              __html: `
            function navBarClose() {
              document.getElementById("navbar").classList.toggle("responsive");
            }
@ -46,12 +39,12 @@ export default class HTML extends React.Component {
                navBarClose();
              }
           });
-            `
-          }}
+            `,
+            }}
          />
        </body>
      </html>
-    )
+    );
  }
 }

@ -62,4 +55,4 @@ HTML.propTypes = {
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
-}
+};
--- a/docs/src/logo.png
+++ b/docs/src/logo.png
--- a/docs/src/templates/docs.js
+++ b/docs/src/templates/docs.js
@ -1,59 +1,35 @@
-import React, { Component } from "react";
-import Helmet from "react-helmet";
-import { graphql } from "gatsby";
-import MDXRenderer from "gatsby-plugin-mdx/mdx-renderer";
-import styled from "@emotion/styled";
-import { Layout, Link } from "$components";
+import React, { Component } from 'react';
+import Helmet from 'react-helmet';
+import { graphql } from 'gatsby';
+import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer';
+
+import { Layout, Link } from '$components';
 import NextPrevious from '../components/NextPrevious';
-import '../components/styles.css';
 import config from '../../config';
+import { Edit, StyledHeading, StyledMainWrapper } from '../components/styles/Docs';

 const forcedNavOrder = config.sidebar.forcedNavOrder;

-const Edit = styled('div')`
-  padding: 1rem 1.5rem;
-  text-align: right;
-
-  a {
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 1em;
-    text-decoration: none;
-    color: #555;
-    border: 1px solid rgb(211, 220, 228);
-    cursor: pointer;
-    border-radius: 3px;
-    transition: all 0.2s ease-out 0s;
-    text-decoration: none;
-    color: rgb(36, 42, 49);
-    background-color: rgb(255, 255, 255);
-    box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
-    height: 30px;
-    padding: 5px 16px;
-    &:hover {
-      background-color: rgb(245, 247, 249);
-    }
-  }
-`;
-
 export default class MDXRuntimeTest extends Component {
  render() {
    const { data } = this.props;
-    if(!data) {
+
+    if (!data) {
      return null;
    }
    const {
      allMdx,
      mdx,
      site: {
-        siteMetadata: { docsLocation, title }
-      }
+        siteMetadata: { docsLocation, title },
+      },
    } = data;
+
    const gitHub = require('../components/images/github.svg');

    const navItems = allMdx.edges
      .map(({ node }) => node.fields.slug)
-      .filter(slug => slug !== "/")
+      .filter(slug => slug !== '/')
      .sort()
      .reduce(
        (acc, cur) => {
@ -61,8 +37,9 @@ export default class MDXRuntimeTest extends Component {
            return { ...acc, [cur]: [cur] };
          }

-          let prefix = cur.split("/")[1];
-          if(config.gatsby && config.gatsby.trailingSlash) {
+          let prefix = cur.split('/')[1];
+
+          if (config.gatsby && config.gatsby.trailingSlash) {
            prefix = prefix + '/';
          }

@ -81,10 +58,8 @@ export default class MDXRuntimeTest extends Component {
      }, [])
      .concat(navItems.items)
      .map(slug => {
-        if(slug) {
-          const { node } = allMdx.edges.find(
-            ({ node }) => node.fields.slug === slug
-          );
+        if (slug) {
+          const { node } = allMdx.edges.find(({ node }) => node.fields.slug === slug);

          return { title: node.fields.title, url: node.fields.slug };
        }
@ -92,38 +67,42 @@ export default class MDXRuntimeTest extends Component {

    // meta tags
    const metaTitle = mdx.frontmatter.metaTitle;
+
    const metaDescription = mdx.frontmatter.metaDescription;
+
    let canonicalUrl = config.gatsby.siteUrl;
-    canonicalUrl = config.gatsby.pathPrefix !== '/' ? canonicalUrl + config.gatsby.pathPrefix : canonicalUrl;
+
+    canonicalUrl =
+      config.gatsby.pathPrefix !== '/' ? canonicalUrl + config.gatsby.pathPrefix : canonicalUrl;
    canonicalUrl = canonicalUrl + mdx.fields.slug;

    return (
      <Layout {...this.props}>
        <Helmet>
-          {metaTitle ? <title>{metaTitle}</title> : null }
+          {metaTitle ? <title>{metaTitle}</title> : null}
          {metaTitle ? <meta name="title" content={metaTitle} /> : null}
          {metaDescription ? <meta name="description" content={metaDescription} /> : null}
          {metaTitle ? <meta property="og:title" content={metaTitle} /> : null}
          {metaDescription ? <meta property="og:description" content={metaDescription} /> : null}
          {metaTitle ? <meta property="twitter:title" content={metaTitle} /> : null}
-          {metaDescription ? <meta property="twitter:description" content={metaDescription} /> : null}
+          {metaDescription ? (
+            <meta property="twitter:description" content={metaDescription} />
+          ) : null}
          <link rel="canonical" href={canonicalUrl} />
        </Helmet>
        <div className={'titleWrapper'}>
-          <h1 className={'title'}>
-            {mdx.fields.title}
-          </h1>
+          <StyledHeading>{mdx.fields.title}</StyledHeading>
          <Edit className={'mobileView'}>
-            {docsLocation &&
+            {docsLocation && (
              <Link className={'gitBtn'} to={`${docsLocation}/${mdx.parent.relativePath}`}>
                <img src={gitHub} alt={'Github logo'} /> Edit on GitHub
              </Link>
-            }
+            )}
          </Edit>
        </div>
-        <div className={'mainWrapper'}>
+        <StyledMainWrapper>
          <MDXRenderer>{mdx.body}</MDXRenderer>
-        </div>
+        </StyledMainWrapper>
        <div className={'addPaddTopBottom'}>
          <NextPrevious mdx={mdx} nav={nav} />
        </div>
--- a/docs/src/utils/algolia.js
+++ b/docs/src/utils/algolia.js
@ -1,4 +1,4 @@
-const config = require("../../config.js");
+const config = require('../../config.js');

 const pageQuery = `{
  pages: allMdx {
@ -19,15 +19,16 @@ const pageQuery = `{
      }
    }
  }
-}`
+}`;

 const flatten = arr =>
  arr.map(({ node: { frontmatter, fields, ...rest } }) => ({
    ...frontmatter,
    ...fields,
    ...rest,
-  }))
-const settings = { attributesToSnippet: [`excerpt:20`] }
+  }));
+
+const settings = { attributesToSnippet: [`excerpt:20`] };

 const indexName = config.header.search ? config.header.search.indexName : '';

@ -38,6 +39,6 @@ const queries = [
    indexName: `${indexName}`,
    settings,
  },
-]
+];

-module.exports = queries
+module.exports = queries;