docs: add zoom functionality on images (#2403)

* Add zoom functionality on images

* Fixes in zooming images

* yarn.lock issue fix

www/docs/docusaurus.config.js

@@ -32,7 +32,8 @@ const config = {
       {
         apiKey: process.env.SEGMENT_API_KEY || "temp"
       }
-    ]
+    ],
+    require.resolve("docusaurus-plugin-image-zoom")
   ],
   themeConfig: {
     colorMode: {
@@ -54,6 +55,13 @@ const config = {
       theme: require("prism-react-renderer/themes/vsDark"),
       darkTheme: require("prism-react-renderer/themes/vsDark"),
     },
+    zoom: {
+      selector: '.markdown img',
+      background: {
+        light: 'rgb(255, 255, 255)',
+        dark: 'rgb(50, 50, 50)'
+      }
+    },
     navbar: {
       hideOnScroll: true,
       logo: {

www/docs/package.json

@@ -23,6 +23,7 @@
     "@svgr/webpack": "6.2.1",
     "algoliasearch-helper": "^3.8.2",
     "clsx": "^1.1.1",
+    "docusaurus-plugin-image-zoom": "^0.1.1",
     "docusaurus-plugin-segment": "^1.0.3",
     "docusaurus2-dotenv": "^1.4.0",
     "file-loader": "^6.2.0",

www/docs/src/css/custom.css

@@ -196,9 +196,17 @@ article {
   font-weight: 400;
 }
 
+.medium-zoom-overlay {
+  z-index: var(--ifm-z-index-overlay);
+}
+
+.medium-zoom-image--opened {
+  z-index: var(--ifm-z-index-overlay);
+}
+
 /* Medusa logo */
 .sidebar-bg img {
- width: 100px;   
+ width: 100px;
 }
 
 .padding-top--md {
@@ -373,7 +381,7 @@ html[data-theme="dark"] kbd {
 
 kbd {
   --ifm-color-emphasis-800: var(--ifm-color-gray-800);
-  
+
   font: 100% var(--ifm-font-family-monospace) !important;
 }
 
@@ -415,8 +423,8 @@ kbd {
   color: var(--ifm-menu-color)
 }
 
-.menu__link:hover, 
-.menu__link--active, 
+.menu__link:hover,
+.menu__link--active,
 .menu__list-item-collapsible:hover,
 .menu__list-item-collapsible--active,
 .redocusaurus .menu-content label:hover,
@@ -425,7 +433,7 @@ kbd {
   color: var(--ifm-menu-active);
 }
 
-.menu__link--active, 
+.menu__link--active,
 .menu__list-item-collapsible--active,
 .redocusaurus .menu-content label.active {
   font-weight: 600 !important;