rotated colors

src/components/containers/Card/index.tsx

@@ -2,15 +2,18 @@ import React, { FC } from 'react';
 import classNames = require("classnames");
 import * as styles from './styles.scss';
 
-type IProps = React.HTMLAttributes<HTMLDivElement> & {}
+type IProps = React.HTMLAttributes<HTMLDivElement> & {
+  seamless?: boolean;
+}
 
 const Card: FC<IProps> = ({
   className,
   children,
+  seamless,
   ...props
 }) => (
     <div
-      className={classNames(styles.card, className)}
+      className={classNames(styles.card, className, { seamless })}
       {...props}
     >
       {children}

src/components/containers/Card/styles.scss

@@ -1,6 +1,11 @@
 .card {
   background-color: #111111;
   border-radius: $panel_radius;
+  padding: $gap;
 
   @include outer_shadow();
+
+  &:global(.seamless) {
+    padding: 0;
+  }
 }

src/components/containers/Grid/index.tsx

@@ -22,7 +22,7 @@ const Grid: FC<IProps> = ({
   style = {},
   columns = 'auto',
   rows = 'auto',
-  gap = 20,
+  gap = 10,
   ...props
 }) => (
   <div

src/components/containers/Panel/index.tsx

@@ -3,15 +3,16 @@ import * as styles from './styles.scss';
 import classNames = require("classnames");
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
-
+  seamless?: boolean;
 }
 
 const Panel: FC<IProps> = ({
   className,
   children,
+  seamless,
   ...props
 }) => (
-    <div className={classNames(styles.panel, className)} {...props}>
+    <div className={classNames(styles.panel, className, { seamless })} {...props}>
       {children}
     </div>
 );

src/components/containers/Panel/styles.scss

@@ -1,3 +1,7 @@
 .panel {
+  padding: $gap;
+
   @include outer_shadow();
+
+  &:global(.seamless) { padding: 0; }
 }

src/components/containers/TagField/styles.scss

@@ -1,5 +1,4 @@
 .wrap {
-  flex: 1;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;

src/containers/examples/EditorExample/index.tsx

@@ -8,11 +8,15 @@ import { Panel } from "~/components/containers/Panel";
 import { TextInput } from "~/components/input/TextInput";
 import classNames = require("classnames");
 import { Scroll } from "~/components/containers/Scroll";
+import { Grid } from "~/components/containers/Grid";
+import { Tags } from "~/components/node/Tags";
+import { Button } from "~/components/input/Button";
+import { Filler } from "~/components/containers/Filler";
 
 interface IProps {}
 
 const EditorExample: FC<IProps> = () => (
-    <Card className={styles.wrap}>
+    <Card className={styles.wrap} seamless>
       <Group horizontal className={styles.group} seamless>
         <div className={styles.editor}>
           <Panel className={styles.editor_panel}>
@@ -29,20 +33,36 @@ const EditorExample: FC<IProps> = () => (
               </CellGrid>
             </Scroll>
           </Panel>
-
-          <Panel className={styles.editor_panel}>
-            Cover panel
-          </Panel>
         </div>
 
         <div className={styles.panel}>
-          <Group>
-            <Card>
-              <Padder>
-                panel
-              </Padder>
-            </Card>
-          </Group>
+          <Panel>
+            <TextInput onChange={console.log} label="Название" />
+          </Panel>
+
+          <Panel className={styles.panel_main}>
+            <Group>
+              <Tags
+                tags={[
+                  { title: 'Избранный', feature: 'red' },
+                  { title: 'Плейлист', feature: 'green' },
+                  { title: 'Просто' },
+                  { title: '+ фото', feature: 'black' },
+                  { title: '+ с музыкой', feature: 'black' },
+                ]}
+              />
+
+              <Filler />
+
+              <Card className={styles.feature_card}>Cover changer</Card>
+
+              <Card className={styles.feature_card}>Track</Card>
+            </Group>
+          </Panel>
+
+          <Panel>
+            <Button>Submit?</Button>
+          </Panel>
         </div>
       </Group>
     </Card>

src/containers/examples/EditorExample/styles.scss

@@ -17,8 +17,9 @@
   background: $editor_panel_bg;
   flex: 0 0 33%;
   border-radius: 0 $radius $radius 0;
-  padding: $gap;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   @include outer_shadow();
 }
 
@@ -30,7 +31,6 @@
 }
 
 .editor_panel {
-  padding: $gap;
 }
 
 .editor_image_panel {
@@ -42,7 +42,16 @@
 }
 
 .editor_image {
-  background: lighten($main_bg_color, 20%);
+  background: transparentize(white, 0.95);
   padding-bottom: 100%;
   border-radius: $radius;
 }
+
+.feature_card {
+  height: 100px;
+}
+
+.panel_main {
+  flex: 1;
+  display: flex;
+}

src/containers/examples/ImageExample/index.tsx

@@ -60,17 +60,15 @@ const ImageExample: FC<IProps> = () => (
                   </Group>
                 </Padder>
 
-                {
-                  <Tags
-                    tags={[
-                      { title: 'Избранный', feature: 'red' },
-                      { title: 'Плейлист', feature: 'green' },
-                      { title: 'Просто' },
-                      { title: '+ фото', feature: 'black' },
-                      { title: '+ с музыкой', feature: 'black' },
-                    ]}
-                  />
-                }
+                <Tags
+                  tags={[
+                    { title: 'Избранный', feature: 'red' },
+                    { title: 'Плейлист', feature: 'green' },
+                    { title: 'Просто' },
+                    { title: '+ фото', feature: 'black' },
+                    { title: '+ с музыкой', feature: 'black' },
+                  ]}
+                />
 
                 <NodeRelated
                   title="First album"

src/styles/colors.scss

@@ -7,7 +7,7 @@ $olive: #8bc12a;
 $orange: #ff7549;
 $grass: #41800d;
 
-$red_gradient: linear-gradient(170deg, $orange -50%, $red 150%);
+$red_gradient: linear-gradient(165deg, $orange -50%, $red 150%);
 $blue_gradient: linear-gradient(170deg, $green, $dark_blue);
 $green_gradient: linear-gradient(170deg, $olive -20%, $grass 120%);
 $purple_gradient: linear-gradient(170deg, $red, $dark_blue);
@@ -15,13 +15,13 @@ $purple_gradient: linear-gradient(170deg, $red, $dark_blue);
 //$color_yellow: yellow;
 
 //$main_bg_color: #161616;
-$main_bg_color: #111111;
+$main_bg_color: #131112;
 $main_text_color: white;
 
 $content_bg_color: #222222;
 $content_bg_secondary: darken($content_bg_color, 3%);
 
-$cell_bg: #222222;
+$cell_bg: lighten($main_bg_color, 5%);
 
 $text_normal: 16px;
 $text_small: 14px;
@@ -29,16 +29,16 @@ $text_big: 20px;
 $text_sign: 22px;
 
 $input_bg_color: transparentize(black, 0.8);
-$button_bg_color: $red;
+$button_bg_color: $red_gradient;
 
-$comment_bg: #191919;
-$panel_bg: #191919;
-$node_bg: #111111;
-$node_image_bg: #131313;
-$node_title_background: #191919;
+$comment_bg: lighten($main_bg_color, 4%);
+$panel_bg: transparent;
+$node_bg: $main_bg_color;
+$node_image_bg: lighten($main_bg_color, 4%);
+$node_title_background: darken($main_bg_color, 4%);
 
-$editor_panel_bg: lighten($main_bg_color, 5%);
-$editor_bg: lighten($main_bg_color, 10%);
+$editor_panel_bg: transparentize(white, 0.98);
+$editor_bg: lighten($main_bg_color, 4%);
 
 $scroll_color: $red_gradient;
 $scroll_inactive_opacity: 0.5;