Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/redux/uploads/sagas.ts

src/components/editors/ImageEditor/index.tsx

@@ -1,8 +1,4 @@
-import React, {
-  FC,
-  ChangeEventHandler,
-  DragEventHandler
-} from 'react';
+import React, { FC, ChangeEventHandler, DragEventHandler } from 'react';
 import { connect } from 'react-redux';
 import { INode } from '~/redux/types';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
@@ -12,25 +8,26 @@ import { IUploadStatus } from '~/redux/uploads/reducer';
 
 const mapStateToProps = selectUploads;
 const mapDispatchToProps = {
-  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles
+  uploadUploadFiles: UPLOAD_ACTIONS.uploadUploadFiles,
 };
 
 type IProps = ReturnType<typeof mapStateToProps> &
   typeof mapDispatchToProps & {
-  data: INode;
-  pending_files: IUploadStatus[];
-  setData: (val: INode) => void;
-  onFileMove: (o: number, n: number) => void;
-  onInputChange: ChangeEventHandler<HTMLInputElement>;
-  onDrop: DragEventHandler<HTMLFormElement>;
-};
+    data: INode;
+    pending_files: IUploadStatus[];
+
+    setData: (val: INode) => void;
+    onFileMove: (o: number, n: number) => void;
+    onInputChange: ChangeEventHandler<HTMLInputElement>;
+    onDrop: DragEventHandler<HTMLFormElement>;
+  };
 
 const ImageEditorUnconnected: FC<IProps> = ({
   data,
   onFileMove,
   onInputChange,
   onDrop,
-  pending_files
+  pending_files,
 }) => (
   <ImageGrid
     onFileMove={onFileMove}

src/components/flow/Cell/index.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
+import { TEXTS } from '~/constants/texts';
 
 import classNames = require('classnames');
 
@@ -9,6 +10,7 @@ interface IProps {
   title?: string;
   is_hero?: boolean;
   is_stamp?: boolean;
+  is_text?: boolean;
 }
 
 const Cell: FC<IProps> = ({
@@ -16,14 +18,22 @@ const Cell: FC<IProps> = ({
   height = 1,
   title,
   is_hero,
+  is_text = (Math.random() > 0.8),
 }) => (
   <div
-    className={classNames(styles.cell, `vert-${height}`, `hor-${width}`)}
+    className={
+      classNames(
+        styles.cell, 
+        `vert-${height}`,
+        `hor-${width}`,
+        { is_text },
+      )}
     style={{
       // gridRowEnd: `span ${height}`,
       // gridColumnEnd: `span ${width}`,
     }}
   >
+    {is_text && <div className={styles.text}>{TEXTS.LOREM_IPSUM}</div>}
     { title && <div className={styles.title}>{title}</div> }
   </div>
 );

src/components/flow/Cell/styles.scss

@@ -6,6 +6,7 @@
   background: $cell_bg;
   border-radius: $cell_radius;
   position: relative;
+  overflow: hidden;
 
   &:global(.is_hero) {
     .title {
@@ -16,6 +17,16 @@
   @include outer_shadow();
 }
 
+.text {
+  line-height: 1.6em;
+  font-size: 18px;
+  font: $font_18_regular;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: $gap;
+}
+
 .title {
   font: $font_cell_title;
 
@@ -49,4 +60,10 @@
   .hor-2 {
     grid-column-end: span 2;
   }
+
+  .is_text {
+    background: none;
+    padding: 10px;
+    box-shadow: inset #444 0 0 0 1px;
+  }
 }

src/components/flow/TestGrid/index.tsx

@@ -6,31 +6,10 @@ import * as styles from './styles.scss';
 
 export const TestGrid = () => (
   <div>
-    <div
-      style={{
-        // gridRow: "1 / 2",
-        // gridColumn: "1 / -1",
-        background: '#222222',
-        borderRadius: 6,
-        height: 300,
-        marginBottom: 4,
-        display: 'flex',
-      }}
-    >
-      HERO
-    </div>
-
     <div className={styles.grid_test}>
-      <div
-        style={{
-          gridRow: '1 / 3',
-          gridColumn: '-2 / -1',
-          background: '#090909',
-          borderRadius: 4,
-        }}
-      >
-        STAMP
-      </div>
+      <div className={styles.hero}>HERO</div>
+
+      <div className={styles.stamp}>STAMP</div>
 
       {range(1, 20).map(el => (
         <Cell

src/components/flow/TestGrid/styles.scss

@@ -17,3 +17,32 @@ $cols: $content_width / $cell;
 .pad_last {
   grid-column-end: $cols + 1;
 }
+
+.hero {
+  grid-row-start: 0;
+  grid-row-end: span 2;
+  grid-column-start: 0;
+  grid-column-end: span 4;
+  // gridRow: "1 / 2",
+  // gridColumn: "1 / -1",
+  background: #222222;
+  border-radius: $radius;
+  // height: 33vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_24_semibold;
+}
+
+.stamp {
+  // grid-row: -1 / 3;
+  grid-row-end: span 3;
+  grid-column: -2 / -1;
+  background: #090909;
+  border-radius: $radius;
+  padding: $gap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_24_semibold;
+}

src/components/main/Header/index.tsx

@@ -25,7 +25,7 @@ const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
   const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
 
   return (
-    <div className="default_container head_container">
+    <div>
       <div className={style.container}>
         <Logo />
 

src/components/main/Header/style.scss

@@ -4,6 +4,7 @@
   justify-content: flex-end;
   font-weight: 500;
   height: 96px;
+  margin-top: -20px;
 }
 
 .spacer {

src/components/upload/ImageUpload/index.tsx

@@ -12,15 +12,21 @@ interface IProps {
 }
 
 const ImageUpload: FC<IProps> = ({
-  thumb,
-  id,
-  progress,
-  is_uploading,
+ thumb, id, progress, is_uploading,
 }) => (
   <div className={styles.wrap}>
     <div className={classNames(styles.thumb_wrap, { is_uploading })}>
-      {thumb && <div className={styles.thumb} style={{ background: `url("${thumb}")` }}>{id}</div>}
-      {is_uploading && <div className={styles.progress}><ArcProgress size={72} progress={progress} /></div>}
+      {thumb && (
+        <div
+          className={styles.thumb}
+          style={{ backgroundImage: `url("${process.env.API_HOST}${thumb}")` }}
+        />
+      )}
+      {is_uploading && (
+        <div className={styles.progress}>
+          <ArcProgress size={72} progress={progress} />
+        </div>
+      )}
     </div>
   </div>
 );

src/components/upload/ImageUpload/styles.scss

@@ -32,7 +32,7 @@
   background: no-repeat 50% 50%;
   background-size: cover;
   opacity: 1;
-  filter: saturate(0);
+  // filter: saturate(0);
 }
 
 .progress {