feat: Add ability to remove team logo/profile picture

app/scenes/Settings/Details.tsx

@@ -97,7 +97,7 @@ function Details() {
     []
   );
 
-  const handleAvatarUpload = async (avatarUrl: string) => {
+  const handleAvatarChange = async (avatarUrl: string) => {
     await team.save({ avatarUrl });
     toast.success(t("Logo updated"));
   };
@@ -152,7 +152,7 @@ function Details() {
             )}
           >
             <ImageInput
-              onSuccess={handleAvatarUpload}
+              onSuccess={handleAvatarChange}
               onError={handleAvatarError}
               model={team}
               borderRadius={0}

app/scenes/Settings/Profile.tsx

@@ -33,7 +33,7 @@ const Profile = () => {
     setName(ev.target.value);
   };
 
-  const handleAvatarUpload = async (avatarUrl: string) => {
+  const handleAvatarChange = async (avatarUrl: string) => {
     await user.save({ avatarUrl });
     toast.success(t("Profile picture updated"));
   };
@@ -59,7 +59,7 @@ const Profile = () => {
           description={t("Choose a photo or image to represent yourself.")}
         >
           <ImageInput
-            onSuccess={handleAvatarUpload}
+            onSuccess={handleAvatarChange}
             onError={handleAvatarError}
             model={user}
           />

app/scenes/Settings/components/ImageInput.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import Avatar, { AvatarSize, IAvatar } from "~/components/Avatar/Avatar";
+import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import ImageUpload, { Props as ImageUploadProps } from "./ImageUpload";
 
@@ -10,24 +11,31 @@ type Props = ImageUploadProps & {
   model: IAvatar;
 };
 
-export default function ImageInput({ model, ...rest }: Props) {
+export default function ImageInput({ model, onSuccess, ...rest }: Props) {
   const { t } = useTranslation();
 
   return (
-    <ImageBox>
-      <ImageUpload {...rest}>
-        <StyledAvatar model={model} size={AvatarSize.XXLarge} />
-        <Flex auto align="center" justify="center" className="upload">
-          {t("Upload")}
-        </Flex>
-      </ImageUpload>
-    </ImageBox>
+    <Flex gap={8} justify="space-between">
+      <ImageBox>
+        <ImageUpload onSuccess={onSuccess} {...rest}>
+          <StyledAvatar model={model} size={AvatarSize.XXLarge} />
+          <Flex auto align="center" justify="center" className="upload">
+            {t("Upload")}
+          </Flex>
+        </ImageUpload>
+      </ImageBox>
+      {model.avatarUrl && (
+        <Button onClick={() => onSuccess(null)} neutral>
+          {t("Remove")}
+        </Button>
+      )}
+    </Flex>
   );
 }
 
 const avatarStyles = `
-  width: 64px;
-  height: 64px;
+  width: ${AvatarSize.XXLarge}px;
+  height: ${AvatarSize.XXLarge}px;
 `;
 
 const StyledAvatar = styled(Avatar)`

app/scenes/Settings/components/ImageUpload.tsx

@@ -18,7 +18,7 @@ import { compressImage } from "~/utils/compressImage";
 import { uploadFile, dataUrlToBlob } from "~/utils/files";
 
 export type Props = {
-  onSuccess: (url: string) => void | Promise<void>;
+  onSuccess: (url: string | null) => void | Promise<void>;
   onError: (error: string) => void;
   submitText?: string;
   borderRadius?: number;

server/routes/api/users/users.ts

@@ -212,7 +212,7 @@ router.post(
     if (name) {
       user.name = name;
     }
-    if (avatarUrl) {
+    if (avatarUrl !== undefined) {
       user.avatarUrl = avatarUrl;
     }
     if (language) {