feat: Add click to zoom for images

platform/docs/docs/userManuals/index.md

@@ -1,9 +1,9 @@
 ---
 sidebar_position: 2
-sidebar_label: Study list
+sidebar_label: Study List
 ---
 
-# Study list
+# Study List
 
 ## Overview
 The first page you will see when the viewer is loaded is the `Study List`.

platform/docs/docusaurus.config.js

@@ -72,6 +72,7 @@ const isI18nStaging = process.env.I18N_STAGING === 'true';
   // },
   themes: ['@docusaurus/theme-live-codeblock'],
   plugins: [
+    'plugin-image-zoom', // 3rd party plugin for image click to pop
     [
       '@docusaurus/plugin-client-redirects',
       {

platform/docs/package.json

@@ -26,6 +26,7 @@
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
     "file-loader": "^6.2.0",
+    "plugin-image-zoom": "ataft/plugin-image-zoom",
     "url-loader": "^4.1.1"
   },
   "peerDependencies": {

platform/docs/src/css/custom.css

@@ -26,6 +26,7 @@
   --ifm-color-secondary: #e8f7f7;
   --ifm-code-font-size: 95%;
   --ifm-background-color: #ffffff;
+  --ifm-zoom-image-background-color: #ffffffe5;
   --ifm-background-surface-color: #ffffff;
   --ifm-menu-color: #1e427e;
   --ifm-code-background: #e8f7f7;
@@ -55,6 +56,7 @@ html[data-theme="dark"] {
   --ifm-color-secondary: #050719;
   --ifm-blockquote-color: #7bb2ce;
   --ifm-background-color: #080b2b;
+  --ifm-zoom-image-background-color: #080b2be5;
   --ifm-background-surface-color: #080b2b;
   --ifm-menu-color: #7bb2ce;
   --ifm-toc-link-color: #7bb2ce;
@@ -67,6 +69,10 @@ html[data-theme="dark"] {
   --ifm-alert-color: #000000;
 }
 
+.medium-zoom-overlay {
+  background: var(--ifm-zoom-image-background-color) !important;
+}
+
 .header-github-link:hover {
   opacity: 0.6;
 }