From 81c9a5d7b3d5e3c95327f85e2c282776be874c9d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 18 Apr 2020 14:10:12 +0700
Subject: [PATCH] added search form

---
 src/components/flow/FlowGrid/styles.scss   |  9 ----
 src/components/flow/FlowRecent/index.tsx   | 61 +++++++++++++---------
 src/components/flow/FlowRecent/styles.scss | 16 ++++--
 src/containers/flow/FlowLayout/styles.scss |  8 +--
 src/styles/inputs.scss                     | 15 ++----
 5 files changed, 52 insertions(+), 57 deletions(-)

diff --git a/src/components/flow/FlowGrid/styles.scss b/src/components/flow/FlowGrid/styles.scss
index 38e24501..adceefc7 100644
--- a/src/components/flow/FlowGrid/styles.scss
+++ b/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;
diff --git a/src/components/flow/FlowRecent/index.tsx b/src/components/flow/FlowRecent/index.tsx
index e569d8fb..2cf872e7 100644
--- a/src/components/flow/FlowRecent/index.tsx
+++ b/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>
 );
 
diff --git a/src/components/flow/FlowRecent/styles.scss b/src/components/flow/FlowRecent/styles.scss
index f50d7fe8..be87761a 100644
--- a/src/components/flow/FlowRecent/styles.scss
+++ b/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 {
diff --git a/src/containers/flow/FlowLayout/styles.scss b/src/containers/flow/FlowLayout/styles.scss
index 264adb66..33ba8b7b 100644
--- a/src/containers/flow/FlowLayout/styles.scss
+++ b/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;
   }
diff --git a/src/styles/inputs.scss b/src/styles/inputs.scss
index 4e1f12bd..31fa6c69 100644
--- a/src/styles/inputs.scss
+++ b/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;