Improve documentation (#349)

* Improve documentation content
* Improve documentation style

docs/src/css/custom.css

@@ -15,7 +15,7 @@
   --ifm-font-family-monospace: 'Roboto Mono',SFMono-Regular, Menlo, Monaco, Consolas,'Liberation Mono', 'Courier New', monospace;
   --ifm-font-size-base: 14px;
   --ifm-base-spacing: 14px;
-  --ifm-line-height-base: var(--twenty-body-regular-line-height);
+  --ifm-line-height-base: 145%;
   --ifm-font-weight-base: var(--twenty-body-regular-font-weight);
   --ifm-color-primary: #11181c;
   --ifm-code-font-size: 95%;
@@ -25,7 +25,7 @@
   --ifm-toc-padding-vertical: 0.5rem;
   --ifm-breadcrumb-border-radius: 8px;
   --ifm-navbar-link-color: #687076;
-
+  --ifm-link-decoration: underline;
 
   --ifm-heading-font-weight: 600;
 
@@ -74,17 +74,29 @@ html {
 }
 
 .DocSearch-Button {
+  height: 32px !important;
   border-radius: 8px !important;
 }
 
-.navbar__items--right svg > path {
-  fill: #687076 !important;
-}
-
 .DocSearch-Button-Placeholder {
   padding: 0 100px 0 6px !important;
 }
 
+.DocSearch-Button .DocSearch-Search-Icon {
+  color: inherit !important;
+  width: 13px;
+}
+
+.DocSearch-Button-Key {
+  height: 14px !important;
+  width: 14px !important;
+  font-size: 9px !important;
+}
+
+.DocSearch-Button-Keys {
+  min-width: inherit !important;
+}
+
 .theme-edit-this-page {
   font-size: 70%;
 }
@@ -104,6 +116,10 @@ li.coming-soon a {
   cursor: default;
 }
 
+a.menu__link, a.navbar__item {
+  text-decoration: none;
+}
+
 li.coming-soon a::after {
   float: right;
   content: "soon";
@@ -120,8 +136,23 @@ li.coming-soon a::after {
 
 .menu__list-item-collapsible > a {
   text-transform: uppercase;
+  font-size:11px;
+  color: #B3B3B3;
 }
 
+.menu__list-item-collapsible > a:hover {
+  color: #B3B3B3;
+}
+
+.menu__list-item-collapsible > a {
+  text-transform: uppercase;
+  font-size:12px;
+}
+.menu__list-item-collapsible:hover {
+  background: inherit;
+}
+
+
 .theme-doc-sidebar-item-category {
   padding-top: 1.5rem;
 }
@@ -139,4 +170,16 @@ li.coming-soon a::after {
 
 .fullHeightPlayground {
   height: calc(100vh - var(--ifm-navbar-height));
+}
+
+.display-none {
+  display: none;
+}
+
+.table-of-contents__link {
+  text-decoration: none;
+}
+
+a.table-of-contents__link:hover{
+  text-decoration: underline;
 }

docs/src/theme/DocSidebarItem/Link/index.js

@@ -6,7 +6,7 @@ import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/Icon/ExternalLink';
 import styles from './styles.module.css';
-import { TbFaceIdError, TbTerminal2, TbCloud, TbServer, TbBolt, TbApps, TbTopologyStar, TbChartDots, TbBug } from "react-icons/tb";
+import { TbFaceIdError, TbTerminal2, TbCloud, TbServer, TbBolt, TbApps, TbTopologyStar, TbChartDots, TbBug, TbVocabulary } from "react-icons/tb";
 
 
 export default function DocSidebarItemLink({
@@ -29,6 +29,7 @@ export default function DocSidebarItemLink({
     'TbTopologyStar': TbTopologyStar,
     'TbChartDots': TbChartDots,
     'TbBug': TbBug,
+    'TbVocabulary': TbVocabulary
   };
 
   let IconComponent = customProps && customProps.icon ? icons[customProps.icon] : TbFaceIdError;

docs/src/theme/Icon/DarkMode/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TbMoon } from 'react-icons/tb';
+import {useColorMode} from '@docusaurus/theme-common';
+
+
+export default function IconDarkMode(props) {
+  const { colorMode } = useColorMode().colorMode;
+  return colorMode === 'dark' ? <TbMoon /> : <></>;
+}

docs/src/theme/Icon/Home/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TbHome } from 'react-icons/tb';
+export default function IconHome(props) {
+  return <TbHome size={14} />;
+}

docs/src/theme/Icon/LightMode/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TbSun } from 'react-icons/tb';
+import {useColorMode} from '@docusaurus/theme-common';
+
+
+export default function IconLightMode(props) {
+  const { colorMode } = useColorMode().colorMode;
+  return colorMode === 'dark' ? <></>: <TbSun /> ;
+}