From ed819ce299e2db2eeb00312ee1fec35fbf049be4 Mon Sep 17 00:00:00 2001 From: LASER-Yi Date: Fri, 3 Jun 2022 11:29:39 +0800 Subject: [PATCH] Add color to the icon in upload modal --- .../src/components/forms/MovieUploadForm.tsx | 27 ++++++++++++++++--- .../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 = ({ } }, [value?.state]); + const color = useMemo(() => { + switch (value?.state) { + case "valid": + return "green"; + case "warning": + return "yellow"; + case "error": + return "red"; + default: + return undefined; + } + }, [value?.state]); + return ( - {/* TODO: Color */} - + + + ); }, 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 = ({ } }, [value?.state]); + const color = useMemo(() => { + switch (value?.state) { + case "valid": + return "green"; + case "warning": + return "yellow"; + case "error": + return "red"; + default: + return undefined; + } + }, [value?.state]); + return ( - {/* TODO: Color */} - + + + ); },