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}`}
- - ✓ Image found
+ - {displayText}