diff --git a/src/components/@shared/FormFields/ContainerInput/Info.module.css b/src/components/@shared/FormFields/ContainerInput/Info.module.css index a9a95d6d8..ed25b655f 100644 --- a/src/components/@shared/FormFields/ContainerInput/Info.module.css +++ b/src/components/@shared/FormFields/ContainerInput/Info.module.css @@ -21,7 +21,11 @@ color: var(--brand-alert-green); } -.url { +.info li.error { + color: var(--brand-alert-red); +} + +.contianer { margin: 0; font-size: var(--font-size-base); line-height: var(--line-height); @@ -31,11 +35,6 @@ padding-right: calc(var(--spacer) / 2); } -.warning { - margin-top: calc(var(--spacer) / 3); - margin-left: 0; -} - .removeButton { cursor: pointer; border: none; diff --git a/src/components/@shared/FormFields/ContainerInput/Info.tsx b/src/components/@shared/FormFields/ContainerInput/Info.tsx index 9054b3101..a24332273 100644 --- a/src/components/@shared/FormFields/ContainerInput/Info.tsx +++ b/src/components/@shared/FormFields/ContainerInput/Info.tsx @@ -4,17 +4,22 @@ import styles from './Info.module.css' export default function ImageInfo({ image, tag, + valid, handleClose }: { image: string tag: string + valid: boolean handleClose(): void }): ReactElement { + const displayText = valid + ? '✓ Image found, container checksum automatically added!' + : 'x Container checksum could not be fetched automatically, please add it manually' return (
-

{`${image}:${tag}`}

+

{`Image: ${image} Tag: ${tag}`}