diff --git a/src/components/shareable-url-modal/shareable-url-modal.js b/src/components/shareable-url-modal/shareable-url-modal.js index aba651767e..441bd37e7e 100644 --- a/src/components/shareable-url-modal/shareable-url-modal.js +++ b/src/components/shareable-url-modal/shareable-url-modal.js @@ -17,7 +17,6 @@ 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'; @@ -25,7 +24,6 @@ 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 }) => { + 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 + + ,{' '} + + GCP + +

+ } icon={InfoIcon} /> diff --git a/src/components/shareable-url-modal/shareable-url-modal.scss b/src/components/shareable-url-modal/shareable-url-modal.scss index d0b6ca15a0..f2c236a096 100644 --- 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 {