diff options
| author | LASER-Yi <[email protected]> | 2022-06-03 11:29:39 +0800 |
|---|---|---|
| committer | LASER-Yi <[email protected]> | 2022-06-03 11:29:39 +0800 |
| commit | ed819ce299e2db2eeb00312ee1fec35fbf049be4 (patch) | |
| tree | 8fc3b099d1213cd449a3958dda74241c344b8ee0 | |
| parent | 4bb2cf65e6a0695ad437e0d788f53842022df8fe (diff) | |
| download | bazarr-ed819ce299e2db2eeb00312ee1fec35fbf049be4.tar.gz bazarr-ed819ce299e2db2eeb00312ee1fec35fbf049be4.zip | |
Add color to the icon in upload modal
| -rw-r--r-- | frontend/src/components/forms/MovieUploadForm.tsx | 27 | ||||
| -rw-r--r-- | frontend/src/components/forms/SeriesUploadForm.tsx | 27 |
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> ); }, |