include tooltip

Signed-off-by: huongg <[email protected]>
kedro-org · May 20, 2024 · 2199e00 · 2199e00
1 parent 0661d32
commit 2199e00
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 9 deletions.
diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js
@@ -17,15 +17,13 @@ import {
 } from '../../config';
 
 import Button from '../ui/button';
-import CopyIcon from '../icons/copy';
 import InfoIcon from '../icons/info';
 import Dropdown from '../ui/dropdown';
 import IconButton from '../ui/icon-button';
 import Input from '../ui/input';
 import LoadingIcon from '../icons/loading';
 import Modal from '../ui/modal';
 import MenuOption from '../ui/menu-option';
-import Tooltip from '../ui/tooltip';
 import Toggle from '../ui/toggle';
 
 import './shareable-url-modal.scss';
@@ -563,12 +561,39 @@ const ShareableUrlModal = ({ onToggleModal, visible }) => {
                 <IconButton
                   ariaLabel="The endpoint URL information"
                   className="shareable-url-modal__information-icon"
-                  labelText={`The endpoint URL is the link
-                    to where your Kedro-Viz will be hosted.
-                    For information on obtaining
-                    the endpoint URL, please
-                    refer to the documentation
-                    for AWS, Azure, and GCP.`}
+                  labelText={
+                    <p>
+                      The endpoint URL is the link to where your Kedro-Viz will
+                      be hosted. For information on obtaining the endpoint URL,
+                      please refer to the documentation for{' '}
+                      <a
+                        className="shareable-url-modal__input-label-text"
+                        href={KEDRO_VIZ_PUBLISH_AWS_DOCS_URL}
+                        rel="noreferrer"
+                        target="_blank"
+                      >
+                        AWS
+                      </a>
+                      ,{' '}
+                      <a
+                        className="shareable-url-modal__input-label-text"
+                        href={KEDRO_VIZ_PUBLISH_AZURE_DOCS_URL}
+                        rel="noreferrer"
+                        target="_blank"
+                      >
+                        Azure
+                      </a>
+                      ,{' '}
+                      <a
+                        className="shareable-url-modal__input-label-text"
+                        href={KEDRO_VIZ_PUBLISH_GCP_DOCS_URL}
+                        rel="noreferrer"
+                        target="_blank"
+                      >
+                        GCP
+                      </a>
+                    </p>
+                  }
                   icon={InfoIcon}
                 />
               </div>

diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss
@@ -13,6 +13,7 @@
   // --color-divider: #{variables.$black-500};
   --input-bg: #{variables.$white-100};
   --input-shadow: #{variables.$white-800};
+  --color-btn-bg: #{variables.$white-500};
 }
 
 .kui-theme--dark {
@@ -27,6 +28,7 @@
   --color-divider: #{variables.$black-500};
   --input-bg: #{variables.$slate-700};
   --input-shadow: #{variables.$slate-900};
+  --color-btn-bg: #{variables.$black-600};
 }
 
 .shareable-url-modal {
@@ -194,6 +196,10 @@
       margin-bottom: 0;
     }
 
+    .shareable-url-modal__input-label-text {
+      color: inherit;
+    }
+
     .shareable-url-modal__information-icon {
       height: 40px;
 
@@ -370,7 +376,7 @@
 
   .button__btn--secondary {
     // double check the hex colour with Step
-    background-color: #{variables.$black-600};
+    background-color: var(--color-btn-bg);
   }
 
   .shareable-url-modal__republished-action-text {