editor layout

src/components/containers/Card/styles.scss

@@ -1,5 +1,5 @@
 .card {
-  background-color: #111111;
+  background-color: $card_bg;
   border-radius: $panel_radius;
   padding: $gap;
 

src/containers/examples/EditorExample/index.tsx

@@ -19,7 +19,7 @@ const EditorExample: FC<IProps> = () => (
     <Card className={styles.wrap} seamless>
       <Group horizontal className={styles.group} seamless>
         <div className={styles.editor}>
-          <Panel className={styles.editor_panel}>
+          <Panel>
             <TextInput onChange={console.log} label="Название" />
           </Panel>
 
@@ -36,10 +36,6 @@ const EditorExample: FC<IProps> = () => (
         </div>
 
         <div className={styles.panel}>
-          <Panel>
-            <TextInput onChange={console.log} label="Название" />
-          </Panel>
-
           <Panel className={styles.panel_main}>
             <Group>
               <Tags
@@ -52,11 +48,14 @@ const EditorExample: FC<IProps> = () => (
                 ]}
               />
 
-              <Filler />
+              <Card className={styles.feature_card}>Layout setup</Card>
 
               <Card className={styles.feature_card}>Cover changer</Card>
 
               <Card className={styles.feature_card}>Track</Card>
+
+              <Filler />
+
             </Group>
           </Panel>
 

src/containers/examples/EditorExample/styles.scss

@@ -49,6 +49,7 @@
 
 .feature_card {
   height: 100px;
+  background: darken($main_bg_color, 3%);
 }
 
 .panel_main {

src/styles/colors.scss

@@ -23,6 +23,7 @@ $content_bg: darken($main_bg_color, 4%);
 $content_bg_secondary: darken($content_bg, 3%);
 
 $cell_bg: lighten($main_bg_color, 0%);
+$card_bg: lighten($main_bg_color, 0%);
 
 $text_normal: 16px;
 $text_small: 14px;