From f2289f4530d209914bca5bce9c7b02292915f225 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 27 Oct 2020 17:53:04 +0700
Subject: [PATCH 01/19] added tag searching router

---
 src/containers/main/SidebarRouter/index.tsx   | 15 ++++++++++
 src/containers/node/NodeLayout/index.tsx      |  3 ++
 .../sidebars/SidebarWrapper/index.tsx         | 28 +++++++++++++++++++
 .../SidebarWrapper/styles.module.scss         | 26 +++++++++++++++++
 src/containers/sidebars/TagSidebar/index.tsx  |  8 ++++++
 5 files changed, 80 insertions(+)
 create mode 100644 src/containers/main/SidebarRouter/index.tsx
 create mode 100644 src/containers/sidebars/SidebarWrapper/index.tsx
 create mode 100644 src/containers/sidebars/SidebarWrapper/styles.module.scss
 create mode 100644 src/containers/sidebars/TagSidebar/index.tsx

diff --git a/src/containers/main/SidebarRouter/index.tsx b/src/containers/main/SidebarRouter/index.tsx
new file mode 100644
index 00000000..72e45d1f
--- /dev/null
+++ b/src/containers/main/SidebarRouter/index.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { Route, Switch } from 'react-router';
+import { TagSidebar } from '~/containers/sidebars/TagSidebar';
+
+interface IProps {
+  prefix?: string;
+}
+
+const SidebarRouter: FC<IProps> = ({ prefix = '' }) => (
+  <Switch>
+    <Route path={`${prefix}/tag/:name`} component={TagSidebar} />
+  </Switch>
+);
+
+export { SidebarRouter };
diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index 1e6d7ec0..16d28c65 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@@ -31,6 +31,7 @@ import * as NODE_ACTIONS from '~/redux/node/actions';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { IState } from '~/redux/store';
 import { selectModal } from '~/redux/modal/selectors';
+import { SidebarRouter } from '~/containers/main/SidebarRouter';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -231,6 +232,8 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
 
           <Footer />
         </Card>
+
+        <SidebarRouter prefix="/post:id" />
       </>
     );
   }
diff --git a/src/containers/sidebars/SidebarWrapper/index.tsx b/src/containers/sidebars/SidebarWrapper/index.tsx
new file mode 100644
index 00000000..1fea623b
--- /dev/null
+++ b/src/containers/sidebars/SidebarWrapper/index.tsx
@@ -0,0 +1,28 @@
+import React, { FC, useEffect, useRef } from 'react';
+import styles from './styles.module.scss';
+import { createPortal } from 'react-dom';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+
+interface IProps {}
+
+const SidebarWrapper: FC<IProps> = ({ children }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    disableBodyScroll(ref.current);
+
+    return () => enableBodyScroll(ref.current);
+  }, [ref.current]);
+
+  return createPortal(
+    <div className={styles.wrapper}>
+      <div className={styles.content} ref={ref}>
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+};
+
+export { SidebarWrapper };
diff --git a/src/containers/sidebars/SidebarWrapper/styles.module.scss b/src/containers/sidebars/SidebarWrapper/styles.module.scss
new file mode 100644
index 00000000..f89efd80
--- /dev/null
+++ b/src/containers/sidebars/SidebarWrapper/styles.module.scss
@@ -0,0 +1,26 @@
+.wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 0, 0, 0.3);
+  display: flex;
+  flex-direction: row;
+  z-index: 20;
+  justify-content: flex-end;
+
+  @include can_backdrop {
+    background: transparentize($content_bg, 0.15);
+    -webkit-backdrop-filter: blur(15px);
+    backdrop-filter: blur(15px);
+  }
+}
+
+.content {
+  flex: 0 0 33vw;
+  width: 33vw;
+  height: 100%;
+  overflow: auto;
+  background: $content_bg;
+}
diff --git a/src/containers/sidebars/TagSidebar/index.tsx b/src/containers/sidebars/TagSidebar/index.tsx
new file mode 100644
index 00000000..fdd0d990
--- /dev/null
+++ b/src/containers/sidebars/TagSidebar/index.tsx
@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
+
+interface IProps {}
+
+const TagSidebar: FC<IProps> = () => <SidebarWrapper>TAGS</SidebarWrapper>;
+
+export { TagSidebar };

From c4f60f3d81dc1fe287bfcc3e3f4c5d63f664181a Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 15:06:08 +0700
Subject: [PATCH 02/19] made tags panel

---
 package.json                                  |   2 +-
 .../containers/InfiniteScroll/index.tsx       |  42 +++++++
 .../InfiniteScroll/styles.module.scss         |   2 +
 .../flow/FlowRecentItem/styles.scss           |   3 +
 src/components/node/NodeTags/index.tsx        |   9 +-
 src/components/node/Tag/index.tsx             |  70 +++++++-----
 src/components/node/Tag/styles.scss           |  19 +++-
 src/components/node/Tags/index.tsx            |  15 +--
 .../sidebar/TagSidebarList/index.tsx          |  18 +++
 .../sidebar/TagSidebarList/styles.module.scss |   4 +
 src/constants/api.ts                          |   5 +-
 src/constants/urls.ts                         |   1 +
 src/containers/main/SidebarRouter/index.tsx   |   2 +-
 src/containers/node/NodeLayout/index.tsx      |  22 ++--
 .../sidebars/SidebarWrapper/index.tsx         |  12 +-
 .../SidebarWrapper/styles.module.scss         |  33 +++++-
 src/containers/sidebars/TagSidebar/index.tsx  | 100 ++++++++++++++++-
 .../sidebars/TagSidebar/styles.module.scss    | 105 ++++++++++++++++++
 src/redux/node/constants.ts                   |   5 +-
 src/redux/store.ts                            |   6 +
 src/redux/tag/actions.ts                      |  12 ++
 src/redux/tag/api.ts                          |  19 ++++
 src/redux/tag/constants.ts                    |   6 +
 src/redux/tag/handlers.ts                     |  15 +++
 src/redux/tag/index.ts                        |  21 ++++
 src/redux/tag/sagas.ts                        |  31 ++++++
 src/redux/tag/selectors.ts                    |   4 +
 src/sprites/Sprites.tsx                       |   8 ++
 src/utils/api/index.ts                        |  11 +-
 src/utils/dom.ts                              |  17 ++-
 yarn.lock                                     |   8 +-
 31 files changed, 552 insertions(+), 75 deletions(-)
 create mode 100644 src/components/containers/InfiniteScroll/index.tsx
 create mode 100644 src/components/containers/InfiniteScroll/styles.module.scss
 create mode 100644 src/components/sidebar/TagSidebarList/index.tsx
 create mode 100644 src/components/sidebar/TagSidebarList/styles.module.scss
 create mode 100644 src/containers/sidebars/TagSidebar/styles.module.scss
 create mode 100644 src/redux/tag/actions.ts
 create mode 100644 src/redux/tag/api.ts
 create mode 100644 src/redux/tag/constants.ts
 create mode 100644 src/redux/tag/handlers.ts
 create mode 100644 src/redux/tag/index.ts
 create mode 100644 src/redux/tag/sagas.ts
 create mode 100644 src/redux/tag/selectors.ts

diff --git a/package.json b/package.json
index 7332d17b..44c76853 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "resolve-url-loader": "^3.0.1",
     "style-loader": "^0.21.0",
     "ts-node": "^8.4.1",
-    "typescript": "^3.6.4",
+    "typescript": "^3.7.2",
     "uglifyjs-webpack-plugin": "^1.3.0",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.9",
diff --git a/src/components/containers/InfiniteScroll/index.tsx b/src/components/containers/InfiniteScroll/index.tsx
new file mode 100644
index 00000000..70db3103
--- /dev/null
+++ b/src/components/containers/InfiniteScroll/index.tsx
@@ -0,0 +1,42 @@
+import React, { FC, HTMLAttributes, useCallback, useEffect, useRef } from 'react';
+import styles from './styles.module.scss';
+
+interface IProps extends HTMLAttributes<HTMLDivElement> {
+  hasMore: boolean;
+  scrollReactPx?: number;
+  loadMore: () => void;
+}
+
+const InfiniteScroll: FC<IProps> = ({ children, hasMore, scrollReactPx, loadMore, ...props }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const onScrollEnd = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      if (!hasMore || !entries[0].isIntersecting) return;
+      loadMore();
+    },
+    [hasMore, loadMore]
+  );
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const observer = new IntersectionObserver(onScrollEnd, {
+      root: null,
+      rootMargin: '200px',
+      threshold: 1.0,
+    });
+
+    observer.observe(ref.current);
+
+    return () => observer.disconnect();
+  }, [ref.current, onScrollEnd]);
+
+  return (
+    <div {...props}>
+      {children}
+      {hasMore && <div className={styles.more} ref={ref} />}
+    </div>
+  );
+};
+
+export { InfiniteScroll };
diff --git a/src/components/containers/InfiniteScroll/styles.module.scss b/src/components/containers/InfiniteScroll/styles.module.scss
new file mode 100644
index 00000000..9fd1a252
--- /dev/null
+++ b/src/components/containers/InfiniteScroll/styles.module.scss
@@ -0,0 +1,2 @@
+.more {
+}
diff --git a/src/components/flow/FlowRecentItem/styles.scss b/src/components/flow/FlowRecentItem/styles.scss
index d103d429..42381a98 100644
--- a/src/components/flow/FlowRecentItem/styles.scss
+++ b/src/components/flow/FlowRecentItem/styles.scss
@@ -54,4 +54,7 @@
   font: $font_12_regular;
   margin-top: 4px;
   opacity: 0.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
diff --git a/src/components/node/NodeTags/index.tsx b/src/components/node/NodeTags/index.tsx
index 6c541051..910d2590 100644
--- a/src/components/node/NodeTags/index.tsx
+++ b/src/components/node/NodeTags/index.tsx
@@ -6,10 +6,13 @@ interface IProps {
   is_editable?: boolean;
   tags: ITag[];
   onChange?: (tags: string[]) => void;
+  onTagClick?: (tag: Partial<ITag>) => void;
 }
 
-const NodeTags: FC<IProps> = memo(({ is_editable, tags, onChange }) => (
-  <Tags tags={tags} is_editable={is_editable} onTagsChange={onChange} />
-));
+const NodeTags: FC<IProps> = memo(({ is_editable, tags, onChange, onTagClick }) => {
+  return (
+    <Tags tags={tags} is_editable={is_editable} onTagsChange={onChange} onTagClick={onTagClick} />
+  );
+});
 
 export { NodeTags };
diff --git a/src/components/node/Tag/index.tsx b/src/components/node/Tag/index.tsx
index fd8e4896..f9bb1c8a 100644
--- a/src/components/node/Tag/index.tsx
+++ b/src/components/node/Tag/index.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEventHandler, FC, FocusEventHandler, KeyboardEventHandler } from 'react';
+import React, { ChangeEventHandler, FC, FocusEventHandler, KeyboardEventHandler, useCallback, } from 'react';
 import * as styles from './styles.scss';
 import { ITag } from '~/redux/types';
 import classNames = require('classnames');
@@ -11,6 +11,7 @@ const getTagFeature = (tag: Partial<ITag>) => {
 
 interface IProps {
   tag: Partial<ITag>;
+  size?: 'normal' | 'big';
 
   is_hoverable?: boolean;
   is_editing?: boolean;
@@ -18,32 +19,51 @@ interface IProps {
   onInput?: ChangeEventHandler<HTMLInputElement>;
   onKeyUp?: KeyboardEventHandler;
   onBlur?: FocusEventHandler<HTMLInputElement>;
+  onClick?: (tag: Partial<ITag>) => void;
 }
 
-const Tag: FC<IProps> = ({ tag, is_hoverable, is_editing, onInput, onKeyUp, onBlur }) => (
-  <div
-    className={classNames(styles.tag, getTagFeature(tag), {
-      is_hoverable,
-      is_editing,
-      input: !!onInput,
-    })}
-  >
-    <div className={styles.hole} />
-    <div className={styles.title}>{tag.title}</div>
+const Tag: FC<IProps> = ({
+  tag,
+  is_hoverable,
+  is_editing,
+  size = 'normal',
+  onInput,
+  onKeyUp,
+  onBlur,
+  onClick,
+}) => {
+  const onClickHandler = useCallback(() => {
+    if (!onClick) return;
+    onClick(tag);
+  }, [tag, onClick]);
 
-    {onInput && (
-      <input
-        type="text"
-        value={tag.title}
-        size={1}
-        placeholder="Добавить"
-        maxLength={24}
-        onChange={onInput}
-        onKeyUp={onKeyUp}
-        onBlur={onBlur}
-      />
-    )}
-  </div>
-);
+  return (
+    <div
+      className={classNames(styles.tag, getTagFeature(tag), size, {
+        is_hoverable,
+        is_editing,
+        input: !!onInput,
+        clickable: !!onClick,
+      })}
+      onClick={onClickHandler}
+    >
+      <div className={styles.hole} />
+      <div className={styles.title}>{tag.title}</div>
+
+      {onInput && (
+        <input
+          type="text"
+          value={tag.title}
+          size={1}
+          placeholder="Добавить"
+          maxLength={24}
+          onChange={onInput}
+          onKeyUp={onKeyUp}
+          onBlur={onBlur}
+        />
+      )}
+    </div>
+  );
+};
 
 export { Tag };
diff --git a/src/components/node/Tag/styles.scss b/src/components/node/Tag/styles.scss
index d5280c5c..1fb4d6df 100644
--- a/src/components/node/Tag/styles.scss
+++ b/src/components/node/Tag/styles.scss
@@ -1,6 +1,9 @@
+$big: 1.2;
+
 .tag {
   @include outer_shadow();
 
+  cursor: default;
   height: $tag_height;
   background: $tag_bg;
   display: flex;
@@ -14,6 +17,17 @@
   margin: 0 $gap $gap 0;
   position: relative;
 
+  &:global(.big) {
+    height: $tag_height * $big;
+    font: $font_16_semibold;
+    border-radius: ($tag_height * $big / 2) 3px 3px ($tag_height * $big / 2);
+
+    .hole {
+      width: $tag_height * $big;
+      height: $tag_height * $big;
+    }
+  }
+
   &:global(.is_hoverable) {
     cursor: pointer;
   }
@@ -56,6 +70,10 @@
     min-width: 100px;
   }
 
+  &:global(.clickable) {
+    cursor: pointer;
+  }
+
   input {
     background: none;
     border: none;
@@ -80,7 +98,6 @@
   width: $tag_height;
   height: $tag_height;
   display: flex;
-  // padding-right: 0px;
   align-items: center;
   justify-content: center;
   flex: 0 0 $tag_height;
diff --git a/src/components/node/Tags/index.tsx b/src/components/node/Tags/index.tsx
index eafb933f..894dde37 100644
--- a/src/components/node/Tags/index.tsx
+++ b/src/components/node/Tags/index.tsx
@@ -1,13 +1,13 @@
 import React, {
+  ChangeEvent,
   FC,
   HTMLAttributes,
-  useState,
+  KeyboardEvent,
   useCallback,
   useEffect,
-  KeyboardEvent,
-  ChangeEvent,
-  useRef,
   useMemo,
+  useRef,
+  useState,
 } from 'react';
 import { TagField } from '~/components/containers/TagField';
 import { ITag } from '~/redux/types';
@@ -18,9 +18,10 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   tags: Partial<ITag>[];
   is_editable?: boolean;
   onTagsChange?: (tags: string[]) => void;
+  onTagClick?: (tag: Partial<ITag>) => void;
 };
 
-export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props }) => {
+export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, onTagClick, ...props }) => {
   const [input, setInput] = useState('');
   const [data, setData] = useState([]);
   const timer = useRef(null);
@@ -98,11 +99,11 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props })
   return (
     <TagField {...props}>
       {catTags.map(tag => (
-        <Tag key={tag.title} tag={tag} />
+        <Tag key={tag.title} tag={tag} onClick={onTagClick} />
       ))}
 
       {ordinaryTags.map(tag => (
-        <Tag key={tag.title} tag={tag} />
+        <Tag key={tag.title} tag={tag} onClick={onTagClick} />
       ))}
 
       {data.map(tag => (
diff --git a/src/components/sidebar/TagSidebarList/index.tsx b/src/components/sidebar/TagSidebarList/index.tsx
new file mode 100644
index 00000000..b4c11027
--- /dev/null
+++ b/src/components/sidebar/TagSidebarList/index.tsx
@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import { INode } from '~/redux/types';
+import styles from './styles.module.scss';
+import { FlowRecentItem } from '~/components/flow/FlowRecentItem';
+
+interface IProps {
+  nodes: INode[];
+}
+
+const TagSidebarList: FC<IProps> = ({ nodes }) => (
+  <div className={styles.list}>
+    {nodes.map(node => (
+      <FlowRecentItem node={node} key={node.id} />
+    ))}
+  </div>
+);
+
+export { TagSidebarList };
diff --git a/src/components/sidebar/TagSidebarList/styles.module.scss b/src/components/sidebar/TagSidebarList/styles.module.scss
new file mode 100644
index 00000000..868192b4
--- /dev/null
+++ b/src/components/sidebar/TagSidebarList/styles.module.scss
@@ -0,0 +1,4 @@
+.list {
+  flex: 1;
+  flex-direction: column;
+}
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 991fe958..d942c61c 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -1,4 +1,4 @@
-import { INode, IComment } from '~/redux/types';
+import { IComment, INode } from '~/redux/types';
 import { ISocialProvider } from '~/redux/auth/types';
 
 export const API = {
@@ -46,4 +46,7 @@ export const API = {
   BORIS: {
     GET_BACKEND_STATS: '/stats/',
   },
+  TAG: {
+    NODES: `/tag/nodes`,
+  },
 };
diff --git a/src/constants/urls.ts b/src/constants/urls.ts
index 055bc214..606e6407 100644
--- a/src/constants/urls.ts
+++ b/src/constants/urls.ts
@@ -13,6 +13,7 @@ export const URLS = {
     BACKEND_DOWN: '/oopsie',
   },
   NODE_URL: (id: number | string) => `/post${id}`,
+  NODE_TAG_URL: (id: number, tagName: string) => `/post${id}/tag/${tagName}`,
   PROFILE: (username: string) => `/~${username}`,
   PROFILE_PAGE: (username: string) => `/profile/${username}`,
 };
diff --git a/src/containers/main/SidebarRouter/index.tsx b/src/containers/main/SidebarRouter/index.tsx
index 72e45d1f..0bf35ca6 100644
--- a/src/containers/main/SidebarRouter/index.tsx
+++ b/src/containers/main/SidebarRouter/index.tsx
@@ -8,7 +8,7 @@ interface IProps {
 
 const SidebarRouter: FC<IProps> = ({ prefix = '' }) => (
   <Switch>
-    <Route path={`${prefix}/tag/:name`} component={TagSidebar} />
+    <Route path={`${prefix}/tag/:tag`} component={TagSidebar} />
   </Switch>
 );
 
diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index 16d28c65..478a1837 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@@ -1,5 +1,5 @@
-import React, { FC, createElement, useEffect, useCallback, useState, useMemo, memo } from 'react';
-import { RouteComponentProps } from 'react-router';
+import React, { createElement, FC, memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { RouteComponentProps, useHistory } from 'react-router';
 import { connect } from 'react-redux';
 import { canEditNode, canLikeNode, canStarNode } from '~/utils/node';
 import { selectNode } from '~/redux/node/selectors';
@@ -12,12 +12,7 @@ import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
-import {
-  NODE_COMPONENTS,
-  NODE_INLINES,
-  NODE_HEADS,
-  INodeComponentProps,
-} from '~/redux/node/constants';
+import { INodeComponentProps, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES, } from '~/redux/node/constants';
 import { selectUser } from '~/redux/auth/selectors';
 import pick from 'ramda/es/pick';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
@@ -32,6 +27,8 @@ import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { IState } from '~/redux/store';
 import { selectModal } from '~/redux/modal/selectors';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
+import { ITag } from '~/redux/types';
+import { URLS } from '~/constants/urls';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -87,6 +84,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
     modalShowPhotoswipe,
   }) => {
     const [layout, setLayout] = useState({});
+    const history = useHistory();
 
     const updateLayout = useCallback(() => setLayout({}), []);
 
@@ -102,6 +100,13 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
       [node, nodeUpdateTags]
     );
 
+    const onTagClick = useCallback(
+      (tag: Partial<ITag>) => {
+        history.push(URLS.NODE_TAG_URL(node.id, encodeURIComponent(tag.title)));
+      },
+      [history, node.id]
+    );
+
     const can_edit = useMemo(() => canEditNode(node, user), [node, user]);
     const can_like = useMemo(() => canLikeNode(node, user), [node, user]);
     const can_star = useMemo(() => canStarNode(node, user), [node, user]);
@@ -198,6 +203,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                             is_editable={is_user}
                             tags={node.tags}
                             onChange={onTagsChange}
+                            onTagClick={onTagClick}
                           />
                         )}
 
diff --git a/src/containers/sidebars/SidebarWrapper/index.tsx b/src/containers/sidebars/SidebarWrapper/index.tsx
index 1fea623b..28c2b7db 100644
--- a/src/containers/sidebars/SidebarWrapper/index.tsx
+++ b/src/containers/sidebars/SidebarWrapper/index.tsx
@@ -2,21 +2,27 @@ import React, { FC, useEffect, useRef } from 'react';
 import styles from './styles.module.scss';
 import { createPortal } from 'react-dom';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+import { useCloseOnEscape } from '~/utils/hooks';
 
-interface IProps {}
+interface IProps {
+  onClose?: () => void;
+}
 
-const SidebarWrapper: FC<IProps> = ({ children }) => {
+const SidebarWrapper: FC<IProps> = ({ children, onClose }) => {
   const ref = useRef<HTMLDivElement>(null);
 
+  useCloseOnEscape(onClose);
+
   useEffect(() => {
     if (!ref.current) return;
-    disableBodyScroll(ref.current);
+    disableBodyScroll(ref.current, { reserveScrollBarGap: true });
 
     return () => enableBodyScroll(ref.current);
   }, [ref.current]);
 
   return createPortal(
     <div className={styles.wrapper}>
+      <div className={styles.clicker} onClick={onClose} />
       <div className={styles.content} ref={ref}>
         {children}
       </div>
diff --git a/src/containers/sidebars/SidebarWrapper/styles.module.scss b/src/containers/sidebars/SidebarWrapper/styles.module.scss
index f89efd80..a581c1af 100644
--- a/src/containers/sidebars/SidebarWrapper/styles.module.scss
+++ b/src/containers/sidebars/SidebarWrapper/styles.module.scss
@@ -1,3 +1,12 @@
+@keyframes appear {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes slideIn {
+  100% { transform: translate(0, 0); }
+}
+
 .wrapper {
   position: fixed;
   top: 0;
@@ -9,6 +18,8 @@
   flex-direction: row;
   z-index: 20;
   justify-content: flex-end;
+  overflow: hidden;
+  animation: appear 0.25s forwards;
 
   @include can_backdrop {
     background: transparentize($content_bg, 0.15);
@@ -18,9 +29,27 @@
 }
 
 .content {
-  flex: 0 0 33vw;
+  flex: 0 1 33vw;
   width: 33vw;
+  min-width: 480px;
+  max-width: 100vw;
   height: 100%;
   overflow: auto;
-  background: $content_bg;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  animation: slideIn 0.5s 0.1s forwards;
+  transform: translate(100%, 0);
+  position: relative;
+  z-index: 2;
+}
+
+.clicker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  cursor: pointer;
 }
diff --git a/src/containers/sidebars/TagSidebar/index.tsx b/src/containers/sidebars/TagSidebar/index.tsx
index fdd0d990..bcef7151 100644
--- a/src/containers/sidebars/TagSidebar/index.tsx
+++ b/src/containers/sidebars/TagSidebar/index.tsx
@@ -1,8 +1,102 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useEffect, useMemo } from 'react';
 import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
+import styles from './styles.module.scss';
+import { useHistory, useRouteMatch } from 'react-router';
+import { Tag } from '~/components/node/Tag';
+import { Icon } from '~/components/input/Icon';
+import { Link } from 'react-router-dom';
+import { TagSidebarList } from '~/components/sidebar/TagSidebarList';
+import { connect } from 'react-redux';
+import { selectTagNodes } from '~/redux/tag/selectors';
+import * as ACTIONS from '~/redux/tag/actions';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
 
-interface IProps {}
+const mapStateToProps = state => ({
+  nodes: selectTagNodes(state),
+});
 
-const TagSidebar: FC<IProps> = () => <SidebarWrapper>TAGS</SidebarWrapper>;
+const mapDispatchToProps = {
+  tagLoadNodes: ACTIONS.tagLoadNodes,
+  tagSetNodes: ACTIONS.tagSetNodes,
+};
+
+type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
+
+const TagSidebarUnconnected: FC<Props> = ({ nodes, tagLoadNodes, tagSetNodes }) => {
+  const {
+    params: { tag },
+    url,
+  } = useRouteMatch<{ tag: string }>();
+  const history = useHistory();
+
+  const basePath = url.replace(new RegExp(`\/tag\/${tag}$`), '');
+
+  useEffect(() => {
+    tagLoadNodes(tag);
+    return () => tagSetNodes({ list: [], count: 0 });
+  }, [tag]);
+
+  const loadMore = useCallback(() => {
+    if (nodes.isLoading) return;
+    tagLoadNodes(tag);
+  }, [tagLoadNodes, tag, nodes.isLoading]);
+
+  const title = useMemo(() => decodeURIComponent(tag), [tag]);
+  const progress = nodes.count > 0 ? `${(nodes.list.length / nodes.count) * 100}%` : '0';
+
+  const onClose = useCallback(() => history.push(basePath), [basePath]);
+  const hasMore = nodes.count > nodes.list.length;
+
+  return (
+    <SidebarWrapper onClose={onClose}>
+      <div className={styles.wrap}>
+        <div className={styles.content}>
+          <div className={styles.head}>
+            {nodes.count > 0 && (
+              <div className={styles.progress}>
+                <div className={styles.bar} style={{ width: progress }} />
+              </div>
+            )}
+
+            <div className={styles.tag}>
+              <Tag tag={{ title }} size="big" />
+            </div>
+
+            {nodes.isLoading && (
+              <div className={styles.sync}>
+                <LoaderCircle size={20} />
+              </div>
+            )}
+
+            <div className={styles.close}>
+              <Link to={basePath}>
+                <Icon icon="close" size={32} />
+              </Link>
+            </div>
+          </div>
+
+          {!nodes.count && !nodes.isLoading ? (
+            <div className={styles.none}>
+              <Icon icon="sad" size={120} />
+              <div>
+                У этого тэга нет постов
+                <br />
+                <br />
+                Такие дела
+              </div>
+            </div>
+          ) : (
+            <InfiniteScroll hasMore={hasMore} loadMore={loadMore} className={styles.list}>
+              <TagSidebarList nodes={nodes.list} />
+            </InfiniteScroll>
+          )}
+        </div>
+      </div>
+    </SidebarWrapper>
+  );
+};
+
+const TagSidebar = connect(mapStateToProps, mapDispatchToProps)(TagSidebarUnconnected);
 
 export { TagSidebar };
diff --git a/src/containers/sidebars/TagSidebar/styles.module.scss b/src/containers/sidebars/TagSidebar/styles.module.scss
new file mode 100644
index 00000000..9038443b
--- /dev/null
+++ b/src/containers/sidebars/TagSidebar/styles.module.scss
@@ -0,0 +1,105 @@
+.wrap {
+  @include outer_shadow;
+
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 400px;
+  max-width: 100vw;
+  position: relative;
+}
+
+.content {
+  background: $content_bg;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: auto;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+  width: 100%;
+  max-width: 400px;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $gap;
+  background: lighten($content_bg, 2%);
+}
+
+.tag {
+  flex: 1;
+  display: flex;
+
+  & > * {
+    margin-bottom: 0;
+  }
+}
+
+.close {
+  cursor: pointer;
+
+  svg {
+    fill: white;
+    stroke: white;
+    color: white;
+  }
+}
+
+.list {
+  flex: 1 1 100%;
+  padding: $gap;
+  overflow: auto;
+}
+
+.sync {
+  padding-left: $gap * 2;
+
+  svg {
+    fill: transparentize(white, 0.5);
+  }
+}
+
+.progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: darken($content_bg, 2%);
+  height: 2px;
+  z-index: 2;
+  pointer-events: none;
+  touch-action: none;
+}
+
+.bar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: lighten($content_bg, 20%);
+}
+
+.none {
+  padding: 40px $gap;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: transparentize(white, 0.9);
+  fill: currentColor;
+  font: $font_18_semibold;
+  stroke: none;
+  line-height: 26px;
+  flex: 1;
+
+  div {
+    margin-top: 24px;
+    max-width: 200px;
+    text-align: center;
+    font-weight: 900;
+    text-transform: uppercase;
+  }
+}
diff --git a/src/redux/node/constants.ts b/src/redux/node/constants.ts
index 76d421b0..9d3da6af 100644
--- a/src/redux/node/constants.ts
+++ b/src/redux/node/constants.ts
@@ -1,5 +1,5 @@
-import { FC, ReactElement } from 'react';
-import { INode, ValueOf, IComment } from '../types';
+import { FC } from 'react';
+import { IComment, INode, ValueOf } from '../types';
 import { NodeImageSlideBlock } from '~/components/node/NodeImageSlideBlock';
 import { NodeTextBlock } from '~/components/node/NodeTextBlock';
 import { NodeAudioBlock } from '~/components/node/NodeAudioBlock';
@@ -12,7 +12,6 @@ import { AudioEditor } from '~/components/editors/AudioEditor';
 import { EditorImageUploadButton } from '~/components/editors/EditorImageUploadButton';
 import { EditorAudioUploadButton } from '~/components/editors/EditorAudioUploadButton';
 import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverButton';
-import { Filler } from '~/components/containers/Filler';
 import { modalShowPhotoswipe } from '../modal/actions';
 import { IEditorComponentProps } from '~/redux/node/types';
 import { EditorFiller } from '~/components/editors/EditorFiller';
diff --git a/src/redux/store.ts b/src/redux/store.ts
index 523b069a..a26248eb 100644
--- a/src/redux/store.ts
+++ b/src/redux/store.ts
@@ -34,6 +34,9 @@ import borisSaga from './boris/sagas';
 import messages, { IMessagesState } from './messages';
 import messagesSaga from './messages/sagas';
 
+import tag, { ITagState } from './tag';
+import tagSaga from './tag/sagas';
+
 const authPersistConfig: PersistConfig = {
   key: 'auth',
   whitelist: ['token', 'user', 'updates'],
@@ -62,6 +65,7 @@ export interface IState {
   player: IPlayerState;
   boris: IBorisState;
   messages: IMessagesState;
+  tag: ITagState;
 }
 
 export const sagaMiddleware = createSagaMiddleware();
@@ -83,6 +87,7 @@ export const store = createStore(
     flow: persistReducer(flowPersistConfig, flow),
     player: persistReducer(playerPersistConfig, player),
     messages,
+    tag: tag,
   }),
   composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware))
 );
