Merge pull request #4451 from michaldziuba03/nv-2053-remove-brand-logo

feat: add abity to remove uploaded brand logo
novuhq · Oct 17, 2023 · 598881e · 598881e
2 parents 736e6fc + 5b4538b
commit 598881e
Showing 1 changed file with 109 additions and 35 deletions.
diff --git a/apps/web/src/pages/brand/tabs/BrandingForm.tsx b/apps/web/src/pages/brand/tabs/BrandingForm.tsx
@@ -1,9 +1,10 @@
-import { Flex, Grid, Group, Input, LoadingOverlay, Stack, useMantineTheme } from '@mantine/core';
+import { Flex, Grid, Group, Input, LoadingOverlay, Stack, UnstyledButton, useMantineTheme } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { useMutation } from '@tanstack/react-query';
 import axios from 'axios';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { Controller, useForm } from 'react-hook-form';
+import styled from '@emotion/styled';
 import { useOutletContext } from 'react-router-dom';
 import { IOrganizationEntity } from '@novu/shared';
 
@@ -12,7 +13,7 @@ import { getSignedUrl } from '../../../api/storage';
 import Card from '../../../components/layout/components/Card';
 import { Button, ColorInput, colors, Select } from '../../../design-system';
 import { inputStyles } from '../../../design-system/config/inputs.styles';
-import { Upload } from '../../../design-system/icons';
+import { Trash, Upload } from '../../../design-system/icons';
 import { successMessage } from '../../../utils/notifications';
 
 const mimeTypes = {
@@ -55,6 +56,11 @@ export function BrandingForm() {
     }
   }, [organization, setValue]);
 
+  function removeFile() {
+    setValue('file', '');
+    setValue('image', '');
+  }
+
   async function handleUpload(files: File[]) {
     const file = files[0];
     if (!file) return;
@@ -82,10 +88,12 @@ export function BrandingForm() {
     setValue('image', path);
   }
 
+  const dropzoneRef = useRef<() => void>(null);
+
   async function saveBrandsForm({ color, fontFamily, image }) {
     const brandData = {
       color,
-      logo: image,
+      logo: image || null,
       fontFamily,
     };
 
@@ -110,38 +118,62 @@ export function BrandingForm() {
                         label="Your Logo"
                         description="Will be used on email templates and inbox"
                       >
-                        <Dropzone
-                          styles={{
-                            root: {
-                              borderRadius: '7px',
-                              border: ` 1px solid ${
-                                theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[5]
-                              }`,
-                              background: 'none',
-                            },
-                          }}
-                          accept={Object.keys(mimeTypes)}
-                          multiple={false}
-                          onDrop={handleUpload}
-                          data-test-id="upload-image-button"
-                        >
-                          <Group
-                            position="center"
-                            spacing="xl"
-                            style={{ minHeight: 100, minWidth: 100, pointerEvents: 'none' }}
+                        <DropzoneWrapper>
+                          {field.value && (
+                            <DropzoneOverlay>
+                              <DropzoneButton type="button" onClick={() => dropzoneRef.current?.()}>
+                                <Upload style={{ width: 20, height: 20 }} />
+                                Update
+                              </DropzoneButton>
+
+                              <DropzoneButton type="button" onClick={removeFile}>
+                                <Trash style={{ width: 20, height: 20 }} />
+                                Remove
+                              </DropzoneButton>
+                            </DropzoneOverlay>
+                          )}
+                          <Dropzone
+                            styles={{
+                              root: {
+                                background: 'none',
+                                border: 'none',
+                              },
+                            }}
+                            openRef={dropzoneRef}
+                            accept={Object.keys(mimeTypes)}
+                            multiple={false}
+                            onDrop={handleUpload}
+                            data-test-id="upload-image-button"
                           >
-                            {!field.value ? (
-                              <Upload style={{ width: 80, height: 80, color: colors.B60 }} />
-                            ) : (
-                              <img
-                                data-test-id="logo-image-wrapper"
-                                src={field.value}
-                                style={{ width: 100, height: 100, objectFit: 'contain' }}
-                                alt="avatar"
-                              />
-                            )}
-                          </Group>
-                        </Dropzone>
+                            <Group
+                              position="center"
+                              spacing="xl"
+                              style={{ minHeight: 100, minWidth: 100, pointerEvents: 'none' }}
+                            >
+                              {!field.value ? (
+                                <div
+                                  style={{
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    color: colors.B60,
+                                    gap: '4px',
+                                  }}
+                                >
+                                  <Upload style={{ width: 20, height: 20 }} />
+                                  Upload
+                                </div>
+                              ) : (
+                                <img
+                                  data-test-id="logo-image-wrapper"
+                                  src={field.value}
+                                  style={{ width: 100, height: 100, objectFit: 'contain' }}
+                                  alt="avatar"
+                                />
+                              )}
+                            </Group>
+                          </Dropzone>
+                        </DropzoneWrapper>
                       </Input.Wrapper>
                     )}
                     control={control}
@@ -211,3 +243,45 @@ export function BrandingForm() {
     </Stack>
   );
 }
+
+const DropzoneButton: any = styled(UnstyledButton)`
+  color: ${colors.B70};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+
+  &:hover {
+    color: ${colors.white};
+  }
+`;
+
+const DropzoneOverlay = styled('div')`
+  display: none;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  z-index: 20;
+  border-radius: 7px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: ${colors.BGDark + 'D6'};
+  backdrop-filter: blur(5px);
+  width: 100%;
+  height: 100%;
+`;
+
+const DropzoneWrapper = styled('div')`
+  position: relative;
+  border-radius: 7px;
+  border: 1px solid ${({ theme }) => (theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[5])};
+
+  &:hover {
+    cursor: pointer;
+
+    ${DropzoneOverlay} {
+      display: flex;
+    }
+  }
+`;