diff --git a/apps/web/src/pages/brand/tabs/BrandingForm.tsx b/apps/web/src/pages/brand/tabs/BrandingForm.tsx
index 6abc74428c7..7e385e2155f 100644
--- 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"
>
-
-
+ {field.value && (
+
+ dropzoneRef.current?.()}>
+
+ Update
+
+
+
+
+ Remove
+
+
+ )}
+
- {!field.value ? (
-
- ) : (
-
- )}
-
-
+
+ {!field.value ? (
+
+
+ Upload
+
+ ) : (
+
+ )}
+
+
+
)}
control={control}
@@ -211,3 +243,45 @@ export function BrandingForm() {
);
}
+
+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;
+ }
+ }
+`;