Merge pull request #26 from muerwre/15-use-cra-or-nextjs

15 use cra or nextjs

src/components/bars/PlayerBar/index.tsx

@@ -3,11 +3,11 @@ import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { PLAYER_STATES } from '~/redux/player/constants';
 import { connect } from 'react-redux';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { selectPlayer } from '~/redux/player/selectors';
 import * as PLAYER_ACTIONS from '~/redux/player/actions';
 import { IPlayerProgress, Player } from '~/utils/player';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { IFile } from '~/redux/types';
 
 const mapStateToProps = state => pick(['status', 'file'], selectPlayer(state));

src/components/bars/PlayerBar/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .place {
   position: relative;
   height: $bar_height;

src/components/bars/SubmitBar/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: absolute;
   right: -($bar_height + $gap);

src/components/boris/BorisStatsBackend/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   ul {
     font: $font_12_regular;

src/components/boris/BorisStatsGit/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .stats {
   &__title {
     font: $font_12_semibold;

src/components/boris/BorisStatsGitCard/index.tsx

@@ -4,7 +4,7 @@ import styles from './styles.module.scss';
 import { getPrettyDate } from '~/utils/dom';
 
 interface IProps {
-  data: IStatGitRow;
+  data: Partial<IStatGitRow>;
 }
 
 const BorisStatsGitCard: FC<IProps> = ({ data: { timestamp, subject } }) => {

src/components/boris/BorisStatsGitCard/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $gap / 2 0;
   border-bottom: 1px solid #333333;

src/components/comment/Comment/index.tsx

@@ -12,7 +12,7 @@ import * as MODAL_ACTIONS from '~/redux/modal/actions';
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
   is_loading?: boolean;
-  comment_group?: ICommentGroup;
+  comment_group: ICommentGroup;
   comment_data: INodeState['comment_data'];
   is_same?: boolean;
   can_edit?: boolean;
@@ -58,7 +58,7 @@ const Comment: FC<IProps> = memo(
               <CommentContent
                 comment={comment}
                 key={comment.id}
-                can_edit={can_edit}
+                can_edit={!!can_edit}
                 onDelete={onDelete}
                 onEdit={onEdit}
                 modalShowPhotoswipe={modalShowPhotoswipe}

src/components/comment/Comment/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes appear {
   from {
     opacity: 0;

src/components/comment/CommentContent/index.tsx

@@ -1,12 +1,12 @@
-import React, { FC, useMemo, memo, createElement, useCallback, useState } from 'react';
+import React, { FC, useMemo, memo, createElement, useCallback, Fragment } from 'react';
 import { IComment, IFile } from '~/redux/types';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
 import { Group } from '~/components/containers/Group';
 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';
+import { assocPath } from 'ramda';
+import { append } from 'ramda';
 import reduce from 'ramda/es/reduce';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import classnames from 'classnames';
@@ -84,7 +84,7 @@ const CommentContent: FC<IProps> = memo(
         )}
 
         {groupped.audio && groupped.audio.length > 0 && (
-          <>
+          <Fragment>
             {groupped.audio.map(file => (
               <div className={classnames(styles.block, styles.block_audio)} key={file.id}>
                 {menu}
@@ -94,7 +94,7 @@ const CommentContent: FC<IProps> = memo(
                 <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
               </div>
             ))}
-          </>
+          </Fragment>
         )}
       </div>
     );

src/components/comment/CommentContent/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @import 'flexbin/flexbin.scss';
 
 .wrap {

src/components/comment/CommentEmbedBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .embed {
   padding: 0 $gap;
   height: $comment_height;

src/components/comment/CommentForm/index.tsx

@@ -16,7 +16,7 @@ import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { IState } from '~/redux/store';
 import { getFileType } from '~/utils/uploader';
-import { getRandomPhrase } from '~/constants/phrases';
+import { useRandomPhrase } from '~/constants/phrases';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
 import { CommentFormAttachButtons } from '~/components/comment/CommentFormButtons';
@@ -153,7 +153,7 @@ const CommentFormUnconnected: FC<IProps> = memo(
       nodeCancelCommentEdit(id);
     }, [nodeCancelCommentEdit, comment.id]);
 
-    const placeholder = getRandomPhrase('SIMPLE');
+    const placeholder = useRandomPhrase('SIMPLE');
 
     const clearError = useCallback(() => nodeSetCommentData(id, { error: '' }), [
       id,

src/components/comment/CommentForm/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: column;

src/components/comment/CommentMenu/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: absolute;
   right: 0;

src/components/comment/CommentTextBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .text {
   padding: 0 $gap;
   font-weight: 300;

src/components/containers/BlurWrapper/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .blur {
   padding-top: $header_height + 2px;
   display: flex;

src/components/containers/Card/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .card {
   background-color: $card_bg;
   border-radius: $panel_radius;

src/components/containers/CellGrid/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   children: any;

src/components/containers/CellGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   display: grid;
   grid-auto-rows: 1fr;

src/components/containers/CommentWrapper/index.tsx

@@ -5,7 +5,7 @@ import styles from './styles.module.scss';
 import { Card } from '../Card';
 import { IUser } from '~/redux/auth/types';
 import { getURL } from '~/utils/dom';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { PRESETS } from '~/constants/urls';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {

src/components/containers/CommentWrapper/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: $comment_bg;
   min-height: $comment_height;

src/components/containers/CoverBackdrop/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .cover {
   position: absolute;
   width: 100%;
@@ -20,7 +22,7 @@
     height: 100%;
     top: 0;
     left: 0;
-    background: url('~/sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5);
+    background: url('../../../sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5);
   }
 
   img {

src/components/containers/Filler/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .filler {
   flex: 1;
 }

src/components/containers/Grid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   display: grid;
   grid-template-columns: 1fr;

src/components/containers/Group/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .group {
   display: flex;
   flex: 1;

src/components/containers/InfiniteScroll/styles.module.scss

@@ -1,2 +1,4 @@
+@import "src/styles/variables";
+
 .more {
 }

src/components/containers/Padder/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   padding?: number;

src/components/containers/Padder/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .padder {
   padding: $gap;
 

src/components/containers/PageCover/index.tsx

@@ -3,7 +3,7 @@ import styles from './styles.module.scss';
 import { createPortal } from 'react-dom';
 import { selectNode } from '~/redux/node/selectors';
 import { connect } from 'react-redux';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 

src/components/containers/PageCover/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes fadeIn {
   0% {
     opacity: 0;
@@ -27,7 +29,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: url(~/sprites/stripes.svg) transparentize($content_bg, 0.2);
+    background: url(../../../sprites/stripes.svg) transparentize($content_bg, 0.2);
   }
 
   @include tablet {

src/components/containers/Panel/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;

src/components/containers/Panel/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .panel {
   padding: $gap;
   min-height: $input_height + $gap;

src/components/containers/Scroll/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   min-height: 50px;
 }

src/components/containers/Sticky/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactComponentElement, DetailsHTMLAttributes, useEffect, useRef } from 'react';
+import React, { DetailsHTMLAttributes, FC, useEffect, useRef } from 'react';
 import styles from './styles.module.scss';
 import StickySidebar from 'sticky-sidebar';
 import classnames from 'classnames';

src/components/containers/Sticky/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   height: 100%;
   width: 100%;

src/components/containers/TagField/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: flex-start;

src/components/dialogs/DialogTitle/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .title {
   margin: $gap 0 $gap * 4 !important;
   text-transform: uppercase;

src/components/editors/AudioEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding-bottom: $upload_button_height + $gap;
   min-height: 200px;

src/components/editors/AudioGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .helper {
   opacity: 0.5;
   z-index: 10 !important;

src/components/editors/EditorPanel/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .panel {
   height: 72px;
   position: absolute;

src/components/editors/EditorUploadButton/index.tsx

@@ -5,8 +5,8 @@ import { IFileWithUUID, INode, IFile } from '~/redux/types';
 import uuid from 'uuid4';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
-import assocPath from 'ramda/es/assocPath';
-import append from 'ramda/es/append';
+import { assocPath } from 'ramda';
+import { append } from 'ramda';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { connect } from 'react-redux';
 import { NODE_SETTINGS } from '~/redux/node/constants';

src/components/editors/EditorUploadButton/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
 

src/components/editors/EditorUploadCoverButton/index.tsx

@@ -3,7 +3,7 @@ import { IFileWithUUID } from '~/redux/types';
 import uuid from 'uuid4';
 import styles from './styles.module.scss';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { connect } from 'react-redux';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';

src/components/editors/EditorUploadCoverButton/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
 

src/components/editors/ImageEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   min-height: 200px;
   padding-bottom: $upload_button_height + $gap;

src/components/editors/ImageGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .helper {
   opacity: 0.5;
   z-index: 10 !important;

src/components/editors/SortableAudioGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   box-sizing: border-box;
 

src/components/editors/SortableAudioGridItem/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   z-index: 1;
   box-sizing: border-box;

src/components/editors/SortableImageGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   box-sizing: border-box;
 

src/components/editors/SortableImageGridItem/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   z-index: 1;
   box-sizing: border-box;

src/components/editors/TextEditor/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react';
 import { INode } from '~/redux/types';
 import styles from './styles.module.scss';
 import { Textarea } from '~/components/input/Textarea';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 
 interface IProps {
   data: INode;

src/components/editors/TextEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   & > div {
     padding-bottom: 64px;

src/components/editors/VideoEditor/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useMemo } from 'react';
 import { INode } from '~/redux/types';
 import styles from './styles.module.scss';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { InputText } from '~/components/input/InputText';
 import classnames from 'classnames';
 import { getYoutubeThumb } from '~/utils/dom';

src/components/editors/VideoEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .preview {
   padding-top: 56.25%;
   position: relative;

src/components/flow/Cell/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .cell {
   padding: $gap / 4;
   box-sizing: border-box;
@@ -40,7 +42,7 @@
 .text {
   font: $font_18_regular;
   line-height: 22px;
-  background: transparentize($color: $content_bg, $amount: 0.3) url('~/sprites/stripes.svg');
+  background: transparentize($color: $content_bg, $amount: 0.3) url('../../../sprites/stripes.svg');
   padding: $gap;
   box-sizing: border-box;
   border-radius: $radius;

src/components/flow/FlowGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, Fragment } from 'react';
 import { Cell } from '~/components/flow/Cell';
 
 import { IFlowState } from '~/redux/flow/reducer';
@@ -14,7 +14,7 @@ type IProps = Partial<IFlowState> & {
 };
 
 export const FlowGrid: FC<IProps> = ({ user, nodes, onSelect, onChangeCellView }) => (
-  <>
+  <Fragment>
     {nodes.map(node => (
       <Cell
         key={node.id}
@@ -24,5 +24,5 @@ export const FlowGrid: FC<IProps> = ({ user, nodes, onSelect, onChangeCellView }
         onChangeCellView={onChangeCellView}
       />
     ))}
-  </>
+  </Fragment>
 );

src/components/flow/FlowHero/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   width: 100%;
   height: 100%;
@@ -13,7 +15,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: url('~/sprites/stripes.svg') rgba(0, 0, 0, 0.3);
+    background: url('../../../sprites/stripes.svg') rgba(0, 0, 0, 0.3);
     z-index: 4;
     pointer-events: none;
     box-shadow: inset transparentize($color: white, $amount: 0.85) 0 1px;

src/components/flow/FlowRecentItem/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   display: flex;
   align-items: center;

src/components/flow/FlowSearchResults/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   flex: 1;
   overflow: auto;

src/components/flow/FlowStamp/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: column;

src/components/flow/HeroPlaceholder/style.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   height: 280px;
   width: 100%;

src/components/input/ArcProgress/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .icon {
   fill: $red;
   stroke: none;

src/components/input/Button/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes pulse {
   0% {
     opacity: 1;

src/components/input/ButtonGroup/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: row;

src/components/input/Info/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 const style = require('./style.scss');
 

src/components/input/Info/style.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   min-height: $info_height;
   border-radius: $input_radius;

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/common/inputs.module.scss';
+import styles from '~/styles/common/inputs.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IInputTextProps } from '~/redux/types';
 import { LoaderCircle } from '~/components/input/LoaderCircle';

src/components/input/LoaderCircle/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .icon {
   fill: transparentize(black, 0.6);
   stroke: none;

src/components/input/TextInput/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrapper {
   height: $input_height;
   display: flex;

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/common/inputs.module.scss';
+import styles from '~/styles/common/inputs.module.scss';
 import { Icon } from '../Icon';
 
 type IProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {

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

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .footer {
   display: flex;
   flex-direction: row;

src/components/main/Header/index.tsx

@@ -8,15 +8,15 @@ import { Filler } from '~/components/containers/Filler';
 import { selectUser, selectAuthUpdates } from '~/redux/auth/selectors';
 import { Group } from '~/components/containers/Group';
 import { DIALOGS } from '~/redux/modal/constants';
-import pick from 'ramda/es/pick';
-import path from 'ramda/es/path';
+import { pick } from 'ramda';
+import { path } from 'ramda';
 import { UserButton } from '../UserButton';
 import { Notifications } from '../Notifications';
 import { URLS } from '~/constants/urls';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 
-import * as style from './style.scss';
+import styles from './styles.module.scss';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { IState } from '~/redux/store';
@@ -75,24 +75,24 @@ const HeaderUnconnected: FC<IProps> = memo(
     );
 
     return createPortal(
-      <div className={classNames(style.wrap, { [style.is_scrolled]: is_scrolled })}>
-        <div className={style.container}>
+      <div className={classNames(styles.wrap, { [styles.is_scrolled]: is_scrolled })}>
+        <div className={styles.container}>
           <Logo />
 
           <Filler />
 
-          <div className={style.plugs}>
+          <div className={styles.plugs}>
             <Link
-              className={classNames(style.item, { [style.is_active]: pathname === URLS.BASE })}
+              className={classNames(styles.item, { [styles.is_active]: pathname === URLS.BASE })}
               to={URLS.BASE}
             >
               ФЛОУ
             </Link>
 
             <Link
-              className={classNames(style.item, {
-                [style.is_active]: pathname === URLS.BORIS,
-                [style.has_dot]: hasBorisUpdates,
+              className={classNames(styles.item, {
+                [styles.is_active]: pathname === URLS.BORIS,
+                [styles.has_dot]: hasBorisUpdates,
               })}
               to={URLS.BORIS}
             >
@@ -100,7 +100,7 @@ const HeaderUnconnected: FC<IProps> = memo(
             </Link>
 
             {is_user && (
-              <div className={style.item}>
+              <div className={styles.item}>
                 <Notifications />
               </div>
             )}
@@ -111,7 +111,7 @@ const HeaderUnconnected: FC<IProps> = memo(
           )}
 
           {!is_user && (
-            <Group horizontal className={style.user_button} onClick={onLogin}>
+            <Group horizontal className={styles.user_button} onClick={onLogin}>
               <div>ВДОХ</div>
             </Group>
           )}

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

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   height: $header_height;
   z-index: 25;

src/components/main/Logo/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './style.scss';
+import styles from './styles.module.scss';
 import { Link } from 'react-router-dom';
 
 export const Logo = () => (

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

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .logo {
   font: $font_24_bold;
   display: flex;

src/components/main/Notifications/index.tsx

@@ -3,7 +3,7 @@ import { Icon } from '~/components/input/Icon';
 import styles from './styles.module.scss';
 import { connect } from 'react-redux';
 import { selectAuthUpdates, selectAuthUser } from '~/redux/auth/selectors';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import classNames from 'classnames';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { NotificationBubble } from '../../notifications/NotificationBubble';

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

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes ring {
   0% {
     transform: rotate(-10deg);

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

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .pane {
   width: 54px;
   height: 100%;

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

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: relative;
   z-index: 2;

src/components/media/AudioPlayer/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: row;

src/components/node/CommendDeleted/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: center;

src/components/node/ImageSwitcher/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   width: 100%;
   height: 0;

src/components/node/MenuButton/styles.module.scss

@@ -1,3 +1,4 @@
+@import "src/styles/variables";
 
 .button {
   fill: white;

src/components/node/NodeAudioBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: $content_bg;
   border-radius: $radius;

src/components/node/NodeAudioImageBlock/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, useMemo } from 'react';
 import { INode } from '~/redux/types';
 import styles from './styles.module.scss';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import { INodeComponentProps } from '~/redux/node/constants';

src/components/node/NodeAudioImageBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
   padding-bottom: 33vh;
@@ -13,7 +15,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.5) url('~/sprites/dots.svg');
+    background: rgba(0, 0, 0, 0.5) url('../../../sprites/dots.svg');
   }
 }
 

src/components/node/NodeCommentForm/index.tsx

@@ -4,7 +4,7 @@ import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import styles from './styles.module.scss';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
-import assocPath from 'ramda/es/assocPath';
+import { assocPath } from 'ramda';
 import { InputHandler, IFileWithUUID, IFile } from '~/redux/types';
 import { connect } from 'react-redux';
 import * as NODE_ACTIONS from '~/redux/node/actions';

src/components/node/NodeComments/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   & > div {
     margin: 0 0 $gap 0;
@@ -22,7 +24,7 @@
   cursor: pointer;
   transition: all 0.25s;
   user-select: none;
-  background: url('~/sprites/stripes.svg');
+  background: url('../../../sprites/stripes.svg');
   position: relative;
 
   &:hover {

src/components/node/NodeDeletedBadge/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .badge {
   padding: $gap;
   text-align: center;

src/components/node/NodeImageBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding-bottom: $gap * 2;
 

src/components/node/NodeImageBlockPlaceholder/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .placeholder {
   height: 320px;
   background: transparentize(black, 0.8);

src/components/node/NodeImageSlideBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: relative;
 }

src/components/node/NodeNoComments/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   user-select: none;
   overflow: hidden;

src/components/node/NodePanel/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .place {
   // height: 72px;
   position: relative;

src/components/node/NodePanelInner/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @mixin button {
   margin: 0 $gap;
   cursor: pointer;

src/components/node/NodeRelated/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   // padding: $gap;
   //background: transparentize(black, 0.8);

src/components/node/NodeRelatedItem/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   background: lighten($content_bg, 2%) 50% 50% no-repeat;
   padding-bottom: 100%;

src/components/node/NodeTextBlock/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { INode } from '~/redux/types';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { formatTextParagraphs } from '~/utils/dom';
 import styles from './styles.module.scss';
 import { INodeComponentProps } from '~/redux/node/constants';