Add color to the icon in upload modal

2 files changed, 48 insertions, 6 deletions

diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx
index 554f89e7c..0a2dcf41b 100644
--- a/frontend/src/components/forms/MovieUploadForm.tsx
+++ b/frontend/src/components/forms/MovieUploadForm.tsx
@@ -15,7 +15,14 @@ import {
   faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, Checkbox, Divider, Stack, Text } from "@mantine/core";
+import {
+  Button,
+  Checkbox,
+  Divider,
+  MantineColor,
+  Stack,
+  Text,
+} from "@mantine/core";
 import { useForm } from "@mantine/hooks";
 import { isString } from "lodash";
 import { FunctionComponent, useEffect, useMemo } from "react";
@@ -153,10 +160,24 @@ const MovieUploadForm: FunctionComponent<Props> = ({
             }
           }, [value?.state]);
 
+          const color = useMemo<MantineColor | undefined>(() => {
+            switch (value?.state) {
+              case "valid":
+                return "green";
+              case "warning":
+                return "yellow";
+              case "error":
+                return "red";
+              default:
+                return undefined;
+            }
+          }, [value?.state]);
+
           return (
             <TextPopover text={value?.messages}>
-              {/* TODO: Color */}
-              <FontAwesomeIcon icon={icon}></FontAwesomeIcon>
+              <Text color={color} inline>
+                <FontAwesomeIcon icon={icon}></FontAwesomeIcon>
+              </Text>
             </TextPopover>
           );
         },
diff --git a/frontend/src/components/forms/SeriesUploadForm.tsx b/frontend/src/components/forms/SeriesUploadForm.tsx
index 7f75540c6..e845b0310 100644
--- a/frontend/src/components/forms/SeriesUploadForm.tsx
+++ b/frontend/src/components/forms/SeriesUploadForm.tsx
@@ -19,7 +19,14 @@ import {
   faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Button, Checkbox, Divider, Stack, Text } from "@mantine/core";
+import {
+  Button,
+  Checkbox,
+  Divider,
+  MantineColor,
+  Stack,
+  Text,
+} from "@mantine/core";
 import { useForm } from "@mantine/hooks";
 import { isString } from "lodash";
 import { FunctionComponent, useEffect, useMemo } from "react";
@@ -177,10 +184,24 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
             }
           }, [value?.state]);
 
+          const color = useMemo<MantineColor | undefined>(() => {
+            switch (value?.state) {
+              case "valid":
+                return "green";
+              case "warning":
+                return "yellow";
+              case "error":
+                return "red";
+              default:
+                return undefined;
+            }
+          }, [value?.state]);
+
           return (
             <TextPopover text={value?.messages}>
-              {/* TODO: Color */}
-              <FontAwesomeIcon icon={icon}></FontAwesomeIcon>
+              <Text color={color} inline>
+                <FontAwesomeIcon icon={icon}></FontAwesomeIcon>
+              </Text>
             </TextPopover>
           );
         },