@@ -99,6 +104,7 @@ export function configureStore(): {
   sagaMiddleware.run(modalSaga);
   sagaMiddleware.run(borisSaga);
   sagaMiddleware.run(messagesSaga);
+  sagaMiddleware.run(tagSaga);
 
   window.addEventListener('message', message => {
     if (message && message.data && message.data.type === 'oauth_login' && message.data.token)
diff --git a/src/redux/tag/actions.ts b/src/redux/tag/actions.ts
new file mode 100644
index 00000000..835d3ca3
--- /dev/null
+++ b/src/redux/tag/actions.ts
@@ -0,0 +1,12 @@
+import { ITagState } from '~/redux/tag/index';
+import { TAG_ACTIONS } from '~/redux/tag/constants';
+
+export const tagSetNodes = (nodes: Partial<ITagState['nodes']>) => ({
+  type: TAG_ACTIONS.SET_TAG_NODES,
+  nodes,
+});
+
+export const tagLoadNodes = (tag: string) => ({
+  type: TAG_ACTIONS.LOAD_TAG_NODES,
+  tag,
+});
diff --git a/src/redux/tag/api.ts b/src/redux/tag/api.ts
new file mode 100644
index 00000000..92d87081
--- /dev/null
+++ b/src/redux/tag/api.ts
@@ -0,0 +1,19 @@
+import { INode, IResultWithStatus } from '~/redux/types';
+import { api, configWithToken, errorMiddleware, resultMiddleware } from '~/utils/api';
+import { API } from '~/constants/api';
+
+export const getTagNodes = ({
+  access,
+  tag,
+  offset,
+  limit,
+}: {
+  access: string;
+  tag: string;
+  offset: number;
+  limit: number;
+}): Promise<IResultWithStatus<{ nodes: INode[]; count: number }>> =>
+  api
+    .get(API.TAG.NODES, configWithToken(access, { params: { name: tag, offset, limit } }))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);
diff --git a/src/redux/tag/constants.ts b/src/redux/tag/constants.ts
new file mode 100644
index 00000000..5c6b04f4
--- /dev/null
+++ b/src/redux/tag/constants.ts
@@ -0,0 +1,6 @@
+const prefix = 'TAG.';
+
+export const TAG_ACTIONS = {
+  LOAD_TAG_NODES: `${prefix}LOAD_TAG_NODES`,
+  SET_TAG_NODES: `${prefix}SET_TAG_NODES`,
+};
diff --git a/src/redux/tag/handlers.ts b/src/redux/tag/handlers.ts
new file mode 100644
index 00000000..b0bc92b1
--- /dev/null
+++ b/src/redux/tag/handlers.ts
@@ -0,0 +1,15 @@
+import { TAG_ACTIONS } from '~/redux/tag/constants';
+import { ITagState } from '~/redux/tag/index';
+import { tagSetNodes } from '~/redux/tag/actions';
+
+const setNodes = (state: ITagState, { nodes }: ReturnType<typeof tagSetNodes>) => ({
+  ...state,
+  nodes: {
+    ...state.nodes,
+    ...nodes,
+  },
+});
+
+export const TAG_HANDLERS = {
+  [TAG_ACTIONS.SET_TAG_NODES]: setNodes,
+};
diff --git a/src/redux/tag/index.ts b/src/redux/tag/index.ts
new file mode 100644
index 00000000..fddaff42
--- /dev/null
+++ b/src/redux/tag/index.ts
@@ -0,0 +1,21 @@
+import { createReducer } from '~/utils/reducer';
+import { INode } from '~/redux/types';
+import { TAG_HANDLERS } from '~/redux/tag/handlers';
+
+export interface ITagState {
+  nodes: {
+    list: INode[];
+    count: number;
+    isLoading: boolean;
+  };
+}
+
+const INITIAL_STATE: ITagState = {
+  nodes: {
+    list: [],
+    count: 0,
+    isLoading: true,
+  },
+};
+
+export default createReducer(INITIAL_STATE, TAG_HANDLERS);
diff --git a/src/redux/tag/sagas.ts b/src/redux/tag/sagas.ts
new file mode 100644
index 00000000..1b11f38d
--- /dev/null
+++ b/src/redux/tag/sagas.ts
@@ -0,0 +1,31 @@
+import { TAG_ACTIONS } from '~/redux/tag/constants';
+import { call, put, select, takeLatest } from 'redux-saga/effects';
+import { tagLoadNodes, tagSetNodes } from '~/redux/tag/actions';
+import { reqWrapper } from '~/redux/auth/sagas';
+import { selectTagNodes } from '~/redux/tag/selectors';
+import { getTagNodes } from '~/redux/tag/api';
+import { Unwrap } from '~/redux/types';
+
+function* loadTagNodes({ tag }: ReturnType<typeof tagLoadNodes>) {
+  yield put(tagSetNodes({ isLoading: true }));
+
+  try {
+    const { list }: ReturnType<typeof selectTagNodes> = yield select(selectTagNodes);
+    const { data, error }: Unwrap<ReturnType<typeof getTagNodes>> = yield call(
+      reqWrapper,
+      getTagNodes,
+      { tag, limit: 18, offset: list.length }
+    );
+
+    if (error) throw new Error(error);
+
+    yield put(tagSetNodes({ isLoading: false, list: [...list, ...data.nodes], count: data.count }));
+  } catch (e) {
+    console.log(e);
+    yield put(tagSetNodes({ isLoading: false }));
+  }
+}
+
+export default function* tagSaga() {
+  yield takeLatest(TAG_ACTIONS.LOAD_TAG_NODES, loadTagNodes);
+}
diff --git a/src/redux/tag/selectors.ts b/src/redux/tag/selectors.ts
new file mode 100644
index 00000000..338bfda5
--- /dev/null
+++ b/src/redux/tag/selectors.ts
@@ -0,0 +1,4 @@
+import { IState } from '~/redux/store';
+
+export const selectTag = (state: IState) => state.tag;
+export const selectTagNodes = (state: IState) => state.tag.nodes;
diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx
index 25cfa44c..a8efa18e 100644
--- a/src/sprites/Sprites.tsx
+++ b/src/sprites/Sprites.tsx
@@ -207,6 +207,14 @@ const Sprites: FC<{}> = () => (
       <path d="M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z" />
     </g>
 
+    <g id="sad" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <circle cx="15.5" cy="9.5" r="1.5" />
+      <circle cx="8.5" cy="9.5" r="1.5" />
+      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-3.5c.73 0 1.39.19 1.97.53.12-.14.86-.98 1.01-1.14-.85-.56-1.87-.89-2.98-.89-1.11 0-2.13.33-2.99.88.97 1.09.01.02 1.01 1.14.59-.33 1.25-.52 1.98-.52z" />
+    </g>
+
     <g id="settings" stroke="none">
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
diff --git a/src/utils/api/index.ts b/src/utils/api/index.ts
index a9f1adec..e7268343 100644
--- a/src/utils/api/index.ts
+++ b/src/utils/api/index.ts
@@ -23,15 +23,12 @@ export const HTTP_RESPONSES = {
   TOO_MANY_REQUESTS: 429,
 };
 
-export const resultMiddleware = <T extends {}>({
+export const resultMiddleware = <T extends any>({ status, data }: { status; data: T }) => ({
   status,
   data,
-}: {
-  status: number;
-  data: T;
-}): { status: number; data: T } => ({ status, data });
+});
 
-export const errorMiddleware = <T extends any>(debug): IResultWithStatus<T> =>
+export const errorMiddleware = <T extends any = any>(debug): IResultWithStatus<T> =>
   debug && debug.response
     ? {
         status: debug.response.status,
@@ -41,7 +38,7 @@ export const errorMiddleware = <T extends any>(debug): IResultWithStatus<T> =>
       }
     : {
         status: HTTP_RESPONSES.CONNECTION_REFUSED,
-        data: {} as T & IApiErrorResult,
+        data: {} as T & IApiErrorResult & any,
         debug,
         error: 'Ошибка сети',
       };
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index 1ed6ea97..b78d6422 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -6,7 +6,7 @@ import differenceInMinutes from 'date-fns/differenceInMinutes';
 import ru from 'date-fns/locale/ru';
 import Axios from 'axios';
 import { PRESETS } from '~/constants/urls';
-import { ICommentBlock, COMMENT_BLOCK_DETECTORS, COMMENT_BLOCK_TYPES } from '~/constants/comment';
+import { COMMENT_BLOCK_DETECTORS, COMMENT_BLOCK_TYPES, ICommentBlock } from '~/constants/comment';
 import format from 'date-fns/format';
 
 export const getStyle = (oElm: any, strCssRule: string) => {
@@ -63,20 +63,25 @@ export const describeArc = (
   ].join(' ');
 };
 
-export const getURL = (file: Partial<IFile>, size?: typeof PRESETS[keyof typeof PRESETS]) => {
-  if (!file || !file.url) return null;
-
+export const getURLFromString = (
+  url: string,
+  size?: typeof PRESETS[keyof typeof PRESETS]
+): string => {
   if (size) {
-    return file.url
+    return url
       .replace('REMOTE_CURRENT://', `${process.env.REMOTE_CURRENT}cache/${size}/`)
       .replace('REMOTE_OLD://', process.env.REMOTE_OLD);
   }
 
-  return file.url
+  return url
     .replace('REMOTE_CURRENT://', process.env.REMOTE_CURRENT)
     .replace('REMOTE_OLD://', process.env.REMOTE_OLD);
 };
 
+export const getURL = (file: Partial<IFile>, size?: typeof PRESETS[keyof typeof PRESETS]) => {
+  return file?.url ? getURLFromString(file.url, size) : null;
+};
+
 export const formatText = (text: string): string =>
   !text
     ? ''
diff --git a/yarn.lock b/yarn.lock
index 7c74c586..f53e787b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9879,10 +9879,10 @@ typescript-tuple@^2.2.1:
   dependencies:
     typescript-compare "^0.0.2"
 
-typescript@^3.6.4:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.2.tgz#27e489b95fa5909445e9fef5ee48d81697ad18fb"
-  integrity sha512-ml7V7JfiN2Xwvcer+XAf2csGO1bPBdRbFCkYBczNZggrBZ9c7G3riSUeJmqEU5uOtXNPMhE3n+R4FA/3YOAWOQ==
+typescript@^3.7.2:
+  version "3.9.7"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
+  integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
 
 uglify-es@^3.3.4:
   version "3.3.9"

From 118dad4e2ba2001ec918ec8eaef6e1b0db48e36f Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 15:22:38 +0700
Subject: [PATCH 03/19] made clickable album titles

---
 src/components/node/NodeRelated/index.tsx   | 4 ++--
 src/components/node/NodeRelated/styles.scss | 5 +++++
 src/containers/node/NodeLayout/index.tsx    | 7 ++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/node/NodeRelated/index.tsx b/src/components/node/NodeRelated/index.tsx
index f119d9f2..4b246328 100644
--- a/src/components/node/NodeRelated/index.tsx
+++ b/src/components/node/NodeRelated/index.tsx
@@ -1,11 +1,11 @@
-import React, { FC } from 'react';
+import React, { FC, ReactElement } from 'react';
 import * as styles from './styles.scss';
 import { Group } from '~/components/containers/Group';
 import { INode } from '~/redux/types';
 import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
 
 interface IProps {
-  title: string;
+  title: ReactElement | string;
   items: Partial<INode>[];
 }
 
diff --git a/src/components/node/NodeRelated/styles.scss b/src/components/node/NodeRelated/styles.scss
index 1a47f904..2ffd5464 100644
--- a/src/components/node/NodeRelated/styles.scss
+++ b/src/components/node/NodeRelated/styles.scss
@@ -20,6 +20,11 @@
 
 .title {
   @include title_with_line();
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
 }
 
 .text {
diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index 478a1837..a829eeab 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@@ -20,6 +20,7 @@ import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import { Sticky } from '~/components/containers/Sticky';
 import { Footer } from '~/components/main/Footer';
+import { Link } from 'react-router-dom';
 
 import * as styles from './styles.scss';
 import * as NODE_ACTIONS from '~/redux/node/actions';
@@ -216,7 +217,11 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                             .filter(album => related.albums[album].length > 0)
                             .map(album => (
                               <NodeRelated
-                                title={album}
+                                title={
+                                  <Link to={URLS.NODE_TAG_URL(node.id, encodeURIComponent(album))}>
+                                    {album}
+                                  </Link>
+                                }
                                 items={related.albums[album]}
                                 key={album}
                               />

From 01f52bcb63ad44f37e032f2444230340acd548a4 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 15:36:16 +0700
Subject: [PATCH 04/19] added title sizes for long titles

---
 src/components/flow/Cell/index.tsx   | 16 +++++++++++++---
 src/components/flow/Cell/styles.scss | 11 +++++++++++
 src/styles/variables.scss            | 10 ++++++++++
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx
index 07b5a323..d83ec144 100644
--- a/src/components/flow/Cell/index.tsx
+++ b/src/components/flow/Cell/index.tsx
@@ -1,6 +1,6 @@
-import React, { FC, useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { INode } from '~/redux/types';
-import { getURL, formatCellText } from '~/utils/dom';
+import { formatCellText, getURL } from '~/utils/dom';
 import classNames from 'classnames';
 
 import * as styles from './styles.scss';
@@ -109,6 +109,16 @@ const Cell: FC<IProps> = ({
     return getURL({ url: thumbnail }, preset);
   }, [thumbnail, flow]);
 
+  const titleSize = useMemo(() => {
+    if (title.length > 100) {
+      return styles.small;
+    } else if (title.length > 64) {
+      return styles.medium;
+    } else {
+      return;
+    }
+  }, [title]);
+
   return (
     <div className={classNames(styles.cell, styles[(flow && flow.display) || 'single'])} ref={ref}>
       {is_visible && (
@@ -134,7 +144,7 @@ const Cell: FC<IProps> = ({
 
           <Link className={classNames(styles.face)} to={`/post${id}`}>
             <div className={styles.face_content}>
-              {!text && <div className={styles.title}>{title || '...'}</div>}
+              {!text && <div className={classNames(styles.title, titleSize)}>{title || '...'}</div>}
 
               {!!text && !!thumbnail && (
                 <div className={styles.text}>
diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.scss
index 8f215692..72a6ed00 100644
--- a/src/components/flow/Cell/styles.scss
+++ b/src/components/flow/Cell/styles.scss
@@ -95,10 +95,21 @@
   opacity: 1;
   transform: translate(0, 0);
   transition: opacity 0.5s, transform 1s;
+
+  &.small {
+    @include clamp(8, 1.25em);
+    font-size: 24px;
+  }
+
+  &.medium{
+    @include clamp(6, 1.25em);
+    font-size: 28px;
+  }
 }
 
 .text_title {
   margin-bottom: $gap / 2;
+  @include clamp(3, 1.25em)
 }
 
 .horizontal,
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 300317b2..309d3280 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -175,3 +175,13 @@ $login_dialog_padding: $gap $gap 30px $gap;
     background: transparentize(white, 0.95);
   }
 }
+
+@mixin clamp($lines, $line: 1em) {
+  max-height: $line * $lines;
+  overflow: hidden;
+  -webkit-line-clamp: $lines;
+  line-clamp: $lines;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+}

From ede4f4662c1aa625b82ca73b7e11758915cbb460 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 18:09:15 +0700
Subject: [PATCH 05/19] refactored tag component

---
 .../containers/TagField/styles.scss           |   4 +
 src/components/node/NodeTags/index.tsx        |   2 +-
 src/components/node/NodeTags/placeholder.tsx  |  17 ---
 .../node/NodeTagsPlaceholder/index.tsx        |  15 +++
 src/components/node/Tag/index.tsx             |  69 ----------
 src/components/node/Tags/index.tsx            | 118 -----------------
 src/components/tags/Tag/index.tsx             |  43 +++++++
 src/components/tags/Tag/styles.scss           |   4 +
 src/components/tags/TagAutocomplete/index.tsx |   9 ++
 .../tags/TagAutocomplete/styles.module.scss   |  11 ++
 src/components/tags/TagInput/index.tsx        | 121 ++++++++++++++++++
 src/components/tags/TagWrapper/index.tsx      |  40 ++++++
 .../TagWrapper/styles.module.scss}            |   5 +-
 src/components/tags/Tags/index.tsx            |  90 +++++++++++++
 src/containers/sidebars/TagSidebar/index.tsx  |   2 +-
 webpack.config.js                             |   1 +
 16 files changed, 344 insertions(+), 207 deletions(-)
 delete mode 100644 src/components/node/NodeTags/placeholder.tsx
 create mode 100644 src/components/node/NodeTagsPlaceholder/index.tsx
 delete mode 100644 src/components/node/Tag/index.tsx
 delete mode 100644 src/components/node/Tags/index.tsx
 create mode 100644 src/components/tags/Tag/index.tsx
 create mode 100644 src/components/tags/Tag/styles.scss
 create mode 100644 src/components/tags/TagAutocomplete/index.tsx
 create mode 100644 src/components/tags/TagAutocomplete/styles.module.scss
 create mode 100644 src/components/tags/TagInput/index.tsx
 create mode 100644 src/components/tags/TagWrapper/index.tsx
 rename src/components/{node/Tag/styles.scss => tags/TagWrapper/styles.module.scss} (97%)
 create mode 100644 src/components/tags/Tags/index.tsx

diff --git a/src/components/containers/TagField/styles.scss b/src/components/containers/TagField/styles.scss
index f65e12d0..18edac3e 100644
--- a/src/components/containers/TagField/styles.scss
+++ b/src/components/containers/TagField/styles.scss
@@ -3,4 +3,8 @@
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: wrap;
+
+  &> * {
+    margin: 0 $gap $gap 0;
+  }
 }
diff --git a/src/components/node/NodeTags/index.tsx b/src/components/node/NodeTags/index.tsx
index 910d2590..d5c48923 100644
--- a/src/components/node/NodeTags/index.tsx
+++ b/src/components/node/NodeTags/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, memo } from 'react';
-import { Tags } from '../Tags';
 import { ITag } from '~/redux/types';
+import { Tags } from '~/components/tags/Tags';
 
 interface IProps {
   is_editable?: boolean;
diff --git a/src/components/node/NodeTags/placeholder.tsx b/src/components/node/NodeTags/placeholder.tsx
deleted file mode 100644
index f5b015b4..00000000
--- a/src/components/node/NodeTags/placeholder.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { FC, memo } from "react";
-import { Tags } from "../Tags";
-import { ITag } from "~/redux/types";
-
-interface IProps {
-  is_editable?: boolean;
-  tags: ITag[];
-  onChange?: (tags: string[]) => void;
-}
-
-const NodeTagsPlaceholder: FC<IProps> = memo(
-  ({ is_editable, tags, onChange }) => (
-    <Tags tags={tags} is_editable={is_editable} onTagsChange={onChange} />
-  )
-);
-
-export { NodeTagsPlaceholder };
diff --git a/src/components/node/NodeTagsPlaceholder/index.tsx b/src/components/node/NodeTagsPlaceholder/index.tsx
new file mode 100644
index 00000000..4fb8e75d
--- /dev/null
+++ b/src/components/node/NodeTagsPlaceholder/index.tsx
@@ -0,0 +1,15 @@
+import React, { FC, memo } from 'react';
+import { ITag } from '~/redux/types';
+import { Tags } from '~/components/tags/Tags';
+
+interface IProps {
+  is_editable?: boolean;
+  tags: ITag[];
+  onChange?: (tags: string[]) => void;
+}
+
+const NodeTagsPlaceholder: FC<IProps> = memo(({ is_editable, tags, onChange }) => (
+  <Tags tags={tags} is_editable={is_editable} onTagsChange={onChange} />
+));
+
+export { NodeTagsPlaceholder };
diff --git a/src/components/node/Tag/index.tsx b/src/components/node/Tag/index.tsx
deleted file mode 100644
index f9bb1c8a..00000000
--- a/src/components/node/Tag/index.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { ChangeEventHandler, FC, FocusEventHandler, KeyboardEventHandler, useCallback, } from 'react';
-import * as styles from './styles.scss';
-import { ITag } from '~/redux/types';
-import classNames = require('classnames');
-
-const getTagFeature = (tag: Partial<ITag>) => {
-  if (tag.title.substr(0, 1) === '/') return 'green';
-
-  return '';
-};
-
-interface IProps {
-  tag: Partial<ITag>;
-  size?: 'normal' | 'big';
-
-  is_hoverable?: boolean;
-  is_editing?: boolean;
-
-  onInput?: ChangeEventHandler<HTMLInputElement>;
-  onKeyUp?: KeyboardEventHandler;
-  onBlur?: FocusEventHandler<HTMLInputElement>;
-  onClick?: (tag: Partial<ITag>) => void;
-}
-
-const Tag: FC<IProps> = ({
-  tag,
-  is_hoverable,
-  is_editing,
-  size = 'normal',
-  onInput,
-  onKeyUp,
-  onBlur,
-  onClick,
-}) => {
-  const onClickHandler = useCallback(() => {
-    if (!onClick) return;
-    onClick(tag);
-  }, [tag, onClick]);
-
-  return (
-    <div
-      className={classNames(styles.tag, getTagFeature(tag), size, {
-        is_hoverable,
-        is_editing,
-        input: !!onInput,
-        clickable: !!onClick,
-      })}
-      onClick={onClickHandler}
-    >
-      <div className={styles.hole} />
-      <div className={styles.title}>{tag.title}</div>
-
-      {onInput && (
-        <input
-          type="text"
-          value={tag.title}
-          size={1}
-          placeholder="Добавить"
-          maxLength={24}
-          onChange={onInput}
-          onKeyUp={onKeyUp}
-          onBlur={onBlur}
-        />
-      )}
-    </div>
-  );
-};
-
-export { Tag };
diff --git a/src/components/node/Tags/index.tsx b/src/components/node/Tags/index.tsx
deleted file mode 100644
index 894dde37..00000000
--- a/src/components/node/Tags/index.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, {
-  ChangeEvent,
-  FC,
-  HTMLAttributes,
-  KeyboardEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { TagField } from '~/components/containers/TagField';
-import { ITag } from '~/redux/types';
-import { Tag } from '~/components/node/Tag';
-import uniq from 'ramda/es/uniq';
-
-type IProps = HTMLAttributes<HTMLDivElement> & {
-  tags: Partial<ITag>[];
-  is_editable?: boolean;
-  onTagsChange?: (tags: string[]) => void;
-  onTagClick?: (tag: Partial<ITag>) => void;
-};
-
-export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, onTagClick, ...props }) => {
-  const [input, setInput] = useState('');
-  const [data, setData] = useState([]);
-  const timer = useRef(null);
-
-  const [catTags, ordinaryTags] = useMemo(
-    () =>
-      (tags || []).reduce(
-        (obj, tag) =>
-          tag.title.substr(0, 1) === '/' ? [[...obj[0], tag], obj[1]] : [obj[0], [...obj[1], tag]],
-        [[], []]
-      ),
-    [tags]
-  );
-
-  const onInput = useCallback(
-    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
-      clearTimeout(timer.current);
-      setInput(value);
-    },
-    [setInput, timer]
-  );
-
-  const onKeyUp = useCallback(
-    ({ key }: KeyboardEvent) => {
-      if (key === 'Backspace' && input === '' && data.length) {
-        setData(data.slice(0, data.length - 1));
-        setInput(data[data.length - 1].title);
-      }
-
-      if (key === 'Enter' || key === ',' || key === 'Comma') {
-        setData(
-          uniq([
-            ...data,
-            ...input
-              .split(',')
-              .map((title: string) =>
-                title
-                  .trim()
-                  .substr(0, 32)
-                  .toLowerCase()
-              )
-              .filter(el => el.length > 0)
-              .filter(el => !tags.some(tag => tag.title.trim() === el.trim()))
-              .map(title => ({
-                title,
-              })),
-          ])
-        );
-        setInput('');
-      }
-    },
-    [input, setInput, data, setData]
-  );
-
-  const onSubmit = useCallback(() => {
-    const title = input && input.trim();
-    const items = (title ? [...data, { title }] : data)
-      .filter(tag => tag.title.length > 0)
-      .map(tag => ({
-        ...tag,
-        title: tag.title.toLowerCase(),
-      }));
-
-    if (!items.length) return;
-
-    setData(items);
-    setInput('');
-    onTagsChange(uniq([...tags, ...items]).map(tag => tag.title));
-  }, [tags, data, onTagsChange, input, setInput]);
-
-  useEffect(() => {
-    setData(data.filter(({ title }) => !tags.some(tag => tag.title.trim() === title.trim())));
-  }, [tags]);
-
-  return (
-    <TagField {...props}>
-      {catTags.map(tag => (
-        <Tag key={tag.title} tag={tag} onClick={onTagClick} />
-      ))}
-
-      {ordinaryTags.map(tag => (
-        <Tag key={tag.title} tag={tag} onClick={onTagClick} />
-      ))}
-
-      {data.map(tag => (
-        <Tag key={tag.title} tag={tag} is_editing />
-      ))}
-
-      {is_editable && (
-        <Tag tag={{ title: input }} onInput={onInput} onKeyUp={onKeyUp} onBlur={onSubmit} />
-      )}
-    </TagField>
-  );
-};
diff --git a/src/components/tags/Tag/index.tsx b/src/components/tags/Tag/index.tsx
new file mode 100644
index 00000000..2dcbc077
--- /dev/null
+++ b/src/components/tags/Tag/index.tsx
@@ -0,0 +1,43 @@
+import React, { FC, FocusEventHandler, useCallback, } from 'react';
+import * as styles from './styles.scss';
+import { ITag } from '~/redux/types';
+import { TagWrapper } from '~/components/tags/TagWrapper';
+
+const getTagFeature = (tag: Partial<ITag>) => {
+  if (tag.title.substr(0, 1) === '/') return 'green';
+
+  return '';
+};
+
+interface IProps {
+  tag: Partial<ITag>;
+  size?: 'normal' | 'big';
+
+  is_hoverable?: boolean;
+  is_editing?: boolean;
+
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  onClick?: (tag: Partial<ITag>) => void;
+}
+
+const Tag: FC<IProps> = ({ tag, is_hoverable, is_editing, size = 'normal', onBlur, onClick }) => {
+  const onClickHandler = useCallback(() => {
+    if (!onClick) return;
+    onClick(tag);
+  }, [tag, onClick]);
+
+  return (
+    <div className={styles.wrap}>
+      <TagWrapper
+        feature={getTagFeature(tag)}
+        size={size}
+        is_hoverable={is_hoverable}
+        is_editing={is_editing}
+        onClick={onClick && onClickHandler}
+        title={tag.title}
+      />
+    </div>
+  );
+};
+
+export { Tag };
diff --git a/src/components/tags/Tag/styles.scss b/src/components/tags/Tag/styles.scss
new file mode 100644
index 00000000..a834b87e
--- /dev/null
+++ b/src/components/tags/Tag/styles.scss
@@ -0,0 +1,4 @@
+.wrap {
+  background-color: blue;
+  position: relative;
+}
diff --git a/src/components/tags/TagAutocomplete/index.tsx b/src/components/tags/TagAutocomplete/index.tsx
new file mode 100644
index 00000000..69ce26fa
--- /dev/null
+++ b/src/components/tags/TagAutocomplete/index.tsx
@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+interface IProps {}
+
+const TagAutocomplete: FC<IProps> = () => <div className={classNames(styles.window)}>auto</div>;
+
+export { TagAutocomplete };
diff --git a/src/components/tags/TagAutocomplete/styles.module.scss b/src/components/tags/TagAutocomplete/styles.module.scss
new file mode 100644
index 00000000..740c4a96
--- /dev/null
+++ b/src/components/tags/TagAutocomplete/styles.module.scss
@@ -0,0 +1,11 @@
+.window {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: calc(90vw - 20px);
+  max-width: 300px;
+  background: red;
+  height: 100px;
+  z-index: -1;
+}
diff --git a/src/components/tags/TagInput/index.tsx b/src/components/tags/TagInput/index.tsx
new file mode 100644
index 00000000..cae76eb1
--- /dev/null
+++ b/src/components/tags/TagInput/index.tsx
@@ -0,0 +1,121 @@
+import React, {
+  ChangeEvent,
+  FC,
+  FocusEventHandler,
+  KeyboardEvent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { TagAutocomplete } from '~/components/tags/TagAutocomplete';
+import { TagWrapper } from '~/components/tags/TagWrapper';
+
+const placeholder = 'Добавить';
+
+const prepareInput = (input: string): string[] => {
+  return input
+    .split(',')
+    .map((title: string) =>
+      title
+        .trim()
+        .substr(0, 32)
+        .toLowerCase()
+    )
+    .filter(el => el.length > 0);
+};
+
+interface IProps {
+  onAppend: (tags: string[]) => void;
+  onClearTag: () => string | undefined;
+  onSubmit: (last: string[]) => void;
+}
+
+const TagInput: FC<IProps> = ({ onAppend, onClearTag, onSubmit }) => {
+  const [focused, setFocused] = useState(false);
+  const [input, setInput] = useState('');
+  const ref = useRef<HTMLInputElement>(null);
+
+  const onInput = useCallback(
+    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+      if (!value.trim()) {
+        setInput(value);
+        return;
+      }
+
+      const items = prepareInput(value);
+
+      if (items.length > 1) {
+        onAppend(items.slice(0, items.length - 1));
+      }
+
+      setInput(items[items.length - 1]);
+    },
+    [setInput]
+  );
+
+  const onKeyUp = useCallback(
+    ({ key }: KeyboardEvent) => {
+      if (key === 'Escape' && ref.current) {
+        setInput('');
+        ref.current.blur();
+        return;
+      }
+
+      if (key === 'Backspace' && input === '') {
+        setInput(onClearTag() || '');
+        return;
+      }
+
+      if (key === 'Enter' || key === ',' || key === 'Comma') {
+        const created = prepareInput(input);
+
+        if (created.length) {
+          onAppend(created);
+        }
+
+        setInput('');
+      }
+
+      if (key === 'Enter' && ref.current) {
+        ref.current.blur();
+      }
+    },
+    [input, setInput, onClearTag, onAppend, onSubmit, ref.current]
+  );
+
+  const onFocus = useCallback(() => setFocused(true), []);
+  const onBlur = useCallback<FocusEventHandler<HTMLInputElement>>(() => {
+    setFocused(false);
+
+    if (input.trim()) {
+      const created = prepareInput(input);
+      onAppend(created);
+      setInput('');
+      onSubmit(created);
+    }
+  }, [input, onAppend, setInput, onSubmit]);
+
+  const feature = useMemo(() => (input.substr(0, 1) === '/' ? 'green' : ''), [input]);
+
+  return (
+    <TagWrapper title={input || placeholder} has_input={true} feature={feature}>
+      {onInput && <TagAutocomplete />}
+
+      <input
+        type="text"
+        value={input}
+        size={1}
+        placeholder={placeholder}
+        maxLength={24}
+        onChange={onInput}
+        onKeyUp={onKeyUp}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        ref={ref}
+      />
+    </TagWrapper>
+  );
+};
+
+export { TagInput };
diff --git a/src/components/tags/TagWrapper/index.tsx b/src/components/tags/TagWrapper/index.tsx
new file mode 100644
index 00000000..2eb0f28e
--- /dev/null
+++ b/src/components/tags/TagWrapper/index.tsx
@@ -0,0 +1,40 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+
+interface IProps {
+  feature?: string;
+  size?: string;
+  is_hoverable?: boolean;
+  is_editing?: boolean;
+  has_input?: boolean;
+  onClick?: () => void;
+  title?: string;
+}
+
+const TagWrapper: FC<IProps> = ({
+  children,
+  feature,
+  size,
+  is_hoverable,
+  is_editing,
+  has_input,
+  onClick,
+  title = '',
+}) => (
+  <div
+    className={classNames(styles.tag, feature, size, {
+      is_hoverable,
+      is_editing,
+      input: has_input,
+      clickable: onClick,
+    })}
+    onClick={onClick}
+  >
+    <div className={styles.hole} />
+    <div className={styles.title}>{title}</div>
+    {children}
+  </div>
+);
+
+export { TagWrapper };
diff --git a/src/components/node/Tag/styles.scss b/src/components/tags/TagWrapper/styles.module.scss
similarity index 97%
rename from src/components/node/Tag/styles.scss
rename to src/components/tags/TagWrapper/styles.module.scss
index 1fb4d6df..87e71e1b 100644
--- a/src/components/node/Tag/styles.scss
+++ b/src/components/tags/TagWrapper/styles.module.scss
@@ -14,8 +14,9 @@ $big: 1.2;
   font: $font_14_semibold;
   align-self: flex-start;
   padding: 0 8px 0 0;
-  margin: 0 $gap $gap 0;
+  //margin: 0 $gap $gap 0;
   position: relative;
+  z-index: 4;
 
   &:global(.big) {
     height: $tag_height * $big;
@@ -88,6 +89,7 @@ $big: 1.2;
     top: 0;
     bottom: 0;
     width: 100%;
+    min-width: 100px;
     padding-left: $tag_height;
     padding-right: 5px;
     box-sizing: border-box;
@@ -118,3 +120,4 @@ $big: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
diff --git a/src/components/tags/Tags/index.tsx b/src/components/tags/Tags/index.tsx
new file mode 100644
index 00000000..2cf064fb
--- /dev/null
+++ b/src/components/tags/Tags/index.tsx
@@ -0,0 +1,90 @@
+import React, { FC, HTMLAttributes, useCallback, useEffect, useMemo, useState, } from 'react';
+import { TagField } from '~/components/containers/TagField';
+import { ITag } from '~/redux/types';
+import uniq from 'ramda/es/uniq';
+import { Tag } from '~/components/tags/Tag';
+import { TagInput } from '~/components/tags/TagInput';
+
+type IProps = HTMLAttributes<HTMLDivElement> & {
+  tags: Partial<ITag>[];
+  is_editable?: boolean;
+  onTagsChange?: (tags: string[]) => void;
+  onTagClick?: (tag: Partial<ITag>) => void;
+};
+
+export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, onTagClick, ...props }) => {
+  const [data, setData] = useState<string[]>([]);
+
+  const [catTags, ordinaryTags] = useMemo(
+    () =>
+      (tags || []).reduce(
+        (obj, tag) =>
+          tag.title.substr(0, 1) === '/' ? [[...obj[0], tag], obj[1]] : [obj[0], [...obj[1], tag]],
+        [[], []]
+      ),
+    [tags]
+  );
+
+  const onSubmit = useCallback(
+    (last: string[]) => {
+      const exist = tags.map(tag => tag.title);
+      onTagsChange(uniq([...exist, ...data, ...last]));
+    },
+    [data]
+  );
+
+  //
+  // const onSubmit = useCallback(() => {
+  //   const title = input && input.trim();
+  //   const items = (title ? [...data, { title }] : data)
+  //     .filter(tag => tag.title.length > 0)
+  //     .map(tag => ({
+  //       ...tag,
+  //       title: tag.title.toLowerCase(),
+  //     }));
+  //
+  //   if (!items.length) return;
+  //
+  //   setData(items);
+  //   setInput('');
+  //   onTagsChange(uniq([...tags, ...items]).map(tag => tag.title));
+  // }, [tags, data, onTagsChange, input, setInput]);
+
+  useEffect(() => {
+    setData(data.filter(title => !tags.some(tag => tag.title.trim() === title.trim())));
+  }, [tags]);
+
+  const onAppendTag = useCallback(
+    (created: string[]) => {
+      setData(uniq([...data, ...created]).filter(title => !tags.some(it => it.title === title)));
+    },
+    [data, setData, tags]
+  );
+
+  const onClearTag = useCallback((): string | undefined => {
+    if (!data.length) return;
+    const last = data[data.length - 1];
+    setData(data.slice(0, data.length - 1));
+    return last;
+  }, [data, setData]);
+
+  return (
+    <TagField {...props}>
+      {catTags.map(tag => (
+        <Tag key={tag.title} tag={tag} onClick={onTagClick} />
+      ))}
+
+      {ordinaryTags.map(tag => (
+        <Tag key={tag.title} tag={tag} onClick={onTagClick} />
+      ))}
+
+      {data.map(title => (
+        <Tag key={title} tag={{ title }} is_editing />
+      ))}
+
+      {is_editable && (
+        <TagInput onAppend={onAppendTag} onClearTag={onClearTag} onSubmit={onSubmit} />
+      )}
+    </TagField>
+  );
+};
diff --git a/src/containers/sidebars/TagSidebar/index.tsx b/src/containers/sidebars/TagSidebar/index.tsx
index bcef7151..edeca2d0 100644
--- a/src/containers/sidebars/TagSidebar/index.tsx
+++ b/src/containers/sidebars/TagSidebar/index.tsx
@@ -2,7 +2,6 @@ import React, { FC, useCallback, useEffect, useMemo } from 'react';
 import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
 import styles from './styles.module.scss';
 import { useHistory, useRouteMatch } from 'react-router';
-import { Tag } from '~/components/node/Tag';
 import { Icon } from '~/components/input/Icon';
 import { Link } from 'react-router-dom';
 import { TagSidebarList } from '~/components/sidebar/TagSidebarList';
@@ -11,6 +10,7 @@ import { selectTagNodes } from '~/redux/tag/selectors';
 import * as ACTIONS from '~/redux/tag/actions';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
+import { Tag } from '~/components/tags/Tag';
 
 const mapStateToProps = state => ({
   nodes: selectTagNodes(state),
diff --git a/webpack.config.js b/webpack.config.js
index 6cb6b064..f6bc4dd1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -176,6 +176,7 @@ module.exports = () => {
       contentBase: 'dist',
       publicPath: '/',
       hot: true,
+      open: false,
     },
   };
 };

From 1414245a1a2b678e46220a6d49cb1667552d19b1 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 18:17:57 +0700
Subject: [PATCH 06/19] made autocomplete popup

---
 src/components/tags/Tag/index.tsx             | 21 +++++-------
 src/components/tags/Tag/styles.scss           |  4 ---
 .../tags/TagAutocomplete/styles.module.scss   | 15 ++++++--
 src/components/tags/TagInput/index.tsx        | 34 ++++++++++---------
 .../tags/TagInput/styles.module.scss          |  4 +++
 .../tags/TagWrapper/styles.module.scss        |  2 +-
 src/components/tags/Tags/index.tsx            |  2 +-
 7 files changed, 45 insertions(+), 37 deletions(-)
 create mode 100644 src/components/tags/TagInput/styles.module.scss

diff --git a/src/components/tags/Tag/index.tsx b/src/components/tags/Tag/index.tsx
index 2dcbc077..8207e65a 100644
--- a/src/components/tags/Tag/index.tsx
+++ b/src/components/tags/Tag/index.tsx
@@ -1,5 +1,4 @@
-import React, { FC, FocusEventHandler, useCallback, } from 'react';
-import * as styles from './styles.scss';
+import React, { FC, FocusEventHandler, useCallback } from 'react';
 import { ITag } from '~/redux/types';
 import { TagWrapper } from '~/components/tags/TagWrapper';
 
@@ -27,16 +26,14 @@ const Tag: FC<IProps> = ({ tag, is_hoverable, is_editing, size = 'normal', onBlu
   }, [tag, onClick]);
 
   return (
-    <div className={styles.wrap}>
-      <TagWrapper
-        feature={getTagFeature(tag)}
-        size={size}
-        is_hoverable={is_hoverable}
-        is_editing={is_editing}
-        onClick={onClick && onClickHandler}
-        title={tag.title}
-      />
-    </div>
+    <TagWrapper
+      feature={getTagFeature(tag)}
+      size={size}
+      is_hoverable={is_hoverable}
+      is_editing={is_editing}
+      onClick={onClick && onClickHandler}
+      title={tag.title}
+    />
   );
 };
 
diff --git a/src/components/tags/Tag/styles.scss b/src/components/tags/Tag/styles.scss
index a834b87e..e69de29b 100644
--- a/src/components/tags/Tag/styles.scss
+++ b/src/components/tags/Tag/styles.scss
@@ -1,4 +0,0 @@
-.wrap {
-  background-color: blue;
-  position: relative;
-}
diff --git a/src/components/tags/TagAutocomplete/styles.module.scss b/src/components/tags/TagAutocomplete/styles.module.scss
index 740c4a96..7d620f93 100644
--- a/src/components/tags/TagAutocomplete/styles.module.scss
+++ b/src/components/tags/TagAutocomplete/styles.module.scss
@@ -1,11 +1,20 @@
+@keyframes appear {
+  0% { opacity: 0 }
+  100% { opacity: 100 }
+}
+
 .window {
-  display: none;
+  box-shadow: transparentize(black, 0.5) 4px 4px 4px, inset transparentize(white, 0.95) 1px 1px;
+
   position: absolute;
   top: 0;
   right: 0;
   width: calc(90vw - 20px);
   max-width: 300px;
-  background: red;
+  background: lighten($content_bg, 4%);
   height: 100px;
-  z-index: -1;
+  z-index: 10;
+  border-radius: 3px;
+  padding-top: $tag_height;
+  animation: appear 0.25s forwards;
 }
diff --git a/src/components/tags/TagInput/index.tsx b/src/components/tags/TagInput/index.tsx
index cae76eb1..4211faff 100644
--- a/src/components/tags/TagInput/index.tsx
+++ b/src/components/tags/TagInput/index.tsx
@@ -10,6 +10,7 @@ import React, {
 } from 'react';
 import { TagAutocomplete } from '~/components/tags/TagAutocomplete';
 import { TagWrapper } from '~/components/tags/TagWrapper';
+import styles from './styles.module.scss';
 
 const placeholder = 'Добавить';
 
@@ -99,22 +100,23 @@ const TagInput: FC<IProps> = ({ onAppend, onClearTag, onSubmit }) => {
   const feature = useMemo(() => (input.substr(0, 1) === '/' ? 'green' : ''), [input]);
 
   return (
-    <TagWrapper title={input || placeholder} has_input={true} feature={feature}>
-      {onInput && <TagAutocomplete />}
-
-      <input
-        type="text"
-        value={input}
-        size={1}
-        placeholder={placeholder}
-        maxLength={24}
-        onChange={onInput}
-        onKeyUp={onKeyUp}
-        onBlur={onBlur}
-        onFocus={onFocus}
-        ref={ref}
-      />
-    </TagWrapper>
+    <div className={styles.wrap}>
+      {onInput && focused && <TagAutocomplete />}
+      <TagWrapper title={input || placeholder} has_input={true} feature={feature}>
+        <input
+          type="text"
+          value={input}
+          size={1}
+          placeholder={placeholder}
+          maxLength={24}
+          onChange={onInput}
+          onKeyUp={onKeyUp}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          ref={ref}
+        />
+      </TagWrapper>
+    </div>
   );
 };
 
diff --git a/src/components/tags/TagInput/styles.module.scss b/src/components/tags/TagInput/styles.module.scss
new file mode 100644
index 00000000..57fac5fd
--- /dev/null
+++ b/src/components/tags/TagInput/styles.module.scss
@@ -0,0 +1,4 @@
+.wrap {
+  position: relative;
+  z-index: 13;
+}
diff --git a/src/components/tags/TagWrapper/styles.module.scss b/src/components/tags/TagWrapper/styles.module.scss
index 87e71e1b..a16a6358 100644
--- a/src/components/tags/TagWrapper/styles.module.scss
+++ b/src/components/tags/TagWrapper/styles.module.scss
@@ -16,7 +16,7 @@ $big: 1.2;
   padding: 0 8px 0 0;
   //margin: 0 $gap $gap 0;
   position: relative;
-  z-index: 4;
+  z-index: 12;
 
   &:global(.big) {
     height: $tag_height * $big;
diff --git a/src/components/tags/Tags/index.tsx b/src/components/tags/Tags/index.tsx
index 2cf064fb..2b4b8f3a 100644
--- a/src/components/tags/Tags/index.tsx
+++ b/src/components/tags/Tags/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes, useCallback, useEffect, useMemo, useState, } from 'react';
+import React, { FC, HTMLAttributes, useCallback, useEffect, useMemo, useState } from 'react';
 import { TagField } from '~/components/containers/TagField';
 import { ITag } from '~/redux/types';
 import uniq from 'ramda/es/uniq';

From 359cfaee7a633e0f9001439fea8c21cc827a6f23 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 20:49:28 +0700
Subject: [PATCH 07/19] added tag autocomplete

---
 src/components/tags/TagAutocomplete/index.tsx | 133 +++++++++++++++++-
 .../tags/TagAutocomplete/styles.module.scss   |  33 +++--
 .../tags/TagAutocompleteRow/index.tsx         |  19 +++
 .../TagAutocompleteRow/styles.module.scss     |  33 +++++
 src/components/tags/TagInput/index.tsx        |  81 ++++++-----
 .../tags/TagInput/styles.module.scss          |   2 +-
 src/components/tags/Tags/index.tsx            |  40 ++----
 src/constants/api.ts                          |   1 +
 src/containers/node/NodeLayout/styles.scss    |   4 +-
 src/redux/tag/actions.ts                      |  13 +-
 src/redux/tag/api.ts                          |  14 ++
 src/redux/tag/constants.ts                    |   4 +-
 src/redux/tag/handlers.ts                     |  14 +-
 src/redux/tag/index.ts                        |   8 ++
 src/redux/tag/sagas.ts                        |  32 ++++-
 src/redux/tag/selectors.ts                    |   1 +
 src/sprites/Sprites.tsx                       |  10 ++
 src/utils/tag.ts                              |  13 ++
 18 files changed, 375 insertions(+), 80 deletions(-)
 create mode 100644 src/components/tags/TagAutocompleteRow/index.tsx
 create mode 100644 src/components/tags/TagAutocompleteRow/styles.module.scss
 create mode 100644 src/utils/tag.ts

diff --git a/src/components/tags/TagAutocomplete/index.tsx b/src/components/tags/TagAutocomplete/index.tsx
index 69ce26fa..87a71389 100644
--- a/src/components/tags/TagAutocomplete/index.tsx
+++ b/src/components/tags/TagAutocomplete/index.tsx
@@ -1,9 +1,136 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
+import { connect } from 'react-redux';
+import * as TAG_ACTIONS from '~/redux/tag/actions';
+import { selectTagAutocomplete } from '~/redux/tag/selectors';
+import { separateTagOptions } from '~/utils/tag';
+import { TagAutocompleteRow } from '~/components/tags/TagAutocompleteRow';
 
-interface IProps {}
+const mapStateToProps = selectTagAutocomplete;
+const mapDispatchToProps = {
+  tagSetAutocomplete: TAG_ACTIONS.tagSetAutocomplete,
+  tagLoadAutocomplete: TAG_ACTIONS.tagLoadAutocomplete,
+};
 
-const TagAutocomplete: FC<IProps> = () => <div className={classNames(styles.window)}>auto</div>;
+type Props = ReturnType<typeof mapStateToProps> &
+  typeof mapDispatchToProps & {
+    exclude: string[];
+    input: HTMLInputElement;
+    onSelect: (val: string) => void;
+    search: string;
+  };
+
+const TagAutocompleteUnconnected: FC<Props> = ({
+  exclude,
+  input,
+  onSelect,
+  search,
+  tagSetAutocomplete,
+  tagLoadAutocomplete,
+  options,
+}) => {
+  const [top, setTop] = useState(false);
+  const [left, setLeft] = useState(false);
+
+  const [selected, setSelected] = useState(-1);
+  const [categories, tags] = useMemo(
+    () =>
+      separateTagOptions(options.filter(option => option !== search && !exclude.includes(option))),
+    [options, search, exclude]
+  );
+  const scroll = useRef<HTMLDivElement>(null);
+
+  const onKeyDown = useCallback(
+    event => {
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          setSelected(selected < options.length - 1 ? selected + 1 : -1);
+          return;
+        case 'ArrowUp':
+          event.preventDefault();
+          setSelected(selected > -1 ? selected - 1 : options.length - 1);
+          return;
+        case 'Enter':
+          event.preventDefault();
+          onSelect(selected >= 0 ? [...categories, ...tags][selected] : search);
+      }
+    },
+    [setSelected, selected, categories, tags, onSelect, search]
+  );
+
+  const onScroll = useCallback(() => {
+    if (!scroll.current) return;
+    const { y, height, x, width } = scroll.current.getBoundingClientRect();
+
+    const newTop = window.innerHeight - y - height <= (top ? 120 : 10);
+    if (top !== newTop) setTop(newTop);
+
+    const newLeft = x <= 0;
+    if (newLeft !== left) setLeft(newLeft);
+  }, [scroll.current, top, left]);
+
+  useEffect(() => {
+    input.addEventListener('keydown', onKeyDown, false);
+    return () => input.removeEventListener('keydown', onKeyDown);
+  }, [input, onKeyDown]);
+
+  useEffect(() => {
+    setSelected(-1);
+    tagLoadAutocomplete(search, exclude);
+  }, [search]);
+
+  useEffect(() => {
+    tagSetAutocomplete({ options: [] });
+    return () => tagSetAutocomplete({ options: [] });
+  }, [tagSetAutocomplete]);
+
+  useEffect(() => {
+    if (!scroll.current || !scroll.current?.children[selected + 1]) return;
+    const el = scroll.current?.children[selected + 1] as HTMLDivElement;
+    const { scrollTop, clientHeight } = scroll.current;
+    const { offsetTop } = el;
+
+    if (clientHeight - scrollTop + el.clientHeight < offsetTop || offsetTop < scrollTop) {
+      scroll.current.scrollTo(0, el.offsetTop - el.clientHeight);
+    }
+  }, [selected, scroll.current]);
+
+  useEffect(() => {
+    onScroll();
+
+    window.addEventListener('resize', onScroll);
+    window.addEventListener('scroll', onScroll);
+
+    return () => {
+      window.removeEventListener('resize', onScroll);
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
+  return (
+    <div className={classNames(styles.window, { [styles.top]: top, [styles.left]: left })}>
+      <div className={styles.scroll} ref={scroll}>
+        <TagAutocompleteRow selected={selected === -1} title={search} type="enter" />
+
+        {categories.map((item, i) => (
+          <TagAutocompleteRow selected={selected === i} title={item} type="right" key={item} />
+        ))}
+
+        {tags.map((item, i) => (
+          <TagAutocompleteRow
+            selected={selected === categories.length + i}
+            title={item}
+            type="tag"
+            key={item}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const TagAutocomplete = connect(mapStateToProps, mapDispatchToProps)(TagAutocompleteUnconnected);
 
 export { TagAutocomplete };
diff --git a/src/components/tags/TagAutocomplete/styles.module.scss b/src/components/tags/TagAutocomplete/styles.module.scss
index 7d620f93..18591e03 100644
--- a/src/components/tags/TagAutocomplete/styles.module.scss
+++ b/src/components/tags/TagAutocomplete/styles.module.scss
@@ -3,18 +3,35 @@
   100% { opacity: 100 }
 }
 
-.window {
-  box-shadow: transparentize(black, 0.5) 4px 4px 4px, inset transparentize(white, 0.95) 1px 1px;
+$row_height: 24px;
 
+.window {
+  box-shadow: transparentize(white, 0.8) 0 0 0 1px;
   position: absolute;
-  top: 0;
-  right: 0;
-  width: calc(90vw - 20px);
+  top: -2px;
+  right: -2px;
+  width: calc(100vw - 15px);
   max-width: 300px;
-  background: lighten($content_bg, 4%);
-  height: 100px;
+  background: darken($content_bg, 1%);
   z-index: 10;
   border-radius: 3px;
-  padding-top: $tag_height;
+  padding: $tag_height + 2px 0 0;
   animation: appear 0.25s forwards;
+
+  &.top {
+    bottom: -2px;
+    top: auto;
+    padding: 0 0 $tag_height;
+  }
+
+  &.left {
+    right: auto;
+    left: -2px;
+  }
+}
+
+.scroll {
+  overflow: auto;
+  max-height: 7 * $row_height + $tag_height;
+  padding: 0 0 $gap / 2;
 }
diff --git a/src/components/tags/TagAutocompleteRow/index.tsx b/src/components/tags/TagAutocompleteRow/index.tsx
new file mode 100644
index 00000000..0340bd3d
--- /dev/null
+++ b/src/components/tags/TagAutocompleteRow/index.tsx
@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+import { Icon } from '~/components/input/Icon';
+
+interface IProps {
+  selected: boolean;
+  title: string;
+  type: string;
+}
+
+const TagAutocompleteRow: FC<IProps> = ({ selected, type, title }) => (
+  <div className={classNames(styles.row, styles[type], { [styles.selected]: selected })}>
+    <Icon icon={type} size={16} />
+    <span>{title}</span>
+  </div>
+);
+
+export { TagAutocompleteRow };
diff --git a/src/components/tags/TagAutocompleteRow/styles.module.scss b/src/components/tags/TagAutocompleteRow/styles.module.scss
new file mode 100644
index 00000000..ba9d63a9
--- /dev/null
+++ b/src/components/tags/TagAutocompleteRow/styles.module.scss
@@ -0,0 +1,33 @@
+$row_height: 24px;
+
+.row {
+  height: $row_height;
+  padding: 0 $gap;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font: $font_16_semibold;
+  border-top: lighten($content_bg, 2%) solid 1px;
+  opacity: 0.5;
+  cursor: pointer;
+  transition: all 0.1s;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  &:hover, &.selected {
+    opacity: 1;
+    background: lighten($content_bg, 4%);
+  }
+
+  &.right {
+    color: $wisegreen;
+    opacity: 0.7;
+  }
+
+  svg {
+    margin-right: 5px;
+    fill: currentColor;
+    flex: 0 0 16px;
+  }
+}
diff --git a/src/components/tags/TagInput/index.tsx b/src/components/tags/TagInput/index.tsx
index 4211faff..3d8c5b37 100644
--- a/src/components/tags/TagInput/index.tsx
+++ b/src/components/tags/TagInput/index.tsx
@@ -1,13 +1,4 @@
-import React, {
-  ChangeEvent,
-  FC,
-  FocusEventHandler,
-  KeyboardEvent,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { ChangeEvent, FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { TagAutocomplete } from '~/components/tags/TagAutocomplete';
 import { TagWrapper } from '~/components/tags/TagWrapper';
 import styles from './styles.module.scss';
@@ -30,17 +21,19 @@ interface IProps {
   onAppend: (tags: string[]) => void;
   onClearTag: () => string | undefined;
   onSubmit: (last: string[]) => void;
+  exclude: string[];
 }
 
-const TagInput: FC<IProps> = ({ onAppend, onClearTag, onSubmit }) => {
+const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
   const [focused, setFocused] = useState(false);
   const [input, setInput] = useState('');
   const ref = useRef<HTMLInputElement>(null);
+  const wrapper = useRef<HTMLDivElement>(null);
 
   const onInput = useCallback(
     ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
       if (!value.trim()) {
-        setInput(value);
+        setInput(value || '');
         return;
       }
 
@@ -50,7 +43,7 @@ const TagInput: FC<IProps> = ({ onAppend, onClearTag, onSubmit }) => {
         onAppend(items.slice(0, items.length - 1));
       }
 
-      setInput(items[items.length - 1]);
+      setInput(items[items.length - 1] || '');
     },
     [setInput]
   );
@@ -68,7 +61,7 @@ const TagInput: FC<IProps> = ({ onAppend, onClearTag, onSubmit }) => {
         return;
       }
 
-      if (key === 'Enter' || key === ',' || key === 'Comma') {
+      if (key === ',' || key === 'Comma') {
         const created = prepareInput(input);
 
         if (created.length) {
@@ -77,31 +70,47 @@ const TagInput: FC<IProps> = ({ onAppend, onClearTag, onSubmit }) => {
 
         setInput('');
       }
-
-      if (key === 'Enter' && ref.current) {
-        ref.current.blur();
-      }
     },
-    [input, setInput, onClearTag, onAppend, onSubmit, ref.current]
+    [input, setInput, onClearTag, onAppend, onSubmit, ref.current, wrapper.current]
   );
 
   const onFocus = useCallback(() => setFocused(true), []);
-  const onBlur = useCallback<FocusEventHandler<HTMLInputElement>>(() => {
-    setFocused(false);
+  const onBlur = useCallback(
+    event => {
+      if (wrapper.current.contains(event.target)) {
+        ref.current.focus();
+        return;
+      }
 
-    if (input.trim()) {
-      const created = prepareInput(input);
-      onAppend(created);
+      setFocused(false);
+
+      if (input.trim()) {
+        setInput('');
+      }
+
+      onSubmit([]);
+    },
+    [input, onAppend, setInput, onSubmit]
+  );
+
+  const onAutocompleteSelect = useCallback(
+    (val: string) => {
+      onAppend([val]);
       setInput('');
-      onSubmit(created);
-    }
-  }, [input, onAppend, setInput, onSubmit]);
+    },
+    [onAppend, setInput]
+  );
 
-  const feature = useMemo(() => (input.substr(0, 1) === '/' ? 'green' : ''), [input]);
+  const feature = useMemo(() => (input?.substr(0, 1) === '/' ? 'green' : ''), [input]);
+
+  useEffect(() => {
+    document.addEventListener('click', onBlur);
+
+    return () => document.removeEventListener('click', onBlur);
+  }, [onBlur]);
 
   return (
-    <div className={styles.wrap}>
-      {onInput && focused && <TagAutocomplete />}
+    <div className={styles.wrap} ref={wrapper}>
       <TagWrapper title={input || placeholder} has_input={true} feature={feature}>
         <input
           type="text"
@@ -110,12 +119,20 @@ const TagInput: FC<IProps> = ({ onAppend, onClearTag, onSubmit }) => {
           placeholder={placeholder}
           maxLength={24}
           onChange={onInput}
-          onKeyUp={onKeyUp}
-          onBlur={onBlur}
+          onKeyDown={onKeyUp}
           onFocus={onFocus}
           ref={ref}
         />
       </TagWrapper>
+
+      {onInput && focused && input?.length > 0 && (
+        <TagAutocomplete
+          exclude={exclude}
+          input={ref.current}
+          onSelect={onAutocompleteSelect}
+          search={input}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/components/tags/TagInput/styles.module.scss b/src/components/tags/TagInput/styles.module.scss
index 57fac5fd..c5ef4d75 100644
--- a/src/components/tags/TagInput/styles.module.scss
+++ b/src/components/tags/TagInput/styles.module.scss
@@ -1,4 +1,4 @@
 .wrap {
   position: relative;
-  z-index: 13;
+  z-index: 20;
 }
diff --git a/src/components/tags/Tags/index.tsx b/src/components/tags/Tags/index.tsx
index 2b4b8f3a..8feec917 100644
--- a/src/components/tags/Tags/index.tsx
+++ b/src/components/tags/Tags/index.tsx
@@ -4,6 +4,7 @@ import { ITag } from '~/redux/types';
 import uniq from 'ramda/es/uniq';
 import { Tag } from '~/components/tags/Tag';
 import { TagInput } from '~/components/tags/TagInput';
+import { separateTags } from '~/utils/tag';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   tags: Partial<ITag>[];
@@ -15,15 +16,7 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
 export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, onTagClick, ...props }) => {
   const [data, setData] = useState<string[]>([]);
 
-  const [catTags, ordinaryTags] = useMemo(
-    () =>
-      (tags || []).reduce(
-        (obj, tag) =>
-          tag.title.substr(0, 1) === '/' ? [[...obj[0], tag], obj[1]] : [obj[0], [...obj[1], tag]],
-        [[], []]
-      ),
-    [tags]
-  );
+  const [catTags, ordinaryTags] = useMemo(() => separateTags(tags), [tags]);
 
   const onSubmit = useCallback(
     (last: string[]) => {
@@ -33,23 +26,6 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, onTagClick,
     [data]
   );
 
-  //
-  // const onSubmit = useCallback(() => {
-  //   const title = input && input.trim();
-  //   const items = (title ? [...data, { title }] : data)
-  //     .filter(tag => tag.title.length > 0)
-  //     .map(tag => ({
-  //       ...tag,
-  //       title: tag.title.toLowerCase(),
-  //     }));
-  //
-  //   if (!items.length) return;
-  //
-  //   setData(items);
-  //   setInput('');
-  //   onTagsChange(uniq([...tags, ...items]).map(tag => tag.title));
-  // }, [tags, data, onTagsChange, input, setInput]);
-
   useEffect(() => {
     setData(data.filter(title => !tags.some(tag => tag.title.trim() === title.trim())));
   }, [tags]);
@@ -68,6 +44,11 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, onTagClick,
     return last;
   }, [data, setData]);
 
+  const exclude = useMemo(() => [...(data || []), ...(tags || []).map(({ title }) => title)], [
+    data,
+    tags,
+  ]);
+
   return (
     <TagField {...props}>
       {catTags.map(tag => (
@@ -83,7 +64,12 @@ export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, onTagClick,
       ))}
 
       {is_editable && (
-        <TagInput onAppend={onAppendTag} onClearTag={onClearTag} onSubmit={onSubmit} />
+        <TagInput
+          onAppend={onAppendTag}
+          onClearTag={onClearTag}
+          onSubmit={onSubmit}
+          exclude={exclude}
+        />
       )}
     </TagField>
   );
diff --git a/src/constants/api.ts b/src/constants/api.ts
index d942c61c..4c23cf31 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -48,5 +48,6 @@ export const API = {
   },
   TAG: {
     NODES: `/tag/nodes`,
+    AUTOCOMPLETE: `/tag/autocomplete`,
   },
 };
diff --git a/src/containers/node/NodeLayout/styles.scss b/src/containers/node/NodeLayout/styles.scss
index a45d4b27..6549945c 100644
--- a/src/containers/node/NodeLayout/styles.scss
+++ b/src/containers/node/NodeLayout/styles.scss
@@ -23,7 +23,9 @@
   justify-content: flex-start;
   padding-left: $gap / 2;
   min-width: 0;
-
+  position: relative;
+  z-index: 10;
+  
   @media (max-width: 1024px) {
     padding-left: 0;
     padding-top: $comment_height / 2;
diff --git a/src/redux/tag/actions.ts b/src/redux/tag/actions.ts
index 835d3ca3..078f47a4 100644
--- a/src/redux/tag/actions.ts
+++ b/src/redux/tag/actions.ts
@@ -7,6 +7,17 @@ export const tagSetNodes = (nodes: Partial<ITagState['nodes']>) => ({
 });
 
 export const tagLoadNodes = (tag: string) => ({
-  type: TAG_ACTIONS.LOAD_TAG_NODES,
+  type: TAG_ACTIONS.LOAD_NODES,
   tag,
 });
+
+export const tagSetAutocomplete = (autocomplete: Partial<ITagState['autocomplete']>) => ({
+  type: TAG_ACTIONS.SET_TAG_AUTOCOMPLETE,
+  autocomplete,
+});
+
+export const tagLoadAutocomplete = (search: string, exclude: string[]) => ({
+  type: TAG_ACTIONS.LOAD_AUTOCOMPLETE,
+  search,
+  exclude,
+});
diff --git a/src/redux/tag/api.ts b/src/redux/tag/api.ts
index 92d87081..d657b9b7 100644
--- a/src/redux/tag/api.ts
+++ b/src/redux/tag/api.ts
@@ -17,3 +17,17 @@ export const getTagNodes = ({
     .get(API.TAG.NODES, configWithToken(access, { params: { name: tag, offset, limit } }))
     .then(resultMiddleware)
     .catch(errorMiddleware);
+
+export const getTagAutocomplete = ({
+  search,
+  exclude,
+  access,
+}: {
+  access: string;
+  search: string;
+  exclude: string[];
+}): Promise<IResultWithStatus<{ tags: string[] }>> =>
+  api
+    .get(API.TAG.AUTOCOMPLETE, configWithToken(access, { params: { search, exclude } }))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);
diff --git a/src/redux/tag/constants.ts b/src/redux/tag/constants.ts
index 5c6b04f4..8c74e7ee 100644
--- a/src/redux/tag/constants.ts
+++ b/src/redux/tag/constants.ts
@@ -1,6 +1,8 @@
 const prefix = 'TAG.';
 
 export const TAG_ACTIONS = {
-  LOAD_TAG_NODES: `${prefix}LOAD_TAG_NODES`,
+  LOAD_NODES: `${prefix}LOAD_TAG_NODES`,
   SET_TAG_NODES: `${prefix}SET_TAG_NODES`,
+  SET_TAG_AUTOCOMPLETE: `${prefix}SET_TAG_NODES`,
+  LOAD_AUTOCOMPLETE: `${prefix}LOAD_TAG_AUTOCOMPLETE`,
 };
diff --git a/src/redux/tag/handlers.ts b/src/redux/tag/handlers.ts
index b0bc92b1..d9c4ffe9 100644
--- a/src/redux/tag/handlers.ts
+++ b/src/redux/tag/handlers.ts
@@ -1,6 +1,6 @@
 import { TAG_ACTIONS } from '~/redux/tag/constants';
 import { ITagState } from '~/redux/tag/index';
-import { tagSetNodes } from '~/redux/tag/actions';
+import { tagSetAutocomplete, tagSetNodes } from '~/redux/tag/actions';
 
 const setNodes = (state: ITagState, { nodes }: ReturnType<typeof tagSetNodes>) => ({
   ...state,
@@ -10,6 +10,18 @@ const setNodes = (state: ITagState, { nodes }: ReturnType<typeof tagSetNodes>) =
   },
 });
 
+const setAutocomplete = (
+  state: ITagState,
+  { autocomplete }: ReturnType<typeof tagSetAutocomplete>
+) => ({
+  ...state,
+  autocomplete: {
+    ...state.autocomplete,
+    ...autocomplete,
+  },
+});
+
 export const TAG_HANDLERS = {
   [TAG_ACTIONS.SET_TAG_NODES]: setNodes,
+  [TAG_ACTIONS.SET_TAG_AUTOCOMPLETE]: setAutocomplete,
 };
diff --git a/src/redux/tag/index.ts b/src/redux/tag/index.ts
index fddaff42..b55487f1 100644
--- a/src/redux/tag/index.ts
+++ b/src/redux/tag/index.ts
@@ -8,6 +8,10 @@ export interface ITagState {
     count: number;
     isLoading: boolean;
   };
+  autocomplete: {
+    isLoading: boolean;
+    options: string[];
+  };
 }
 
 const INITIAL_STATE: ITagState = {
@@ -16,6 +20,10 @@ const INITIAL_STATE: ITagState = {
     count: 0,
     isLoading: true,
   },
+  autocomplete: {
+    isLoading: true,
+    options: [],
+  },
 };
 
 export default createReducer(INITIAL_STATE, TAG_HANDLERS);
diff --git a/src/redux/tag/sagas.ts b/src/redux/tag/sagas.ts
index 1b11f38d..ade289bd 100644
--- a/src/redux/tag/sagas.ts
+++ b/src/redux/tag/sagas.ts
@@ -1,9 +1,9 @@
 import { TAG_ACTIONS } from '~/redux/tag/constants';
-import { call, put, select, takeLatest } from 'redux-saga/effects';
-import { tagLoadNodes, tagSetNodes } from '~/redux/tag/actions';
+import { call, delay, put, select, takeLatest } from 'redux-saga/effects';
+import { tagLoadAutocomplete, tagLoadNodes, tagSetAutocomplete, tagSetNodes, } from '~/redux/tag/actions';
 import { reqWrapper } from '~/redux/auth/sagas';
 import { selectTagNodes } from '~/redux/tag/selectors';
-import { getTagNodes } from '~/redux/tag/api';
+import { getTagAutocomplete, getTagNodes } from '~/redux/tag/api';
 import { Unwrap } from '~/redux/types';
 
 function* loadTagNodes({ tag }: ReturnType<typeof tagLoadNodes>) {
@@ -26,6 +26,28 @@ function* loadTagNodes({ tag }: ReturnType<typeof tagLoadNodes>) {
   }
 }
 
-export default function* tagSaga() {
-  yield takeLatest(TAG_ACTIONS.LOAD_TAG_NODES, loadTagNodes);
+function* loadAutocomplete({ search, exclude }: ReturnType<typeof tagLoadAutocomplete>) {
+  if (search.length < 3) return;
+
+  try {
+    yield put(tagSetAutocomplete({ isLoading: true }));
+    yield delay(100);
+
+    const { data, error }: Unwrap<ReturnType<typeof getTagAutocomplete>> = yield call(
+      reqWrapper,
+      getTagAutocomplete,
+      { search, exclude }
+    );
+
+    if (error) throw new Error(error);
+
+    yield put(tagSetAutocomplete({ options: data.tags, isLoading: false }));
+  } catch (e) {
+    yield put(tagSetAutocomplete({ isLoading: false }));
+  }
+}
+
+export default function* tagSaga() {
+  yield takeLatest(TAG_ACTIONS.LOAD_NODES, loadTagNodes);
+  yield takeLatest(TAG_ACTIONS.LOAD_AUTOCOMPLETE, loadAutocomplete);
 }
diff --git a/src/redux/tag/selectors.ts b/src/redux/tag/selectors.ts
index 338bfda5..74ffdc3e 100644
--- a/src/redux/tag/selectors.ts
+++ b/src/redux/tag/selectors.ts
@@ -2,3 +2,4 @@ import { IState } from '~/redux/store';
 
 export const selectTag = (state: IState) => state.tag;
 export const selectTagNodes = (state: IState) => state.tag.nodes;
+export const selectTagAutocomplete = (state: IState) => state.tag.autocomplete;
diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx
index a8efa18e..d3c8a38e 100644
--- a/src/sprites/Sprites.tsx
+++ b/src/sprites/Sprites.tsx
@@ -160,6 +160,11 @@ const Sprites: FC<{}> = () => (
       <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
     </g>
 
+    <g id="keyboard" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z" />
+    </g>
+
     <g id="key" stroke="none">
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" />
@@ -220,6 +225,11 @@ const Sprites: FC<{}> = () => (
       <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
     </g>
 
+    <g id="tag" stroke="none">
+      <path fill="none" d="M0 0h24v24H0V0z" />
+      <path d="M17.63 5.84C17.27 5.33 16.67 5 16 5L5 5.01C3.9 5.01 3 5.9 3 7v10c0 1.1.9 1.99 2 1.99L16 19c.67 0 1.27-.33 1.63-.84L22 12l-4.37-6.16zM16 17H5V7h11l3.55 5L16 17z" />
+    </g>
+
     <g id="messages" stroke="none">
       <path fill="none" d="M0 0h24v24H0V0z" />
       <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" />
diff --git a/src/utils/tag.ts b/src/utils/tag.ts
new file mode 100644
index 00000000..2913ba95
--- /dev/null
+++ b/src/utils/tag.ts
@@ -0,0 +1,13 @@
+import { ITag } from '~/redux/types';
+
+export const separateTags = (tags: Partial<ITag>[]): Partial<ITag>[][] =>
+  (tags || []).reduce(
+    (obj, tag) =>
+      tag.title.substr(0, 1) === '/' ? [[...obj[0], tag], obj[1]] : [obj[0], [...obj[1], tag]],
+    [[], []]
+  );
+
+export const separateTagOptions = (options: string[]): string[][] =>
+  separateTags(options.map((title): Partial<ITag> => ({ title }))).map(item =>
+    item.map(({ title }) => title)
+  );

From ef6c5b9068f8934ea9e3f310384134133317befc Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 21:04:24 +0700
Subject: [PATCH 08/19] fixed popup appearance

---
 src/components/tags/TagAutocomplete/index.tsx            | 9 +++++----
 src/components/tags/TagAutocomplete/styles.module.scss   | 8 ++++----
 .../tags/TagAutocompleteRow/styles.module.scss           | 7 +++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/tags/TagAutocomplete/index.tsx b/src/components/tags/TagAutocomplete/index.tsx
index 87a71389..87ba84f7 100644
--- a/src/components/tags/TagAutocomplete/index.tsx
+++ b/src/components/tags/TagAutocomplete/index.tsx
@@ -43,18 +43,19 @@ const TagAutocompleteUnconnected: FC<Props> = ({
 
   const onKeyDown = useCallback(
     event => {
+      const all = [...categories, ...tags];
       switch (event.key) {
         case 'ArrowDown':
           event.preventDefault();
-          setSelected(selected < options.length - 1 ? selected + 1 : -1);
+          setSelected(selected < all.length - 1 ? selected + 1 : -1);
           return;
         case 'ArrowUp':
           event.preventDefault();
-          setSelected(selected > -1 ? selected - 1 : options.length - 1);
+          setSelected(selected > -1 ? selected - 1 : all.length - 1);
           return;
         case 'Enter':
           event.preventDefault();
-          onSelect(selected >= 0 ? [...categories, ...tags][selected] : search);
+          onSelect(selected >= 0 ? all[selected] : search);
       }
     },
     [setSelected, selected, categories, tags, onSelect, search]
@@ -107,7 +108,7 @@ const TagAutocompleteUnconnected: FC<Props> = ({
       window.removeEventListener('resize', onScroll);
       window.removeEventListener('scroll', onScroll);
     };
-  }, []);
+  }, [options]);
 
   return (
     <div className={classNames(styles.window, { [styles.top]: top, [styles.left]: left })}>
diff --git a/src/components/tags/TagAutocomplete/styles.module.scss b/src/components/tags/TagAutocomplete/styles.module.scss
index 18591e03..abdd204f 100644
--- a/src/components/tags/TagAutocomplete/styles.module.scss
+++ b/src/components/tags/TagAutocomplete/styles.module.scss
@@ -6,22 +6,22 @@
 $row_height: 24px;
 
 .window {
-  box-shadow: transparentize(white, 0.8) 0 0 0 1px;
+  box-shadow: transparentize(white, 0.9) 0 0 0 1px, transparentize(black, 0.7) 4px 4px;
   position: absolute;
   top: -2px;
   right: -2px;
   width: calc(100vw - 15px);
   max-width: 300px;
-  background: darken($content_bg, 1%);
+  background: darken($content_bg, 2%);
   z-index: 10;
   border-radius: 3px;
-  padding: $tag_height + 2px 0 0;
+  padding: $tag_height + 4px 0 0;
   animation: appear 0.25s forwards;
 
   &.top {
     bottom: -2px;
     top: auto;
-    padding: 0 0 $tag_height;
+    padding: 0 0 $tag_height + 4px;
   }
 
   &.left {
diff --git a/src/components/tags/TagAutocompleteRow/styles.module.scss b/src/components/tags/TagAutocompleteRow/styles.module.scss
index ba9d63a9..51efd1b3 100644
--- a/src/components/tags/TagAutocompleteRow/styles.module.scss
+++ b/src/components/tags/TagAutocompleteRow/styles.module.scss
@@ -7,7 +7,6 @@ $row_height: 24px;
   align-items: center;
   justify-content: flex-start;
   font: $font_16_semibold;
-  border-top: lighten($content_bg, 2%) solid 1px;
   opacity: 0.5;
   cursor: pointer;
   transition: all 0.1s;
@@ -17,12 +16,12 @@ $row_height: 24px;
 
   &:hover, &.selected {
     opacity: 1;
-    background: lighten($content_bg, 4%);
+    background: transparentize($wisegreen, 0.5);
   }
 
   &.right {
-    color: $wisegreen;
-    opacity: 0.7;
+    color: lighten($wisegreen, 4%);
+    opacity: 1;
   }
 
   svg {

From 9778c9ba9a99ad11197d5c614afd8395fae46807 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 21:21:13 +0700
Subject: [PATCH 09/19] renamed onKeyUp --> onKeyDown

---
 src/components/tags/TagAutocomplete/index.tsx | 1 +
 src/components/tags/TagInput/index.tsx        | 9 ++++-----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/tags/TagAutocomplete/index.tsx b/src/components/tags/TagAutocomplete/index.tsx
index 87ba84f7..cd13840f 100644
--- a/src/components/tags/TagAutocomplete/index.tsx
+++ b/src/components/tags/TagAutocomplete/index.tsx
@@ -44,6 +44,7 @@ const TagAutocompleteUnconnected: FC<Props> = ({
   const onKeyDown = useCallback(
     event => {
       const all = [...categories, ...tags];
+
       switch (event.key) {
         case 'ArrowDown':
           event.preventDefault();
diff --git a/src/components/tags/TagInput/index.tsx b/src/components/tags/TagInput/index.tsx
index 3d8c5b37..84e64387 100644
--- a/src/components/tags/TagInput/index.tsx
+++ b/src/components/tags/TagInput/index.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { TagAutocomplete } from '~/components/tags/TagAutocomplete';
 import { TagWrapper } from '~/components/tags/TagWrapper';
 import styles from './styles.module.scss';
@@ -48,8 +48,8 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
     [setInput]
   );
 
-  const onKeyUp = useCallback(
-    ({ key }: KeyboardEvent) => {
+  const onKeyDown = useCallback(
+    ({ key }) => {
       if (key === 'Escape' && ref.current) {
         setInput('');
         ref.current.blur();
@@ -105,7 +105,6 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
 
   useEffect(() => {
     document.addEventListener('click', onBlur);
-
     return () => document.removeEventListener('click', onBlur);
   }, [onBlur]);
 
@@ -119,7 +118,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
           placeholder={placeholder}
           maxLength={24}
           onChange={onInput}
-          onKeyDown={onKeyUp}
+          onKeyDown={onKeyDown}
           onFocus={onFocus}
           ref={ref}
         />

From 62e607c42585cf400db96777b1999523b397f8e8 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 21:26:45 +0700
Subject: [PATCH 10/19] fixed action

---
 src/components/tags/TagInput/index.tsx |  2 +-
 src/redux/tag/constants.ts             |  2 +-
 src/redux/tag/handlers.ts              | 18 +++++++++++-------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/tags/TagInput/index.tsx b/src/components/tags/TagInput/index.tsx
index 84e64387..1d1c362e 100644
--- a/src/components/tags/TagInput/index.tsx
+++ b/src/components/tags/TagInput/index.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TagAutocomplete } from '~/components/tags/TagAutocomplete';
 import { TagWrapper } from '~/components/tags/TagWrapper';
 import styles from './styles.module.scss';
diff --git a/src/redux/tag/constants.ts b/src/redux/tag/constants.ts
index 8c74e7ee..f205b441 100644
--- a/src/redux/tag/constants.ts
+++ b/src/redux/tag/constants.ts
@@ -3,6 +3,6 @@ const prefix = 'TAG.';
 export const TAG_ACTIONS = {
   LOAD_NODES: `${prefix}LOAD_TAG_NODES`,
   SET_TAG_NODES: `${prefix}SET_TAG_NODES`,
-  SET_TAG_AUTOCOMPLETE: `${prefix}SET_TAG_NODES`,
+  SET_TAG_AUTOCOMPLETE: `${prefix}SET_TAG_AUTOCOMPLETE`,
   LOAD_AUTOCOMPLETE: `${prefix}LOAD_TAG_AUTOCOMPLETE`,
 };
diff --git a/src/redux/tag/handlers.ts b/src/redux/tag/handlers.ts
index d9c4ffe9..d05fc6ef 100644
--- a/src/redux/tag/handlers.ts
+++ b/src/redux/tag/handlers.ts
@@ -2,13 +2,17 @@ import { TAG_ACTIONS } from '~/redux/tag/constants';
 import { ITagState } from '~/redux/tag/index';
 import { tagSetAutocomplete, tagSetNodes } from '~/redux/tag/actions';
 
-const setNodes = (state: ITagState, { nodes }: ReturnType<typeof tagSetNodes>) => ({
-  ...state,
-  nodes: {
-    ...state.nodes,
-    ...nodes,
-  },
-});
+const setNodes = (state: ITagState, { nodes }: ReturnType<typeof tagSetNodes>) => {
+  console.log(state, nodes);
+
+  return {
+    ...state,
+    nodes: {
+      ...state.nodes,
+      ...nodes,
+    },
+  };
+};
 
 const setAutocomplete = (
   state: ITagState,

From 1da36ef036979cb9541d0d620dfa11a7f01ebb86 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 21:27:08 +0700
Subject: [PATCH 11/19] removed console.log

---
 src/redux/tag/handlers.ts | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/redux/tag/handlers.ts b/src/redux/tag/handlers.ts
index d05fc6ef..d9c4ffe9 100644
--- a/src/redux/tag/handlers.ts
+++ b/src/redux/tag/handlers.ts
@@ -2,17 +2,13 @@ import { TAG_ACTIONS } from '~/redux/tag/constants';
 import { ITagState } from '~/redux/tag/index';
 import { tagSetAutocomplete, tagSetNodes } from '~/redux/tag/actions';
 
-const setNodes = (state: ITagState, { nodes }: ReturnType<typeof tagSetNodes>) => {
-  console.log(state, nodes);
-
-  return {
-    ...state,
-    nodes: {
-      ...state.nodes,
-      ...nodes,
-    },
-  };
-};
+const setNodes = (state: ITagState, { nodes }: ReturnType<typeof tagSetNodes>) => ({
+  ...state,
+  nodes: {
+    ...state.nodes,
+    ...nodes,
+  },
+});
 
 const setAutocomplete = (
   state: ITagState,

From c19fb3282e97f1c974f9a7cee3456f5c37a40926 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 22:03:54 +0700
Subject: [PATCH 12/19] added search to useEffect deps

---
 src/components/tags/TagAutocomplete/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/tags/TagAutocomplete/index.tsx b/src/components/tags/TagAutocomplete/index.tsx
index cd13840f..f2948b65 100644
--- a/src/components/tags/TagAutocomplete/index.tsx
+++ b/src/components/tags/TagAutocomplete/index.tsx
@@ -109,7 +109,7 @@ const TagAutocompleteUnconnected: FC<Props> = ({
       window.removeEventListener('resize', onScroll);
       window.removeEventListener('scroll', onScroll);
     };
-  }, [options]);
+  }, [options, search]);
 
   return (
     <div className={classNames(styles.window, { [styles.top]: top, [styles.left]: left })}>

From 6de411f14013bc95aef39d16e361d57b6d86a2cc Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 22:55:09 +0700
Subject: [PATCH 13/19] used popper to handle positioning

---
 src/components/main/Header/style.scss         |  2 +-
 src/components/tags/TagAutocomplete/index.tsx | 51 +++++++++----------
 .../tags/TagAutocomplete/styles.module.scss   | 20 ++------
 .../SidebarWrapper/styles.module.scss         |  2 +-
 4 files changed, 29 insertions(+), 46 deletions(-)

diff --git a/src/components/main/Header/style.scss b/src/components/main/Header/style.scss
index f3108962..45e99be5 100644
--- a/src/components/main/Header/style.scss
+++ b/src/components/main/Header/style.scss
@@ -1,6 +1,6 @@
 .wrap {
   height: $header_height;
-  z-index: 5;
+  z-index: 25;
   position: fixed;
   top: 0;
   left: 0;
diff --git a/src/components/tags/TagAutocomplete/index.tsx b/src/components/tags/TagAutocomplete/index.tsx
index f2948b65..fc69c6ab 100644
--- a/src/components/tags/TagAutocomplete/index.tsx
+++ b/src/components/tags/TagAutocomplete/index.tsx
@@ -6,6 +6,7 @@ import * as TAG_ACTIONS from '~/redux/tag/actions';
 import { selectTagAutocomplete } from '~/redux/tag/selectors';
 import { separateTagOptions } from '~/utils/tag';
 import { TagAutocompleteRow } from '~/components/tags/TagAutocompleteRow';
+import { usePopper } from 'react-popper';
 
 const mapStateToProps = selectTagAutocomplete;
 const mapDispatchToProps = {
@@ -30,16 +31,28 @@ const TagAutocompleteUnconnected: FC<Props> = ({
   tagLoadAutocomplete,
   options,
 }) => {
-  const [top, setTop] = useState(false);
-  const [left, setLeft] = useState(false);
-
   const [selected, setSelected] = useState(-1);
   const [categories, tags] = useMemo(
     () =>
-      separateTagOptions(options.filter(option => option !== search && !exclude.includes(option))),
+      separateTagOptions(
+        options.slice(0, 7).filter(option => option !== search && !exclude.includes(option))
+      ),
     [options, search, exclude]
   );
   const scroll = useRef<HTMLDivElement>(null);
+  const wrapper = useRef<HTMLDivElement>(null);
+
+  const pop = usePopper(wrapper?.current?.parentElement, wrapper.current, {
+    placement: 'bottom-end',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 4],
+        },
+      },
+    ],
+  });
 
   const onKeyDown = useCallback(
     event => {
@@ -62,17 +75,6 @@ const TagAutocompleteUnconnected: FC<Props> = ({
     [setSelected, selected, categories, tags, onSelect, search]
   );
 
-  const onScroll = useCallback(() => {
-    if (!scroll.current) return;
-    const { y, height, x, width } = scroll.current.getBoundingClientRect();
-
-    const newTop = window.innerHeight - y - height <= (top ? 120 : 10);
-    if (top !== newTop) setTop(newTop);
-
-    const newLeft = x <= 0;
-    if (newLeft !== left) setLeft(newLeft);
-  }, [scroll.current, top, left]);
-
   useEffect(() => {
     input.addEventListener('keydown', onKeyDown, false);
     return () => input.removeEventListener('keydown', onKeyDown);
@@ -99,20 +101,13 @@ const TagAutocompleteUnconnected: FC<Props> = ({
     }
   }, [selected, scroll.current]);
 
-  useEffect(() => {
-    onScroll();
-
-    window.addEventListener('resize', onScroll);
-    window.addEventListener('scroll', onScroll);
-
-    return () => {
-      window.removeEventListener('resize', onScroll);
-      window.removeEventListener('scroll', onScroll);
-    };
-  }, [options, search]);
-
   return (
-    <div className={classNames(styles.window, { [styles.top]: top, [styles.left]: left })}>
+    <div
+      className={classNames(styles.window)}
+      ref={wrapper}
+      style={pop.styles.popper}
+      {...pop.attributes.popper}
+    >
       <div className={styles.scroll} ref={scroll}>
         <TagAutocompleteRow selected={selected === -1} title={search} type="enter" />
 
diff --git a/src/components/tags/TagAutocomplete/styles.module.scss b/src/components/tags/TagAutocomplete/styles.module.scss
index abdd204f..ec6baaef 100644
--- a/src/components/tags/TagAutocomplete/styles.module.scss
+++ b/src/components/tags/TagAutocomplete/styles.module.scss
@@ -6,7 +6,7 @@
 $row_height: 24px;
 
 .window {
-  box-shadow: transparentize(white, 0.9) 0 0 0 1px, transparentize(black, 0.7) 4px 4px;
+  box-shadow: transparentize(white, 0.9) 0 0 0 1px;
   position: absolute;
   top: -2px;
   right: -2px;
@@ -14,24 +14,12 @@ $row_height: 24px;
   max-width: 300px;
   background: darken($content_bg, 2%);
   z-index: 10;
-  border-radius: 3px;
-  padding: $tag_height + 4px 0 0;
+  border-radius: 4px;
   animation: appear 0.25s forwards;
-
-  &.top {
-    bottom: -2px;
-    top: auto;
-    padding: 0 0 $tag_height + 4px;
-  }
-
-  &.left {
-    right: auto;
-    left: -2px;
-  }
 }
 
 .scroll {
-  overflow: auto;
-  max-height: 7 * $row_height + $tag_height;
+  overflow: hidden;
   padding: 0 0 $gap / 2;
+  border-radius: 4px;
 }
diff --git a/src/containers/sidebars/SidebarWrapper/styles.module.scss b/src/containers/sidebars/SidebarWrapper/styles.module.scss
index a581c1af..dda5cc05 100644
--- a/src/containers/sidebars/SidebarWrapper/styles.module.scss
+++ b/src/containers/sidebars/SidebarWrapper/styles.module.scss
@@ -16,7 +16,7 @@
   background: rgba(255, 0, 0, 0.3);
   display: flex;
   flex-direction: row;
-  z-index: 20;
+  z-index: 26;
   justify-content: flex-end;
   overflow: hidden;
   animation: appear 0.25s forwards;

From 5bca633bd01f559eb99c04bddec75375c14ff0c1 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 31 Oct 2020 22:57:29 +0700
Subject: [PATCH 14/19] updated deps

---
 package.json |  2 ++
 yarn.lock    | 25 +++++++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/package.json b/package.json
index 44c76853..ce7d74c9 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
   "license": "MIT",
   "dependencies": {
     "@hot-loader/react-dom": "^16.10.2",
+    "@popperjs/core": "^2.5.4",
     "@typescript-eslint/eslint-plugin": "^1.13.0",
     "@typescript-eslint/parser": "^1.13.0",
     "autosize": "^4.0.2",
@@ -95,6 +96,7 @@
     "react-dom": "^16.13.0",
     "react-hot-loader": "^4.12.15",
     "react-packery-component": "^1.0.2",
+    "react-popper": "^2.2.3",
     "react-redux": "^6.0.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
diff --git a/yarn.lock b/yarn.lock
index f53e787b..06a6a30f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -689,6 +689,11 @@
     prop-types "^15.6.2"
     scheduler "^0.17.0"
 
+"@popperjs/core@^2.5.4":
+  version "2.5.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.5.4.tgz#de25b5da9f727985a3757fd59b5d028aba75841a"
+  integrity sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ==
+
 "@redux-saga/core@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.1.3.tgz#3085097b57a4ea8db5528d58673f20ce0950f6a4"
@@ -8083,6 +8088,11 @@ react-dom@^16.13.0:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-fast-compare@^3.0.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
 react-hot-loader@^4.12.15:
   version "4.12.16"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.16.tgz#353bd07fbb08f791b5720535f86b0a8f9b651317"
@@ -8116,6 +8126,14 @@ react-packery-component@^1.0.2:
     imagesloaded eiriklv/imagesloaded
     packery eiriklv/packery
 
+react-popper@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.2.3.tgz#33d425fa6975d4bd54d9acd64897a89d904b9d97"
+  integrity sha512-mOEiMNT1249js0jJvkrOjyHsGvqcJd3aGW/agkiMoZk3bZ1fXN1wQszIQSjHIai48fE67+zwF8Cs+C4fWqlfjw==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
 react-redux@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.1.tgz#0d423e2c1cb10ada87293d47e7de7c329623ba4d"
@@ -10133,6 +10151,13 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+warning@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"

From d2e35382f1cbdf5b3f5cab8c12d42d4b74c3f0bb Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 2 Nov 2020 12:55:01 +0700
Subject: [PATCH 15/19] fixed modal z-index

---
 src/containers/dialogs/Modal/styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/containers/dialogs/Modal/styles.scss b/src/containers/dialogs/Modal/styles.scss
index bbc9d691..41d1b253 100644
--- a/src/containers/dialogs/Modal/styles.scss
+++ b/src/containers/dialogs/Modal/styles.scss
@@ -1,6 +1,6 @@
 .fixed {
   position: fixed;
-  z-index: 10;
+  z-index: 30;
   top: 0;
   left: 0;
   width: 100%;

From 9ea5b8ae8f8c5c5d6bab3a9d0f8c70b875f745b4 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 3 Nov 2020 12:48:57 +0700
Subject: [PATCH 16/19] fixed autocomplete rows click

---
 src/components/tags/TagAutocomplete/index.tsx | 16 ++++++++++++--
 .../tags/TagAutocompleteRow/index.tsx         | 22 +++++++++++++------
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/tags/TagAutocomplete/index.tsx b/src/components/tags/TagAutocomplete/index.tsx
index fc69c6ab..485a6fe1 100644
--- a/src/components/tags/TagAutocomplete/index.tsx
+++ b/src/components/tags/TagAutocomplete/index.tsx
@@ -109,10 +109,21 @@ const TagAutocompleteUnconnected: FC<Props> = ({
       {...pop.attributes.popper}
     >
       <div className={styles.scroll} ref={scroll}>
-        <TagAutocompleteRow selected={selected === -1} title={search} type="enter" />
+        <TagAutocompleteRow
+          selected={selected === -1}
+          title={search}
+          type="enter"
+          onSelect={onSelect}
+        />
 
         {categories.map((item, i) => (
-          <TagAutocompleteRow selected={selected === i} title={item} type="right" key={item} />
+          <TagAutocompleteRow
+            selected={selected === i}
+            title={item}
+            type="right"
+            key={item}
+            onSelect={onSelect}
+          />
         ))}
 
         {tags.map((item, i) => (
@@ -121,6 +132,7 @@ const TagAutocompleteUnconnected: FC<Props> = ({
             title={item}
             type="tag"
             key={item}
+            onSelect={onSelect}
           />
         ))}
       </div>
diff --git a/src/components/tags/TagAutocompleteRow/index.tsx b/src/components/tags/TagAutocompleteRow/index.tsx
index 0340bd3d..27e8b282 100644
--- a/src/components/tags/TagAutocompleteRow/index.tsx
+++ b/src/components/tags/TagAutocompleteRow/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
 import { Icon } from '~/components/input/Icon';
@@ -7,13 +7,21 @@ interface IProps {
   selected: boolean;
   title: string;
   type: string;
+  onSelect: (val: string) => void;
 }
 
-const TagAutocompleteRow: FC<IProps> = ({ selected, type, title }) => (
-  <div className={classNames(styles.row, styles[type], { [styles.selected]: selected })}>
-    <Icon icon={type} size={16} />
-    <span>{title}</span>
-  </div>
-);
+const TagAutocompleteRow: FC<IProps> = ({ selected, type, title, onSelect }) => {
+  const onClick = useCallback(() => onSelect(title), [title, onSelect]);
+
+  return (
+    <div
+      className={classNames(styles.row, styles[type], { [styles.selected]: selected })}
+      onClick={onClick}
+    >
+      <Icon icon={type} size={16} />
+      <span>{title}</span>
+    </div>
+  );
+};
 
 export { TagAutocompleteRow };

From 558fbc703a43da54cc517e592505163e18008896 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 5 Nov 2020 18:06:07 +0700
Subject: [PATCH 17/19] made simple replacement for flow hero slider

---
 src/components/flow/FlowHero/index.tsx   | 93 +++++++-----------------
 src/components/flow/FlowHero/styles.scss | 17 +++++
 2 files changed, 43 insertions(+), 67 deletions(-)

diff --git a/src/components/flow/FlowHero/index.tsx b/src/components/flow/FlowHero/index.tsx
index 2f0c36b8..fae9074d 100644
--- a/src/components/flow/FlowHero/index.tsx
+++ b/src/components/flow/FlowHero/index.tsx
@@ -7,111 +7,70 @@ import { getURL } from '~/utils/dom';
 import { withRouter, RouteComponentProps } from 'react-router';
 import { URLS, PRESETS } from '~/constants/urls';
 import { Icon } from '~/components/input/Icon';
+import { INode } from "~/redux/types";
 
 type IProps = RouteComponentProps & {
   heroes: IFlowState['heroes'];
 };
 
 const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
-  const [limit, setLimit] = useState(Math.min(heroes.length, 6));
+  const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []);
+  const [limit, setLimit] = useState(6);
   const [current, setCurrent] = useState(0);
-  const [loaded, setLoaded] = useState([]);
+  const [loaded, setLoaded] = useState<Partial<INode>[]>([]);
 
-  const timer = useRef(null);
-  const onLoad = useCallback(id => () => setLoaded([...loaded, id]), [setLoaded, loaded]);
-  const onNext = useCallback(() => {
-    clearTimeout(timer.current);
+  const onLoad = useCallback((i: number) => {
+    setLoaded([...loaded, heroes[i]])
+  }, [heroes, loaded, setLoaded])
 
-    if (loaded.length <= 1) return;
-
-    const index = loaded.findIndex(el => el === current);
-
-    setCurrent(index > loaded.length - 2 ? loaded[0] : loaded[index + 1]);
-  }, [loaded, current, setCurrent, timer]);
-
-  const onNextPress = useCallback(() => {
-    setLimit(Math.min(heroes.length, limit + 1));
-    onNext();
-  }, [onNext, heroes, limit, setLimit]);
-
-  const onPrevious = useCallback(() => {
-    clearTimeout(timer.current);
-
-    if (loaded.length <= 1) return;
-
-    const index = loaded.findIndex(el => el === current);
-
-    setCurrent(index > 0 ? loaded[index - 1] : loaded[loaded.length - 1]);
-  }, [loaded, current, setCurrent, timer]);
-
-  useEffect(() => {
-    timer.current = setTimeout(onNext, 5000);
-  }, [current, onNext]);
-
-  useEffect(() => {
-    if (current === 0 && loaded.length > 0) setCurrent(loaded[0]);
-  }, [loaded]);
-
-  useEffect(() => {
-    setLimit(limit > 0 ? Math.min(heroes.length, limit) : heroes.length);
-  }, [heroes, limit]);
-
-  const stopSliding = useCallback(() => {
-    clearTimeout(timer.current);
-    timer.current = setTimeout(onNext, 5000);
-  }, [timer, onNext]);
-
-  const onClick = useCallback(() => {
-    if (!current) return;
-
-    history.push(URLS.NODE_URL(current));
-  }, [current]);
+  const items = Math.min(heroes.length, limit)
 
   const title = useMemo(() => {
-    if (loaded.length === 0) return null;
-
-    const item = heroes.find(hero => hero.id === current);
-
-    if (!item || !item.title) return null;
-
-    return item.title;
+    return loaded[current]?.title || '';
   }, [loaded, current, heroes]);
 
-  const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []);
+  const onNext = useCallback(() => setCurrent(current < items - 1 ? current + 1 : 0), [current, items])
+  const onPrev = useCallback(() => setCurrent(current > 0 ? current - 1 : items - 1), [current, items])
 
   return (
-    <div className={styles.wrap} onMouseOver={stopSliding} onFocus={stopSliding}>
-      {loaded && loaded.length > 0 && (
+    <div className={styles.wrap}>
+      <div className={styles.loaders}>
+        {
+          heroes.slice(0, items).map((hero, i) => (
+            <img src={getURL({ url: hero.thumbnail }, preset)} key={hero.id} onLoad={() => onLoad(i)} />
+          ))
+        }
+      </div>
+
+      {loaded.length > 0 && (
         <div className={styles.info}>
           <div className={styles.title_wrap}>{title}</div>
 
           <div className={styles.buttons}>
-            <div className={styles.button} onClick={onPrevious}>
+            <div className={styles.button} onClick={onPrev}>
               <Icon icon="left" />
             </div>
-            <div className={styles.button} onClick={onNextPress}>
+            <div className={styles.button} onClick={onNext}>
               <Icon icon="right" />
             </div>
           </div>
         </div>
       )}
 
-      {heroes.slice(0, limit).map(hero => (
+      {loaded.length > 0 && loaded.slice(0, limit).map((hero, index) => (
         <div
           className={classNames(styles.hero, {
-            [styles.is_visible]: loaded.includes(hero.id),
-            [styles.is_active]: current === hero.id,
+            [styles.is_visible]: true,
+            [styles.is_active]: current === index,
           })}
           style={{
             backgroundImage: `url("${getURL({ url: hero.thumbnail }, preset)}")`,
           }}
           key={hero.id}
-          onClick={onClick}
         >
           <img
             src={getURL({ url: hero.thumbnail }, preset)}
             alt={hero.thumbnail}
-            onLoad={onLoad(hero.id)}
           />
         </div>
       ))}
diff --git a/src/components/flow/FlowHero/styles.scss b/src/components/flow/FlowHero/styles.scss
index f7f9865b..3bedb03f 100644
--- a/src/components/flow/FlowHero/styles.scss
+++ b/src/components/flow/FlowHero/styles.scss
@@ -145,3 +145,20 @@
     }
   }
 }
+
+// new
+.loaders {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+
+  img {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+  }
+}

From 916883ad16fa7183d9e0db400eed3c943f480468 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 6 Nov 2020 12:02:46 +0700
Subject: [PATCH 18/19] fixed hero slider

---
 src/components/flow/FlowHero/index.tsx   | 27 ++++++++++++++++++++----
 src/components/flow/FlowHero/styles.scss | 16 --------------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/components/flow/FlowHero/index.tsx b/src/components/flow/FlowHero/index.tsx
index fae9074d..9b795640 100644
--- a/src/components/flow/FlowHero/index.tsx
+++ b/src/components/flow/FlowHero/index.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import * as styles from './styles.scss';
 import { getURL } from '~/utils/dom';
-import { withRouter, RouteComponentProps } from 'react-router';
+import { withRouter, RouteComponentProps, useHistory } from 'react-router';
 import { URLS, PRESETS } from '~/constants/urls';
 import { Icon } from '~/components/input/Icon';
 import { INode } from "~/redux/types";
@@ -13,11 +13,13 @@ type IProps = RouteComponentProps & {
   heroes: IFlowState['heroes'];
 };
 
-const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
+const FlowHeroUnconnected: FC<IProps> = ({ heroes }) => {
   const preset = useMemo(() => (window.innerWidth <= 768 ? PRESETS.cover : PRESETS.small_hero), []);
   const [limit, setLimit] = useState(6);
   const [current, setCurrent] = useState(0);
   const [loaded, setLoaded] = useState<Partial<INode>[]>([]);
+  const timer = useRef(null)
+  const history = useHistory();
 
   const onLoad = useCallback((i: number) => {
     setLoaded([...loaded, heroes[i]])
@@ -29,9 +31,25 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
     return loaded[current]?.title || '';
   }, [loaded, current, heroes]);
 
-  const onNext = useCallback(() => setCurrent(current < items - 1 ? current + 1 : 0), [current, items])
+  const onNext = useCallback(() => {
+    if (heroes.length > limit) setLimit(limit + 1)
+    setCurrent(current < items - 1 ? current + 1 : 0)
+  }, [current, items, limit, heroes.length])
   const onPrev = useCallback(() => setCurrent(current > 0 ? current - 1 : items - 1), [current, items])
 
+  const goToNode = useCallback(() => {
+    history.push(URLS.NODE_URL(loaded[current].id))
+  }, [current, loaded]);
+
+  useEffect(() => {
+    timer.current = setTimeout(onNext, 5000)
+    return () => clearTimeout(timer.current)
+  }, [current, timer.current])
+
+  useEffect(() => {
+    if (loaded.length === 1) onNext()
+  }, [loaded])
+
   return (
     <div className={styles.wrap}>
       <div className={styles.loaders}>
@@ -57,7 +75,7 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
         </div>
       )}
 
-      {loaded.length > 0 && loaded.slice(0, limit).map((hero, index) => (
+      {loaded.slice(0, limit).map((hero, index) => (
         <div
           className={classNames(styles.hero, {
             [styles.is_visible]: true,
@@ -67,6 +85,7 @@ const FlowHeroUnconnected: FC<IProps> = ({ heroes, history }) => {
             backgroundImage: `url("${getURL({ url: hero.thumbnail }, preset)}")`,
           }}
           key={hero.id}
+          onClick={goToNode}
         >
           <img
             src={getURL({ url: hero.thumbnail }, preset)}
diff --git a/src/components/flow/FlowHero/styles.scss b/src/components/flow/FlowHero/styles.scss
index 3bedb03f..62a8500f 100644
--- a/src/components/flow/FlowHero/styles.scss
+++ b/src/components/flow/FlowHero/styles.scss
@@ -109,25 +109,11 @@
   }
 }
 
-// .title {
-//   flex: 0;
-//   height: 48px;
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   padding: 0 $gap 0 0;
-//   background: red;
-//   border-radius: $radius;
-//   font: $font_hero_title;
-//   text-transform: uppercase;
-// }
-
 .buttons {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 48px;
-  // background: rgba(0, 0, 0, 0.7);
   flex-direction: row;
   width: 96px;
   border-radius: $radius;
@@ -146,7 +132,6 @@
   }
 }
 
-// new
 .loaders {
   position: absolute;
   top: 0;
@@ -159,6 +144,5 @@
     position: absolute;
     left: 0;
     top: 0;
-
   }
 }

From 2daa38ad122fd00efb618d922815922ceea0913b Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 6 Nov 2020 12:15:07 +0700
Subject: [PATCH 19/19] fixed style files module names

---
 src/components/bars/PlayerBar/index.tsx                      | 5 ++---
 .../bars/PlayerBar/{styles.scss => styles.module.scss}       | 0
 src/components/bars/SubmitBar/index.tsx                      | 2 +-
 .../bars/SubmitBar/{styles.scss => styles.module.scss}       | 0
 src/components/comment/CommentEmbedBlock/index.tsx           | 2 +-
 .../CommentEmbedBlock/{styles.scss => styles.module.scss}    | 0
 src/components/comment/CommentTextBlock/index.tsx            | 2 +-
 .../CommentTextBlock/{styles.scss => styles.module.scss}     | 0
 src/components/containers/BlurWrapper/index.tsx              | 2 +-
 .../BlurWrapper/{styles.scss => styles.module.scss}          | 0
 src/components/containers/Card/index.tsx                     | 2 +-
 .../containers/Card/{styles.scss => styles.module.scss}      | 0
 src/components/containers/CellGrid/index.tsx                 | 2 +-
 .../containers/CellGrid/{styles.scss => styles.module.scss}  | 0
 src/components/containers/CommentWrapper/index.tsx           | 2 +-
 .../CommentWrapper/{styles.scss => styles.module.scss}       | 0
 src/components/containers/CoverBackdrop/index.tsx            | 2 +-
 .../CoverBackdrop/{styles.scss => styles.module.scss}        | 0
 src/components/containers/Filler/index.tsx                   | 2 +-
 .../containers/Filler/{styles.scss => styles.module.scss}    | 0
 src/components/containers/Grid/index.tsx                     | 2 +-
 .../containers/Grid/{styles.scss => styles.module.scss}      | 0
 src/components/containers/Group/index.tsx                    | 2 +-
 .../containers/Group/{styles.scss => styles.module.scss}     | 0
 src/components/containers/Padder/index.tsx                   | 2 +-
 .../containers/Padder/{styles.scss => styles.module.scss}    | 0
 src/components/containers/PageCover/index.tsx                | 2 +-
 .../containers/PageCover/{styles.scss => styles.module.scss} | 0
 src/components/containers/Panel/index.tsx                    | 2 +-
 .../containers/Panel/{styles.scss => styles.module.scss}     | 0
 src/components/containers/Scroll/index.tsx                   | 2 +-
 .../containers/Scroll/{styles.scss => styles.module.scss}    | 0
 src/components/containers/Sticky/index.tsx                   | 2 +-
 .../containers/Sticky/{styles.scss => styles.module.scss}    | 0
 src/components/containers/TagField/index.tsx                 | 2 +-
 .../containers/TagField/{styles.scss => styles.module.scss}  | 0
 src/components/dialogs/DialogTitle/index.tsx                 | 2 +-
 .../dialogs/DialogTitle/{styles.scss => styles.module.scss}  | 0
 src/components/editors/AudioEditor/index.tsx                 | 2 +-
 .../editors/AudioEditor/{styles.scss => styles.module.scss}  | 0
 src/components/editors/AudioGrid/index.tsx                   | 2 +-
 .../editors/AudioGrid/{styles.scss => styles.module.scss}    | 0
 src/components/editors/EditorPanel/index.tsx                 | 2 +-
 .../editors/EditorPanel/{styles.scss => styles.module.scss}  | 0
 src/components/editors/EditorUploadButton/index.tsx          | 2 +-
 .../EditorUploadButton/{styles.scss => styles.module.scss}   | 0
 src/components/editors/EditorUploadCoverButton/index.tsx     | 2 +-
 .../{styles.scss => styles.module.scss}                      | 0
 src/components/editors/ImageEditor/index.tsx                 | 2 +-
 .../editors/ImageEditor/{styles.scss => styles.module.scss}  | 0
 src/components/editors/ImageGrid/index.tsx                   | 2 +-
 .../editors/ImageGrid/{styles.scss => styles.module.scss}    | 0
 src/components/editors/SortableAudioGrid/index.tsx           | 2 +-
 .../SortableAudioGrid/{styles.scss => styles.module.scss}    | 0
 src/components/editors/SortableAudioGridItem/index.tsx       | 2 +-
 .../{styles.scss => styles.module.scss}                      | 0
 src/components/editors/SortableImageGrid/index.tsx           | 2 +-
 .../SortableImageGrid/{styles.scss => styles.module.scss}    | 0
 src/components/editors/SortableImageGridItem/index.tsx       | 2 +-
 .../{styles.scss => styles.module.scss}                      | 0
 src/components/editors/TextEditor/index.tsx                  | 2 +-
 .../editors/TextEditor/{styles.scss => styles.module.scss}   | 0
 src/components/editors/VideoEditor/index.tsx                 | 2 +-
 .../editors/VideoEditor/{styles.scss => styles.module.scss}  | 0
 src/components/flow/Cell/index.tsx                           | 2 +-
 src/components/flow/Cell/{styles.scss => styles.module.scss} | 0
 .../flow/FlowGrid/{styles.scss => styles.module.scss}        | 0
 src/components/flow/FlowHero/index.tsx                       | 2 +-
 .../flow/FlowHero/{styles.scss => styles.module.scss}        | 0
 .../flow/FlowRecent/{styles.scss => styles.module.scss}      | 0
 src/components/flow/FlowRecentItem/index.tsx                 | 2 +-
 .../flow/FlowRecentItem/{styles.scss => styles.module.scss}  | 0
 src/components/flow/FlowSearchResults/index.tsx              | 2 +-
 .../FlowSearchResults/{styles.scss => styles.module.scss}    | 0
 src/components/flow/FlowStamp/index.tsx                      | 2 +-
 .../flow/FlowStamp/{styles.scss => styles.module.scss}       | 0
 src/components/input/ArcProgress/index.tsx                   | 2 +-
 .../input/ArcProgress/{styles.scss => styles.module.scss}    | 0
 src/components/input/Button/index.tsx                        | 2 +-
 .../input/Button/{styles.scss => styles.module.scss}         | 0
 src/components/input/ButtonGroup/index.tsx                   | 2 +-
 .../input/ButtonGroup/{styles.scss => styles.module.scss}    | 0
 src/components/input/InputText/index.tsx                     | 2 +-
 src/components/input/LoaderCircle/index.tsx                  | 2 +-
 .../input/LoaderCircle/{styles.scss => styles.module.scss}   | 0
 src/components/input/TextInput/index.tsx                     | 2 +-
 .../input/TextInput/{styles.scss => styles.module.scss}      | 0
 src/components/input/Textarea/index.tsx                      | 2 +-
 src/components/main/Footer/index.tsx                         | 2 +-
 .../main/Footer/{styles.scss => styles.module.scss}          | 0
 src/components/main/Notifications/index.tsx                  | 2 +-
 .../main/Notifications/{styles.scss => styles.module.scss}   | 0
 src/components/main/SidePane/index.tsx                       | 2 +-
 .../main/SidePane/{styles.scss => styles.module.scss}        | 0
 src/components/main/UserButton/index.tsx                     | 2 +-
 .../main/UserButton/{styles.scss => styles.module.scss}      | 0
 src/components/media/AudioPlayer/index.tsx                   | 2 +-
 .../media/AudioPlayer/{styles.scss => styles.module.scss}    | 0
 src/components/node/CommendDeleted/index.tsx                 | 2 +-
 .../node/CommendDeleted/{styles.scss => styles.module.scss}  | 0
 src/components/node/Comment/index.tsx                        | 2 +-
 .../node/Comment/{styles.scss => styles.module.scss}         | 0
 src/components/node/CommentContent/index.tsx                 | 2 +-
 .../node/CommentContent/{styles.scss => styles.module.scss}  | 0
 src/components/node/CommentForm/index.tsx                    | 2 +-
 .../node/CommentForm/{styles.scss => styles.module.scss}     | 0
 src/components/node/CommentMenu/index.tsx                    | 2 +-
 .../node/CommentMenu/{styles.scss => styles.module.scss}     | 0
 src/components/node/ImageSwitcher/index.tsx                  | 2 +-
 .../node/ImageSwitcher/{styles.scss => styles.module.scss}   | 0
 src/components/node/MenuButton/index.tsx                     | 2 +-
 .../node/MenuButton/{styles.scss => styles.module.scss}      | 0
 src/components/node/NodeAudioBlock/index.tsx                 | 2 +-
 .../node/NodeAudioBlock/{styles.scss => styles.module.scss}  | 0
 src/components/node/NodeAudioImageBlock/index.tsx            | 2 +-
 .../NodeAudioImageBlock/{styles.scss => styles.module.scss}  | 0
 src/components/node/NodeCommentForm/index.tsx                | 2 +-
 src/components/node/NodeComments/index.tsx                   | 2 +-
 .../node/NodeComments/{styles.scss => styles.module.scss}    | 0
 src/components/node/NodeDeletedBadge/index.tsx               | 2 +-
 .../NodeDeletedBadge/{styles.scss => styles.module.scss}     | 0
 src/components/node/NodeImageBlock/index.tsx                 | 2 +-
 .../node/NodeImageBlock/{styles.scss => styles.module.scss}  | 0
 src/components/node/NodeImageBlockPlaceholder/index.tsx      | 2 +-
 .../{styles.scss => styles.module.scss}                      | 0
 src/components/node/NodeImageSlideBlock/index.tsx            | 2 +-
 .../NodeImageSlideBlock/{styles.scss => styles.module.scss}  | 0
 src/components/node/NodeNoComments/index.tsx                 | 2 +-
 .../node/NodeNoComments/{styles.scss => styles.module.scss}  | 0
 src/components/node/NodePanel/index.tsx                      | 2 +-
 .../node/NodePanel/{styles.scss => styles.module.scss}       | 0
 src/components/node/NodePanelInner/index.tsx                 | 2 +-
 .../node/NodePanelInner/{styles.scss => styles.module.scss}  | 0
 src/components/node/NodeRelated/index.tsx                    | 2 +-
 src/components/node/NodeRelated/placeholder.tsx              | 4 ++--
 .../node/NodeRelated/{styles.scss => styles.module.scss}     | 0
 src/components/node/NodeRelatedItem/index.tsx                | 2 +-
 .../node/NodeRelatedItem/{styles.scss => styles.module.scss} | 0
 src/components/node/NodeTextBlock/index.tsx                  | 2 +-
 .../node/NodeTextBlock/{styles.scss => styles.module.scss}   | 0
 src/components/node/NodeVideoBlock/index.tsx                 | 2 +-
 .../node/NodeVideoBlock/{styles.scss => styles.module.scss}  | 0
 src/components/notifications/NotificationBubble/index.tsx    | 2 +-
 .../NotificationBubble/{styles.scss => styles.module.scss}   | 0
 src/components/notifications/NotificationMessage/index.tsx   | 2 +-
 src/components/placeholders/ParagraphPlaceholder/index.tsx   | 2 +-
 .../ParagraphPlaceholder/{styles.scss => styles.module.scss} | 0
 src/components/placeholders/Placeholder/index.tsx            | 2 +-
 .../Placeholder/{styles.scss => styles.module.scss}          | 0
 src/components/profile/Message/index.tsx                     | 2 +-
 .../profile/Message/{styles.scss => styles.module.scss}      | 0
 src/components/profile/MessageForm/index.tsx                 | 2 +-
 .../profile/MessageForm/{styles.scss => styles.module.scss}  | 0
 src/components/profile/ProfileAccounts/index.tsx             | 2 +-
 .../ProfileAccounts/{styles.scss => styles.module.scss}      | 0
 src/components/profile/ProfileAccountsError/index.tsx        | 2 +-
 .../ProfileAccountsError/{styles.scss => styles.module.scss} | 0
 src/components/profile/ProfileDescription/index.tsx          | 2 +-
 .../ProfileDescription/{styles.scss => styles.module.scss}   | 0
 src/components/profile/ProfileSettings/index.tsx             | 2 +-
 .../ProfileSettings/{styles.scss => styles.module.scss}      | 0
 src/components/tags/Tag/{styles.scss => styles.module.scss}  | 0
 src/components/upload/AudioUpload/index.tsx                  | 2 +-
 .../upload/AudioUpload/{styles.scss => styles.module.scss}   | 0
 src/components/upload/ImageUpload/index.tsx                  | 2 +-
 .../upload/ImageUpload/{styles.scss => styles.module.scss}   | 0
 src/containers/dialogs/BetterScrollDialog/index.tsx          | 2 +-
 .../BetterScrollDialog/{styles.scss => styles.module.scss}   | 0
 src/containers/dialogs/EditorDialog/index.tsx                | 2 +-
 .../dialogs/EditorDialog/{styles.scss => styles.module.scss} | 0
 src/containers/dialogs/LoadingDialog/index.tsx               | 2 +-
 .../LoadingDialog/{styles.scss => styles.module.scss}        | 0
 src/containers/dialogs/LoginDialog/index.tsx                 | 2 +-
 .../dialogs/LoginDialog/{styles.scss => styles.module.scss}  | 0
 src/containers/dialogs/LoginDialogButtons/index.tsx          | 2 +-
 .../LoginDialogButtons/{styles.scss => styles.module.scss}   | 0
 src/containers/dialogs/LoginSocialRegisterButtons/index.tsx  | 2 +-
 .../{styles.scss => styles.module.scss}                      | 0
 src/containers/dialogs/LoginSocialRegisterDialog/index.tsx   | 2 +-
 .../{styles.scss => styles.module.scss}                      | 0
 src/containers/dialogs/Modal/index.tsx                       | 2 +-
 .../dialogs/Modal/{styles.scss => styles.module.scss}        | 0
 src/containers/dialogs/PhotoSwipe/index.tsx                  | 2 +-
 .../dialogs/PhotoSwipe/{styles.scss => styles.module.scss}   | 0
 .../ProfileDialog/{styles.scss => styles.module.scss}        | 0
 src/containers/dialogs/RestorePasswordDialog/index.tsx       | 2 +-
 .../{styles.scss => styles.module.scss}                      | 0
 src/containers/dialogs/RestoreRequestDialog/index.tsx        | 2 +-
 .../RestoreRequestDialog/{styles.scss => styles.module.scss} | 0
 src/containers/dialogs/ScrollDialog/index.tsx                | 2 +-
 .../dialogs/ScrollDialog/{styles.scss => styles.module.scss} | 0
 src/containers/dialogs/TestDialog/index.tsx                  | 2 +-
 .../dialogs/TestDialog/{styles.scss => styles.module.scss}   | 0
 .../EditorDialogVideo/{styles.scss => styles.module.scss}    | 0
 src/containers/flow/FlowLayout/index.tsx                     | 2 +-
 .../flow/FlowLayout/{styles.scss => styles.module.scss}      | 0
 src/containers/main/BottomContainer/index.tsx                | 2 +-
 .../main/BottomContainer/{styles.scss => styles.module.scss} | 0
 src/containers/main/MainLayout/index.tsx                     | 2 +-
 .../main/MainLayout/{styles.scss => styles.module.scss}      | 0
 src/containers/node/BorisLayout/index.tsx                    | 2 +-
 .../node/BorisLayout/{styles.scss => styles.module.scss}     | 0
 src/containers/node/NodeLayout/index.tsx                     | 2 +-
 .../node/NodeLayout/{styles.scss => styles.module.scss}      | 0
 src/containers/pages/ErrorNotFound/index.tsx                 | 2 +-
 .../pages/ErrorNotFound/{styles.scss => styles.module.scss}  | 0
 src/containers/profile/ProfileAvatar/index.tsx               | 2 +-
 .../ProfileAvatar/{styles.scss => styles.module.scss}        | 0
 src/containers/profile/ProfileInfo/index.tsx                 | 2 +-
 .../profile/ProfileInfo/{styles.scss => styles.module.scss}  | 0
 src/containers/profile/ProfileLayout/index.tsx               | 2 +-
 .../ProfileLayout/{styles.scss => styles.module.scss}        | 0
 src/containers/profile/ProfileLoader/index.tsx               | 2 +-
 .../ProfileLoader/{styles.scss => styles.module.scss}        | 0
 src/containers/profile/ProfileMessages/index.tsx             | 2 +-
 .../ProfileMessages/{styles.scss => styles.module.scss}      | 0
 src/containers/profile/ProfilePage/index.tsx                 | 2 +-
 .../profile/ProfilePage/{styles.scss => styles.module.scss}  | 0
 src/containers/profile/ProfilePageLeft/index.tsx             | 2 +-
 .../ProfilePageLeft/{styles.scss => styles.module.scss}      | 0
 src/containers/profile/ProfileTabs/index.tsx                 | 2 +-
 .../profile/ProfileTabs/{styles.scss => styles.module.scss}  | 0
 src/styles/{inputs.scss => common/inputs.module.scss}        | 0
 223 files changed, 113 insertions(+), 114 deletions(-)
 rename src/components/bars/PlayerBar/{styles.scss => styles.module.scss} (100%)
 rename src/components/bars/SubmitBar/{styles.scss => styles.module.scss} (100%)
 rename src/components/comment/CommentEmbedBlock/{styles.scss => styles.module.scss} (100%)
 rename src/components/comment/CommentTextBlock/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/BlurWrapper/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/Card/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/CellGrid/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/CommentWrapper/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/CoverBackdrop/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/Filler/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/Grid/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/Group/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/Padder/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/PageCover/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/Panel/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/Scroll/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/Sticky/{styles.scss => styles.module.scss} (100%)
 rename src/components/containers/TagField/{styles.scss => styles.module.scss} (100%)
 rename src/components/dialogs/DialogTitle/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/AudioEditor/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/AudioGrid/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/EditorPanel/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/EditorUploadButton/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/EditorUploadCoverButton/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/ImageEditor/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/ImageGrid/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/SortableAudioGrid/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/SortableAudioGridItem/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/SortableImageGrid/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/SortableImageGridItem/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/TextEditor/{styles.scss => styles.module.scss} (100%)
 rename src/components/editors/VideoEditor/{styles.scss => styles.module.scss} (100%)
 rename src/components/flow/Cell/{styles.scss => styles.module.scss} (100%)
 rename src/components/flow/FlowGrid/{styles.scss => styles.module.scss} (100%)
 rename src/components/flow/FlowHero/{styles.scss => styles.module.scss} (100%)
 rename src/components/flow/FlowRecent/{styles.scss => styles.module.scss} (100%)
 rename src/components/flow/FlowRecentItem/{styles.scss => styles.module.scss} (100%)
 rename src/components/flow/FlowSearchResults/{styles.scss => styles.module.scss} (100%)
 rename src/components/flow/FlowStamp/{styles.scss => styles.module.scss} (100%)
 rename src/components/input/ArcProgress/{styles.scss => styles.module.scss} (100%)
 rename src/components/input/Button/{styles.scss => styles.module.scss} (100%)
 rename src/components/input/ButtonGroup/{styles.scss => styles.module.scss} (100%)
 rename src/components/input/LoaderCircle/{styles.scss => styles.module.scss} (100%)
 rename src/components/input/TextInput/{styles.scss => styles.module.scss} (100%)
 rename src/components/main/Footer/{styles.scss => styles.module.scss} (100%)
 rename src/components/main/Notifications/{styles.scss => styles.module.scss} (100%)
 rename src/components/main/SidePane/{styles.scss => styles.module.scss} (100%)
 rename src/components/main/UserButton/{styles.scss => styles.module.scss} (100%)
 rename src/components/media/AudioPlayer/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/CommendDeleted/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/Comment/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/CommentContent/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/CommentForm/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/CommentMenu/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/ImageSwitcher/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/MenuButton/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeAudioBlock/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeAudioImageBlock/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeComments/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeDeletedBadge/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeImageBlock/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeImageBlockPlaceholder/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeImageSlideBlock/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeNoComments/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodePanel/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodePanelInner/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeRelated/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeRelatedItem/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeTextBlock/{styles.scss => styles.module.scss} (100%)
 rename src/components/node/NodeVideoBlock/{styles.scss => styles.module.scss} (100%)
 rename src/components/notifications/NotificationBubble/{styles.scss => styles.module.scss} (100%)
 rename src/components/placeholders/ParagraphPlaceholder/{styles.scss => styles.module.scss} (100%)
 rename src/components/placeholders/Placeholder/{styles.scss => styles.module.scss} (100%)
 rename src/components/profile/Message/{styles.scss => styles.module.scss} (100%)
 rename src/components/profile/MessageForm/{styles.scss => styles.module.scss} (100%)
 rename src/components/profile/ProfileAccounts/{styles.scss => styles.module.scss} (100%)
 rename src/components/profile/ProfileAccountsError/{styles.scss => styles.module.scss} (100%)
 rename src/components/profile/ProfileDescription/{styles.scss => styles.module.scss} (100%)
 rename src/components/profile/ProfileSettings/{styles.scss => styles.module.scss} (100%)
 rename src/components/tags/Tag/{styles.scss => styles.module.scss} (100%)
 rename src/components/upload/AudioUpload/{styles.scss => styles.module.scss} (100%)
 rename src/components/upload/ImageUpload/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/BetterScrollDialog/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/EditorDialog/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/LoadingDialog/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/LoginDialog/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/LoginDialogButtons/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/LoginSocialRegisterButtons/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/LoginSocialRegisterDialog/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/Modal/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/PhotoSwipe/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/ProfileDialog/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/RestorePasswordDialog/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/RestoreRequestDialog/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/ScrollDialog/{styles.scss => styles.module.scss} (100%)
 rename src/containers/dialogs/TestDialog/{styles.scss => styles.module.scss} (100%)
 rename src/containers/editors/EditorDialogVideo/{styles.scss => styles.module.scss} (100%)
 rename src/containers/flow/FlowLayout/{styles.scss => styles.module.scss} (100%)
 rename src/containers/main/BottomContainer/{styles.scss => styles.module.scss} (100%)
 rename src/containers/main/MainLayout/{styles.scss => styles.module.scss} (100%)
 rename src/containers/node/BorisLayout/{styles.scss => styles.module.scss} (100%)
 rename src/containers/node/NodeLayout/{styles.scss => styles.module.scss} (100%)
 rename src/containers/pages/ErrorNotFound/{styles.scss => styles.module.scss} (100%)
 rename src/containers/profile/ProfileAvatar/{styles.scss => styles.module.scss} (100%)
 rename src/containers/profile/ProfileInfo/{styles.scss => styles.module.scss} (100%)
 rename src/containers/profile/ProfileLayout/{styles.scss => styles.module.scss} (100%)
 rename src/containers/profile/ProfileLoader/{styles.scss => styles.module.scss} (100%)
 rename src/containers/profile/ProfileMessages/{styles.scss => styles.module.scss} (100%)
 rename src/containers/profile/ProfilePage/{styles.scss => styles.module.scss} (100%)
 rename src/containers/profile/ProfilePageLeft/{styles.scss => styles.module.scss} (100%)
 rename src/containers/profile/ProfileTabs/{styles.scss => styles.module.scss} (100%)
 rename src/styles/{inputs.scss => common/inputs.module.scss} (100%)

diff --git a/src/components/bars/PlayerBar/index.tsx b/src/components/bars/PlayerBar/index.tsx
index 3770ebd3..c6b0d5ec 100644
--- a/src/components/bars/PlayerBar/index.tsx
+++ b/src/components/bars/PlayerBar/index.tsx
@@ -1,7 +1,6 @@
-import React, { FC, useCallback, useState, useEffect } from 'react';
-import * as styles from './styles.scss';
+import React, { FC, useCallback, useEffect, useState } from 'react';
+import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
-import { Filler } from '~/components/containers/Filler';
 import { PLAYER_STATES } from '~/redux/player/constants';
 import { connect } from 'react-redux';
 import pick from 'ramda/es/pick';
diff --git a/src/components/bars/PlayerBar/styles.scss b/src/components/bars/PlayerBar/styles.module.scss
similarity index 100%
rename from src/components/bars/PlayerBar/styles.scss
rename to src/components/bars/PlayerBar/styles.module.scss
diff --git a/src/components/bars/SubmitBar/index.tsx b/src/components/bars/SubmitBar/index.tsx
index 6ed41060..de0b2ecd 100644
--- a/src/components/bars/SubmitBar/index.tsx
+++ b/src/components/bars/SubmitBar/index.tsx
@@ -4,7 +4,7 @@ import { Icon } from '~/components/input/Icon';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import { DIALOGS } from '~/redux/modal/constants';
 
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { NODE_TYPES } from '~/redux/node/constants';
 
 const mapStateToProps = null;
diff --git a/src/components/bars/SubmitBar/styles.scss b/src/components/bars/SubmitBar/styles.module.scss
similarity index 100%
rename from src/components/bars/SubmitBar/styles.scss
rename to src/components/bars/SubmitBar/styles.module.scss
diff --git a/src/components/comment/CommentEmbedBlock/index.tsx b/src/components/comment/CommentEmbedBlock/index.tsx
index e973cd2e..46bdd08a 100644
--- a/src/components/comment/CommentEmbedBlock/index.tsx
+++ b/src/components/comment/CommentEmbedBlock/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, memo, useMemo, useEffect } from 'react';
 import { ICommentBlockProps } from '~/constants/comment';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { getYoutubeThumb } from '~/utils/dom';
 import { selectPlayer } from '~/redux/player/selectors';
 import { connect } from 'react-redux';
diff --git a/src/components/comment/CommentEmbedBlock/styles.scss b/src/components/comment/CommentEmbedBlock/styles.module.scss
similarity index 100%
rename from src/components/comment/CommentEmbedBlock/styles.scss
rename to src/components/comment/CommentEmbedBlock/styles.module.scss
diff --git a/src/components/comment/CommentTextBlock/index.tsx b/src/components/comment/CommentTextBlock/index.tsx
index 81714657..930eb96a 100644
--- a/src/components/comment/CommentTextBlock/index.tsx
+++ b/src/components/comment/CommentTextBlock/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { ICommentBlockProps } from '~/constants/comment';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps extends ICommentBlockProps {}
 
diff --git a/src/components/comment/CommentTextBlock/styles.scss b/src/components/comment/CommentTextBlock/styles.module.scss
similarity index 100%
rename from src/components/comment/CommentTextBlock/styles.scss
rename to src/components/comment/CommentTextBlock/styles.module.scss
diff --git a/src/components/containers/BlurWrapper/index.tsx b/src/components/containers/BlurWrapper/index.tsx
index e7e7a0a3..f62cdf09 100644
--- a/src/components/containers/BlurWrapper/index.tsx
+++ b/src/components/containers/BlurWrapper/index.tsx
@@ -1,5 +1,5 @@
 import React, { AllHTMLAttributes, FC } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import classNames from 'classnames';
 
 type IProps = AllHTMLAttributes<HTMLDivElement> & { is_blurred: boolean };
diff --git a/src/components/containers/BlurWrapper/styles.scss b/src/components/containers/BlurWrapper/styles.module.scss
similarity index 100%
rename from src/components/containers/BlurWrapper/styles.scss
rename to src/components/containers/BlurWrapper/styles.module.scss
diff --git a/src/components/containers/Card/index.tsx b/src/components/containers/Card/index.tsx
index f9c76a45..94b48f8d 100644
--- a/src/components/containers/Card/index.tsx
+++ b/src/components/containers/Card/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 import classNames from 'classnames';
 
diff --git a/src/components/containers/Card/styles.scss b/src/components/containers/Card/styles.module.scss
similarity index 100%
rename from src/components/containers/Card/styles.scss
rename to src/components/containers/Card/styles.module.scss
diff --git a/src/components/containers/CellGrid/index.tsx b/src/components/containers/CellGrid/index.tsx
index 0f9e964e..e712bb76 100644
--- a/src/components/containers/CellGrid/index.tsx
+++ b/src/components/containers/CellGrid/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, HTMLAttributes } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 import classNames = require('classnames');
 
diff --git a/src/components/containers/CellGrid/styles.scss b/src/components/containers/CellGrid/styles.module.scss
similarity index 100%
rename from src/components/containers/CellGrid/styles.scss
rename to src/components/containers/CellGrid/styles.module.scss
diff --git a/src/components/containers/CommentWrapper/index.tsx b/src/components/containers/CommentWrapper/index.tsx
index 1a7de34c..80c84eed 100644
--- a/src/components/containers/CommentWrapper/index.tsx
+++ b/src/components/containers/CommentWrapper/index.tsx
@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Card } from '../Card';
 import { IUser } from '~/redux/auth/types';
 import { getURL } from '~/utils/dom';
diff --git a/src/components/containers/CommentWrapper/styles.scss b/src/components/containers/CommentWrapper/styles.module.scss
similarity index 100%
rename from src/components/containers/CommentWrapper/styles.scss
rename to src/components/containers/CommentWrapper/styles.module.scss
diff --git a/src/components/containers/CoverBackdrop/index.tsx b/src/components/containers/CoverBackdrop/index.tsx
index 3d8e12b0..2e491137 100644
--- a/src/components/containers/CoverBackdrop/index.tsx
+++ b/src/components/containers/CoverBackdrop/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useState, useCallback, useEffect, useRef } from "react";
 import { IUser } from "~/redux/auth/types";
-import styles from "./styles.scss";
+import styles from './styles.module.scss';
 import { getURL } from "~/utils/dom";
 import { PRESETS } from "~/constants/urls";
 import classNames from "classnames";
diff --git a/src/components/containers/CoverBackdrop/styles.scss b/src/components/containers/CoverBackdrop/styles.module.scss
similarity index 100%
rename from src/components/containers/CoverBackdrop/styles.scss
rename to src/components/containers/CoverBackdrop/styles.module.scss
diff --git a/src/components/containers/Filler/index.tsx b/src/components/containers/Filler/index.tsx
index 3af36783..4eb3fe88 100644
--- a/src/components/containers/Filler/index.tsx
+++ b/src/components/containers/Filler/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import classNames from 'classnames';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 type IProps = React.HTMLAttributes<HTMLDivElement>;
 
diff --git a/src/components/containers/Filler/styles.scss b/src/components/containers/Filler/styles.module.scss
similarity index 100%
rename from src/components/containers/Filler/styles.scss
rename to src/components/containers/Filler/styles.module.scss
diff --git a/src/components/containers/Grid/index.tsx b/src/components/containers/Grid/index.tsx
index 830e404d..5f6a3e7d 100644
--- a/src/components/containers/Grid/index.tsx
+++ b/src/components/containers/Grid/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import classNames from 'classnames';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
diff --git a/src/components/containers/Grid/styles.scss b/src/components/containers/Grid/styles.module.scss
similarity index 100%
rename from src/components/containers/Grid/styles.scss
rename to src/components/containers/Grid/styles.module.scss
diff --git a/src/components/containers/Group/index.tsx b/src/components/containers/Group/index.tsx
index 04576533..08099e28 100644
--- a/src/components/containers/Group/index.tsx
+++ b/src/components/containers/Group/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import classNames from 'classnames';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   horizontal?: boolean;
diff --git a/src/components/containers/Group/styles.scss b/src/components/containers/Group/styles.module.scss
similarity index 100%
rename from src/components/containers/Group/styles.scss
rename to src/components/containers/Group/styles.module.scss
diff --git a/src/components/containers/Padder/index.tsx b/src/components/containers/Padder/index.tsx
index 2a1a05d8..da9547f4 100644
--- a/src/components/containers/Padder/index.tsx
+++ b/src/components/containers/Padder/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 import classNames = require('classnames');
 
diff --git a/src/components/containers/Padder/styles.scss b/src/components/containers/Padder/styles.module.scss
similarity index 100%
rename from src/components/containers/Padder/styles.scss
rename to src/components/containers/Padder/styles.module.scss
diff --git a/src/components/containers/PageCover/index.tsx b/src/components/containers/PageCover/index.tsx
index af7fdaed..e5154978 100644
--- a/src/components/containers/PageCover/index.tsx
+++ b/src/components/containers/PageCover/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, memo } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { createPortal } from 'react-dom';
 import { selectNode } from '~/redux/node/selectors';
 import { connect } from 'react-redux';
diff --git a/src/components/containers/PageCover/styles.scss b/src/components/containers/PageCover/styles.module.scss
similarity index 100%
rename from src/components/containers/PageCover/styles.scss
rename to src/components/containers/PageCover/styles.module.scss
diff --git a/src/components/containers/Panel/index.tsx b/src/components/containers/Panel/index.tsx
index 87c919f5..356cbe6c 100644
--- a/src/components/containers/Panel/index.tsx
+++ b/src/components/containers/Panel/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, HTMLAttributes } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 import classNames = require('classnames');
 
diff --git a/src/components/containers/Panel/styles.scss b/src/components/containers/Panel/styles.module.scss
similarity index 100%
rename from src/components/containers/Panel/styles.scss
rename to src/components/containers/Panel/styles.module.scss
diff --git a/src/components/containers/Scroll/index.tsx b/src/components/containers/Scroll/index.tsx
index 07ea0dfd..ce5c4e74 100644
--- a/src/components/containers/Scroll/index.tsx
+++ b/src/components/containers/Scroll/index.tsx
@@ -1,7 +1,7 @@
 import React, { MouseEventHandler, useEffect, useState } from 'react';
 import { Scrollbars } from 'tt-react-custom-scrollbars';
 import classNames from 'classnames';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {
   children: Element | React.ReactChild;
diff --git a/src/components/containers/Scroll/styles.scss b/src/components/containers/Scroll/styles.module.scss
similarity index 100%
rename from src/components/containers/Scroll/styles.scss
rename to src/components/containers/Scroll/styles.module.scss
diff --git a/src/components/containers/Sticky/index.tsx b/src/components/containers/Sticky/index.tsx
index e70d6727..19956a34 100644
--- a/src/components/containers/Sticky/index.tsx
+++ b/src/components/containers/Sticky/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactComponentElement, DetailsHTMLAttributes, useEffect, useRef } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import StickySidebar from 'sticky-sidebar';
 import classnames from 'classnames';
 import ResizeSensor from 'resize-sensor';
diff --git a/src/components/containers/Sticky/styles.scss b/src/components/containers/Sticky/styles.module.scss
similarity index 100%
rename from src/components/containers/Sticky/styles.scss
rename to src/components/containers/Sticky/styles.module.scss
diff --git a/src/components/containers/TagField/index.tsx b/src/components/containers/TagField/index.tsx
index 2fbdde5d..8490208f 100644
--- a/src/components/containers/TagField/index.tsx
+++ b/src/components/containers/TagField/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, HTMLAttributes } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {}
 
diff --git a/src/components/containers/TagField/styles.scss b/src/components/containers/TagField/styles.module.scss
similarity index 100%
rename from src/components/containers/TagField/styles.scss
rename to src/components/containers/TagField/styles.module.scss
diff --git a/src/components/dialogs/DialogTitle/index.tsx b/src/components/dialogs/DialogTitle/index.tsx
index 875440dd..d74c5912 100644
--- a/src/components/dialogs/DialogTitle/index.tsx
+++ b/src/components/dialogs/DialogTitle/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {
   children: ReactNode;
diff --git a/src/components/dialogs/DialogTitle/styles.scss b/src/components/dialogs/DialogTitle/styles.module.scss
similarity index 100%
rename from src/components/dialogs/DialogTitle/styles.scss
rename to src/components/dialogs/DialogTitle/styles.module.scss
diff --git a/src/components/editors/AudioEditor/index.tsx b/src/components/editors/AudioEditor/index.tsx
index efa12941..a51c300d 100644
--- a/src/components/editors/AudioEditor/index.tsx
+++ b/src/components/editors/AudioEditor/index.tsx
@@ -7,7 +7,7 @@ import { AudioGrid } from '../AudioGrid';
 import { selectUploads } from '~/redux/uploads/selectors';
 
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
diff --git a/src/components/editors/AudioEditor/styles.scss b/src/components/editors/AudioEditor/styles.module.scss
similarity index 100%
rename from src/components/editors/AudioEditor/styles.scss
rename to src/components/editors/AudioEditor/styles.module.scss
diff --git a/src/components/editors/AudioGrid/index.tsx b/src/components/editors/AudioGrid/index.tsx
index 40593006..7f2451a2 100644
--- a/src/components/editors/AudioGrid/index.tsx
+++ b/src/components/editors/AudioGrid/index.tsx
@@ -5,7 +5,7 @@ import { IUploadStatus } from '~/redux/uploads/reducer';
 import { moveArrItem } from '~/utils/fn';
 import { SortableAudioGrid } from '~/components/editors/SortableAudioGrid';
 
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {
   files: IFile[];
diff --git a/src/components/editors/AudioGrid/styles.scss b/src/components/editors/AudioGrid/styles.module.scss
similarity index 100%
rename from src/components/editors/AudioGrid/styles.scss
rename to src/components/editors/AudioGrid/styles.module.scss
diff --git a/src/components/editors/EditorPanel/index.tsx b/src/components/editors/EditorPanel/index.tsx
index bbcec349..c91a41d6 100644
--- a/src/components/editors/EditorPanel/index.tsx
+++ b/src/components/editors/EditorPanel/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, createElement } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { INode } from '~/redux/types';
 import { NODE_PANEL_COMPONENTS } from '~/redux/node/constants';
 
diff --git a/src/components/editors/EditorPanel/styles.scss b/src/components/editors/EditorPanel/styles.module.scss
similarity index 100%
rename from src/components/editors/EditorPanel/styles.scss
rename to src/components/editors/EditorPanel/styles.module.scss
diff --git a/src/components/editors/EditorUploadButton/index.tsx b/src/components/editors/EditorUploadButton/index.tsx
index c25acf68..49dad45e 100644
--- a/src/components/editors/EditorUploadButton/index.tsx
+++ b/src/components/editors/EditorUploadButton/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useEffect } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IFileWithUUID, INode, IFile } from '~/redux/types';
 import uuid from 'uuid4';
diff --git a/src/components/editors/EditorUploadButton/styles.scss b/src/components/editors/EditorUploadButton/styles.module.scss
similarity index 100%
rename from src/components/editors/EditorUploadButton/styles.scss
rename to src/components/editors/EditorUploadButton/styles.module.scss
diff --git a/src/components/editors/EditorUploadCoverButton/index.tsx b/src/components/editors/EditorUploadCoverButton/index.tsx
index aa2db3ca..a6f410ee 100644
--- a/src/components/editors/EditorUploadCoverButton/index.tsx
+++ b/src/components/editors/EditorUploadCoverButton/index.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
 import { IFileWithUUID } from '~/redux/types';
 import uuid from 'uuid4';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
 import path from 'ramda/es/path';
 import { connect } from 'react-redux';
diff --git a/src/components/editors/EditorUploadCoverButton/styles.scss b/src/components/editors/EditorUploadCoverButton/styles.module.scss
similarity index 100%
rename from src/components/editors/EditorUploadCoverButton/styles.scss
rename to src/components/editors/EditorUploadCoverButton/styles.module.scss
diff --git a/src/components/editors/ImageEditor/index.tsx b/src/components/editors/ImageEditor/index.tsx
index 0e9ead80..5dfe29e8 100644
--- a/src/components/editors/ImageEditor/index.tsx
+++ b/src/components/editors/ImageEditor/index.tsx
@@ -4,7 +4,7 @@ import { INode, IFile } from '~/redux/types';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { ImageGrid } from '~/components/editors/ImageGrid';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
diff --git a/src/components/editors/ImageEditor/styles.scss b/src/components/editors/ImageEditor/styles.module.scss
similarity index 100%
rename from src/components/editors/ImageEditor/styles.scss
rename to src/components/editors/ImageEditor/styles.module.scss
diff --git a/src/components/editors/ImageGrid/index.tsx b/src/components/editors/ImageGrid/index.tsx
index 3b97b7af..378b23e1 100644
--- a/src/components/editors/ImageGrid/index.tsx
+++ b/src/components/editors/ImageGrid/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback } from 'react';
 import { SortEnd } from 'react-sortable-hoc';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { IFile } from '~/redux/types';
 import { IUploadStatus } from '~/redux/uploads/reducer';
 import { moveArrItem } from '~/utils/fn';
diff --git a/src/components/editors/ImageGrid/styles.scss b/src/components/editors/ImageGrid/styles.module.scss
similarity index 100%
rename from src/components/editors/ImageGrid/styles.scss
rename to src/components/editors/ImageGrid/styles.module.scss
diff --git a/src/components/editors/SortableAudioGrid/index.tsx b/src/components/editors/SortableAudioGrid/index.tsx
index cb919d95..5ae04e1a 100644
--- a/src/components/editors/SortableAudioGrid/index.tsx
+++ b/src/components/editors/SortableAudioGrid/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
 import { AudioUpload } from '~/components/upload/AudioUpload';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { SortableAudioGridItem } from '~/components/editors/SortableAudioGridItem';
 import { IFile } from '~/redux/types';
 import { IUploadStatus } from '~/redux/uploads/reducer';
diff --git a/src/components/editors/SortableAudioGrid/styles.scss b/src/components/editors/SortableAudioGrid/styles.module.scss
similarity index 100%
rename from src/components/editors/SortableAudioGrid/styles.scss
rename to src/components/editors/SortableAudioGrid/styles.module.scss
diff --git a/src/components/editors/SortableAudioGridItem/index.tsx b/src/components/editors/SortableAudioGridItem/index.tsx
index f55d5194..463e0312 100644
--- a/src/components/editors/SortableAudioGridItem/index.tsx
+++ b/src/components/editors/SortableAudioGridItem/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SortableElement } from 'react-sortable-hoc';
 
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const SortableAudioGridItem = SortableElement(({ children }) => (
   <div className={styles.item}>{children}</div>
diff --git a/src/components/editors/SortableAudioGridItem/styles.scss b/src/components/editors/SortableAudioGridItem/styles.module.scss
similarity index 100%
rename from src/components/editors/SortableAudioGridItem/styles.scss
rename to src/components/editors/SortableAudioGridItem/styles.module.scss
diff --git a/src/components/editors/SortableImageGrid/index.tsx b/src/components/editors/SortableImageGrid/index.tsx
index 79eae46c..edfc4ea7 100644
--- a/src/components/editors/SortableImageGrid/index.tsx
+++ b/src/components/editors/SortableImageGrid/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
 import { ImageUpload } from '~/components/upload/ImageUpload';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { SortableImageGridItem } from '~/components/editors/SortableImageGridItem';
 import { IFile } from '~/redux/types';
 import { IUploadStatus } from '~/redux/uploads/reducer';
diff --git a/src/components/editors/SortableImageGrid/styles.scss b/src/components/editors/SortableImageGrid/styles.module.scss
similarity index 100%
rename from src/components/editors/SortableImageGrid/styles.scss
rename to src/components/editors/SortableImageGrid/styles.module.scss
diff --git a/src/components/editors/SortableImageGridItem/index.tsx b/src/components/editors/SortableImageGridItem/index.tsx
index 6fb94e6e..01f650cd 100644
--- a/src/components/editors/SortableImageGridItem/index.tsx
+++ b/src/components/editors/SortableImageGridItem/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SortableElement } from 'react-sortable-hoc';
 
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const SortableImageGridItem = SortableElement(({ children }) => (
   <div className={styles.item}>{children}</div>
diff --git a/src/components/editors/SortableImageGridItem/styles.scss b/src/components/editors/SortableImageGridItem/styles.module.scss
similarity index 100%
rename from src/components/editors/SortableImageGridItem/styles.scss
rename to src/components/editors/SortableImageGridItem/styles.module.scss
diff --git a/src/components/editors/TextEditor/index.tsx b/src/components/editors/TextEditor/index.tsx
index 539045f1..c183ca9a 100644
--- a/src/components/editors/TextEditor/index.tsx
+++ b/src/components/editors/TextEditor/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback } from 'react';
 import { INode } from '~/redux/types';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Textarea } from '~/components/input/Textarea';
 import path from 'ramda/es/path';
 
diff --git a/src/components/editors/TextEditor/styles.scss b/src/components/editors/TextEditor/styles.module.scss
similarity index 100%
rename from src/components/editors/TextEditor/styles.scss
rename to src/components/editors/TextEditor/styles.module.scss
diff --git a/src/components/editors/VideoEditor/index.tsx b/src/components/editors/VideoEditor/index.tsx
index 5d2ac72a..b0bac6da 100644
--- a/src/components/editors/VideoEditor/index.tsx
+++ b/src/components/editors/VideoEditor/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useMemo } from 'react';
 import { INode } from '~/redux/types';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import path from 'ramda/es/path';
 import { InputText } from '~/components/input/InputText';
 import classnames from 'classnames';
diff --git a/src/components/editors/VideoEditor/styles.scss b/src/components/editors/VideoEditor/styles.module.scss
similarity index 100%
rename from src/components/editors/VideoEditor/styles.scss
rename to src/components/editors/VideoEditor/styles.module.scss
diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx
index d83ec144..75523ffa 100644
--- a/src/components/flow/Cell/index.tsx
+++ b/src/components/flow/Cell/index.tsx
@@ -3,7 +3,7 @@ import { INode } from '~/redux/types';
 import { formatCellText, getURL } from '~/utils/dom';
 import classNames from 'classnames';
 
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { flowSetCellView } from '~/redux/flow/actions';
 import { PRESETS } from '~/constants/urls';
diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.module.scss
similarity index 100%
rename from src/components/flow/Cell/styles.scss
rename to src/components/flow/Cell/styles.module.scss
diff --git a/src/components/flow/FlowGrid/styles.scss b/src/components/flow/FlowGrid/styles.module.scss
similarity index 100%
rename from src/components/flow/FlowGrid/styles.scss
rename to src/components/flow/FlowGrid/styles.module.scss
diff --git a/src/components/flow/FlowHero/index.tsx b/src/components/flow/FlowHero/index.tsx
index 9b795640..409b2d5c 100644
--- a/src/components/flow/FlowHero/index.tsx
+++ b/src/components/flow/FlowHero/index.tsx
@@ -2,7 +2,7 @@ import React, { FC, useState, useCallback, useEffect, useRef, useMemo } from 're
 import { IFlowState } from '~/redux/flow/reducer';
 import classNames from 'classnames';
 
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { getURL } from '~/utils/dom';
 import { withRouter, RouteComponentProps, useHistory } from 'react-router';
 import { URLS, PRESETS } from '~/constants/urls';
diff --git a/src/components/flow/FlowHero/styles.scss b/src/components/flow/FlowHero/styles.module.scss
similarity index 100%
rename from src/components/flow/FlowHero/styles.scss
rename to src/components/flow/FlowHero/styles.module.scss
diff --git a/src/components/flow/FlowRecent/styles.scss b/src/components/flow/FlowRecent/styles.module.scss
similarity index 100%
rename from src/components/flow/FlowRecent/styles.scss
rename to src/components/flow/FlowRecent/styles.module.scss
diff --git a/src/components/flow/FlowRecentItem/index.tsx b/src/components/flow/FlowRecentItem/index.tsx
index 471718e2..16192e69 100644
--- a/src/components/flow/FlowRecentItem/index.tsx
+++ b/src/components/flow/FlowRecentItem/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { INode } from '~/redux/types';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { URLS } from '~/constants/urls';
 import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
 import { getPrettyDate } from '~/utils/dom';
diff --git a/src/components/flow/FlowRecentItem/styles.scss b/src/components/flow/FlowRecentItem/styles.module.scss
similarity index 100%
rename from src/components/flow/FlowRecentItem/styles.scss
rename to src/components/flow/FlowRecentItem/styles.module.scss
diff --git a/src/components/flow/FlowSearchResults/index.tsx b/src/components/flow/FlowSearchResults/index.tsx
index 2b5e9925..b159ff40 100644
--- a/src/components/flow/FlowSearchResults/index.tsx
+++ b/src/components/flow/FlowSearchResults/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { IFlowState } from '~/redux/flow/reducer';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { FlowRecentItem } from '../FlowRecentItem';
diff --git a/src/components/flow/FlowSearchResults/styles.scss b/src/components/flow/FlowSearchResults/styles.module.scss
similarity index 100%
rename from src/components/flow/FlowSearchResults/styles.scss
rename to src/components/flow/FlowSearchResults/styles.module.scss
diff --git a/src/components/flow/FlowStamp/index.tsx b/src/components/flow/FlowStamp/index.tsx
index da5a6bd3..04005887 100644
--- a/src/components/flow/FlowStamp/index.tsx
+++ b/src/components/flow/FlowStamp/index.tsx
@@ -4,7 +4,7 @@ import { InputText } from '~/components/input/InputText';
 import { FlowRecent } from '../FlowRecent';
 import classnames from 'classnames';
 
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import * as FLOW_ACTIONS from '~/redux/flow/actions';
 import { FlowSearchResults } from '../FlowSearchResults';
 import { Icon } from '~/components/input/Icon';
diff --git a/src/components/flow/FlowStamp/styles.scss b/src/components/flow/FlowStamp/styles.module.scss
similarity index 100%
rename from src/components/flow/FlowStamp/styles.scss
rename to src/components/flow/FlowStamp/styles.module.scss
diff --git a/src/components/input/ArcProgress/index.tsx b/src/components/input/ArcProgress/index.tsx
index 374fd3df..f9db81ea 100644
--- a/src/components/input/ArcProgress/index.tsx
+++ b/src/components/input/ArcProgress/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { describeArc } from '~/utils/dom';
 
 interface IProps {
diff --git a/src/components/input/ArcProgress/styles.scss b/src/components/input/ArcProgress/styles.module.scss
similarity index 100%
rename from src/components/input/ArcProgress/styles.scss
rename to src/components/input/ArcProgress/styles.module.scss
diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx
index 0346b3e7..7b9d8a8c 100644
--- a/src/components/input/Button/index.tsx
+++ b/src/components/input/Button/index.tsx
@@ -1,6 +1,6 @@
 import classnames from 'classnames';
 import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, createElement, memo } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IIcon } from '~/redux/types';
 
diff --git a/src/components/input/Button/styles.scss b/src/components/input/Button/styles.module.scss
similarity index 100%
rename from src/components/input/Button/styles.scss
rename to src/components/input/Button/styles.module.scss
diff --git a/src/components/input/ButtonGroup/index.tsx b/src/components/input/ButtonGroup/index.tsx
index 72c993f3..6a82b590 100644
--- a/src/components/input/ButtonGroup/index.tsx
+++ b/src/components/input/ButtonGroup/index.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {};
 
diff --git a/src/components/input/ButtonGroup/styles.scss b/src/components/input/ButtonGroup/styles.module.scss
similarity index 100%
rename from src/components/input/ButtonGroup/styles.scss
rename to src/components/input/ButtonGroup/styles.module.scss
diff --git a/src/components/input/InputText/index.tsx b/src/components/input/InputText/index.tsx
index eae62ab5..caf00ceb 100644
--- a/src/components/input/InputText/index.tsx
+++ b/src/components/input/InputText/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, ChangeEvent, useCallback, useState, useEffect, LegacyRef } from 'react';
 import classNames from 'classnames';
-import * as styles from '~/styles/inputs.scss';
+import * as styles from '~/styles/common/inputs.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IInputTextProps } from '~/redux/types';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
diff --git a/src/components/input/LoaderCircle/index.tsx b/src/components/input/LoaderCircle/index.tsx
index 49c2fbe6..c555f568 100644
--- a/src/components/input/LoaderCircle/index.tsx
+++ b/src/components/input/LoaderCircle/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { describeArc } from '~/utils/dom';
 import classNames from 'classnames';
 
diff --git a/src/components/input/LoaderCircle/styles.scss b/src/components/input/LoaderCircle/styles.module.scss
similarity index 100%
rename from src/components/input/LoaderCircle/styles.scss
rename to src/components/input/LoaderCircle/styles.module.scss
diff --git a/src/components/input/TextInput/index.tsx b/src/components/input/TextInput/index.tsx
index e05e2ad7..187cba81 100644
--- a/src/components/input/TextInput/index.tsx
+++ b/src/components/input/TextInput/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface ITextInputProps {
   type?: 'text' | 'password';
diff --git a/src/components/input/TextInput/styles.scss b/src/components/input/TextInput/styles.module.scss
similarity index 100%
rename from src/components/input/TextInput/styles.scss
rename to src/components/input/TextInput/styles.module.scss
diff --git a/src/components/input/Textarea/index.tsx b/src/components/input/Textarea/index.tsx
index 0d40aa22..15818bfd 100644
--- a/src/components/input/Textarea/index.tsx
+++ b/src/components/input/Textarea/index.tsx
@@ -11,7 +11,7 @@ import React, {
 import classNames from 'classnames';
 import autosize from 'autosize';
 
-import * as styles from '~/styles/inputs.scss';
+import * as styles from '~/styles/common/inputs.module.scss';
 import { Icon } from '../Icon';
 
 type IProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
diff --git a/src/components/main/Footer/index.tsx b/src/components/main/Footer/index.tsx
index 0ae17a29..5f494000 100644
--- a/src/components/main/Footer/index.tsx
+++ b/src/components/main/Footer/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, memo } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {}
 
diff --git a/src/components/main/Footer/styles.scss b/src/components/main/Footer/styles.module.scss
similarity index 100%
rename from src/components/main/Footer/styles.scss
rename to src/components/main/Footer/styles.module.scss
diff --git a/src/components/main/Notifications/index.tsx b/src/components/main/Notifications/index.tsx
index 34b1f415..6d1ac576 100644
--- a/src/components/main/Notifications/index.tsx
+++ b/src/components/main/Notifications/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo, useState, useCallback, useEffect } from 'react';
 import { Icon } from '~/components/input/Icon';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { connect } from 'react-redux';
 import { selectAuthUpdates, selectAuthUser } from '~/redux/auth/selectors';
 import pick from 'ramda/es/pick';
diff --git a/src/components/main/Notifications/styles.scss b/src/components/main/Notifications/styles.module.scss
similarity index 100%
rename from src/components/main/Notifications/styles.scss
rename to src/components/main/Notifications/styles.module.scss
diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx
index f936a374..ee5c5907 100644
--- a/src/components/main/SidePane/index.tsx
+++ b/src/components/main/SidePane/index.tsx
@@ -2,7 +2,7 @@ import React, {
   FC, LegacyRef, ReactChild, useCallback, useEffect, useState
 } from 'react';
 import classNames from 'classnames';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 
 interface IProps {
diff --git a/src/components/main/SidePane/styles.scss b/src/components/main/SidePane/styles.module.scss
similarity index 100%
rename from src/components/main/SidePane/styles.scss
rename to src/components/main/SidePane/styles.module.scss
diff --git a/src/components/main/UserButton/index.tsx b/src/components/main/UserButton/index.tsx
index c3220067..b0b3af3b 100644
--- a/src/components/main/UserButton/index.tsx
+++ b/src/components/main/UserButton/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback } from 'react';
 import { Group } from '~/components/containers/Group';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { getURL } from '~/utils/dom';
 import { Icon } from '~/components/input/Icon';
 import { IUser } from '~/redux/auth/types';
diff --git a/src/components/main/UserButton/styles.scss b/src/components/main/UserButton/styles.module.scss
similarity index 100%
rename from src/components/main/UserButton/styles.scss
rename to src/components/main/UserButton/styles.module.scss
diff --git a/src/components/media/AudioPlayer/index.tsx b/src/components/media/AudioPlayer/index.tsx
index 420531c4..6e698639 100644
--- a/src/components/media/AudioPlayer/index.tsx
+++ b/src/components/media/AudioPlayer/index.tsx
@@ -6,7 +6,7 @@ import { IFile } from '~/redux/types';
 import { PLAYER_STATES } from '~/redux/player/constants';
 import { Player, IPlayerProgress } from '~/utils/player';
 import classNames from 'classnames';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { InputText } from '~/components/input/InputText';
 
diff --git a/src/components/media/AudioPlayer/styles.scss b/src/components/media/AudioPlayer/styles.module.scss
similarity index 100%
rename from src/components/media/AudioPlayer/styles.scss
rename to src/components/media/AudioPlayer/styles.module.scss
diff --git a/src/components/node/CommendDeleted/index.tsx b/src/components/node/CommendDeleted/index.tsx
index baaeebf0..340f6f90 100644
--- a/src/components/node/CommendDeleted/index.tsx
+++ b/src/components/node/CommendDeleted/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Button } from '~/components/input/Button';
 import { nodeLockComment } from '~/redux/node/actions';
 import { IComment } from '~/redux/types';
diff --git a/src/components/node/CommendDeleted/styles.scss b/src/components/node/CommendDeleted/styles.module.scss
similarity index 100%
rename from src/components/node/CommendDeleted/styles.scss
rename to src/components/node/CommendDeleted/styles.module.scss
diff --git a/src/components/node/Comment/index.tsx b/src/components/node/Comment/index.tsx
index c126fa2b..839748b1 100644
--- a/src/components/node/Comment/index.tsx
+++ b/src/components/node/Comment/index.tsx
@@ -2,7 +2,7 @@ import React, { FC, HTMLAttributes, memo } from 'react';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import { ICommentGroup, IComment } from '~/redux/types';
 import { CommentContent } from '~/components/node/CommentContent';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { nodeLockComment, nodeEditComment } from '~/redux/node/actions';
 import { INodeState } from '~/redux/node/reducer';
 import { CommentForm } from '../CommentForm';
diff --git a/src/components/node/Comment/styles.scss b/src/components/node/Comment/styles.module.scss
similarity index 100%
rename from src/components/node/Comment/styles.scss
rename to src/components/node/Comment/styles.module.scss
diff --git a/src/components/node/CommentContent/index.tsx b/src/components/node/CommentContent/index.tsx
index e559e1dc..1accc82c 100644
--- a/src/components/node/CommentContent/index.tsx
+++ b/src/components/node/CommentContent/index.tsx
@@ -3,7 +3,7 @@ import { IComment, IFile } from '~/redux/types';
 import path from 'ramda/es/path';
 import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
 import { Group } from '~/components/containers/Group';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import assocPath from 'ramda/es/assocPath';
 import append from 'ramda/es/append';
diff --git a/src/components/node/CommentContent/styles.scss b/src/components/node/CommentContent/styles.module.scss
similarity index 100%
rename from src/components/node/CommentContent/styles.scss
rename to src/components/node/CommentContent/styles.module.scss
diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx
index 3d143d70..3481b9b5 100644
--- a/src/components/node/CommentForm/index.tsx
+++ b/src/components/node/CommentForm/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, KeyboardEventHandler, memo, useCallback, useEffect, useMemo } from 'react';
 import { Textarea } from '~/components/input/Textarea';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import assocPath from 'ramda/es/assocPath';
diff --git a/src/components/node/CommentForm/styles.scss b/src/components/node/CommentForm/styles.module.scss
similarity index 100%
rename from src/components/node/CommentForm/styles.scss
rename to src/components/node/CommentForm/styles.module.scss
diff --git a/src/components/node/CommentMenu/index.tsx b/src/components/node/CommentMenu/index.tsx
index 9339f6b7..b8b84369 100644
--- a/src/components/node/CommentMenu/index.tsx
+++ b/src/components/node/CommentMenu/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useState, useCallback } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {
   onEdit: () => void;
diff --git a/src/components/node/CommentMenu/styles.scss b/src/components/node/CommentMenu/styles.module.scss
similarity index 100%
rename from src/components/node/CommentMenu/styles.scss
rename to src/components/node/CommentMenu/styles.module.scss
diff --git a/src/components/node/ImageSwitcher/index.tsx b/src/components/node/ImageSwitcher/index.tsx
index 89a4f456..dceb1eec 100644
--- a/src/components/node/ImageSwitcher/index.tsx
+++ b/src/components/node/ImageSwitcher/index.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import range from 'ramda/es/range';
 import classNames from 'classnames';
 
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {
   total: number;
diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.module.scss
similarity index 100%
rename from src/components/node/ImageSwitcher/styles.scss
rename to src/components/node/ImageSwitcher/styles.module.scss
diff --git a/src/components/node/MenuButton/index.tsx b/src/components/node/MenuButton/index.tsx
index 4782c741..509a918d 100644
--- a/src/components/node/MenuButton/index.tsx
+++ b/src/components/node/MenuButton/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import { Filler } from '~/components/containers/Filler';
 
diff --git a/src/components/node/MenuButton/styles.scss b/src/components/node/MenuButton/styles.module.scss
similarity index 100%
rename from src/components/node/MenuButton/styles.scss
rename to src/components/node/MenuButton/styles.module.scss
diff --git a/src/components/node/NodeAudioBlock/index.tsx b/src/components/node/NodeAudioBlock/index.tsx
index 6b3595e9..9581a16b 100644
--- a/src/components/node/NodeAudioBlock/index.tsx
+++ b/src/components/node/NodeAudioBlock/index.tsx
@@ -2,7 +2,7 @@ import React, { FC, useMemo } from 'react';
 import { INode } from '~/redux/types';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { INodeComponentProps } from '~/redux/node/constants';
 
 interface IProps extends INodeComponentProps {}
diff --git a/src/components/node/NodeAudioBlock/styles.scss b/src/components/node/NodeAudioBlock/styles.module.scss
similarity index 100%
rename from src/components/node/NodeAudioBlock/styles.scss
rename to src/components/node/NodeAudioBlock/styles.module.scss
diff --git a/src/components/node/NodeAudioImageBlock/index.tsx b/src/components/node/NodeAudioImageBlock/index.tsx
index 1d7d295f..57e36d00 100644
--- a/src/components/node/NodeAudioImageBlock/index.tsx
+++ b/src/components/node/NodeAudioImageBlock/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo } from 'react';
 import { INode } from '~/redux/types';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import path from 'ramda/es/path';
 import { getURL } from '~/utils/dom';
diff --git a/src/components/node/NodeAudioImageBlock/styles.scss b/src/components/node/NodeAudioImageBlock/styles.module.scss
similarity index 100%
rename from src/components/node/NodeAudioImageBlock/styles.scss
rename to src/components/node/NodeAudioImageBlock/styles.module.scss
diff --git a/src/components/node/NodeCommentForm/index.tsx b/src/components/node/NodeCommentForm/index.tsx
index 31506872..b72c663b 100644
--- a/src/components/node/NodeCommentForm/index.tsx
+++ b/src/components/node/NodeCommentForm/index.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useCallback, KeyboardEventHandler, useEffect, useMemo } from 'react';
 import { Textarea } from '~/components/input/Textarea';
 import { CommentWrapper } from '~/components/containers/CommentWrapper';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import assocPath from 'ramda/es/assocPath';
diff --git a/src/components/node/NodeComments/index.tsx b/src/components/node/NodeComments/index.tsx
index c7f541da..4cc1e3d3 100644
--- a/src/components/node/NodeComments/index.tsx
+++ b/src/components/node/NodeComments/index.tsx
@@ -2,7 +2,7 @@ import React, { FC, useMemo, memo } from 'react';
 import { Comment } from '../Comment';
 import { Filler } from '~/components/containers/Filler';
 
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { ICommentGroup, IComment } from '~/redux/types';
 import { groupCommentsByUser } from '~/utils/fn';
 import { IUser } from '~/redux/auth/types';
diff --git a/src/components/node/NodeComments/styles.scss b/src/components/node/NodeComments/styles.module.scss
similarity index 100%
rename from src/components/node/NodeComments/styles.scss
rename to src/components/node/NodeComments/styles.module.scss
diff --git a/src/components/node/NodeDeletedBadge/index.tsx b/src/components/node/NodeDeletedBadge/index.tsx
index 1bb06283..c5cbbc03 100644
--- a/src/components/node/NodeDeletedBadge/index.tsx
+++ b/src/components/node/NodeDeletedBadge/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {}
 
diff --git a/src/components/node/NodeDeletedBadge/styles.scss b/src/components/node/NodeDeletedBadge/styles.module.scss
similarity index 100%
rename from src/components/node/NodeDeletedBadge/styles.scss
rename to src/components/node/NodeDeletedBadge/styles.module.scss
diff --git a/src/components/node/NodeImageBlock/index.tsx b/src/components/node/NodeImageBlock/index.tsx
index 124200d7..d3875ffc 100644
--- a/src/components/node/NodeImageBlock/index.tsx
+++ b/src/components/node/NodeImageBlock/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
 import { ImageSwitcher } from '../ImageSwitcher';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { INode } from '~/redux/types';
 import classNames from 'classnames';
 import { getURL } from '~/utils/dom';
diff --git a/src/components/node/NodeImageBlock/styles.scss b/src/components/node/NodeImageBlock/styles.module.scss
similarity index 100%
rename from src/components/node/NodeImageBlock/styles.scss
rename to src/components/node/NodeImageBlock/styles.module.scss
diff --git a/src/components/node/NodeImageBlockPlaceholder/index.tsx b/src/components/node/NodeImageBlockPlaceholder/index.tsx
index c63e9479..8a5c9b6e 100644
--- a/src/components/node/NodeImageBlockPlaceholder/index.tsx
+++ b/src/components/node/NodeImageBlockPlaceholder/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 
 const NodeImageBlockPlaceholder: FC<{}> = () => (
diff --git a/src/components/node/NodeImageBlockPlaceholder/styles.scss b/src/components/node/NodeImageBlockPlaceholder/styles.module.scss
similarity index 100%
rename from src/components/node/NodeImageBlockPlaceholder/styles.scss
rename to src/components/node/NodeImageBlockPlaceholder/styles.module.scss
diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 3f67b153..0c580ad3 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useMemo, useState, useEffect, useRef, useCallback } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import classNames from 'classnames';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { INodeComponentProps } from '~/redux/node/constants';
diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.module.scss
similarity index 100%
rename from src/components/node/NodeImageSlideBlock/styles.scss
rename to src/components/node/NodeImageSlideBlock/styles.module.scss
diff --git a/src/components/node/NodeNoComments/index.tsx b/src/components/node/NodeNoComments/index.tsx
index f1395383..314670ee 100644
--- a/src/components/node/NodeNoComments/index.tsx
+++ b/src/components/node/NodeNoComments/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import classNames from 'classnames';
 import { Filler } from '~/components/containers/Filler';
diff --git a/src/components/node/NodeNoComments/styles.scss b/src/components/node/NodeNoComments/styles.module.scss
similarity index 100%
rename from src/components/node/NodeNoComments/styles.scss
rename to src/components/node/NodeNoComments/styles.module.scss
diff --git a/src/components/node/NodePanel/index.tsx b/src/components/node/NodePanel/index.tsx
index bebb3218..31973594 100644
--- a/src/components/node/NodePanel/index.tsx
+++ b/src/components/node/NodePanel/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useEffect, useRef, useState, memo } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { INode } from '~/redux/types';
 import { createPortal } from 'react-dom';
 import { NodePanelInner } from '~/components/node/NodePanelInner';
diff --git a/src/components/node/NodePanel/styles.scss b/src/components/node/NodePanel/styles.module.scss
similarity index 100%
rename from src/components/node/NodePanel/styles.scss
rename to src/components/node/NodePanel/styles.module.scss
diff --git a/src/components/node/NodePanelInner/index.tsx b/src/components/node/NodePanelInner/index.tsx
index 44799c1a..0ed58eab 100644
--- a/src/components/node/NodePanelInner/index.tsx
+++ b/src/components/node/NodePanelInner/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, memo } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import { Filler } from '~/components/containers/Filler';
 import { Icon } from '~/components/input/Icon';
diff --git a/src/components/node/NodePanelInner/styles.scss b/src/components/node/NodePanelInner/styles.module.scss
similarity index 100%
rename from src/components/node/NodePanelInner/styles.scss
rename to src/components/node/NodePanelInner/styles.module.scss
diff --git a/src/components/node/NodeRelated/index.tsx b/src/components/node/NodeRelated/index.tsx
index 4b246328..8e9888f7 100644
--- a/src/components/node/NodeRelated/index.tsx
+++ b/src/components/node/NodeRelated/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactElement } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import { INode } from '~/redux/types';
 import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
diff --git a/src/components/node/NodeRelated/placeholder.tsx b/src/components/node/NodeRelated/placeholder.tsx
index 42b6a2e0..b8e9d89f 100644
--- a/src/components/node/NodeRelated/placeholder.tsx
+++ b/src/components/node/NodeRelated/placeholder.tsx
@@ -1,6 +1,6 @@
 import React, { FC, memo } from "react";
-import styles from "./styles.scss";
-import cell_style from "~/components/node/NodeRelatedItem/styles.scss";
+import styles from './styles.module.scss';
+import cell_style from "~/components/node/NodeRelatedItem/styles.module.scss";
 import { Group } from "~/components/containers/Group";
 import { Placeholder } from "~/components/placeholders/Placeholder";
 import range from "ramda/es/range";
diff --git a/src/components/node/NodeRelated/styles.scss b/src/components/node/NodeRelated/styles.module.scss
similarity index 100%
rename from src/components/node/NodeRelated/styles.scss
rename to src/components/node/NodeRelated/styles.module.scss
diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx
index 982f62e9..6c5a92c0 100644
--- a/src/components/node/NodeRelatedItem/index.tsx
+++ b/src/components/node/NodeRelatedItem/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, memo, useCallback, useState, useMemo } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import classNames from 'classnames';
 import { INode } from '~/redux/types';
 import { URLS, PRESETS } from '~/constants/urls';
diff --git a/src/components/node/NodeRelatedItem/styles.scss b/src/components/node/NodeRelatedItem/styles.module.scss
similarity index 100%
rename from src/components/node/NodeRelatedItem/styles.scss
rename to src/components/node/NodeRelatedItem/styles.module.scss
diff --git a/src/components/node/NodeTextBlock/index.tsx b/src/components/node/NodeTextBlock/index.tsx
index a272ac17..9ecbc69d 100644
--- a/src/components/node/NodeTextBlock/index.tsx
+++ b/src/components/node/NodeTextBlock/index.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { INode } from '~/redux/types';
 import path from 'ramda/es/path';
 import { formatTextParagraphs } from '~/utils/dom';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { INodeComponentProps } from '~/redux/node/constants';
 
 interface IProps extends INodeComponentProps {}
diff --git a/src/components/node/NodeTextBlock/styles.scss b/src/components/node/NodeTextBlock/styles.module.scss
similarity index 100%
rename from src/components/node/NodeTextBlock/styles.scss
rename to src/components/node/NodeTextBlock/styles.module.scss
diff --git a/src/components/node/NodeVideoBlock/index.tsx b/src/components/node/NodeVideoBlock/index.tsx
index 9c03764c..406fb256 100644
--- a/src/components/node/NodeVideoBlock/index.tsx
+++ b/src/components/node/NodeVideoBlock/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import path from 'ramda/es/path';
 import { INodeComponentProps } from '~/redux/node/constants';
 
diff --git a/src/components/node/NodeVideoBlock/styles.scss b/src/components/node/NodeVideoBlock/styles.module.scss
similarity index 100%
rename from src/components/node/NodeVideoBlock/styles.scss
rename to src/components/node/NodeVideoBlock/styles.module.scss
diff --git a/src/components/notifications/NotificationBubble/index.tsx b/src/components/notifications/NotificationBubble/index.tsx
index 513a7013..9c9f2109 100644
--- a/src/components/notifications/NotificationBubble/index.tsx
+++ b/src/components/notifications/NotificationBubble/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, createElement } from 'react';
 import { INotification, NOTIFICATION_TYPES } from '~/redux/types';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { NotificationMessage } from '../NotificationMessage';
 import { Icon } from '~/components/input/Icon';
 import { getRandomPhrase } from '~/constants/phrases';
diff --git a/src/components/notifications/NotificationBubble/styles.scss b/src/components/notifications/NotificationBubble/styles.module.scss
similarity index 100%
rename from src/components/notifications/NotificationBubble/styles.scss
rename to src/components/notifications/NotificationBubble/styles.module.scss
diff --git a/src/components/notifications/NotificationMessage/index.tsx b/src/components/notifications/NotificationMessage/index.tsx
index 09bf0165..f75f3dfb 100644
--- a/src/components/notifications/NotificationMessage/index.tsx
+++ b/src/components/notifications/NotificationMessage/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback } from 'react';
-import styles from '~/components/notifications/NotificationBubble/styles.scss';
+import styles from '~/components/notifications/NotificationBubble/styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IMessageNotification, INotification } from '~/redux/types';
 
diff --git a/src/components/placeholders/ParagraphPlaceholder/index.tsx b/src/components/placeholders/ParagraphPlaceholder/index.tsx
index aff5e8bf..3bbabab8 100644
--- a/src/components/placeholders/ParagraphPlaceholder/index.tsx
+++ b/src/components/placeholders/ParagraphPlaceholder/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { Placeholder } from '~/components/placeholders/Placeholder';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 
 const ParagraphPlaceholder = ({}) => (
diff --git a/src/components/placeholders/ParagraphPlaceholder/styles.scss b/src/components/placeholders/ParagraphPlaceholder/styles.module.scss
similarity index 100%
rename from src/components/placeholders/ParagraphPlaceholder/styles.scss
rename to src/components/placeholders/ParagraphPlaceholder/styles.module.scss
diff --git a/src/components/placeholders/Placeholder/index.tsx b/src/components/placeholders/Placeholder/index.tsx
index b29d12bb..a5d3be7c 100644
--- a/src/components/placeholders/Placeholder/index.tsx
+++ b/src/components/placeholders/Placeholder/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {
   width?: string;
diff --git a/src/components/placeholders/Placeholder/styles.scss b/src/components/placeholders/Placeholder/styles.module.scss
similarity index 100%
rename from src/components/placeholders/Placeholder/styles.scss
rename to src/components/placeholders/Placeholder/styles.module.scss
diff --git a/src/components/profile/Message/index.tsx b/src/components/profile/Message/index.tsx
index c543f264..373159a4 100644
--- a/src/components/profile/Message/index.tsx
+++ b/src/components/profile/Message/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback } from 'react';
 import { IMessage } from '~/redux/types';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { formatText, getPrettyDate, getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import classNames from 'classnames';
diff --git a/src/components/profile/Message/styles.scss b/src/components/profile/Message/styles.module.scss
similarity index 100%
rename from src/components/profile/Message/styles.scss
rename to src/components/profile/Message/styles.module.scss
diff --git a/src/components/profile/MessageForm/index.tsx b/src/components/profile/MessageForm/index.tsx
index c9e123fb..2ac14bcc 100644
--- a/src/components/profile/MessageForm/index.tsx
+++ b/src/components/profile/MessageForm/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, KeyboardEventHandler, useCallback, useMemo, useState } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Textarea } from '~/components/input/Textarea';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
diff --git a/src/components/profile/MessageForm/styles.scss b/src/components/profile/MessageForm/styles.module.scss
similarity index 100%
rename from src/components/profile/MessageForm/styles.scss
rename to src/components/profile/MessageForm/styles.module.scss
diff --git a/src/components/profile/ProfileAccounts/index.tsx b/src/components/profile/ProfileAccounts/index.tsx
index 33c1652d..01c820f5 100644
--- a/src/components/profile/ProfileAccounts/index.tsx
+++ b/src/components/profile/ProfileAccounts/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, Fragment, useCallback, useEffect } from 'react';
 import { ISocialProvider } from '~/redux/auth/types';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { Icon } from '~/components/input/Icon';
 import { Button } from '~/components/input/Button';
diff --git a/src/components/profile/ProfileAccounts/styles.scss b/src/components/profile/ProfileAccounts/styles.module.scss
similarity index 100%
rename from src/components/profile/ProfileAccounts/styles.scss
rename to src/components/profile/ProfileAccounts/styles.module.scss
diff --git a/src/components/profile/ProfileAccountsError/index.tsx b/src/components/profile/ProfileAccountsError/index.tsx
index 8fa52ff2..ad65fe5b 100644
--- a/src/components/profile/ProfileAccountsError/index.tsx
+++ b/src/components/profile/ProfileAccountsError/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { Button } from '~/components/input/Button';
diff --git a/src/components/profile/ProfileAccountsError/styles.scss b/src/components/profile/ProfileAccountsError/styles.module.scss
similarity index 100%
rename from src/components/profile/ProfileAccountsError/styles.scss
rename to src/components/profile/ProfileAccountsError/styles.module.scss
diff --git a/src/components/profile/ProfileDescription/index.tsx b/src/components/profile/ProfileDescription/index.tsx
index 77b229ec..4e471a97 100644
--- a/src/components/profile/ProfileDescription/index.tsx
+++ b/src/components/profile/ProfileDescription/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { formatText } from '~/utils/dom';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { connect } from 'react-redux';
 import { selectAuthProfile } from '~/redux/auth/selectors';
 import { ProfileLoader } from '~/containers/profile/ProfileLoader';
diff --git a/src/components/profile/ProfileDescription/styles.scss b/src/components/profile/ProfileDescription/styles.module.scss
similarity index 100%
rename from src/components/profile/ProfileDescription/styles.scss
rename to src/components/profile/ProfileDescription/styles.module.scss
diff --git a/src/components/profile/ProfileSettings/index.tsx b/src/components/profile/ProfileSettings/index.tsx
index df8482a1..f119adb2 100644
--- a/src/components/profile/ProfileSettings/index.tsx
+++ b/src/components/profile/ProfileSettings/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useEffect, useState } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { connect } from 'react-redux';
 import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
 import { Textarea } from '~/components/input/Textarea';
diff --git a/src/components/profile/ProfileSettings/styles.scss b/src/components/profile/ProfileSettings/styles.module.scss
similarity index 100%
rename from src/components/profile/ProfileSettings/styles.scss
rename to src/components/profile/ProfileSettings/styles.module.scss
diff --git a/src/components/tags/Tag/styles.scss b/src/components/tags/Tag/styles.module.scss
similarity index 100%
rename from src/components/tags/Tag/styles.scss
rename to src/components/tags/Tag/styles.module.scss
diff --git a/src/components/upload/AudioUpload/index.tsx b/src/components/upload/AudioUpload/index.tsx
index fd150593..e6cfa172 100644
--- a/src/components/upload/AudioUpload/index.tsx
+++ b/src/components/upload/AudioUpload/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback } from 'react';
 import classNames from 'classnames';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { ArcProgress } from '~/components/input/ArcProgress';
 import { IFile } from '~/redux/types';
 import { Icon } from '~/components/input/Icon';
diff --git a/src/components/upload/AudioUpload/styles.scss b/src/components/upload/AudioUpload/styles.module.scss
similarity index 100%
rename from src/components/upload/AudioUpload/styles.scss
rename to src/components/upload/AudioUpload/styles.module.scss
diff --git a/src/components/upload/ImageUpload/index.tsx b/src/components/upload/ImageUpload/index.tsx
index 81d010bd..fff82a40 100644
--- a/src/components/upload/ImageUpload/index.tsx
+++ b/src/components/upload/ImageUpload/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback } from 'react';
 import classNames from 'classnames';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { ArcProgress } from '~/components/input/ArcProgress';
 import { IFile } from '~/redux/types';
 import { Icon } from '~/components/input/Icon';
diff --git a/src/components/upload/ImageUpload/styles.scss b/src/components/upload/ImageUpload/styles.module.scss
similarity index 100%
rename from src/components/upload/ImageUpload/styles.scss
rename to src/components/upload/ImageUpload/styles.module.scss
diff --git a/src/containers/dialogs/BetterScrollDialog/index.tsx b/src/containers/dialogs/BetterScrollDialog/index.tsx
index eb580ae9..66f1a525 100644
--- a/src/containers/dialogs/BetterScrollDialog/index.tsx
+++ b/src/containers/dialogs/BetterScrollDialog/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, MouseEventHandler, ReactElement, useEffect, useRef, } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import { Icon } from '~/components/input/Icon';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
diff --git a/src/containers/dialogs/BetterScrollDialog/styles.scss b/src/containers/dialogs/BetterScrollDialog/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/BetterScrollDialog/styles.scss
rename to src/containers/dialogs/BetterScrollDialog/styles.module.scss
diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx
index 4888e82e..02e7933d 100644
--- a/src/containers/dialogs/EditorDialog/index.tsx
+++ b/src/containers/dialogs/EditorDialog/index.tsx
@@ -6,7 +6,7 @@ import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
 import { Button } from '~/components/input/Button';
 import { Padder } from '~/components/containers/Padder';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { selectNode } from '~/redux/node/selectors';
 import { EditorPanel } from '~/components/editors/EditorPanel';
 import * as NODE_ACTIONS from '~/redux/node/actions';
diff --git a/src/containers/dialogs/EditorDialog/styles.scss b/src/containers/dialogs/EditorDialog/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/EditorDialog/styles.scss
rename to src/containers/dialogs/EditorDialog/styles.module.scss
diff --git a/src/containers/dialogs/LoadingDialog/index.tsx b/src/containers/dialogs/LoadingDialog/index.tsx
index abead2d4..7ebea6de 100644
--- a/src/containers/dialogs/LoadingDialog/index.tsx
+++ b/src/containers/dialogs/LoadingDialog/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 const LoadingDialog: FC<{}> = () => (
   <div className={styles.wrap}>
diff --git a/src/containers/dialogs/LoadingDialog/styles.scss b/src/containers/dialogs/LoadingDialog/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/LoadingDialog/styles.scss
rename to src/containers/dialogs/LoadingDialog/styles.module.scss
diff --git a/src/containers/dialogs/LoginDialog/index.tsx b/src/containers/dialogs/LoginDialog/index.tsx
index 5eb914ee..a2a9c92e 100644
--- a/src/containers/dialogs/LoginDialog/index.tsx
+++ b/src/containers/dialogs/LoginDialog/index.tsx
@@ -10,7 +10,7 @@ import { selectAuthLogin } from '~/redux/auth/selectors';
 import { API } from '~/constants/api';
 import { BetterScrollDialog } from '../BetterScrollDialog';
 
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import * as ACTIONS from '~/redux/auth/actions';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { ISocialProvider } from '~/redux/auth/types';
diff --git a/src/containers/dialogs/LoginDialog/styles.scss b/src/containers/dialogs/LoginDialog/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/LoginDialog/styles.scss
rename to src/containers/dialogs/LoginDialog/styles.module.scss
diff --git a/src/containers/dialogs/LoginDialogButtons/index.tsx b/src/containers/dialogs/LoginDialogButtons/index.tsx
index 7cc63492..f328f11d 100644
--- a/src/containers/dialogs/LoginDialogButtons/index.tsx
+++ b/src/containers/dialogs/LoginDialogButtons/index.tsx
@@ -2,7 +2,7 @@ import React, { FC, MouseEventHandler } from 'react';
 import { Button } from '~/components/input/Button';
 import { Grid } from '~/components/containers/Grid';
 import { Group } from '~/components/containers/Group';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {
   openOauthWindow: (provider: string) => MouseEventHandler;
diff --git a/src/containers/dialogs/LoginDialogButtons/styles.scss b/src/containers/dialogs/LoginDialogButtons/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/LoginDialogButtons/styles.scss
rename to src/containers/dialogs/LoginDialogButtons/styles.module.scss
diff --git a/src/containers/dialogs/LoginSocialRegisterButtons/index.tsx b/src/containers/dialogs/LoginSocialRegisterButtons/index.tsx
index 905cbd77..991607cf 100644
--- a/src/containers/dialogs/LoginSocialRegisterButtons/index.tsx
+++ b/src/containers/dialogs/LoginSocialRegisterButtons/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { Button } from '~/components/input/Button';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {}
 
diff --git a/src/containers/dialogs/LoginSocialRegisterButtons/styles.scss b/src/containers/dialogs/LoginSocialRegisterButtons/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/LoginSocialRegisterButtons/styles.scss
rename to src/containers/dialogs/LoginSocialRegisterButtons/styles.module.scss
diff --git a/src/containers/dialogs/LoginSocialRegisterDialog/index.tsx b/src/containers/dialogs/LoginSocialRegisterDialog/index.tsx
index 5964f94d..64789120 100644
--- a/src/containers/dialogs/LoginSocialRegisterDialog/index.tsx
+++ b/src/containers/dialogs/LoginSocialRegisterDialog/index.tsx
@@ -6,7 +6,7 @@ import { Padder } from '~/components/containers/Padder';
 import { DialogTitle } from '~/components/dialogs/DialogTitle';
 import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { selectAuthRegisterSocial } from '~/redux/auth/selectors';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { useCloseOnEscape } from '~/utils/hooks';
diff --git a/src/containers/dialogs/LoginSocialRegisterDialog/styles.scss b/src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/LoginSocialRegisterDialog/styles.scss
rename to src/containers/dialogs/LoginSocialRegisterDialog/styles.module.scss
diff --git a/src/containers/dialogs/Modal/index.tsx b/src/containers/dialogs/Modal/index.tsx
index cbb1f69d..dd7b768a 100644
--- a/src/containers/dialogs/Modal/index.tsx
+++ b/src/containers/dialogs/Modal/index.tsx
@@ -1,7 +1,7 @@
 import React, { Attributes, FC, useCallback } from 'react';
 import { connect } from 'react-redux';
 import ReactDOM from 'react-dom';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { IState } from '~/redux/store';
 import * as ACTIONS from '~/redux/modal/actions';
 import { DIALOG_CONTENT } from '~/constants/dialogs';
diff --git a/src/containers/dialogs/Modal/styles.scss b/src/containers/dialogs/Modal/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/Modal/styles.scss
rename to src/containers/dialogs/Modal/styles.module.scss
diff --git a/src/containers/dialogs/PhotoSwipe/index.tsx b/src/containers/dialogs/PhotoSwipe/index.tsx
index ec6bfdba..668c55eb 100644
--- a/src/containers/dialogs/PhotoSwipe/index.tsx
+++ b/src/containers/dialogs/PhotoSwipe/index.tsx
@@ -10,7 +10,7 @@ import { selectModal } from '~/redux/modal/selectors';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import classNames from 'classnames';
 
 const mapStateToProps = (state: IState) => ({
diff --git a/src/containers/dialogs/PhotoSwipe/styles.scss b/src/containers/dialogs/PhotoSwipe/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/PhotoSwipe/styles.scss
rename to src/containers/dialogs/PhotoSwipe/styles.module.scss
diff --git a/src/containers/dialogs/ProfileDialog/styles.scss b/src/containers/dialogs/ProfileDialog/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/ProfileDialog/styles.scss
rename to src/containers/dialogs/ProfileDialog/styles.module.scss
diff --git a/src/containers/dialogs/RestorePasswordDialog/index.tsx b/src/containers/dialogs/RestorePasswordDialog/index.tsx
index 370272bf..28928e43 100644
--- a/src/containers/dialogs/RestorePasswordDialog/index.tsx
+++ b/src/containers/dialogs/RestorePasswordDialog/index.tsx
@@ -5,7 +5,7 @@ import { BetterScrollDialog } from '../BetterScrollDialog';
 import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
 import { Button } from '~/components/input/Button';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import pick from 'ramda/es/pick';
diff --git a/src/containers/dialogs/RestorePasswordDialog/styles.scss b/src/containers/dialogs/RestorePasswordDialog/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/RestorePasswordDialog/styles.scss
rename to src/containers/dialogs/RestorePasswordDialog/styles.module.scss
diff --git a/src/containers/dialogs/RestoreRequestDialog/index.tsx b/src/containers/dialogs/RestoreRequestDialog/index.tsx
index 9e9641e8..bbe036b9 100644
--- a/src/containers/dialogs/RestoreRequestDialog/index.tsx
+++ b/src/containers/dialogs/RestoreRequestDialog/index.tsx
@@ -5,7 +5,7 @@ import { BetterScrollDialog } from '../BetterScrollDialog';
 import { Group } from '~/components/containers/Group';
 import { InputText } from '~/components/input/InputText';
 import { Button } from '~/components/input/Button';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import pick from 'ramda/es/pick';
diff --git a/src/containers/dialogs/RestoreRequestDialog/styles.scss b/src/containers/dialogs/RestoreRequestDialog/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/RestoreRequestDialog/styles.scss
rename to src/containers/dialogs/RestoreRequestDialog/styles.module.scss
diff --git a/src/containers/dialogs/ScrollDialog/index.tsx b/src/containers/dialogs/ScrollDialog/index.tsx
index 431865ed..d045aa1c 100644
--- a/src/containers/dialogs/ScrollDialog/index.tsx
+++ b/src/containers/dialogs/ScrollDialog/index.tsx
@@ -4,7 +4,7 @@ import React, {
 // import { DialogPanel } from '~/components/panels/DialogPanel';
 import classNames from 'classnames';
 import { Scroll } from '~/components/containers/Scroll';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {
   children: React.ReactChild;
diff --git a/src/containers/dialogs/ScrollDialog/styles.scss b/src/containers/dialogs/ScrollDialog/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/ScrollDialog/styles.scss
rename to src/containers/dialogs/ScrollDialog/styles.module.scss
diff --git a/src/containers/dialogs/TestDialog/index.tsx b/src/containers/dialogs/TestDialog/index.tsx
index d8439586..9059d15d 100644
--- a/src/containers/dialogs/TestDialog/index.tsx
+++ b/src/containers/dialogs/TestDialog/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { BetterScrollDialog } from '../BetterScrollDialog';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 
 interface IProps {}
 
diff --git a/src/containers/dialogs/TestDialog/styles.scss b/src/containers/dialogs/TestDialog/styles.module.scss
similarity index 100%
rename from src/containers/dialogs/TestDialog/styles.scss
rename to src/containers/dialogs/TestDialog/styles.module.scss
diff --git a/src/containers/editors/EditorDialogVideo/styles.scss b/src/containers/editors/EditorDialogVideo/styles.module.scss
similarity index 100%
rename from src/containers/editors/EditorDialogVideo/styles.scss
rename to src/containers/editors/EditorDialogVideo/styles.module.scss
diff --git a/src/containers/flow/FlowLayout/index.tsx b/src/containers/flow/FlowLayout/index.tsx
index a694776e..c9dd09b8 100644
--- a/src/containers/flow/FlowLayout/index.tsx
+++ b/src/containers/flow/FlowLayout/index.tsx
@@ -7,7 +7,7 @@ import * as FLOW_ACTIONS from '~/redux/flow/actions';
 import pick from 'ramda/es/pick';
 import { selectUser } from '~/redux/auth/selectors';
 import { FlowHero } from '~/components/flow/FlowHero';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { IState } from '~/redux/store';
 import { FlowStamp } from '~/components/flow/FlowStamp';
 
diff --git a/src/containers/flow/FlowLayout/styles.scss b/src/containers/flow/FlowLayout/styles.module.scss
similarity index 100%
rename from src/containers/flow/FlowLayout/styles.scss
rename to src/containers/flow/FlowLayout/styles.module.scss
diff --git a/src/containers/main/BottomContainer/index.tsx b/src/containers/main/BottomContainer/index.tsx
index 1c551ade..dc93ac3d 100644
--- a/src/containers/main/BottomContainer/index.tsx
+++ b/src/containers/main/BottomContainer/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { PlayerBar } from '~/components/bars/PlayerBar';
 import { SubmitBar } from '~/components/bars/SubmitBar';
 import { selectUser } from '~/redux/auth/selectors';
diff --git a/src/containers/main/BottomContainer/styles.scss b/src/containers/main/BottomContainer/styles.module.scss
similarity index 100%
rename from src/containers/main/BottomContainer/styles.scss
rename to src/containers/main/BottomContainer/styles.module.scss
diff --git a/src/containers/main/MainLayout/index.tsx b/src/containers/main/MainLayout/index.tsx
index 08bef189..36c83871 100644
--- a/src/containers/main/MainLayout/index.tsx
+++ b/src/containers/main/MainLayout/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Header } from '~/components/main/Header';
 
 export const MainLayout = ({ children }) => (
diff --git a/src/containers/main/MainLayout/styles.scss b/src/containers/main/MainLayout/styles.module.scss
similarity index 100%
rename from src/containers/main/MainLayout/styles.scss
rename to src/containers/main/MainLayout/styles.module.scss
diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx
index e4296445..948879d0 100644
--- a/src/containers/node/BorisLayout/index.tsx
+++ b/src/containers/node/BorisLayout/index.tsx
@@ -4,7 +4,7 @@ import { selectNode } from '~/redux/node/selectors';
 import { selectUser } from '~/redux/auth/selectors';
 import { connect } from 'react-redux';
 import { NodeComments } from '~/components/node/NodeComments';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import boris from '~/sprites/boris_robot.svg';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
diff --git a/src/containers/node/BorisLayout/styles.scss b/src/containers/node/BorisLayout/styles.module.scss
similarity index 100%
rename from src/containers/node/BorisLayout/styles.scss
rename to src/containers/node/BorisLayout/styles.module.scss
diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx
index a829eeab..88c762ba 100644
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@@ -22,7 +22,7 @@ import { Sticky } from '~/components/containers/Sticky';
 import { Footer } from '~/components/main/Footer';
 import { Link } from 'react-router-dom';
 
-import * as styles from './styles.scss';
+import styles from './styles.module.scss';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import { IState } from '~/redux/store';
diff --git a/src/containers/node/NodeLayout/styles.scss b/src/containers/node/NodeLayout/styles.module.scss
similarity index 100%
rename from src/containers/node/NodeLayout/styles.scss
rename to src/containers/node/NodeLayout/styles.module.scss
diff --git a/src/containers/pages/ErrorNotFound/index.tsx b/src/containers/pages/ErrorNotFound/index.tsx
index b42dfe85..ed0976c6 100644
--- a/src/containers/pages/ErrorNotFound/index.tsx
+++ b/src/containers/pages/ErrorNotFound/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { createPortal } from 'react-dom';
 import { GodRays } from '~/components/main/GodRays';
 
diff --git a/src/containers/pages/ErrorNotFound/styles.scss b/src/containers/pages/ErrorNotFound/styles.module.scss
similarity index 100%
rename from src/containers/pages/ErrorNotFound/styles.scss
rename to src/containers/pages/ErrorNotFound/styles.module.scss
diff --git a/src/containers/profile/ProfileAvatar/index.tsx b/src/containers/profile/ProfileAvatar/index.tsx
index cc6a99e1..46db7d6f 100644
--- a/src/containers/profile/ProfileAvatar/index.tsx
+++ b/src/containers/profile/ProfileAvatar/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
-import styles from "./styles.scss";
+import styles from "./styles.module.scss";
 import { connect } from "react-redux";
 import { getURL } from "~/utils/dom";
 import pick from "ramda/es/pick";
diff --git a/src/containers/profile/ProfileAvatar/styles.scss b/src/containers/profile/ProfileAvatar/styles.module.scss
similarity index 100%
rename from src/containers/profile/ProfileAvatar/styles.scss
rename to src/containers/profile/ProfileAvatar/styles.module.scss
diff --git a/src/containers/profile/ProfileInfo/index.tsx b/src/containers/profile/ProfileInfo/index.tsx
index f70c7c70..f5739f12 100644
--- a/src/containers/profile/ProfileInfo/index.tsx
+++ b/src/containers/profile/ProfileInfo/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react';
 import { IUser } from '~/redux/auth/types';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { Group } from '~/components/containers/Group';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { getPrettyDate } from '~/utils/dom';
diff --git a/src/containers/profile/ProfileInfo/styles.scss b/src/containers/profile/ProfileInfo/styles.module.scss
similarity index 100%
rename from src/containers/profile/ProfileInfo/styles.scss
rename to src/containers/profile/ProfileInfo/styles.module.scss
diff --git a/src/containers/profile/ProfileLayout/index.tsx b/src/containers/profile/ProfileLayout/index.tsx
index ad46ed81..c95bacba 100644
--- a/src/containers/profile/ProfileLayout/index.tsx
+++ b/src/containers/profile/ProfileLayout/index.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useState } from 'react';
 import { useRouteMatch, withRouter, RouteComponentProps } from 'react-router';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { Grid } from '~/components/containers/Grid';
 import { CommentForm } from '~/components/node/CommentForm';
diff --git a/src/containers/profile/ProfileLayout/styles.scss b/src/containers/profile/ProfileLayout/styles.module.scss
similarity index 100%
rename from src/containers/profile/ProfileLayout/styles.scss
rename to src/containers/profile/ProfileLayout/styles.module.scss
diff --git a/src/containers/profile/ProfileLoader/index.tsx b/src/containers/profile/ProfileLoader/index.tsx
index 0f55afe3..d7839ffc 100644
--- a/src/containers/profile/ProfileLoader/index.tsx
+++ b/src/containers/profile/ProfileLoader/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 
 interface IProps {}
diff --git a/src/containers/profile/ProfileLoader/styles.scss b/src/containers/profile/ProfileLoader/styles.module.scss
similarity index 100%
rename from src/containers/profile/ProfileLoader/styles.scss
rename to src/containers/profile/ProfileLoader/styles.module.scss
diff --git a/src/containers/profile/ProfileMessages/index.tsx b/src/containers/profile/ProfileMessages/index.tsx
index 0963a10f..5e601e68 100644
--- a/src/containers/profile/ProfileMessages/index.tsx
+++ b/src/containers/profile/ProfileMessages/index.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { connect } from 'react-redux';
 import { selectAuthProfile, selectAuthUser } from '~/redux/auth/selectors';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import * as AUTH_ACTIONS from '~/redux/messages/actions';
 import { Message } from '~/components/profile/Message';
 import pick from 'ramda/es/pick';
diff --git a/src/containers/profile/ProfileMessages/styles.scss b/src/containers/profile/ProfileMessages/styles.module.scss
similarity index 100%
rename from src/containers/profile/ProfileMessages/styles.scss
rename to src/containers/profile/ProfileMessages/styles.module.scss
diff --git a/src/containers/profile/ProfilePage/index.tsx b/src/containers/profile/ProfilePage/index.tsx
index 4ff79d1d..b205f4f0 100644
--- a/src/containers/profile/ProfilePage/index.tsx
+++ b/src/containers/profile/ProfilePage/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useEffect } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { ProfilePageLeft } from '../ProfilePageLeft';
 import { Switch, Route, RouteComponentProps } from 'react-router';
 import { IState } from '~/redux/store';
diff --git a/src/containers/profile/ProfilePage/styles.scss b/src/containers/profile/ProfilePage/styles.module.scss
similarity index 100%
rename from src/containers/profile/ProfilePage/styles.scss
rename to src/containers/profile/ProfilePage/styles.module.scss
diff --git a/src/containers/profile/ProfilePageLeft/index.tsx b/src/containers/profile/ProfilePageLeft/index.tsx
index 9c31c079..dd4fdb58 100644
--- a/src/containers/profile/ProfilePageLeft/index.tsx
+++ b/src/containers/profile/ProfilePageLeft/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import { IAuthState } from '~/redux/auth/types';
 import { getURL } from '~/utils/dom';
 import { PRESETS, URLS } from '~/constants/urls';
diff --git a/src/containers/profile/ProfilePageLeft/styles.scss b/src/containers/profile/ProfilePageLeft/styles.module.scss
similarity index 100%
rename from src/containers/profile/ProfilePageLeft/styles.scss
rename to src/containers/profile/ProfilePageLeft/styles.module.scss
diff --git a/src/containers/profile/ProfileTabs/index.tsx b/src/containers/profile/ProfileTabs/index.tsx
index 48b78981..4fe97bef 100644
--- a/src/containers/profile/ProfileTabs/index.tsx
+++ b/src/containers/profile/ProfileTabs/index.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import styles from './styles.scss';
+import styles from './styles.module.scss';
 import classNames from 'classnames';
 
 interface IProps {
diff --git a/src/containers/profile/ProfileTabs/styles.scss b/src/containers/profile/ProfileTabs/styles.module.scss
similarity index 100%
rename from src/containers/profile/ProfileTabs/styles.scss
rename to src/containers/profile/ProfileTabs/styles.module.scss
diff --git a/src/styles/inputs.scss b/src/styles/common/inputs.module.scss
similarity index 100%
rename from src/styles/inputs.scss
rename to src/styles/common/inputs.module.scss