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,13 +14,20 @@ interface IProps {
 }
 
 const FlowRecent: FC<IProps> = ({ recent, updated }) => (
+  <div>
+    <div className={styles.search}>
+      <InputText title="Поиск" />
+    </div>
+
     <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)}")` }}
+              style={{
+                backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
+              }}
             />
 
             <div className={styles.info}>
@@ -43,6 +51,7 @@ const FlowRecent: FC<IProps> = ({ recent, updated }) => (
           </Link>
         ))}
     </div>
+  </div>
 );
 
 export { FlowRecent };

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 {

src/containers/flow/FlowLayout/styles.scss

@@ -6,7 +6,6 @@
 }
 
 $cols: $content_width / $cell;
-$stamp_color: $content_bg;
 
 .grid {
   display: grid;
@@ -78,12 +77,7 @@ $stamp_color: $content_bg;
 
   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;
@@ -98,7 +92,7 @@ $stamp_color: $content_bg;
     left: 0;
     height: 60px;
     width: 100%;
-    background: linear-gradient(transparentize($stamp_color, 1), $stamp_color 90%);
+    background: linear-gradient(transparentize($content_bg, 1), $content_bg 90%);
     pointer-events: none;
     touch-action: none;
   }

src/styles/inputs.scss

@@ -13,12 +13,8 @@
   background: $input_bg_color;
 
   &::before {
-    content: " ";
-    background: linear-gradient(
-      270deg,
-      $input_bg_color $gap,
-      transparentize($input_bg_color, 1)
-    );
+    content: ' ';
+    background: linear-gradient(270deg, $input_bg_color $gap, transparentize($input_bg_color, 1));
     position: absolute;
     width: $gap * 2;
     height: $input_height;
@@ -98,7 +94,7 @@
 
   &.required {
     &::after {
-      content: " ";
+      content: ' ';
       width: 5px;
       height: 5px;
       border-radius: 3px;
@@ -261,11 +257,10 @@
   }
 
   .title {
-    font: $font;
+    font: $font_16_semibold;
     position: absolute;
     left: 6px;
-    // width: 100%;
-    top: 12px;
+    top: 10px;
     bottom: auto;
     padding: 0 4px;
     box-sizing: border-box;