From dfb66e3742b309542e0217c0e42a362ca0781c52 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 27 Oct 2020 15:05:42 +0700
Subject: [PATCH 01/14] made proof-of-concept for image previewing

---
 .../node/NodeImageSlideBlock/index.tsx        | 30 +++++++++++++------
 .../node/NodeImageSlideBlock/styles.scss      |  1 -
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 3f67b153..3da8172d 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -77,8 +77,8 @@ const NodeImageSlideBlock: FC<IProps> = ({
   ]);
 
   // update outside hooks
-  useEffect(() => updateLayout(), [loaded, height, images]);
-  useEffect(() => updateSizes(), [refs, current, loaded, images]);
+  useEffect(updateLayout, [loaded, height, images]);
+  useEffect(updateSizes, [refs, current, loaded, images]);
 
   useEffect(() => {
     const timeout = setTimeout(updateLayout, 300);
@@ -300,14 +300,26 @@ const NodeImageSlideBlock: FC<IProps> = ({
                 ref={setRef(index)}
                 key={node.updated_at + file.id}
               >
-                <img
+                {
+                  // check if metadata is available, then show loader
+                }
+                <svg
+                  viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
                   className={styles.image}
-                  src={getURL(file, PRESETS['1600'])}
-                  alt=""
-                  key={file.id}
-                  onLoad={onImageLoad(index)}
-                  style={{ maxHeight: max_height }}
-                />
+                  style={{ maxHeight: max_height, width: file.metadata.width }}
+                >
+                  <rect fill="blue" width="100%" height="100%" />
+                </svg>
+                {
+                  <img
+                    className={styles.image}
+                    src={getURL(file, PRESETS['1600'])}
+                    alt=""
+                    key={file.id}
+                    onLoad={onImageLoad(index)}
+                    style={{ maxHeight: max_height, position: 'absolute', width: 100, top: '50%' }}
+                  />
+                }
               </div>
             ))}
         </div>
diff --git a/src/components/node/NodeImageSlideBlock/styles.scss b/src/components/node/NodeImageSlideBlock/styles.scss
index c1d00973..e821d329 100644
--- a/src/components/node/NodeImageSlideBlock/styles.scss
+++ b/src/components/node/NodeImageSlideBlock/styles.scss
@@ -155,7 +155,6 @@
   align-items: center;
   justify-content: center;
   background: $content_bg;
-  z-index: 0;
   pointer-events: none;
   touch-action: none;
   transition: opacity 2s;

From 51873064011c7aa0c15319b8a89930652e502601 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 27 Oct 2020 16:35:45 +0700
Subject: [PATCH 02/14] added blurred image for preloading

---
 .../node/NodeImageSlideBlock/index.tsx        | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 3da8172d..6ba8c19b 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -306,9 +306,28 @@ const NodeImageSlideBlock: FC<IProps> = ({
                 <svg
                   viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
                   className={styles.image}
-                  style={{ maxHeight: max_height, width: file.metadata.width }}
+                  style={{
+                    maxHeight: max_height,
+                    // height: file.metadata.height,
+                    width: file.metadata.width,
+                  }}
                 >
-                  <rect fill="blue" width="100%" height="100%" />
+                  <defs>
+                    <filter id="f1" x="0" y="0">
+                      <feGaussianBlur stdDeviation="10" />
+                      <feColorMatrix in="a1" type="saturate" values="0.5" />
+                      <feColorMatrix in="a1" type="brightness" values="2" />
+                    </filter>
+                  </defs>
+
+                  <rect fill="#333333" width="100%" height="100%" />
+
+                  <image
+                    xlinkHref={getURL(file, PRESETS['300'])}
+                    width="100%"
+                    height="100%"
+                    filter="url(#f1)"
+                  />
                 </svg>
                 {
                   <img

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 03/14] 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 04/14] 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 05/14] 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 06/14] 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 07/14] 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 08/14] 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 09/14] 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 10/14] 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 11/14] 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 12/14] 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 13/14] 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

From 145901d72cf7b38bfd558fdf4fcfb923423b4977 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 6 Nov 2020 22:16:32 +0700
Subject: [PATCH 14/14] added image preloader

