diff --git a/src/components/input/ArcProgress/index.tsx b/src/components/common/ArcProgress/index.tsx similarity index 100% rename from src/components/input/ArcProgress/index.tsx rename to src/components/common/ArcProgress/index.tsx diff --git a/src/components/input/ArcProgress/styles.module.scss b/src/components/common/ArcProgress/styles.module.scss similarity index 100% rename from src/components/input/ArcProgress/styles.module.scss rename to src/components/common/ArcProgress/styles.module.scss diff --git a/src/components/common/BetterScrollDialog/index.tsx b/src/components/common/BetterScrollDialog/index.tsx index b0d61d25..cb15f2aa 100644 --- a/src/components/common/BetterScrollDialog/index.tsx +++ b/src/components/common/BetterScrollDialog/index.tsx @@ -2,8 +2,8 @@ import React, { FC, MouseEventHandler, useEffect, useRef } from 'react'; import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock'; -import { Icon } from '~/components/input/Icon'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { Icon } from '~/components/common/Icon'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import styles from './styles.module.scss'; diff --git a/src/components/input/DropHereIcon/index.tsx b/src/components/common/DropHereIcon/index.tsx similarity index 100% rename from src/components/input/DropHereIcon/index.tsx rename to src/components/common/DropHereIcon/index.tsx diff --git a/src/components/input/DropHereIcon/styles.module.scss b/src/components/common/DropHereIcon/styles.module.scss similarity index 100% rename from src/components/input/DropHereIcon/styles.module.scss rename to src/components/common/DropHereIcon/styles.module.scss diff --git a/src/components/input/Icon/index.tsx b/src/components/common/Icon/index.tsx similarity index 100% rename from src/components/input/Icon/index.tsx rename to src/components/common/Icon/index.tsx diff --git a/src/components/common/ImageLoadingWrapper/index.tsx b/src/components/common/ImageLoadingWrapper/index.tsx index 8c45cba9..a189e205 100644 --- a/src/components/common/ImageLoadingWrapper/index.tsx +++ b/src/components/common/ImageLoadingWrapper/index.tsx @@ -8,7 +8,7 @@ import React, { import classNames from 'classnames'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import { DivProps } from '~/utils/types'; import styles from './styles.module.scss'; diff --git a/src/components/input/LoaderCircleInner/index.tsx b/src/components/common/LoaderCircle/components/LoaderCircleInner/index.tsx similarity index 100% rename from src/components/input/LoaderCircleInner/index.tsx rename to src/components/common/LoaderCircle/components/LoaderCircleInner/index.tsx diff --git a/src/components/input/LoaderCircleInner/styles.module.scss b/src/components/common/LoaderCircle/components/LoaderCircleInner/styles.module.scss similarity index 100% rename from src/components/input/LoaderCircleInner/styles.module.scss rename to src/components/common/LoaderCircle/components/LoaderCircleInner/styles.module.scss diff --git a/src/components/input/LoaderCircle/index.tsx b/src/components/common/LoaderCircle/index.tsx similarity index 85% rename from src/components/input/LoaderCircle/index.tsx rename to src/components/common/LoaderCircle/index.tsx index dc5c7568..c04e112a 100644 --- a/src/components/input/LoaderCircle/index.tsx +++ b/src/components/common/LoaderCircle/index.tsx @@ -2,9 +2,9 @@ import React, { FC } from 'react'; import classNames from 'classnames'; -import { LoaderCircleInner } from '~/components/input/LoaderCircleInner'; import { SVGProps } from '~/utils/types'; +import { LoaderCircleInner } from './components/LoaderCircleInner'; import styles from './styles.module.scss'; interface IProps extends SVGProps { diff --git a/src/components/input/LoaderCircle/styles.module.scss b/src/components/common/LoaderCircle/styles.module.scss similarity index 100% rename from src/components/input/LoaderCircle/styles.module.scss rename to src/components/common/LoaderCircle/styles.module.scss diff --git a/src/components/input/LoaderScreen/index.tsx b/src/components/common/LoaderScreen/index.tsx similarity index 100% rename from src/components/input/LoaderScreen/index.tsx rename to src/components/common/LoaderScreen/index.tsx diff --git a/src/components/input/LoaderScreen/styles.module.scss b/src/components/common/LoaderScreen/styles.module.scss similarity index 100% rename from src/components/input/LoaderScreen/styles.module.scss rename to src/components/common/LoaderScreen/styles.module.scss diff --git a/src/components/flow/FlowCell/index.tsx b/src/components/flow/FlowCell/index.tsx index cf0308fe..608f1e85 100644 --- a/src/components/flow/FlowCell/index.tsx +++ b/src/components/flow/FlowCell/index.tsx @@ -3,11 +3,11 @@ import React, { FC, useMemo } from 'react'; import classNames from 'classnames'; import { Anchor } from '~/components/common/Anchor'; -import { MenuDots } from '~/components/common/MenuDots'; import { CellShade } from '~/components/flow/CellShade'; import { FlowCellImage } from '~/components/flow/FlowCellImage'; import { FlowCellMenu } from '~/components/flow/FlowCellMenu'; import { FlowCellText } from '~/components/flow/FlowCellText'; +import { MenuDots } from '~/components/menu/MenuDots'; import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus'; import { useWindowSize } from '~/hooks/dom/useWindowSize'; import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls'; diff --git a/src/components/flow/FlowCellMenu/index.tsx b/src/components/flow/FlowCellMenu/index.tsx index 314c8114..739d531b 100644 --- a/src/components/flow/FlowCellMenu/index.tsx +++ b/src/components/flow/FlowCellMenu/index.tsx @@ -3,7 +3,7 @@ import React, { FC } from 'react'; import classNames from 'classnames'; import { Group } from '~/components/common/Group'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { Toggle } from '~/components/input/Toggle'; import { FlowDisplayVariant } from '~/types'; diff --git a/src/components/flow/FlowSearchResults/index.tsx b/src/components/flow/FlowSearchResults/index.tsx index 1d51c260..c4c539e7 100644 --- a/src/components/flow/FlowSearchResults/index.tsx +++ b/src/components/flow/FlowSearchResults/index.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; +import { Icon } from '~/components/common/Icon'; import { InfiniteScroll } from '~/components/common/InfiniteScroll'; -import { Icon } from '~/components/input/Icon'; import { INode } from '~/types'; import { FlowRecentItem } from '../FlowRecentItem'; diff --git a/src/components/flow/FlowSwiperHero/index.tsx b/src/components/flow/FlowSwiperHero/index.tsx index 140649d4..3fc07041 100644 --- a/src/components/flow/FlowSwiperHero/index.tsx +++ b/src/components/flow/FlowSwiperHero/index.tsx @@ -6,8 +6,8 @@ import { Autoplay, EffectFade, Navigation } from 'swiper/modules'; import { Swiper, SwiperSlide } from 'swiper/react'; import SwiperClass from 'swiper/types/swiper-class'; -import { Icon } from '~/components/input/Icon'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { Icon } from '~/components/common/Icon'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import { imagePresets, URLS } from '~/constants/urls'; import { useWindowSize } from '~/hooks/dom/useWindowSize'; import { useNavigation } from '~/hooks/navigation/useNavigation'; diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx index 99a38ced..6e65fb6c 100644 --- a/src/components/input/Button/index.tsx +++ b/src/components/input/Button/index.tsx @@ -9,8 +9,8 @@ import React, { import Tippy from '@tippyjs/react'; import classnames from 'classnames'; -import { Icon } from '~/components/input/Icon'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { Icon } from '~/components/common/Icon'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import { IIcon } from '~/types'; import styles from './styles.module.scss'; diff --git a/src/components/input/Info/index.tsx b/src/components/input/Info/index.tsx deleted file mode 100644 index 8f6eee15..00000000 --- a/src/components/input/Info/index.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; - -import classNames from 'classnames'; - -const style = require('./style.scss'); - -interface IInfoProps { - text?: string; - children?: string; - level?: string; -} -export const Info: React.FunctionComponent<IInfoProps> = ({ - text, - children, - level = 'normal', -}) => ( - <div className={classNames(style.container, { [level]: true })}> - { - text || children || '' - } - </div> -); diff --git a/src/components/input/Info/style.scss b/src/components/input/Info/style.scss deleted file mode 100644 index ed16dc16..00000000 --- a/src/components/input/Info/style.scss +++ /dev/null @@ -1,28 +0,0 @@ -@import 'src/styles/variables'; - -.container { - min-height: $info_height; - border-radius: $radius; - display: flex; - align-items: center; - justify-content: center; - font: $font_14_regular; - line-height: 1.2em; - padding: $gap; - background: $gray_90; - - &:global(.danger) { - color: white; - background: $content_bg_danger; - } - - &:global(.warning) { - color: white; - background: $content_bg_danger; - } - - &:global(.primary) { - color: white; - background: $content_bg_danger; - } -} diff --git a/src/components/input/InputText/index.tsx b/src/components/input/InputText/index.tsx index f6d49c25..b69f02c7 100644 --- a/src/components/input/InputText/index.tsx +++ b/src/components/input/InputText/index.tsx @@ -10,7 +10,7 @@ import React, { import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { InputWrapper } from '~/components/input/InputWrapper'; import { useTranslatedError } from '~/hooks/data/useTranslatedError'; import { useFocusEvent } from '~/hooks/dom/useFocusEvent'; @@ -50,17 +50,25 @@ const InputText: FC<InputTextProps> = ({ handler(target.value); }, - [handler] + [handler], ); - const toggleRevealed = useCallback(() => setRevealed(!revealed), [setRevealed, revealed]); + const toggleRevealed = useCallback( + () => setRevealed(!revealed), + [setRevealed, revealed], + ); const translatedError = useTranslatedError(error); const type = props.type === 'password' && revealed ? 'text' : props.type; return ( - <InputWrapper title={title} error={translatedError} focused={focused} notEmpty={!!value}> + <InputWrapper + title={title} + error={translatedError} + focused={focused} + notEmpty={!!value} + > <div className={classNames(styles.input, { [styles.has_error]: !!error, @@ -83,7 +91,11 @@ const InputText: FC<InputTextProps> = ({ <div className={styles.suffix}> {suffix} {props.type === 'password' && ( - <Icon icon="eye" onClick={toggleRevealed} className={styles.reveal} /> + <Icon + icon="eye" + onClick={toggleRevealed} + className={styles.reveal} + /> )} </div> )} diff --git a/src/components/input/SearchInput/index.tsx b/src/components/input/SearchInput/index.tsx index ace8f50a..6a3fc4e5 100644 --- a/src/components/input/SearchInput/index.tsx +++ b/src/components/input/SearchInput/index.tsx @@ -1,6 +1,6 @@ import React, { VFC } from 'react'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { InputText, InputTextProps } from '~/components/input/InputText'; interface SearchInputProps extends Omit<InputTextProps, 'prefix' | 'suffix'> {} diff --git a/src/components/lab/LabBottomPanel/index.tsx b/src/components/lab/LabBottomPanel/index.tsx index 50971be2..2ad11099 100644 --- a/src/components/lab/LabBottomPanel/index.tsx +++ b/src/components/lab/LabBottomPanel/index.tsx @@ -5,7 +5,7 @@ import classNames from 'classnames'; import { Filler } from '~/components/common/Filler'; import { Grid } from '~/components/common/Grid'; import { Group } from '~/components/common/Group'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { URLS } from '~/constants/urls'; import { useNavigation } from '~/hooks/navigation/useNavigation'; diff --git a/src/components/lab/LabHero/index.tsx b/src/components/lab/LabHero/index.tsx index 417e7001..96301c04 100644 --- a/src/components/lab/LabHero/index.tsx +++ b/src/components/lab/LabHero/index.tsx @@ -1,7 +1,7 @@ import React, { FC, useCallback } from 'react'; import { Group } from '~/components/common/Group'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { URLS } from '~/constants/urls'; import { useNavigation } from '~/hooks/navigation/useNavigation'; diff --git a/src/components/lab/LabNodeTitle/index.tsx b/src/components/lab/LabNodeTitle/index.tsx index 5fc69847..3d408133 100644 --- a/src/components/lab/LabNodeTitle/index.tsx +++ b/src/components/lab/LabNodeTitle/index.tsx @@ -3,7 +3,7 @@ import React, { FC } from 'react'; import Tippy from '@tippyjs/react'; import { Group } from '~/components/common/Group'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { NodeComponentProps } from '~/constants/node'; import { useGotoNode } from '~/hooks/node/useGotoNode'; diff --git a/src/components/media/AudioPlayer/index.tsx b/src/components/media/AudioPlayer/index.tsx index 485a7e85..1e2d3700 100644 --- a/src/components/media/AudioPlayer/index.tsx +++ b/src/components/media/AudioPlayer/index.tsx @@ -2,7 +2,7 @@ import React, { memo, useCallback, useMemo } from 'react'; import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { InputText } from '~/components/input/InputText'; import { PlayerState } from '~/constants/player'; import { IFile } from '~/types'; @@ -17,113 +17,133 @@ type Props = { onTitleChange?: (file_id: IFile['id'], title: string) => void; }; -const AudioPlayer = memo(({ file, onDelete, isEditing, onTitleChange }: Props) => { - const { toPercent, file: currentFile, setFile, play, status, progress, pause } = useAudioPlayer(); +const AudioPlayer = memo( + ({ file, onDelete, isEditing, onTitleChange }: Props) => { + const { + toPercent, + file: currentFile, + setFile, + play, + status, + progress, + pause, + } = useAudioPlayer(); - const onPlay = useCallback( - async event => { - event.stopPropagation(); + const onPlay = useCallback( + async (event) => { + event.stopPropagation(); - if (file.id !== currentFile?.id) { - setFile(file); - setTimeout(() => void play(), 0); - return; - } + if (file.id !== currentFile?.id) { + setFile(file); + setTimeout(() => void play(), 0); + return; + } - status === PlayerState.PLAYING ? pause() : await play(); - }, - [play, pause, setFile, file, currentFile, status] - ); + status === PlayerState.PLAYING ? pause() : await play(); + }, + [play, pause, setFile, file, currentFile, status], + ); - const onSeek = useCallback( - event => { - event.stopPropagation(); - const { clientX, target } = event; - const { left, width } = target.getBoundingClientRect(); - toPercent(((clientX - left) / width) * 100); - }, - [toPercent] - ); + const onSeek = useCallback( + (event) => { + event.stopPropagation(); + const { clientX, target } = event; + const { left, width } = target.getBoundingClientRect(); + toPercent(((clientX - left) / width) * 100); + }, + [toPercent], + ); - const onDropClick = useCallback(() => { - if (!onDelete) return; + const onDropClick = useCallback(() => { + if (!onDelete) return; - onDelete(file.id); - }, [file, onDelete]); + onDelete(file.id); + }, [file, onDelete]); - const title = useMemo( - () => - (file.metadata && - (file.metadata.title || - [file.metadata.id3artist, file.metadata.id3title].filter(el => el).join(' - '))) || - file.orig_name || - '', - [file.metadata, file.orig_name] - ); + const title = useMemo( + () => + (file.metadata && + (file.metadata.title || + [file.metadata.id3artist, file.metadata.id3title] + .filter((el) => el) + .join(' - '))) || + file.orig_name || + '', + [file.metadata, file.orig_name], + ); - const onRename = useCallback( - (val: string) => { - if (!onTitleChange) return; + const onRename = useCallback( + (val: string) => { + if (!onTitleChange) return; - onTitleChange(file.id, val); - }, - [onTitleChange, file.id] - ); + onTitleChange(file.id, val); + }, + [onTitleChange, file.id], + ); - const stopPropagation = useCallback( - event => { - if (!isEditing) { - return; - } + const stopPropagation = useCallback( + (event) => { + if (!isEditing) { + return; + } - event.stopPropagation(); - }, - [isEditing] - ); + event.stopPropagation(); + }, + [isEditing], + ); - const playing = currentFile?.id === file.id; + const playing = currentFile?.id === file.id; - return ( - <div - className={classNames(styles.wrap, { - [styles.playing]: playing, - })} - > - {onDelete && ( - <div className={styles.drop} onMouseDown={onDropClick}> - <Icon icon="close" /> + return ( + <div + className={classNames(styles.wrap, { + [styles.playing]: playing, + })} + > + {onDelete && ( + <div className={styles.drop} onMouseDown={onDropClick}> + <Icon icon="close" /> + </div> + )} + + <div + className={styles.playpause} + onClick={onPlay} + onMouseDown={stopPropagation} + > + {playing && status === PlayerState.PLAYING ? ( + <Icon icon="pause" /> + ) : ( + <Icon icon="play" /> + )} </div> - )} - <div className={styles.playpause} onClick={onPlay} onMouseDown={stopPropagation}> - {playing && status === PlayerState.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />} - </div> - - {isEditing ? ( - <div className={styles.input}> - <InputText - placeholder={title} - handler={onRename} - value={file.metadata && file.metadata.title} - onMouseDown={stopPropagation} - /> - </div> - ) : ( - <div className={styles.content}> - <div className={styles.title}>{title || ''}</div> - - <div className={styles.progress} onClick={onSeek}> - <div - className={styles.bar} - style={{ - width: `${progress.progress}%`, - }} + {isEditing ? ( + <div className={styles.input}> + <InputText + placeholder={title} + handler={onRename} + value={file.metadata && file.metadata.title} + onMouseDown={stopPropagation} /> </div> - </div> - )} - </div> - ); -}); + ) : ( + <div className={styles.content}> + <div className={styles.title}>{title || ''}</div> + + <div className={styles.progress} onClick={onSeek}> + <div + className={styles.bar} + style={{ + width: `${progress.progress}%`, + }} + /> + </div> + </div> + )} + </div> + ); + }, +); export { AudioPlayer }; diff --git a/src/components/media/ImagePreloader/index.tsx b/src/components/media/ImagePreloader/index.tsx index f1b00ea3..36c7185c 100644 --- a/src/components/media/ImagePreloader/index.tsx +++ b/src/components/media/ImagePreloader/index.tsx @@ -8,9 +8,9 @@ import React, { import classNames from 'classnames'; +import { Icon } from '~/components/common/Icon'; import { ImageWithSSRLoad } from '~/components/common/ImageWithSSRLoad'; -import { Icon } from '~/components/input/Icon'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import { DEFAULT_DOMINANT_COLOR } from '~/constants/node'; import { imagePresets } from '~/constants/urls'; import { useResizeHandler } from '~/hooks/dom/useResizeHandler'; diff --git a/src/components/common/CornerMenu/index.tsx b/src/components/menu/CornerMenu/index.tsx similarity index 94% rename from src/components/common/CornerMenu/index.tsx rename to src/components/menu/CornerMenu/index.tsx index 1594dade..4929bc37 100644 --- a/src/components/common/CornerMenu/index.tsx +++ b/src/components/menu/CornerMenu/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useState, VFC } from 'react'; -import { MenuDots } from '~/components/common/MenuDots'; +import { MenuDots } from '~/components/menu/MenuDots'; import styles from './styles.module.scss'; diff --git a/src/components/common/CornerMenu/styles.module.scss b/src/components/menu/CornerMenu/styles.module.scss similarity index 100% rename from src/components/common/CornerMenu/styles.module.scss rename to src/components/menu/CornerMenu/styles.module.scss diff --git a/src/components/menu/HorizontalMenu/index.tsx b/src/components/menu/HorizontalMenu/index.tsx index 146f1ebc..07202e96 100644 --- a/src/components/menu/HorizontalMenu/index.tsx +++ b/src/components/menu/HorizontalMenu/index.tsx @@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react'; import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { DivProps } from '~/utils/types'; diff --git a/src/components/menu/MenuButton/index.tsx b/src/components/menu/MenuButton/index.tsx index 563fc125..bd9fa555 100644 --- a/src/components/menu/MenuButton/index.tsx +++ b/src/components/menu/MenuButton/index.tsx @@ -4,7 +4,7 @@ import { Placement } from '@popperjs/core'; import classNames from 'classnames'; import { usePopper } from 'react-popper'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { useFocusEvent } from '~/hooks/dom/useFocusEvent'; import styles from './styles.module.scss'; diff --git a/src/components/common/MenuDots/index.tsx b/src/components/menu/MenuDots/index.tsx similarity index 90% rename from src/components/common/MenuDots/index.tsx rename to src/components/menu/MenuDots/index.tsx index 94be4527..da4a9adc 100644 --- a/src/components/common/MenuDots/index.tsx +++ b/src/components/menu/MenuDots/index.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react'; import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { ButtonProps } from '~/utils/types'; import styles from './styles.module.scss'; diff --git a/src/components/common/MenuDots/styles.module.scss b/src/components/menu/MenuDots/styles.module.scss similarity index 100% rename from src/components/common/MenuDots/styles.module.scss rename to src/components/menu/MenuDots/styles.module.scss diff --git a/src/components/menu/MenuItemWithIcon/index.tsx b/src/components/menu/MenuItemWithIcon/index.tsx index 87e5eb6a..20045580 100644 --- a/src/components/menu/MenuItemWithIcon/index.tsx +++ b/src/components/menu/MenuItemWithIcon/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import styles from './styles.module.scss'; @@ -10,7 +10,11 @@ interface MenuItemWithIconProps { onClick?: () => void; } -const MenuItemWithIcon: FC<MenuItemWithIconProps> = ({ children, icon, onClick }) => ( +const MenuItemWithIcon: FC<MenuItemWithIconProps> = ({ + children, + icon, + onClick, +}) => ( <button className={styles.item} onClick={onClick}> {icon && ( <div className={styles.icon}> diff --git a/src/components/node/Backlink/index.tsx b/src/components/node/Backlink/index.tsx index d3cbb32b..e4d5c072 100644 --- a/src/components/node/Backlink/index.tsx +++ b/src/components/node/Backlink/index.tsx @@ -1,7 +1,7 @@ import React, { FC } from 'react'; +import { Icon } from '~/components/common/Icon'; import { WithDescription } from '~/components/common/WithDescription'; -import { Icon } from '~/components/input/Icon'; interface BacklinkProps { icon?: string; diff --git a/src/components/node/NodeEditMenu/index.tsx b/src/components/node/NodeEditMenu/index.tsx index dff702bd..388f3025 100644 --- a/src/components/node/NodeEditMenu/index.tsx +++ b/src/components/node/NodeEditMenu/index.tsx @@ -2,7 +2,7 @@ import React, { VFC } from 'react'; import Tippy from '@tippyjs/react'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { MenuButton } from '~/components/menu/MenuButton'; import { MenuItemWithIcon } from '~/components/menu/MenuItemWithIcon'; import { SeparatedMenu } from '~/components/menu/SeparatedMenu'; diff --git a/src/components/node/NodeImageBlockPlaceholder/index.tsx b/src/components/node/NodeImageBlockPlaceholder/index.tsx index 9f108ebf..eebdc1d2 100644 --- a/src/components/node/NodeImageBlockPlaceholder/index.tsx +++ b/src/components/node/NodeImageBlockPlaceholder/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import styles from './styles.module.scss'; diff --git a/src/components/node/NodeLikeButton/index.tsx b/src/components/node/NodeLikeButton/index.tsx index 5a05fcde..c43354f6 100644 --- a/src/components/node/NodeLikeButton/index.tsx +++ b/src/components/node/NodeLikeButton/index.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react'; import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import styles from './styles.module.scss'; diff --git a/src/components/node/NodeThumbnail/index.tsx b/src/components/node/NodeThumbnail/index.tsx index 1dd757a3..296a19e5 100644 --- a/src/components/node/NodeThumbnail/index.tsx +++ b/src/components/node/NodeThumbnail/index.tsx @@ -2,9 +2,9 @@ import { FC, memo, useEffect, useMemo, useRef, useState } from 'react'; import classNames from 'classnames'; +import { Icon } from '~/components/common/Icon'; import { ImageWithSSRLoad } from '~/components/common/ImageWithSSRLoad'; import { Square } from '~/components/common/Square'; -import { Icon } from '~/components/input/Icon'; import { imagePresets } from '~/constants/urls'; import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString'; import { useGotoNode } from '~/hooks/node/useGotoNode'; diff --git a/src/components/notes/NoteMenu/index.tsx b/src/components/notes/NoteMenu/index.tsx index de257857..2521eb07 100644 --- a/src/components/notes/NoteMenu/index.tsx +++ b/src/components/notes/NoteMenu/index.tsx @@ -1,6 +1,6 @@ import React, { useMemo, VFC } from 'react'; -import { CornerMenu } from '~/components/common/CornerMenu'; +import { CornerMenu } from '~/components/menu/CornerMenu'; interface NoteMenuProps { onEdit: () => void; @@ -16,7 +16,7 @@ const NoteMenu: VFC<NoteMenuProps> = ({ onEdit, onDelete }) => { }, { title: 'Удалить', action: onDelete }, ], - [onEdit, onDelete] + [onEdit, onDelete], ); return <CornerMenu actions={actions} />; diff --git a/src/components/tags/TagAutocompleteRow/index.tsx b/src/components/tags/TagAutocompleteRow/index.tsx index 67c32a6f..40d6237b 100644 --- a/src/components/tags/TagAutocompleteRow/index.tsx +++ b/src/components/tags/TagAutocompleteRow/index.tsx @@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react'; import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import styles from './styles.module.scss'; diff --git a/src/components/tags/TagWrapper/index.tsx b/src/components/tags/TagWrapper/index.tsx index aaa681f1..00e6fdf1 100644 --- a/src/components/tags/TagWrapper/index.tsx +++ b/src/components/tags/TagWrapper/index.tsx @@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react'; import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import styles from './styles.module.scss'; diff --git a/src/components/upload/AudioUpload/index.tsx b/src/components/upload/AudioUpload/index.tsx index 2e55e1c6..6b11f1b6 100644 --- a/src/components/upload/AudioUpload/index.tsx +++ b/src/components/upload/AudioUpload/index.tsx @@ -2,8 +2,8 @@ import React, { FC, useCallback } from 'react'; import classNames from 'classnames'; -import { ArcProgress } from '~/components/input/ArcProgress'; -import { Icon } from '~/components/input/Icon'; +import { ArcProgress } from '~/components/common/ArcProgress'; +import { Icon } from '~/components/common/Icon'; import styles from './styles.module.scss'; @@ -16,7 +16,13 @@ interface IProps { uploading?: boolean; } -const AudioUpload: FC<IProps> = ({ title, progress, uploading, id, onDrop }) => { +const AudioUpload: FC<IProps> = ({ + title, + progress, + uploading, + id, + onDrop, +}) => { const onDropFile = useCallback(() => { if (!id || !onDrop) return; onDrop(id); diff --git a/src/components/upload/ImageUpload/index.tsx b/src/components/upload/ImageUpload/index.tsx index 6e49a9e4..b12e5a04 100644 --- a/src/components/upload/ImageUpload/index.tsx +++ b/src/components/upload/ImageUpload/index.tsx @@ -2,8 +2,8 @@ import React, { FC, useCallback } from 'react'; import classNames from 'classnames'; -import { ArcProgress } from '~/components/input/ArcProgress'; -import { Icon } from '~/components/input/Icon'; +import { ArcProgress } from '~/components/common/ArcProgress'; +import { Icon } from '~/components/common/Icon'; import { IFile } from '~/types'; import styles from './styles.module.scss'; @@ -17,7 +17,13 @@ interface IProps { uploading?: boolean; } -const ImageUpload: FC<IProps> = ({ thumb, progress, uploading, id, onDrop }) => { +const ImageUpload: FC<IProps> = ({ + thumb, + progress, + uploading, + id, + onDrop, +}) => { const onDropFile = useCallback(() => { if (!id || !onDrop) return; onDrop(id); @@ -32,7 +38,12 @@ const ImageUpload: FC<IProps> = ({ thumb, progress, uploading, id, onDrop }) => )} <div className={classNames(styles.thumb_wrap, { uploading: uploading })}> - {thumb && <div className={styles.thumb} style={{ backgroundImage: `url("${thumb}")` }} />} + {thumb && ( + <div + className={styles.thumb} + style={{ backgroundImage: `url("${thumb}")` }} + /> + )} {uploading && ( <div className={styles.progress}> <ArcProgress size={72} progress={progress} /> diff --git a/src/components/upload/UploadDropzone/index.tsx b/src/components/upload/UploadDropzone/index.tsx index 9083cabb..887b0e68 100644 --- a/src/components/upload/UploadDropzone/index.tsx +++ b/src/components/upload/UploadDropzone/index.tsx @@ -4,7 +4,7 @@ import classnames from 'classnames'; import classNames from 'classnames'; import Dropzone from 'react-dropzone'; -import { DropHereIcon } from '~/components/input/DropHereIcon'; +import { DropHereIcon } from '~/components/common/DropHereIcon'; import { useDragDetector } from '~/hooks/dom/useDragDetector'; import { DivProps } from '~/utils/types'; diff --git a/src/containers/auth/LoginDialog/components/TelegramLoginForm/index.tsx b/src/containers/auth/LoginDialog/components/TelegramLoginForm/index.tsx index 0a4911af..9284da9e 100644 --- a/src/containers/auth/LoginDialog/components/TelegramLoginForm/index.tsx +++ b/src/containers/auth/LoginDialog/components/TelegramLoginForm/index.tsx @@ -4,7 +4,7 @@ import TelegramLoginButton, { TelegramUser, } from '@v9v/ts-react-telegram-login'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import styles from './styles.module.scss'; diff --git a/src/containers/auth/RestorePasswordDialog/components/RestoreInvalidCode/index.tsx b/src/containers/auth/RestorePasswordDialog/components/RestoreInvalidCode/index.tsx index c989f8df..e39c0ad7 100644 --- a/src/containers/auth/RestorePasswordDialog/components/RestoreInvalidCode/index.tsx +++ b/src/containers/auth/RestorePasswordDialog/components/RestoreInvalidCode/index.tsx @@ -1,8 +1,8 @@ import React, { VFC } from 'react'; import { Group } from '~/components/common/Group'; +import { Icon } from '~/components/common/Icon'; import { Button } from '~/components/input/Button'; -import { Icon } from '~/components/input/Icon'; import { ERROR_LITERAL, ERRORS } from '~/constants/errors'; import styles from './styles.module.scss'; diff --git a/src/containers/auth/RestorePasswordDialog/components/RestoreSuccess/index.tsx b/src/containers/auth/RestorePasswordDialog/components/RestoreSuccess/index.tsx index 21aff2b5..67a95c86 100644 --- a/src/containers/auth/RestorePasswordDialog/components/RestoreSuccess/index.tsx +++ b/src/containers/auth/RestorePasswordDialog/components/RestoreSuccess/index.tsx @@ -1,8 +1,8 @@ import React, { VFC } from 'react'; import { Group } from '~/components/common/Group'; +import { Icon } from '~/components/common/Icon'; import { Button } from '~/components/input/Button'; -import { Icon } from '~/components/input/Icon'; import styles from './styles.module.scss'; diff --git a/src/containers/auth/RestoreRequestDialog/components/RestoreSent/index.tsx b/src/containers/auth/RestoreRequestDialog/components/RestoreSent/index.tsx index cc48dc45..19c0076b 100644 --- a/src/containers/auth/RestoreRequestDialog/components/RestoreSent/index.tsx +++ b/src/containers/auth/RestoreRequestDialog/components/RestoreSent/index.tsx @@ -1,8 +1,8 @@ import React, { VFC } from 'react'; import { Group } from '~/components/common/Group'; +import { Icon } from '~/components/common/Icon'; import { Button } from '~/components/input/Button'; -import { Icon } from '~/components/input/Icon'; import styles from './styles.module.scss'; diff --git a/src/containers/boris/BorisSidebar/components/BorisContacts/components/BorisContactItem/index.tsx b/src/containers/boris/BorisSidebar/components/BorisContacts/components/BorisContactItem/index.tsx index d46569b5..6031057d 100644 --- a/src/containers/boris/BorisSidebar/components/BorisContacts/components/BorisContactItem/index.tsx +++ b/src/containers/boris/BorisSidebar/components/BorisContacts/components/BorisContactItem/index.tsx @@ -1,7 +1,7 @@ import { FC, ReactNode } from 'react'; +import { Icon } from '~/components/common/Icon'; import { WithDescription } from '~/components/common/WithDescription'; -import { Icon } from '~/components/input/Icon'; interface Props { icon: string; diff --git a/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorPublicSwitch/index.tsx b/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorPublicSwitch/index.tsx index 9ecd89fa..2abafeeb 100644 --- a/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorPublicSwitch/index.tsx +++ b/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorPublicSwitch/index.tsx @@ -1,7 +1,7 @@ import React, { FC, useCallback } from 'react'; +import { Icon } from '~/components/common/Icon'; import { Button } from '~/components/input/Button'; -import { Icon } from '~/components/input/Icon'; import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik'; import { IEditorComponentProps } from '~/types/node'; diff --git a/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorUploadButton/index.tsx b/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorUploadButton/index.tsx index a4e07a22..22c471d6 100644 --- a/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorUploadButton/index.tsx +++ b/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorUploadButton/index.tsx @@ -1,7 +1,7 @@ import React, { ChangeEvent, FC, useCallback } from 'react'; +import { Icon } from '~/components/common/Icon'; import { Button } from '~/components/input/Button'; -import { Icon } from '~/components/input/Icon'; import { UploadType } from '~/constants/uploads'; import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik'; import { IEditorComponentProps } from '~/types/node'; diff --git a/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorUploadCoverButton/index.tsx b/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorUploadCoverButton/index.tsx index b6f5f579..254c0ffb 100644 --- a/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorUploadCoverButton/index.tsx +++ b/src/containers/dialogs/EditorDialog/components/EditorButtons/components/EditorActionsPanel/components/EditorUploadCoverButton/index.tsx @@ -1,6 +1,6 @@ import React, { ChangeEvent, FC, useCallback, useEffect } from 'react'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { UploadSubject, UploadTarget, UploadType } from '~/constants/uploads'; import { imagePresets } from '~/constants/urls'; import { useUploader } from '~/hooks/data/useUploader'; diff --git a/src/containers/dialogs/EditorEditDialog/index.tsx b/src/containers/dialogs/EditorEditDialog/index.tsx index 2e5096ce..13ea890a 100644 --- a/src/containers/dialogs/EditorEditDialog/index.tsx +++ b/src/containers/dialogs/EditorEditDialog/index.tsx @@ -2,8 +2,8 @@ import React, { FC, useCallback } from 'react'; import { observer } from 'mobx-react-lite'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import { ModalWrapper } from '~/components/common/ModalWrapper'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; import { EditorDialog } from '~/containers/dialogs/EditorDialog'; import { useLoadNode } from '~/hooks/node/useLoadNode'; import { useUpdateNode } from '~/hooks/node/useUpdateNode'; diff --git a/src/containers/dialogs/LoadingDialog/index.tsx b/src/containers/dialogs/LoadingDialog/index.tsx index 2d5e4c47..fc081dd8 100644 --- a/src/containers/dialogs/LoadingDialog/index.tsx +++ b/src/containers/dialogs/LoadingDialog/index.tsx @@ -1,6 +1,6 @@ import React, { VFC } from 'react'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import styles from './styles.module.scss'; diff --git a/src/containers/flow/FlowStamp/index.tsx b/src/containers/flow/FlowStamp/index.tsx index b84672ab..94d9158c 100644 --- a/src/containers/flow/FlowStamp/index.tsx +++ b/src/containers/flow/FlowStamp/index.tsx @@ -3,10 +3,10 @@ import React, { FC, FormEvent, useCallback, useMemo } from 'react'; import classNames from 'classnames'; import { Group } from '~/components/common/Group'; +import { Icon } from '~/components/common/Icon'; import { Superpower } from '~/components/common/Superpower'; import { FlowRecent } from '~/components/flow/FlowRecent'; import { FlowSearchResults } from '~/components/flow/FlowSearchResults'; -import { Icon } from '~/components/input/Icon'; import { InputText } from '~/components/input/InputText'; import { Toggle } from '~/components/input/Toggle'; import { experimentalFeatures } from '~/constants/features'; diff --git a/src/containers/main/SubmitBarRouter/components/SubmitBar/index.tsx b/src/containers/main/SubmitBarRouter/components/SubmitBar/index.tsx index 86cd3046..17c5a9af 100644 --- a/src/containers/main/SubmitBarRouter/components/SubmitBar/index.tsx +++ b/src/containers/main/SubmitBarRouter/components/SubmitBar/index.tsx @@ -2,7 +2,7 @@ import React, { FC, useCallback, useState } from 'react'; import classNames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { Dialog } from '~/constants/modal'; import { useShowModal } from '~/hooks/modal/useShowModal'; @@ -23,7 +23,7 @@ const SubmitBar: FC<SubmitBarProps> = ({ isLab }) => { (type: string) => () => { showModal({ type, isInLab: !!isLab }); }, - [isLab, showModal] + [isLab, showModal], ); const icon = isLab ? 'lab' : 'plus'; @@ -48,7 +48,12 @@ const SubmitBar: FC<SubmitBarProps> = ({ isLab }) => { </button> </div> - <button className={styles.button} onFocus={onFocus} onBlur={onBlur} type="button"> + <button + className={styles.button} + onFocus={onFocus} + onBlur={onBlur} + type="button" + > <Icon icon={icon} /> </button> </div> diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/index.tsx b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/index.tsx index 87ff3e33..3e2fc242 100644 --- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/index.tsx +++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentEmbedBlock/index.tsx @@ -1,19 +1,18 @@ import React, { FC, memo, useMemo } from 'react'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { ICommentBlockProps } from '~/constants/comment'; import { useYoutubeMetadata } from '~/hooks/metadata/useYoutubeMetadata'; import { getYoutubeThumb } from '~/utils/dom'; import styles from './styles.module.scss'; - type Props = ICommentBlockProps & {}; const CommentEmbedBlock: FC<Props> = memo(({ block }) => { const id = useMemo(() => { const match = block.content.match( - /https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-=]+)/ + /https?:\/\/(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch)?(?:\?v=)?([\w\-=]+)/, ); return (match && match[1]) || ''; @@ -21,7 +20,10 @@ const CommentEmbedBlock: FC<Props> = memo(({ block }) => { const url = useMemo(() => `https://youtube.com/watch?v=${id}`, [id]); - const preview = useMemo(() => getYoutubeThumb(block.content), [block.content]); + const preview = useMemo( + () => getYoutubeThumb(block.content), + [block.content], + ); const metadata = useYoutubeMetadata(id); const title = metadata?.metadata?.title || ''; diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx index 179f8ca8..20aa62b0 100644 --- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx +++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentImageGrid/index.tsx @@ -3,7 +3,7 @@ import { FC } from 'react'; import classNames from 'classnames'; import { Hoverable } from '~/components/common/Hoverable'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { imagePresets } from '~/constants/urls'; import { IFile } from '~/types'; import { getURL } from '~/utils/dom'; diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentLike/index.tsx b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentLike/index.tsx index 12c6a565..e0ac77e8 100644 --- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentLike/index.tsx +++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentLike/index.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react'; import classnames from 'classnames'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import styles from './styles.module.scss'; diff --git a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentMenu/index.tsx b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentMenu/index.tsx index 49c14dfe..f19028e7 100644 --- a/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentMenu/index.tsx +++ b/src/containers/node/NodeComments/components/Comment/components/CommentContent/components/CommentMenu/index.tsx @@ -1,6 +1,6 @@ import React, { FC, useMemo } from 'react'; -import { CornerMenu } from '~/components/common/CornerMenu'; +import { CornerMenu } from '~/components/menu/CornerMenu'; interface IProps { onEdit: () => void; @@ -16,7 +16,7 @@ const CommentMenu: FC<IProps> = ({ onEdit, onDelete }) => { }, { title: 'Удалить', action: onDelete }, ], - [onEdit, onDelete] + [onEdit, onDelete], ); return <CornerMenu actions={actions} />; diff --git a/src/containers/notifications/NotificationList/index.tsx b/src/containers/notifications/NotificationList/index.tsx index c011d877..49e9b571 100644 --- a/src/containers/notifications/NotificationList/index.tsx +++ b/src/containers/notifications/NotificationList/index.tsx @@ -3,9 +3,9 @@ import { FC, useCallback, useEffect } from 'react'; import classNames from 'classnames'; import { isAfter, parseISO } from 'date-fns'; +import { LoaderScreen } from '~/components/common/LoaderScreen'; import { Button } from '~/components/input/Button'; import { InputRow } from '~/components/input/InputRow'; -import { LoaderScreen } from '~/components/input/LoaderScreen'; import { NotificationComment } from '~/components/notifications/NotificationComment'; import { NotificationNode } from '~/components/notifications/NotificationNode'; import { useNotificationsList } from '~/hooks/notifications/useNotificationsList'; diff --git a/src/containers/player/PlayerView/components/PlayerBar/index.tsx b/src/containers/player/PlayerView/components/PlayerBar/index.tsx index 94dd8c3e..d59d9853 100644 --- a/src/containers/player/PlayerView/components/PlayerBar/index.tsx +++ b/src/containers/player/PlayerView/components/PlayerBar/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, VFC } from 'react'; -import { Icon } from '~/components/input/Icon'; +import { Icon } from '~/components/common/Icon'; import { PlayerState } from '~/constants/player'; import { IFile } from '~/types'; import { PlayerProgress } from '~/types/player'; @@ -33,13 +33,13 @@ const PlayerBar: VFC<Props> = ({ }, [playerPlay, playerPause, status]); const onSeek = useCallback( - event => { + (event) => { event.stopPropagation(); const { clientX, target } = event; const { left, width } = target.getBoundingClientRect(); playerSeek(((clientX - left) / width) * 100); }, - [playerSeek] + [playerSeek], ); if (status === PlayerState.UNSET) return null; @@ -47,21 +47,29 @@ const PlayerBar: VFC<Props> = ({ const metadata: IFile['metadata'] = path(['metadata'], file); const title = metadata && - (metadata.title || [metadata.id3artist, metadata.id3title].filter(el => !!el).join(' - ')); + (metadata.title || + [metadata.id3artist, metadata.id3title].filter((el) => !!el).join(' - ')); return ( <div className={styles.place}> <div className={styles.wrap}> <div className={styles.status}> <div className={styles.playpause} onClick={onClick}> - {status === PlayerState.PLAYING ? <Icon icon="pause" /> : <Icon icon="play" />} + {status === PlayerState.PLAYING ? ( + <Icon icon="pause" /> + ) : ( + <Icon icon="play" /> + )} </div> <div className={styles.info}> <div className={styles.title}>{title}</div> <div className={styles.progress} onClick={onSeek}> - <div className={styles.bar} style={{ width: `${progress.progress}%` }} /> + <div + className={styles.bar} + style={{ width: `${progress.progress}%` }} + /> </div> </div> diff --git a/src/containers/profile/ProfileAccounts/index.tsx b/src/containers/profile/ProfileAccounts/index.tsx index 4790022f..e876bbff 100644 --- a/src/containers/profile/ProfileAccounts/index.tsx +++ b/src/containers/profile/ProfileAccounts/index.tsx @@ -1,8 +1,8 @@ import React, { FC, Fragment } from 'react'; import { Group } from '~/components/common/Group'; +import { Icon } from '~/components/common/Icon'; import { Button } from '~/components/input/Button'; -import { Icon } from '~/components/input/Icon'; import { Placeholder } from '~/components/placeholders/Placeholder'; import { SOCIAL_ICONS } from '~/constants/auth/socials'; import { useOAuth } from '~/hooks/auth/useOAuth'; diff --git a/src/containers/profile/ProfileLoader/index.tsx b/src/containers/profile/ProfileLoader/index.tsx index af2c0563..6f2102d8 100644 --- a/src/containers/profile/ProfileLoader/index.tsx +++ b/src/containers/profile/ProfileLoader/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; -import { LoaderCircle } from '~/components/input/LoaderCircle'; +import { LoaderCircle } from '~/components/common/LoaderCircle'; import styles from './styles.module.scss'; diff --git a/src/containers/settings/SettingsDeleted/index.tsx b/src/containers/settings/SettingsDeleted/index.tsx index 0be086ac..cfd4b400 100644 --- a/src/containers/settings/SettingsDeleted/index.tsx +++ b/src/containers/settings/SettingsDeleted/index.tsx @@ -2,9 +2,9 @@ import React, { VFC } from 'react'; import { Filler } from '~/components/common/Filler'; import { Group } from '~/components/common/Group'; +import { Icon } from '~/components/common/Icon'; import { Padder } from '~/components/common/Padder'; import { FlowRecentItem } from '~/components/flow/FlowRecentItem'; -import { Icon } from '~/components/input/Icon'; import { InputText } from '~/components/input/InputText'; import { HorizontalMenu } from '~/components/menu/HorizontalMenu'; import { useFlowStore } from '~/store/flow/useFlowStore'; diff --git a/src/containers/sidebars/TagSidebar/index.tsx b/src/containers/sidebars/TagSidebar/index.tsx index 1a0543db..09fd3269 100644 --- a/src/containers/sidebars/TagSidebar/index.tsx +++ b/src/containers/sidebars/TagSidebar/index.tsx @@ -1,7 +1,7 @@ import { useMemo, VFC } from 'react'; +import { Icon } from '~/components/common/Icon'; import { InfiniteScroll } from '~/components/common/InfiniteScroll'; -import { Icon } from '~/components/input/Icon'; import { SidebarStack } from '~/components/sidebar/SidebarStack'; import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard'; import { SidebarWrapper } from '~/components/sidebar/SidebarWrapper';