fixed some styles

src/containers/examples/EditorExample/index.tsx

@@ -2,18 +2,15 @@ import React, { FC } from 'react';
 import { Card } from "~/components/containers/Card";
 import * as styles from './styles.scss';
 import { Group } from "~/components/containers/Group";
-import { Padder } from "~/components/containers/Padder";
 import { CellGrid } from "~/components/containers/CellGrid";
 import { Panel } from "~/components/containers/Panel";
-import { TextInput } from "~/components/input/TextInput";
+import classNames from "classnames";
-import classNames = require("classnames");
 import { Scroll } from "~/components/containers/Scroll";
 import { Tags } from "~/components/node/Tags";
 import { Button } from "~/components/input/Button";
 import { Filler } from "~/components/containers/Filler";
 import { InputText } from "~/components/input/InputText";
-import {Grid} from "~/components/containers/Grid";
+import { Icon } from "~/components/input/Icon";
-import {Icon} from "~/components/input/Icon";
 
 interface IProps {}
 
@@ -52,12 +49,21 @@ const EditorExample: FC<IProps> = () => (
 
           <Panel stretchy>
             <Group>
-              <Card className={styles.feature_card}>ОБОИ ПОСТА</Card>
+              <Card className={styles.feature_card}>
+                <div className={styles.cover} />
+              </Card>
 
-              <Card className={styles.feature_card}>МУЗЫКА</Card>
+              <Card className={styles.feature_card} style={{ justifyContent: 'flex-start', height: 72 }}>
+                <Icon icon="play" size={48} />
+              </Card>
 
               <Card className={styles.feature_card}>
-                <Icon icon="cell-single" />
+                <Group horizontal className={styles.views}>
+                  <Icon icon="cell-single" size={48} />
+                  <Icon icon="cell-double-h" size={48} />
+                  <Icon icon="cell-single" size={48} />
+                  <Icon icon="cell-double-h" size={48} />
+                </Group>                
               </Card>
 
               <Filler />

src/containers/examples/EditorExample/styles.scss

@@ -29,9 +29,6 @@
   flex-direction: column;
 }
 
-.editor_panel {
-}
-
 .editor_image_panel {
   flex: 1;
 }
@@ -47,7 +44,7 @@
 }
 
 .feature_card {
-  height: 120px;
+  // height: 120px;
   background: darken($main_bg_color, 6%);
   color: transparentize(white, 0.5);
   display: flex;
@@ -56,6 +53,16 @@
   text-transform: uppercase;
   font: $font_18_semibold;
   box-shadow: none;
+  padding: 0;
+}
+
+.cover {
+  border-radius: $radius;
+  background: url('http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg');
+  flex: 1;
+  height: 120px;
+  background-size: cover;
+  opacity: 0.3;
 }
 
 .panel_main {
@@ -70,3 +77,7 @@
   flex: 0 0 24px;
   border-radius: $radius;
 }
+
+.views {
+  
+}

src/containers/examples/ImageExample/index.tsx

@@ -1,88 +1,77 @@
-import React, { FC } from 'react';
+import React, { FC } from "react";
 import { Card } from "~/components/containers/Card";
-import * as styles from './styles.scss';
+import * as styles from "./styles.scss";
 import { Group } from "~/components/containers/Group";
 import { Padder } from "~/components/containers/Padder";
-import range from 'ramda/es/range';
+import range from "ramda/es/range";
 import { Comment } from "~/components/node/Comment";
 import { NodePanel } from "~/components/node/NodePanel";
 import { NodeRelated } from "~/components/node/NodeRelated";
 import { Tags } from "~/components/node/Tags";
 import { MenuButton } from "~/components/node/MenuButton";
 import { NodeNoComments } from "~/components/node/NodeNoComments";
