Background gradients, migrate from CSS to SCSS, remove !important

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

@@ -1,17 +1,59 @@
+import dequal from 'dequal';
+import upperFirst from 'lodash/upperFirst';
+import camelCase from 'lodash/camelCase';
 import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { Button } from 'semantic-ui-react';
+import { Button, Image } from 'semantic-ui-react';
 import { FilePicker, Popup } from '../../../lib/custom-ui';
 
-import styles from './EditBackgroundStep.module.css';
+import ProjectBackgroundGradients from '../../../constants/ProjectBackgroundGradients';
+
+import styles from './EditBackgroundStep.module.scss';
+import globalStyles from '../../../styles.module.scss';
 
 const EditBackgroundStep = React.memo(
-  ({ defaultValue, isImageUpdating, onImageUpdate, onImageDelete, onBack }) => {
+  ({
+    defaultValue,
+    imageCoverUrl,
+    isImageUpdating,
+    onUpdate,
+    onImageUpdate,
+    onImageDelete,
+    onBack,
+  }) => {
     const [t] = useTranslation();
 
     const field = useRef(null);
 
+    const handleGradientClick = useCallback(
+      (_, { value }) => {
+        const background = {
+          type: 'gradient',
+          name: value,
+        };
+
+        if (!dequal(background, defaultValue)) {
+          onUpdate({
+            type: 'gradient',
+            name: value,
+          });
+        }
+      },
+      [defaultValue, onUpdate],
+    );
+
+    const handleImageClick = useCallback(() => {
+      const background = {
+        type: 'image',
+      };
+
+      if (!dequal(background, defaultValue)) {
+        onUpdate(background);
+      }
+    }, [defaultValue, onUpdate]);
+
     const handleFileSelect = useCallback(
       (file) => {
         onImageUpdate({
@@ -21,6 +63,14 @@ const EditBackgroundStep = React.memo(
       [onImageUpdate],
     );
 
+    const handleDeleteImageClick = useCallback(() => {
+      onImageDelete();
+    }, [onImageDelete]);
+
+    const handleRemoveClick = useCallback(() => {
+      onUpdate(null);
+    }, [onUpdate]);
+
     useEffect(() => {
       field.current.focus();
     }, []);
@@ -33,24 +83,76 @@ const EditBackgroundStep = React.memo(
           })}
         </Popup.Header>
         <Popup.Content>
+          <div className={styles.gradientButtons}>
+            {ProjectBackgroundGradients.map((gradient) => (
+              <Button
+                key={gradient}
+                type="button"
+                name="gradient"
+                value={gradient}
+                className={classNames(
+                  styles.gradientButton,
+                  defaultValue &&
+                    defaultValue.type === 'gradient' &&
+                    gradient === defaultValue.name &&
+                    styles.gradientButtonActive,
+                  globalStyles[`background${upperFirst(camelCase(gradient))}`],
+                )}
+                onClick={handleGradientClick}
+              />
+            ))}
+          </div>
+          {imageCoverUrl && (
+            /* TODO: wrap in button */
+            <Image
+              src={imageCoverUrl}
+              label={
+                defaultValue &&
+                defaultValue.type === 'image' && {
+                  corner: 'left',
+                  size: 'small',
+                  icon: {
+                    name: 'star',
+                    color: 'grey',
+                    inverted: true,
+                  },
+                  className: styles.imageLabel,
+                }
+              }
+              className={styles.image}
+              onClick={handleImageClick}
+            />
+          )}
           <div className={styles.action}>
             <FilePicker accept="image/*" onSelect={handleFileSelect}>
               <Button
                 ref={field}
-                content={t('action.uploadNewBackground')}
+                content={t('action.uploadNewImage')}
                 loading={isImageUpdating}
                 disabled={isImageUpdating}
                 className={styles.actionButton}
               />
             </FilePicker>
           </div>
+          {imageCoverUrl && (
+            <div className={styles.action}>
+              <Button
+                content={t('action.deleteImage')}
+                disabled={isImageUpdating}
+                className={styles.actionButton}
+                onClick={handleDeleteImageClick}
+              />
+            </div>
+          )}
           {defaultValue && (
-            <Button
-              negative
-              content={t('action.deleteBackground')}
-              disabled={isImageUpdating}
-              onClick={onImageDelete}
-            />
+            <div className={styles.action}>
+              <Button
+                content={t('action.removeBackground')}
+                disabled={isImageUpdating}
+                className={styles.actionButton}
+                onClick={handleRemoveClick}
+              />
+            </div>
           )}
         </Popup.Content>
       </>
@@ -60,8 +162,9 @@ const EditBackgroundStep = React.memo(
 
 EditBackgroundStep.propTypes = {
   defaultValue: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  imageCoverUrl: PropTypes.string,
   isImageUpdating: PropTypes.bool.isRequired,
-  // onUpdate: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func.isRequired,
   onImageUpdate: PropTypes.func.isRequired,
   onImageDelete: PropTypes.func.isRequired,
   onBack: PropTypes.func.isRequired,
@@ -69,6 +172,7 @@ EditBackgroundStep.propTypes = {
 
 EditBackgroundStep.defaultProps = {
   defaultValue: undefined,
+  imageCoverUrl: undefined,
 };
 
 export default EditBackgroundStep;