docs: added introduction to user guide (#2075)

* docs: added introduction to user guide

* remove link in header

* added UI icons

* small changes

docs/content/user-guide/index.mdx

@@ -0,0 +1,71 @@
+import UiIcon from '@site/src/components/UiIcon';
+
+# Welcome to Medusa’s User Guide
+
+This user guide is intended to help users learn how they can use the Medusa admin to perform different operational and ecommerce tasks.
+
+:::tip
+
+If you don’t have a Medusa admin yet, you can check [our live demo](https://demo.medusajs.com/)!
+
+:::
+
+![Medusa Admin Overview](https://i.imgur.com/RdrJznk.png)
+
+## Accessing the Medusa Admin
+
+To access the admin panel of your ecommerce store, you must have a URL to the deployed website.
+
+Once you open the URL, you’ll be asked to log in.
+
+![Log In Page](https://i.imgur.com/4U2Saed.png)
+
+You must use your user’s email and password to log in. If you’re unsure what your email and password are, please contact the technical personnel that deployed your Medusa server and admin.
+
+## Tour of Medusa Admin
+
+After you log into your Medusa admin, you can see a sidebar menu, a search bar at the top, some icons at the top right, and in the middle the content of the page you’re currently on.
+
+### Sidebar Menu
+
+The sidebar menu includes the main navigation of your Medusa admin. You can use it to navigate between different pages, such as Products or Orders pages.
+
+You can also see your team members in the sidebar menu. These are the users that can access the Medusa Admin.
+
+![Sidebar Menu](https://i.imgur.com/54y2omy.png)
+
+### Search Bar
+
+You’ll find at the top of the page a search bar. You can use this search bar to search orders, products, customers, and more information available in your Medusa Admin.
+
+:::info Handy Shortcut
+
+You can open the search window using the shortcuts:
+
+Windows and Linux: <kbd>CTRL</kbd> + <kbd>K</kbd>
+
+Mac OS: <kbd>⌘</kbd> + <kbd>K</kbd>
+
+:::
+
+![Search Window](https://i.imgur.com/kIeoiW3.png)
+
+You can either select a resolve with your mouse, or use the up and down arrows on your keyboard to navigate between the results, then choosing a result by hitting the Enter key.
+
+### Check Notifications
+
+At the top right you’ll find a bell icon <UiIcon lightIcon="https://i.imgur.com/u7dU3tC.png" darkIcon="https://i.imgur.com/dlrSybv.png" />. Clicking this icon opens a side window to view any notifications you might have. You can use this to view notifications such as completed product exports.
+
+![Notifications Window](https://i.imgur.com/bmDQ4Cj.png)
+
+### Quick Actions
+
+At the top right, you’ll find an avatar icon. By clicking this icon, you’ll see a dropdown. You can use this dropdown to quickly access settings or sign out.
+
+![Quick Actions Dropdown](https://i.imgur.com/Og7F5oz.png)
+
+### Need Help?
+
+At the top right, you’ll find a question mark icon <UiIcon lightIcon="https://i.imgur.com/3vIBV8P.png" darkIcon="https://i.imgur.com/eNVrxpo.png" />. When you click on this icon, a form will pop up. You can use this form to send the Medusa team a message asking for help. Our team usually responds in a few hours on business days.
+
+![Get Help Form](https://i.imgur.com/8Fpa0gr.png)

www/docs/sidebars.js

@@ -488,6 +488,13 @@ module.exports = {
       label: "Contribution Guidelines",
     },
   ],
+  userGuideSidebar: [
+    {
+      type: "doc",
+      id: "user-guide/index",
+      label: "Introduction"
+    }
+  ],
   servicesSidebar: [
     {
       type: 'autogenerated',

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;
 }