docs: added "Customers Overview" documentation (#2083)

docs/content/user-guide/customers/index.mdx

@@ -0,0 +1,54 @@
+import UiIcon from '@site/src/components/UiIcon';
+
+# Customers Overview
+
+In this document, you’ll get an overview of the customer listing page and all the things you can do with it.
+
+## View List of Customers
+
+You can view the list of available orders in your ecommerce store by clicking on Customers from the sidebar menu.
+
+![Customers List](https://i.imgur.com/VXclXqd.png)
+
+In the list, you can see customer details such as the customer’s name, email address, and the number of orders.
+
+:::tip
+
+If there are more than 15 customers, the list will be split into multiple pages. You can navigate between pages by clicking the arrows at the bottom of the list.
+
+:::
+
+## View List of Customer Groups
+
+Customer groups allow you to put together a set of customers for business purposes. For example, you can create a VIP customer group for customers that you want to give special discounts.
+
+You can view the list of customer groups on the Customer Groups page by clicking on the grey Groups headline next to the Customers headline.
+
+![Customer Groups List](https://i.imgur.com/z1nEvhX.png)
+
+In the list, you can see group details such as the group’s title and the number of customers in the group.
+
+:::tip
+
+If there are more than 15 customer groups, the list will be split into multiple pages. You can navigate between pages by clicking the arrows at the bottom of the list.
+
+:::
+
+## Search Customers
+
+You can search for customers by clicking the <UiIcon lightIcon="https://i.imgur.com/efyG8WQ.png" darkIcon="https://i.imgur.com/NgocLvX.png" alt="magnifier" /> icon at the top right of the customer list. When you search for customers, you search by their first name, last name, and email.
+
+![Search customers by name](https://i.imgur.com/c0IFMej.png)
+
+## Search Customer Groups
+
+You can search for customer groups by clicking the <UiIcon lightIcon="https://i.imgur.com/efyG8WQ.png" darkIcon="https://i.imgur.com/NgocLvX.png" alt="magnifier" /> icon at the top right of the group list. When you search groups, you search by the customer group’s title.
+
+![Search customer groups by title](https://i.imgur.com/aksN5eW.png)
+
+## What More Can you Do with Customers?
+
+The Customers pages in the Medusa Admin include many functionalities including:
+
+- Manage and View a Customer’s Details
+- Manage and View a Customer Group

docs/content/user-guide/orders/index.mdx

@@ -108,7 +108,7 @@ You can search for draft orders by clicking the <UiIcon lightIcon="https://i.img
 
 ![Search draft orders by email](https://i.imgur.com/el0Y9WS.png)
 
-## What More Can you Do With Orders?
+## What More Can you Do with Orders?
 
 The Orders pages in the Medusa Admin include many functionalities including:
 

docs/content/user-guide/products/index.mdx

@@ -164,3 +164,10 @@ To delete a product export:
 - Click on the Delete button.
 
 ![Click on the delete button in the activity panel](https://i.imgur.com/KWZ195h.png)
+
+## What More Can you Do with Products?
+
+The Products pages in the Medusa Admin include many functionalities including:
+
+- Manage and View Product Details.
+- Manage and View Collection Details.

www/docs/sidebars.js

@@ -516,6 +516,17 @@ module.exports = {
         }
       ]
     },
+    {
+      type: "category",
+      collapsed: false,
+      label: "Customers",
+      items: [
+        {
+          type: "doc",
+          id: "user-guide/customers/index"
+        }
+      ]
+    },
   ],
   servicesSidebar: [
     {

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

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