+import { InputText } from "~/components/input/InputText";
 
 interface IProps {}
 
 const ImageExample: FC<IProps> = () => (
-    <Card className={styles.node} seamless>
+  <Card className={styles.node} seamless>
-      <div
+    <InputText />
-        className={styles.image_container}
+    <div className={styles.image_container}>
-      >
+      <img
-        <img className={styles.image} src="http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg" />
+        className={styles.image}
-      </div>
+        src="http://37.192.131.144/full/attached/2017/11/f01fdaaea789915284757634baf7cd11.jpg"
+      />
+    </div>
 
-      <NodePanel />
+    <NodePanel />
 
-      <Group>
+    <Group>
-        <Padder>
+      <Padder>
-          <Group horizontal className={styles.content}>
+        <Group horizontal className={styles.content}>
-            <Group className={styles.comments}>
+          <Group className={styles.comments}>
-              <NodeNoComments />
+            <NodeNoComments />
 
-              {
+            {range(1, 6).map(el => (
-                range(1,6).map(el => (
+              <Comment key={el} />
-                  <Comment
+            ))}
-                    key={el}
-                  />
-                ))
-              }
-            </Group>
-
-            <div className={styles.panel}>
-              <Group style={{ flex: 1 }}>
-                <Padder className={styles.buttons}>
-                  <Group>
-                    <MenuButton
-                      title="На главной"
-                      description="плывет по течению"
-                      icon="star"
-                    />
-
-                    <MenuButton
-                      title="Видно всем"
-                      icon="star"
-                    />
-
-                    <MenuButton
-                      title="Редактировать"
-                      icon="star"
-                    />
-                  </Group>
-                </Padder>
-
-                <Tags
-                  tags={[
-                    { title: 'Избранный', feature: 'red' },
-                    { title: 'Плейлист', feature: 'green' },
-                    { title: 'Просто' },
-                    { title: '+ фото', feature: 'black' },
-                    { title: '+ с музыкой', feature: 'black' },
-                  ]}
-                />
-
-                <NodeRelated
-                  title="First album"
-                />
-
-                <NodeRelated
-                  title="Second album"
-                />
-              </Group>
-            </div>
           </Group>
-        </Padder>
+
-      </Group>
+          <div className={styles.panel}>
-    </Card>
+            <Group style={{ flex: 1 }}>
+              <Padder className={styles.buttons}>
+                <Group>
+                  <MenuButton
+                    title="На главной"
+                    description="плывет по течению"
+                    icon="star"
+                  />
+
+                  <MenuButton title="Видно всем" icon="star" />
+
+                  <MenuButton title="Редактировать" icon="star" />
+                </Group>
+              </Padder>
+
+              <Tags
+                tags={[
+                  { title: "Избранный", feature: "red" },
+                  { title: "Плейлист", feature: "green" },
+                  { title: "Просто" },
+                  { title: "+ фото", feature: "black" },
+                  { title: "+ с музыкой", feature: "black" }
+                ]}
+              />
+
+              <NodeRelated title="First album" />
+
+              <NodeRelated title="Second album" />
+            </Group>
+          </div>
+        </Group>
+      </Padder>
+    </Group>
+  </Card>
 );
 
 export { ImageExample };

src/sprites/Sprites.tsx

@@ -2,10 +2,32 @@ import React, {FC} from 'react';
 
 const Sprites: FC<{}> = () => (
   <svg width={0} height={0} viewBox="0 0 20 20">
-    <g id="cell-single">
+    <g id="cell-single" stroke="none">
-      <path d="M0 0L20 20L0 10Z" />
+      <path d="M0,0 L9,0 L9,9 L0,9 L0,0 Z M1,1 L1,8 L8,8 L8,1 L1,1 Z"></path>
+      <path d="M11,0 L20,0 L20,9 L11,9 L11,0 Z M12,1 L12,8 L19,8 L19,1 L12,1 Z"></path>
+      <path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"></path>
+      <path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>      
     </g>
+
+    <g id="cell-double-h" stroke="none">
+      <path d="M0,0 L20,0 L20,9 L0,9 L0,0 Z M1,1 L1,8 L19,8 L19,1 L1,1 Z"></path>
+      <path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"></path>
+      <path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>      
+    </g>
+
+    <g id="cell-double-v" stroke="none">
+      <path d="M0,0 L20,0 L20,9 L0,9 L0,0 Z M1,1 L1,8 L19,8 L19,1 L1,1 Z"></path>
+      <path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z"></path>
+      <path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z"></path>      
+    </g>
+
+    <g id="play">
+      <path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/>
+    </g>
+    
   </svg>
 );
 
 export { Sprites };
+
+// <path d="M0 0H8V8H-8V-8Z" fillRule="evenodd" />

tsconfig.json

@@ -12,17 +12,12 @@
     "target": "es2018",
     "isolatedModules": true,
     "jsx": "react",
-    "lib": [ "es2015", "DOM", "es6" ],
+    "lib": ["es2015", "dom", "es6"],
     "baseUrl": ".",
     "paths": {
       "~/*": ["src/*"]
     }
   },
-  "include": [
+  "include": ["./src/**/*", "./custom.d.ts"],
-    "./src/**/*",
+  "exclude": ["./__tests__/**/*"]
-    "./custom.d.ts"
-  ],
-  "exclude": [
-    "./__tests__/**/*"
-  ]
 }