diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx index 442a7dff..6503b0ce 100644 --- a/src/components/common/Avatar/index.tsx +++ b/src/components/common/Avatar/index.tsx @@ -27,6 +27,7 @@ const Avatar = forwardRef( className, preset = imagePresets.avatar, hasUpdates, + children, ...rest }, ref, @@ -43,7 +44,9 @@ const Avatar = forwardRef( className={classNames(styles.avatar, className)} size={size} ref={ref} - /> + > + {children} + ); }, diff --git a/src/components/menu/MenuButton/index.tsx b/src/components/menu/MenuButton/index.tsx index 24c52242..0239fc8d 100644 --- a/src/components/menu/MenuButton/index.tsx +++ b/src/components/menu/MenuButton/index.tsx @@ -27,11 +27,14 @@ const MenuButton: FC = ({ 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(null); - const [popperElement, setPopperElement] = useState(null); + const [referenceElement, setReferenceElement] = + useState(null); + const [popperElement, setPopperElement] = useState( + null, + ); const [arrowElement, setArrowElement] = useState(null); const popper = usePopper(referenceElement, popperElement, { @@ -83,7 +86,11 @@ const MenuButton: FC = ({ [styles.visible]: visible, })} > -
+
{children}
diff --git a/src/components/profile/ProfileSidebarSettings/index.tsx b/src/components/profile/ProfileSidebarSettings/index.tsx index 389db635..90e23c1c 100644 --- a/src/components/profile/ProfileSidebarSettings/index.tsx +++ b/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'; diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 148284c3..b0202a61 100644 --- a/src/hooks/index.ts +++ b/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], ); };