added search form

src/components/flow/FlowGrid/styles.scss

@@ -67,17 +67,8 @@ $stamp_color: $content_bg;
 }
 
 .stamp {
-  @include outer_shadow();
-
   grid-row-end: span 2;
   grid-column: -2 / -1;
-  background: $stamp_color;
-  border-radius: $radius;
-  padding: $gap;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font: $font_24_semibold;
   display: flex;
   align-items: stretch;
   justify-content: stretch;

src/components/flow/FlowRecent/index.tsx

@@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
 import { URLS, PRESETS } from '~/constants/urls';
 import classNames from 'classnames';
 import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
+import { InputText } from '~/components/input/InputText';
 
 interface IProps {
   recent: IFlowState['recent'];
@@ -13,35 +14,43 @@ interface IProps {
 }
 
 const FlowRecent: FC<IProps> = ({ recent, updated }) => (
-  <div className={styles.grid}>
-    {updated &&
-      updated.slice(0, 20).map(node => (
-        <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
-          <div
-            className={classNames(styles.thumb, styles.new)}
-            style={{ backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")` }}
-          />
+  <div>
+    <div className={styles.search}>
+      <InputText title="Поиск" />
+    </div>
 
-          <div className={styles.info}>
-            <div className={styles.title}>{node.title}</div>
-            <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
-          </div>
-        </Link>
-      ))}
+    <div className={styles.grid}>
+      {updated &&
+        updated.slice(0, 20).map(node => (
+          <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
+            <div
+              className={classNames(styles.thumb, styles.new)}
+              style={{
+                backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
+              }}
+            />
 
-    {recent &&
-      recent.slice(0, 20).map(node => (
-        <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
-          <div className={styles.thumb}>
-            <NodeRelatedItem item={node} />
-          </div>
+            <div className={styles.info}>
+              <div className={styles.title}>{node.title}</div>
+              <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
+            </div>
+          </Link>
+        ))}
 
-          <div className={styles.info}>
-            <div className={styles.title}>{node.title}</div>
-            <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
-          </div>
-        </Link>
-      ))}
+      {recent &&
+        recent.slice(0, 20).map(node => (
+          <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
+            <div className={styles.thumb}>
+              <NodeRelatedItem item={node} />
+            </div>
+
+            <div className={styles.info}>
+              <div className={styles.title}>{node.title}</div>
+              <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
+            </div>
+          </Link>
+        ))}
+    </div>
   </div>
 );
 

src/components/flow/FlowRecent/styles.scss

@@ -3,12 +3,18 @@
   justify-content: stretch;
   flex-direction: column;
   flex: 1;
+  background: $content_bg;
+  padding: $gap;
 
-  & > div {
-    // background: $content_bg;
-    // @include outer_shadow();
-    // background: darken($content_bg, 4%);
-  }
+  @include outer_shadow();
+}
+
+.search {
+  background: lighten($content_bg, 3%);
+  border-radius: $radius $radius 0 0;
+  padding: $gap;
+
+  @include outer_shadow();
 }
 
 .item {