Add validation to background field

client/src/components/Project/ActionsPopup/ActionsPopup.jsx

@@ -54,17 +54,10 @@ const ActionsStep = React.memo(
     );
 
     const handleBackgroundImageDelete = useCallback(() => {
-      const data = {
+      onUpdate({
         backgroundImage: null,
-      };
-
-      // TODO: move to services?
-      if (project.background && project.background.type === 'image') {
-        data.background = null;
-      }
-
-      onUpdate(data);
-    }, [project.background, onUpdate]);
+      });
+    }, [onUpdate]);
 
     if (step) {
       if (step) {

client/src/components/Project/ActionsPopup/EditBackgroundStep.jsx

@@ -9,6 +9,7 @@ import { Button, Image } from 'semantic-ui-react';
 import { FilePicker, Popup } from '../../../lib/custom-ui';
 
 import ProjectBackgroundGradients from '../../../constants/ProjectBackgroundGradients';
+import { ProjectBackgroundTypes } from '../../../constants/Enums';
 
 import styles from './EditBackgroundStep.module.scss';
 import globalStyles from '../../../styles.module.scss';
@@ -30,15 +31,12 @@ const EditBackgroundStep = React.memo(
     const handleGradientClick = useCallback(
       (_, { value }) => {
         const background = {
-          type: 'gradient',
+          type: ProjectBackgroundTypes.GRADIENT,
           name: value,
         };
 
         if (!dequal(background, defaultValue)) {
-          onUpdate({
-            type: 'gradient',
-            name: value,
-          });
+          onUpdate(background);
         }
       },
       [defaultValue, onUpdate],
@@ -46,7 +44,7 @@ const EditBackgroundStep = React.memo(
 
     const handleImageClick = useCallback(() => {
       const background = {
-        type: 'image',
+        type: ProjectBackgroundTypes.IMAGE,
       };
 
       if (!dequal(background, defaultValue)) {
@@ -93,7 +91,7 @@ const EditBackgroundStep = React.memo(
                 className={classNames(
                   styles.gradientButton,
                   defaultValue &&
-                    defaultValue.type === 'gradient' &&
+                    defaultValue.type === ProjectBackgroundTypes.GRADIENT &&
                     gradient === defaultValue.name &&
                     styles.gradientButtonActive,
                   globalStyles[`background${upperFirst(camelCase(gradient))}`],

client/src/components/Project/ActionsPopup/EditBackgroundStep.module.scss

@@ -66,6 +66,10 @@
   .image {
     cursor: pointer;
     margin-bottom: 8px;
+
+    &:hover {
+      opacity: 0.9;
+    }
   }
 
   .imageLabel {