Merge branch 'feature/8-image-preloader' into develop

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';

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';

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}>

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';

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;

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 {}
 

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';

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';

src/containers/dialogs/Modal/styles.module.scss

@@ -1,6 +1,6 @@
 .fixed {
   position: fixed;
-  z-index: 10;
+  z-index: 30;
   top: 0;
   left: 0;
   width: 100%;

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) => ({

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';

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';

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;

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 {}
 

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';
 

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';

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 }) => (

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';

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';

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';
 

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";

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';

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';

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 {}

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';

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';

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';

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 {

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;