fix: Team logo shows as white in settings (#3015)

* fix: Team logo shows as white in settings
fix: Team logo doesnt update in sidebar immediately after updating
refactor to ImageUpload component

* text

app/scenes/Settings/Profile.tsx

@@ -6,36 +6,44 @@ import styled from "styled-components";
 import { languageOptions } from "@shared/i18n";
 import UserDelete from "~/scenes/UserDelete";
 import Button from "~/components/Button";
-import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
 import HelpText from "~/components/HelpText";
-import Input, { LabelText } from "~/components/Input";
+import Input from "~/components/Input";
 import InputSelect from "~/components/InputSelect";
 import Scene from "~/components/Scene";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
-import ImageUpload from "./components/ImageUpload";
+import ImageInput from "./components/ImageInput";
 
 const Profile = () => {
   const { auth } = useStores();
+  const user = useCurrentUser();
   const form = React.useRef<HTMLFormElement>(null);
-  const [name, setName] = React.useState<string>(auth.user?.name || "");
-  const [avatarUrl, setAvatarUrl] = React.useState<string | null | undefined>();
+  const [name, setName] = React.useState<string>(user.name || "");
+  const [avatarUrl, setAvatarUrl] = React.useState<string>(user.avatarUrl);
   const [showDeleteModal, setShowDeleteModal] = React.useState(false);
-  const [language, setLanguage] = React.useState(auth.user?.language);
+  const [language, setLanguage] = React.useState(user.language);
   const { showToast } = useToasts();
   const { t } = useTranslation();
 
   const handleSubmit = async (ev: React.SyntheticEvent) => {
     ev.preventDefault();
-    await auth.updateUser({
-      name,
-      avatarUrl,
-      language,
-    });
-    showToast(t("Profile saved"), {
-      type: "success",
-    });
+
+    try {
+      await auth.updateUser({
+        name,
+        avatarUrl,
+        language,
+      });
+      showToast(t("Profile saved"), {
+        type: "success",
+      });
+    } catch (err) {
+      showToast(err.message, {
+        type: "error",
+      });
+    }
   };
 
   const handleNameChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
@@ -67,26 +75,19 @@ const Profile = () => {
   };
 
   const isValid = form.current && form.current.checkValidity();
-  const { user, isSaving } = auth;
-  if (!user) return null;
+  const { isSaving } = auth;
 
   return (
     <Scene title={t("Profile")} icon={<ProfileIcon color="currentColor" />}>
       <Heading>{t("Profile")}</Heading>
-      <ProfilePicture column>
-        <LabelText>{t("Photo")}</LabelText>
-        <AvatarContainer>
-          <ImageUpload
-            onSuccess={handleAvatarUpload}
-            onError={handleAvatarError}
-          >
-            <Avatar src={avatarUrl || user?.avatarUrl} />
-            <Flex auto align="center" justify="center">
-              {t("Upload")}
-            </Flex>
-          </ImageUpload>
-        </AvatarContainer>
-      </ProfilePicture>
+
+      <ImageInput
+        label={t("Photo")}
+        onSuccess={handleAvatarUpload}
+        onError={handleAvatarError}
+        src={avatarUrl}
+      />
+
       <form onSubmit={handleSubmit} ref={form}>
         <Input
           label={t("Full name")}
@@ -145,41 +146,4 @@ const DangerZone = styled.div`
   margin-top: 60px;
 `;
 
-const ProfilePicture = styled(Flex)`
-  margin-bottom: 24px;
-`;
-
-const avatarStyles = `
-  width: 80px;
-  height: 80px;
-  border-radius: 8px;
-`;
-
-const AvatarContainer = styled(Flex)`
-  ${avatarStyles};
-  position: relative;
-
-  div div {
-    ${avatarStyles};
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    cursor: pointer;
-    transition: all 250ms;
-  }
-
-  &:hover div {
-    opacity: 1;
-    background: rgba(0, 0, 0, 0.75);
-    color: ${(props) => props.theme.white};
-  }
-`;
-
-const Avatar = styled.img`
-  ${avatarStyles};
-`;
-
 export default observer(Profile);