refactor main components and IProps

src/components/common/ArcProgress/index.tsx

@@ -4,12 +4,12 @@ import { describeArc } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   size: number;
   progress?: number;
 }
 
-export const ArcProgress: FC<IProps> = ({ size, progress = 0 }) => (
+export const ArcProgress: FC<Props> = ({ size, progress = 0 }) => (
   <svg className={styles.icon} width={size} height={size}>
     <path
       d={describeArc(

src/components/common/Authorized/index.tsx

@@ -4,12 +4,12 @@ import { observer } from 'mobx-react-lite';
 
 import { useAuth } from '~/hooks/auth/useAuth';
 
-interface IProps {
+interface Props {
   // don't wait for user refetch, trust hydration
   hydratedOnly?: boolean;
 }
 
-const Authorized: FC<IProps> = observer(({ children, hydratedOnly }) => {
+const Authorized: FC<Props> = observer(({ children, hydratedOnly }) => {
   const { isUser, fetched } = useAuth();
 
   if (!isUser || (!hydratedOnly && !fetched)) return null;

src/components/common/BetterScrollDialog/index.tsx

@@ -7,7 +7,7 @@ import { LoaderCircle } from '~/components/common/LoaderCircle';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   children: ReactChild;
   header?: JSX.Element;
   footer?: JSX.Element;
@@ -23,7 +23,7 @@ interface IProps {
   onClose?: () => void;
 }
 
-const BetterScrollDialog: FC<IProps> = ({
+const BetterScrollDialog: FC<Props> = ({
   children,
   header,
   footer,

src/components/common/BlurWrapper/index.tsx

@@ -4,9 +4,9 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
+type Props = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
 
-export const BlurWrapper: FC<IProps> = ({ children, is_blurred }) => (
+export const BlurWrapper: FC<Props> = ({ children, is_blurred }) => (
   <div className={classNames(styles.blur, { [styles.is_blurred]: is_blurred })}>
     {children}
   </div>

src/components/common/BottomContainer/index.tsx

@@ -0,0 +1,11 @@
+import styles from './styles.module.scss';
+
+const BottomContainer = ({ children }) => (
+  <div className={styles.wrap}>
+    <div className={styles.content}>
+      <div className={styles.padder}></div>
+    </div>
+  </div>
+);
+
+export { BottomContainer };

src/components/common/BottomContainer/styles.module.scss

@@ -0,0 +1,39 @@
+@import 'src/styles/variables';
+
+.wrap {
+  position: fixed;
+  bottom: 0;
+  pointer-events: none;
+  touch-action: none;
+  height: $bar_height;
+  display: flex;
+  z-index: 10;
+  width: 100%;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  //padding: 0 calc(min(100vw, #{$content_width}) - 64px) 0 $gap;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.content {
+  position: relative;
+  flex: 0 1 $content_width;
+  height: $bar_height;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.padder {
+  display: flex;
+  flex-basis: calc(min(100vw - 94px, #{$content_width}));
+  align-items: center;
+  justify-content: flex-end;
+
+  & > div {
+    pointer-events: all;
+    touch-action: auto;
+  }
+}

src/components/common/CellGrid/index.tsx

@@ -4,12 +4,12 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {
+type Props = HTMLAttributes<HTMLDivElement> & {
   children: any;
   size: number;
 };
 
-const CellGrid: FC<IProps> = ({ children, size, className, ...props }) => (
+const CellGrid: FC<Props> = ({ children, size, className, ...props }) => (
   <div
     className={classNames(styles.grid, className)}
     style={{ gridTemplateColumns: `repeat(auto-fit, minmax(${size}px, 1fr))` }}

src/components/common/Container/index.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+
+import classNames from 'classnames';
+
+import styles from './styles.module.scss';
+
+interface Props {
+  className?: string;
+}
+
+const Container: FC<Props> = ({ className, children }) => (
+  <div className={classNames(styles.container, className)}>{children}</div>
+);
+
+export { Container };

src/components/common/Container/styles.module.scss

@@ -0,0 +1,5 @@
+@import "src/styles/variables.scss";
+
+.container {
+  @include container;
+}

src/components/common/CoverBackdrop/index.tsx

@@ -8,11 +8,11 @@ import { getURL } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   cover: IUser['cover'];
 }
 
-const CoverBackdrop: FC<IProps> = ({ cover }) => {
+const CoverBackdrop: FC<Props> = ({ cover }) => {
   const ref = useRef<HTMLImageElement>(null);
 
   const [is_loaded, setIsLoaded] = useState(false);

src/components/common/DialogTitle/index.tsx

@@ -2,11 +2,11 @@ import { FC, ReactNode } from 'react';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   children: ReactNode;
 }
 
-const DialogTitle: FC<IProps> = ({ children }) => (
+const DialogTitle: FC<Props> = ({ children }) => (
   <h2 className={styles.title}>{children}</h2>
 );
 

src/components/common/Filler/index.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement>;
+type Props = HTMLAttributes<HTMLDivElement>;
 
-export const Filler: FC<IProps> = ({ className = '', ...props }) => (
+export const Filler: FC<Props> = ({ className = '', ...props }) => (
   <div className={classNames(styles.filler, className)} {...props} />
 );

src/components/common/Footer/index.tsx

@@ -2,9 +2,9 @@ import { FC, memo } from 'react';
 
 import styles from './styles.module.scss';
 
-interface IProps {}
+interface Props {}
 
-const Footer: FC<IProps> = memo(() => (
+const Footer: FC<Props> = memo(() => (
   <footer className={styles.footer}>
     <div className={styles.slogan}>Уделяй больше времени тишине. Спасибо</div>
     <div className={styles.copy}>2009 - {new Date().getFullYear()}</div>

src/components/common/Grid/index.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {
+type Props = HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
   vertical?: boolean;
   columns?: string;
@@ -15,7 +15,7 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   stretchy?: boolean;
 };
 
-const Grid: FC<IProps> = ({
+const Grid: FC<Props> = ({
   children,
   className = '',
   horizontal = false,

src/components/common/Group/index.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {
+type Props = HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
   top?: boolean;
   bottom?: boolean;
@@ -12,7 +12,7 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;
 };
 
-const Group: FC<IProps> = ({
+const Group: FC<Props> = ({
   children,
   className = '',
   horizontal = false,

src/components/common/Icon/index.tsx

@@ -2,12 +2,12 @@ import { FC, SVGAttributes } from 'react';
 
 import { IIcon } from '~/types';
 
-type IProps = SVGAttributes<SVGElement> & {
+type Props = SVGAttributes<SVGElement> & {
   size?: number;
   icon: IIcon;
 };
 
-export const Icon: FC<IProps> = ({ size = 20, icon, style, ...props }) => (
+export const Icon: FC<Props> = ({ size = 20, icon, style, ...props }) => (
   <svg
     width={size}
     height={size}

src/components/common/InfiniteScroll/index.tsx

@@ -2,13 +2,13 @@ import { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
 
 import styles from './styles.module.scss';
 
-interface IProps extends HTMLAttributes<HTMLDivElement> {
+interface Props extends HTMLAttributes<HTMLDivElement> {
   hasMore: boolean;
   scrollReactPx?: number;
   loadMore: () => void;
 }
 
-const InfiniteScroll: FC<IProps> = ({
+const InfiniteScroll: FC<Props> = ({
   children,
   hasMore,
   scrollReactPx,

src/components/common/LoaderCircle/components/LoaderCircleInner/index.tsx

@@ -6,12 +6,12 @@ import { describeArc } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-interface IProps extends SVGAttributes<SVGElement> {
+interface Props extends SVGAttributes<SVGElement> {
   size: number;
   className?: string;
 }
 
-const LoaderCircleInner: FC<IProps> = ({ size, className, ...props }) => (
+const LoaderCircleInner: FC<Props> = ({ size, className, ...props }) => (
   <svg
     className={classNames(styles.icon, className)}
     width={size}

src/components/common/LoaderCircle/index.tsx

@@ -7,12 +7,12 @@ import { SVGProps } from '~/utils/types';
 import { LoaderCircleInner } from './components/LoaderCircleInner';
 import styles from './styles.module.scss';
 
-interface IProps extends SVGProps {
+interface Props extends SVGProps {
   size?: number;
   className?: string;
 }
 
-export const LoaderCircle: FC<IProps> = ({ size = 24, className }) => (
+export const LoaderCircle: FC<Props> = ({ size = 24, className }) => (
   <div className={classNames(styles.wrap, 'loader-circle', className)}>
     <LoaderCircleInner size={size} />
   </div>

src/components/common/Markdown/index.tsx

@@ -5,12 +5,12 @@ import classNames from 'classnames';
 import styles from '~/styles/common/markdown.module.scss';
 import { formatText } from '~/utils/dom';
 
-interface IProps
+interface Props
   extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   children?: string;
 }
 
-const Markdown: VFC<IProps> = ({ className, children = '', ...props }) => (
+const Markdown: VFC<Props> = ({ className, children = '', ...props }) => (
   <div
     className={classNames(styles.wrapper, className)}
     {...props}

src/components/common/ModalWrapper/index.tsx

@@ -4,11 +4,11 @@ import ReactDOM from 'react-dom';
 
 import styles from './styles.module.scss';
 
-type IProps = {
+type Props = {
   onOverlayClick: MouseEventHandler;
 };
 
-const ModalWrapper: FC<IProps> = ({ children, onOverlayClick }) => {
+const ModalWrapper: FC<Props> = ({ children, onOverlayClick }) => {
   return ReactDOM.createPortal(
     <div className={styles.fixed}>
       <div className={styles.overlay} onClick={onOverlayClick} />

src/components/common/Padder/index.tsx

@@ -4,13 +4,13 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {
+type Props = HTMLAttributes<HTMLDivElement> & {
   padding?: number;
   vertical?: boolean;
   horizontal?: boolean;
 };
 
-const Padder: FC<IProps> = ({
+const Padder: FC<Props> = ({
   padding,
   children,
   className,

src/components/common/Panel/index.tsx

@@ -4,12 +4,12 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {
+type Props = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;
   stretchy?: boolean;
 };
 
-const Panel: FC<IProps> = ({
+const Panel: FC<Props> = ({
   className,
   children,
   seamless,

src/components/common/Sticky/index.tsx

@@ -2,11 +2,11 @@ import { DetailsHTMLAttributes, FC } from 'react';
 
 import StickyBox from 'react-sticky-box';
 
-interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {
+interface Props extends DetailsHTMLAttributes<HTMLDivElement> {
   offsetTop?: number;
 }
 
-const Sticky: FC<IProps> = ({ children, offsetTop = 65 }) => (
+const Sticky: FC<Props> = ({ children, offsetTop = 65 }) => (
   <StickyBox offsetTop={offsetTop} offsetBottom={10}>
     {children}
   </StickyBox>

src/components/common/Superpower/index.tsx

@@ -4,9 +4,9 @@ import { observer } from 'mobx-react-lite';
 
 import { useAuth } from '~/hooks/auth/useAuth';
 
-interface IProps {}
+interface Props {}
 
-const Superpower: FC<IProps> = observer(({ children }) => {
+const Superpower: FC<Props> = observer(({ children }) => {
   const { isTester } = useAuth();
 
   if (!isTester) return null;

src/components/common/TagField/index.tsx

@@ -2,9 +2,9 @@ import { FC, HTMLAttributes } from 'react';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {};
+type Props = HTMLAttributes<HTMLDivElement> & {};
 
-const TagField: FC<IProps> = ({ children }) => (
+const TagField: FC<Props> = ({ children }) => (
   <div className={styles.wrap}>{children}</div>
 );
 

src/components/input/ButtonGroup/index.tsx

@@ -4,8 +4,8 @@ import classNames from 'classnames';
 
 import styles from './styles.module.scss';
 
-type IProps = HTMLAttributes<HTMLDivElement> & {};
+type Props = HTMLAttributes<HTMLDivElement> & {};
 
-export const ButtonGroup = ({ children, className }: IProps) => (
+export const ButtonGroup = ({ children, className }: Props) => (
   <div className={classNames(styles.wrap, className)}>{children}</div>
 );

src/components/input/Textarea/index.tsx

@@ -16,7 +16,7 @@ import { useForwardRef } from '~/hooks/dom/useForwardRef';
 
 import styles from './styles.module.scss';
 
-type IProps = DetailedHTMLProps<
+type Props = DetailedHTMLProps<
   TextareaHTMLAttributes<HTMLTextAreaElement>,
   HTMLTextAreaElement
 > & {
@@ -29,7 +29,7 @@ type IProps = DetailedHTMLProps<
   title?: string;
 };
 
-const Textarea = forwardRef<HTMLTextAreaElement, IProps>(
+const Textarea = forwardRef<HTMLTextAreaElement, Props>(
   (
     {
       placeholder,

src/components/input/Toggle/index.tsx

@@ -8,13 +8,13 @@ import styles from './styles.module.scss';
 
 type ToggleColor = 'primary' | 'secondary' | 'lab' | 'danger' | 'white';
 
-type IProps = Omit<ButtonProps, 'value' | 'color'> & {
+type Props = Omit<ButtonProps, 'value' | 'color'> & {
   value?: boolean;
   handler?: (val: boolean) => void;
   color?: ToggleColor;
 };
 
-const Toggle: FC<IProps> = ({ value, handler, color = 'primary', ...rest }) => {
+const Toggle: FC<Props> = ({ value, handler, color = 'primary', ...rest }) => {
   const onClick = useCallback(() => {
     if (!handler) {
       return;

src/components/main/UserButton/index.tsx

@@ -1,34 +0,0 @@
-import { FC } from 'react';
-
-import { Avatar } from '~/components/common/Avatar';
-import { Group } from '~/components/common/Group';
-import { imagePresets } from '~/constants/urls';
-import { IFile } from '~/types';
-import { getURL } from '~/utils/dom';
-
-import styles from './styles.module.scss';
-
-interface IProps {
-  username: string;
-  photo?: IFile;
-  hasUpdates?: boolean;
-
-  onClick?: () => void;
-}
-
-const UserButton: FC<IProps> = ({ username, photo, hasUpdates, onClick }) => {
-  return (
-    <button className={styles.wrap} onClick={onClick}>
-      <Group horizontal className={styles.user_button}>
-        <div className={styles.username}>{username}</div>
-        <Avatar
-          url={getURL(photo, imagePresets.avatar)}
-          size={32}
-          hasUpdates={hasUpdates}
-        />
-      </Group>
-    </button>
-  );
-};
-
-export { UserButton };

src/components/main/UserButton/styles.module.scss

@@ -1,55 +0,0 @@
-@import 'src/styles/variables';
-
-.wrap {
-  position: relative;
-  z-index: 2;
-
-  &:hover .menu {
-    display: flex;
-  }
-}
-
-.user_button {
-  align-items: center;
-  border-radius: $radius;
-  font: $font_16_semibold;
-  text-transform: uppercase;
-  flex: 0 !important;
-  cursor: pointer;
-  margin-left: $gap;
-  white-space: nowrap;
-  padding: 0;
-}
-
-.user_avatar {
-  @include outer_shadow();
-
-  flex: 0 0 32px;
-  width: 32px;
-  height: 32px;
-  background: white;
-  border-radius: $radius;
-  margin-left: ($gap + 2px) !important;
-  background: 50% 50% no-repeat $color_primary;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-size: cover;
-
-  svg {
-    fill: #222222;
-    stroke: #222222;
-    width: 24px;
-    height: 24px;
-  }
-
-  @include tablet {
-    margin-left: 0 !important;
-  }
-}
-
-.username {
-  @include tablet {
-    display: none;
-  }
-}

src/components/node/CommendDeleted/index.tsx

@@ -5,12 +5,12 @@ import { IComment } from '~/types';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   id: IComment['id'];
   onDelete: (id: IComment['id'], isLocked: boolean) => void;
 }
 
-const CommendDeleted: FC<IProps> = ({ id, onDelete }) => {
+const CommendDeleted: FC<Props> = ({ id, onDelete }) => {
   const onRestore = useCallback(() => onDelete(id, false), [id, onDelete]);
 
   return (

src/components/node/NodeAudioBlock/index.tsx

@@ -6,9 +6,9 @@ import { useNodeAudios } from '~/hooks/node/useNodeAudios';
 
 import styles from './styles.module.scss';
 
-interface IProps extends NodeComponentProps {}
+interface Props extends NodeComponentProps {}
 
-const NodeAudioBlock: FC<IProps> = ({ node }) => {
+const NodeAudioBlock: FC<Props> = ({ node }) => {
   const audios = useNodeAudios(node);
 
   return (

src/components/node/NodeAudioImageBlock/index.tsx

@@ -8,9 +8,9 @@ import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-interface IProps extends NodeComponentProps {}
+interface Props extends NodeComponentProps {}
 
-const NodeAudioImageBlock: FC<IProps> = ({ node }) => {
+const NodeAudioImageBlock: FC<Props> = ({ node }) => {
   const images = useNodeImages(node);
 
   if (images.length === 0) return null;

src/components/node/NodeDeletedBadge/index.tsx

@@ -2,9 +2,9 @@ import { FC } from 'react';
 
 import styles from './styles.module.scss';
 
-interface IProps {}
+interface Props {}
 
-const NodeDeletedBadge: FC<IProps> = () => {
+const NodeDeletedBadge: FC<Props> = () => {
   return (
     <div className={styles.badge}>
       Эта ячейка заблокирована. Её не никто не увидит.

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -22,9 +22,9 @@ import { getNodeSwiperImageSizes } from './helpers';
 import { NODE_SWIPER_OPTIONS } from './options';
 import styles from './styles.module.scss';
 
-interface IProps extends NodeComponentProps {}
+interface Props extends NodeComponentProps {}
 
-const NodeImageSwiperBlock: FC<IProps> = observer(({ node }) => {
+const NodeImageSwiperBlock: FC<Props> = observer(({ node }) => {
   const [controlledSwiper, setControlledSwiper] = useState<SwiperClass>();
   const showPhotoSwiper = useImageModal();
   const { isOpened: isModalActive } = useModal();

src/components/node/NodeNoComments/index.tsx

@@ -8,12 +8,12 @@ import { t } from '~/utils/trans';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   loading?: boolean;
   count?: number;
 }
 
-const NodeNoComments: FC<IProps> = ({ loading = false, count = 3 }) => {
+const NodeNoComments: FC<Props> = ({ loading = false, count = 3 }) => {
   const items = useMemo(
     () =>
       [...new Array(count)].map((_, i) => (

src/components/node/NodeRelated/index.tsx

@@ -8,12 +8,12 @@ import { INode } from '~/types';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   title: ReactElement | string;
   items: Partial<INode>[];
 }
 
-const NodeRelated: FC<IProps> = ({ title, items }) => {
+const NodeRelated: FC<Props> = ({ title, items }) => {
   return (
     <Group className={styles.wrap}>
       <SubTitle className={styles.title}>{title}</SubTitle>

src/components/node/NodeRelated/placeholder.tsx

@@ -9,9 +9,9 @@ import { range } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-interface IProps {}
+interface Props {}
 
-const NodeRelatedPlaceholder: FC<IProps> = memo(() => {
+const NodeRelatedPlaceholder: FC<Props> = memo(() => {
   return (
     <Group className={classNames(styles.wrap, styles.placeholder)}>
       <div className={styles.title}>

src/components/node/NodeRelatedBlock/index.tsx

@@ -7,13 +7,13 @@ import { useTagSidebar } from '~/hooks/sidebar/useTagSidebar';
 import { INode } from '~/types';
 import { INodeRelated } from '~/types/node';
 
-interface IProps {
+interface Props {
   isLoading: boolean;
   node: INode;
   related: INodeRelated;
 }
 
-const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
+const NodeRelatedBlock: FC<Props> = ({ isLoading, node, related }) => {
   const goToTag = useTagSidebar();
 
   if (isLoading) {

src/components/node/NodeTags/index.tsx

@@ -3,7 +3,7 @@ import { FC, memo } from 'react';
 import { Tags } from '~/containers/tags/Tags';
 import { ITag } from '~/types';
 
-interface IProps {
+interface Props {
   is_deletable?: boolean;
   is_editable?: boolean;
   tags: ITag[];
@@ -12,7 +12,7 @@ interface IProps {
   onTagDelete?: (id: ITag['ID']) => void;
 }
 
-const NodeTags: FC<IProps> = memo(
+const NodeTags: FC<Props> = memo(
   ({ is_editable, is_deletable, tags, onChange, onTagClick, onTagDelete }) => {
     return (
       <Tags

src/components/node/NodeTagsBlock/index.tsx

@@ -3,9 +3,9 @@ import { FC } from 'react';
 import { NodeTags } from '~/components/node/NodeTags';
 import { useTagContext } from '~/utils/context/TagsContextProvider';
 
-interface IProps {}
+interface Props {}
 
-const NodeTagsBlock: FC<IProps> = () => {
+const NodeTagsBlock: FC<Props> = () => {
   const {
     tags,
     canAppend,

src/components/node/NodeTagsPlaceholder/index.tsx

@@ -3,13 +3,13 @@ import { FC, memo } from 'react';
 import { Tags } from '~/containers/tags/Tags';
 import { ITag } from '~/types';
 
-interface IProps {
+interface Props {
   is_editable?: boolean;
   tags: ITag[];
   onChange?: (tags: string[]) => void;
 }
 
-const NodeTagsPlaceholder: FC<IProps> = memo(
+const NodeTagsPlaceholder: FC<Props> = memo(
   ({ is_editable, tags, onChange }) => (
     <Tags tags={tags} editable={is_editable} onTagsChange={onChange} />
   ),

src/components/node/NodeTextBlock/index.tsx

@@ -10,9 +10,9 @@ import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-interface IProps extends NodeComponentProps {}
+interface Props extends NodeComponentProps {}
 
-const NodeTextBlock: FC<IProps> = ({ node }) => {
+const NodeTextBlock: FC<Props> = ({ node }) => {
   const content = useMemo(
     () => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''),
     [node],

src/components/node/NodeTitle/index.tsx

@@ -11,7 +11,7 @@ import { NodeLikeButton } from '../NodeLikeButton';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   id?: number;
   title: string;
   username?: string;
@@ -34,7 +34,7 @@ interface IProps {
   onEdit: () => void;
 }
 
-const NodeTitle: VFC<IProps> = memo(
+const NodeTitle: VFC<Props> = memo(
   ({
     title,
     username,

src/components/node/NodeVideoBlock/index.tsx

@@ -5,9 +5,9 @@ import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-interface IProps extends NodeComponentProps {}
+interface Props extends NodeComponentProps {}
 
-const NodeVideoBlock: FC<IProps> = ({ node }) => {
+const NodeVideoBlock: FC<Props> = ({ node }) => {
   const video = useMemo(() => {
     const url: string = path(['blocks', 0, 'url'], node) || '';
     const match =

src/components/profile/ProfileAccountsError/index.tsx

@@ -6,12 +6,12 @@ import { ERROR_LITERAL } from '~/constants/errors';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   onClose: () => void;
   error: string;
 }
 
-const ProfileAccountsError: FC<IProps> = ({ onClose, error }) => (
+const ProfileAccountsError: FC<Props> = ({ onClose, error }) => (
   <div className={styles.wrap}>
     <Group className={styles.content}>
       <div className={styles.title}>О НЕТ!</div>

src/components/profile/ProfileSidebarSettings/index.tsx

@@ -12,7 +12,7 @@ import {
 
 import styles from './styles.module.scss';
 
-interface IProps {}
+interface Props {}
 
 const Form = ({ children, className }) => {
   const { handleSubmit } = useSettings();
@@ -24,7 +24,7 @@ const Form = ({ children, className }) => {
   );
 };
 
-const ProfileSidebarSettings: FC<IProps> = () => {
+const ProfileSidebarSettings: FC<Props> = () => {
   const { closeAllTabs } = useStackContext();
 
   return (

src/components/sidebar/SidebarWrapper/index.tsx

@@ -6,13 +6,13 @@ import { useCloseOnEscape } from '~/hooks';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   onClose?: () => void;
   closeOnBackdropClick?: boolean;
   backdrop?: ReactNode;
 }
 
-const SidebarWrapper: FC<IProps> = ({
+const SidebarWrapper: FC<Props> = ({
   children,
   onClose,
   closeOnBackdropClick = true,

src/components/sidebar/TagSidebarList/index.tsx

@@ -5,11 +5,11 @@ import { INode } from '~/types';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   nodes: INode[];
 }
 
-const TagSidebarList: FC<IProps> = ({ nodes }) => (
+const TagSidebarList: FC<Props> = ({ nodes }) => (
   <div className={styles.list}>
     {nodes.map((node) => (
       <NodeHorizontalCard node={node} key={node.id} />

src/components/tags/Tag/index.tsx

@@ -3,7 +3,7 @@ import { FC, FocusEventHandler, useCallback } from 'react';
 import { TagWrapper } from '~/components/tags/TagWrapper';
 import { ITag } from '~/types';
 
-interface IProps {
+interface Props {
   tag: Partial<ITag>;
   size?: 'normal' | 'big';
 
@@ -16,7 +16,7 @@ interface IProps {
   onDelete?: (id: ITag['ID']) => void;
 }
 
-const Tag: FC<IProps> = ({
+const Tag: FC<Props> = ({
   tag,
   deletable: deletable,
   hoverable: hoverable,

src/components/tags/TagAutocompleteRow/index.tsx

@@ -6,19 +6,14 @@ import { Icon } from '~/components/common/Icon';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   selected: boolean;
   title: string;
   type: 'enter' | 'right' | 'tag';
   onSelect: (val: string) => void;
 }
 
-const TagAutocompleteRow: FC<IProps> = ({
-  selected,
-  type,
-  title,
-  onSelect,
-}) => {
+const TagAutocompleteRow: FC<Props> = ({ selected, type, title, onSelect }) => {
   const onClick = useCallback(() => onSelect(title), [title, onSelect]);
 
   return (

src/components/tags/TagWrapper/index.tsx

@@ -6,7 +6,7 @@ import { Icon } from '~/components/common/Icon';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   className?: string;
   size?: string;
   color?: 'primary' | 'danger' | 'info' | 'black' | 'default';
@@ -18,7 +18,7 @@ interface IProps {
   title?: string;
 }
 
-const TagWrapper: FC<IProps> = ({
+const TagWrapper: FC<Props> = ({
   className,
   color = 'default',
   children,

src/components/upload/AudioUpload/index.tsx

@@ -7,7 +7,7 @@ import { Icon } from '~/components/common/Icon';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   id?: string;
   title?: string;
   progress?: number;
@@ -16,13 +16,7 @@ interface IProps {
   uploading?: boolean;
 }
 
-const AudioUpload: FC<IProps> = ({
-  title,
-  progress,
-  uploading,
-  id,
-  onDrop,
-}) => {
+const AudioUpload: FC<Props> = ({ title, progress, uploading, id, onDrop }) => {
   const onDropFile = useCallback(() => {
     if (!id || !onDrop) return;
     onDrop(id);

src/components/upload/ImageUpload/index.tsx

@@ -8,7 +8,7 @@ import { IFile } from '~/types';
 
 import styles from './styles.module.scss';
 
-interface IProps {
+interface Props {
   id?: IFile['id'];
   thumb?: string;
   progress?: number;
@@ -17,13 +17,7 @@ interface IProps {
   uploading?: boolean;
 }
 
-const ImageUpload: FC<IProps> = ({
-  thumb,
-  progress,
-  uploading,
-  id,
-  onDrop,
-}) => {
+const ImageUpload: FC<Props> = ({ thumb, progress, uploading, id, onDrop }) => {
   const onDropFile = useCallback(() => {
     if (!id || !onDrop) return;
     onDrop(id);

src/components/upload/UploadDropzone/index.tsx

@@ -10,12 +10,12 @@ import { DivProps } from '~/utils/types';
 
 import styles from './styles.module.scss';
 
-interface IProps extends DivProps {
+interface Props extends DivProps {
   onUpload: (files: File[]) => void;
   helperClassName?: string;
 }
 
-const UploadDropzone: FC<IProps> = ({
+const UploadDropzone: FC<Props> = ({
   children,
   onUpload,
   helperClassName,

src/components/welcome/PersonsSlide/index.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 
-import { Container } from '~/containers/main/Container';
+import { Container } from '~/components/common/Container';
 import markdown from '~/styles/common/markdown.module.scss';
 
 import { WelcomeSlideWrapper } from '../WelcomeSlideWrapper';

src/components/welcome/WelcomeSlide/index.tsx

@@ -2,8 +2,8 @@ import { FC } from 'react';
 
 import classNames from 'classnames';
 
+import { Container } from '~/components/common/Container';
 import { Filler } from '~/components/common/Filler';
-import { Container } from '~/containers/main/Container';
 import { useAuth } from '~/hooks/auth/useAuth';
 import markdown from '~/styles/common/markdown.module.scss';