fix: avatar upload and logout

src/components/common/Avatar/index.tsx

@@ -27,6 +27,7 @@ const Avatar = forwardRef<HTMLDivElement, Props>(
       className,
       preset = imagePresets.avatar,
       hasUpdates,
+      children,
       ...rest
     },
     ref,
@@ -43,7 +44,9 @@ const Avatar = forwardRef<HTMLDivElement, Props>(
           className={classNames(styles.avatar, className)}
           size={size}
           ref={ref}
-        />
+        >
+          {children}
+        </Square>
       </div>
     );
   },

src/components/menu/MenuButton/index.tsx

@@ -27,11 +27,14 @@ const MenuButton: FC<MenuButtonProps> = ({
   activate = 'focus',
   fixed,
 }) => {
-  const focus = useFocusEvent(false, 150);
-  const hover = useFocusEvent(false, 150);
+  const focus = useFocusEvent(false, 300);
+  const hover = useFocusEvent(false, 300);
 
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null,
+  );
   const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
 
   const popper = usePopper(referenceElement, popperElement, {
@@ -83,7 +86,11 @@ const MenuButton: FC<MenuButtonProps> = ({
           [styles.visible]: visible,
         })}
       >
-        <div style={popper.styles.arrow} ref={setArrowElement} className={styles.arrow} />
+        <div
+          style={popper.styles.arrow}
+          ref={setArrowElement}
+          className={styles.arrow}
+        />
         {children}
       </div>
     </>

src/components/profile/ProfileSidebarSettings/index.tsx

@@ -1,8 +1,7 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
-import { ProfileSettings } from '~/components/profile/ProfileSettings';
 import { useStackContext } from '~/components/sidebar/SidebarStack';
 import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
 import { UserSettingsView } from '~/containers/settings/UserSettingsView';

src/hooks/index.ts

@@ -1,18 +1,22 @@
 import { useCallback, useEffect } from 'react';
 
-export const useCloseOnEscape = (onRequestClose?: () => void, ignore_inputs = false) => {
+export const useCloseOnEscape = (
+  onRequestClose?: () => void,
+  ignoreInputs = false,
+) => {
   const onEscape = useCallback(
-    event => {
+    (event) => {
       if (event.key !== 'Escape' || !onRequestClose) return;
       if (
-        ignore_inputs &&
-        (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA')
+        !ignoreInputs &&
+        (event.target.tagName === 'INPUT' ||
+          event.target.tagName === 'TEXTAREA')
       )
         return;
 
       onRequestClose();
     },
-    [ignore_inputs, onRequestClose]
+    [ignoreInputs, onRequestClose],
   );
 
   useEffect(() => {
@@ -24,7 +28,10 @@ export const useCloseOnEscape = (onRequestClose?: () => void, ignore_inputs = fa
   }, [onEscape]);
 };
 
-export const useDelayedReady = (setReady: (val: boolean) => void, delay: number = 500) => {
+export const useDelayedReady = (
+  setReady: (val: boolean) => void,
+  delay: number = 500,
+) => {
   useEffect(() => {
     const timer = setTimeout(() => setReady(true), delay);
 
@@ -39,20 +46,26 @@ export const useDelayedReady = (setReady: (val: boolean) => void, delay: number
  * @param onUpload -- upload callback
  * @param allowedTypes -- list of allowed types
  */
-export const useFileDropZone = (onUpload: (file: File[]) => void, allowedTypes?: string[]) => {
+export const useFileDropZone = (
+  onUpload: (file: File[]) => void,
+  allowedTypes?: string[],
+) => {
   return useCallback(
-    event => {
+    (event) => {
       event.preventDefault();
       event.stopPropagation();
 
-      const files: File[] = Array.from((event.dataTransfer?.files as File[]) || []).filter(
-        (file: File) => file?.type && (!allowedTypes || allowedTypes.includes(file.type))
+      const files: File[] = Array.from(
+        (event.dataTransfer?.files as File[]) || [],
+      ).filter(
+        (file: File) =>
+          file?.type && (!allowedTypes || allowedTypes.includes(file.type)),
       );
 
       if (!files || !files.length) return;
 
       onUpload(files);
     },
-    [allowedTypes, onUpload]
+    [allowedTypes, onUpload],
   );
 };