---
 .../node/NodeImageSlideBlock/index.tsx        | 57 ++++++++++++-------
 .../NodeImageSlideBlock/styles.module.scss    | 39 ++++++++-----
 2 files changed, 61 insertions(+), 35 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 44e97b93..aafb654c 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -272,7 +272,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
       <div className={classNames(styles.cutter, { [styles.is_loading]: is_loading })} ref={wrap}>
         <div
           className={classNames(styles.placeholder, {
-            [styles.is_loading]: is_loading || !loaded[current],
+            [styles.is_loading]: is_loading,
           })}
         >
           <div>
@@ -295,32 +295,46 @@ const NodeImageSlideBlock: FC<IProps> = ({
             images.map((file, index) => (
               <div
                 className={classNames(styles.image_wrap, {
-                  is_active: index === current && loaded[index],
+                  [styles.is_active]: index === current,
                 })}
                 ref={setRef(index)}
                 key={node.updated_at + file.id}
               >
-                {
-                  // check if metadata is available, then show loader
-                }
                 <svg
                   viewBox={`0 0 ${file.metadata.width} ${file.metadata.height}`}
-                  className={styles.image}
+                  className={classNames(styles.preview, { [styles.is_loaded]: loaded[index] })}
                   style={{
                     maxHeight: max_height,
-                    // height: file.metadata.height,
-                    width: file.metadata.width,
+                    width: '100%',
                   }}
                 >
                   <defs>
                     <filter id="f1" x="0" y="0">
-                      <feGaussianBlur stdDeviation="10" />
-                      <feColorMatrix in="a1" type="saturate" values="0.5" />
-                      <feColorMatrix in="a1" type="brightness" values="2" />
+                      <feBlend
+                        mode="multiply"
+                        x="0%"
+                        y="0%"
+                        width="100%"
+                        height="100%"
+                        in="SourceGraphic"
+                        in2="SourceGraphic"
+                        result="blend"
+                      />
+
+                      <feGaussianBlur
+                        stdDeviation="15 15"
+                        x="0%"
+                        y="0%"
+                        width="100%"
+                        height="100%"
+                        in="blend"
+                        edgeMode="none"
+                        result="blur2"
+                      />
                     </filter>
                   </defs>
 
-                  <rect fill="#333333" width="100%" height="100%" />
+                  <rect fill="#242222" width="100%" height="100%" stroke="none" rx="8" ry="8" />
 
                   <image
                     xlinkHref={getURL(file, PRESETS['300'])}
@@ -329,16 +343,15 @@ const NodeImageSlideBlock: FC<IProps> = ({
                     filter="url(#f1)"
                   />
                 </svg>
-                {
-                  <img
-                    className={styles.image}
-                    src={getURL(file, PRESETS['1600'])}
-                    alt=""
-                    key={file.id}
-                    onLoad={onImageLoad(index)}
-                    style={{ maxHeight: max_height, position: 'absolute', width: 100, top: '50%' }}
-                  />
-                }
+
+                <img
+                  className={classNames(styles.image, { [styles.is_loaded]: loaded[index] })}
+                  src={getURL(file, PRESETS['1600'])}
+                  alt=""
+                  key={file.id}
+                  onLoad={onImageLoad(index)}
+                  style={{ maxHeight: max_height }}
+                />
               </div>
             ))}
         </div>
diff --git a/src/components/node/NodeImageSlideBlock/styles.module.scss b/src/components/node/NodeImageSlideBlock/styles.module.scss
index e821d329..ee38720f 100644
--- a/src/components/node/NodeImageSlideBlock/styles.module.scss
+++ b/src/components/node/NodeImageSlideBlock/styles.module.scss
@@ -39,18 +39,6 @@
     transition: none;
   }
 
-  .image {
-    max-width: 100%;
-    opacity: 1;
-    border-radius: $radius;
-    box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px,
-      transparentize($color: #000000, $amount: 0.6) 0 2px 5px;
-
-    @include tablet {
-      border-radius: 0;
-    }
-  }
-
   &.is_dragging {
     transition: none;
   }
@@ -67,7 +55,7 @@
   padding: 0 $gap / 2;
   position: relative;
 
-  &:global(.is_active) {
+  &.is_active {
     opacity: 1;
   }
 
@@ -170,3 +158,28 @@
     fill: white;
   }
 }
+
+.image, .preview {
+  max-width: 100%;
+  border-radius: $radius;
+
+  @include tablet {
+    border-radius: 0;
+  }
+}
+
+.image {
+  position: absolute;
+  opacity: 0;
+
+  &.is_loaded {
+    opacity: 1;
+    position: static;
+  }
+}
+
+.preview {
+  &.is_loaded {
+    display: none;
+  }
+}