docs: added introduction to user guide (#2075)

* docs: added introduction to user guide

* remove link in header

* added UI icons

* small changes

www/docs/src/components/UiIcon/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import {useColorMode} from '@docusaurus/theme-common';
+
+export default function UiIcon ({ lightIcon, darkIcon = '' }) {
+  const {colorMode} = useColorMode();
+  const icon = colorMode === 'dark' && darkIcon ? darkIcon : lightIcon;
+
+  return (
+    <img src={icon} className="ui-icon" />
+  )
+}

www/docs/src/css/custom.css

@@ -330,4 +330,21 @@ html[data-theme="dark"] .redocusaurus .expanded + tr > td > div {
 
 .redocusaurus a {
   color: var(--ifm-link-color) !important;
+}
+
+/* User Guide Styling */
+html[data-theme="dark"] kbd {
+  --ifm-color-emphasis-0: var(--ifm-color-gray-200);
+}
+
+kbd {
+  --ifm-color-emphasis-800: var(--ifm-color-gray-800);
+  
+  font: 100% var(--ifm-font-family-monospace) !important;
+}
+
+.ui-icon {
+  vertical-align: sub;
+  width: 20px;
+  height: 20px;
 }