fix search appearance

src/components/common/NodeHorizontalCard/styles.module.scss

@@ -27,8 +27,8 @@
   &.new {
     &::after {
       content: ' ';
-      width: 12px;
+      width: 8px;
-      height: 12px;
+      height: 8px;
       border-radius: 100%;
       background: $color_danger;
       box-shadow: $content_bg 0 0 0 5px;

src/components/common/SubTitle/index.tsx

@@ -13,9 +13,11 @@ interface Props extends DivProps {
 
 const SubTitle: FC<Props> = ({ isLoading, children, ...rest }) => (
   <div {...rest} className={classNames(styles.title, rest.className)}>
+    <span className={styles.name}>
       <Placeholder active={isLoading} loading>
         {children}
       </Placeholder>
+    </span>
   </div>
 );
 

src/components/common/SubTitle/styles.module.scss

@@ -1,7 +1,25 @@
-@import "src/styles/variables.scss";
+@import 'src/styles/variables.scss';
 
 .title {
   font: $font_12_semibold;
   text-transform: uppercase;
-  opacity: 0.3;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: $gap / 2;
+  color: var(--gray_75);
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  &::after {
+    content: ' ';
+    display: flex;
+    height: 2px;
+    background-color: var(--gray_90);
+    flex: 1;
+    border-radius: 2px;
+  }
 }

src/components/node/NodeRelated/styles.module.scss

@@ -29,11 +29,6 @@
 
 .title {
   padding-left: 5px;
-
-  a {
-    text-decoration: none;
-    color: inherit;
-  }
 }
 
 .text {

src/containers/flow/FlowStamp/components/FlowRecent/index.tsx

@@ -1,33 +0,0 @@
-import { FC } from 'react';
-
-import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard';
-import { IFlowNode } from '~/types';
-
-import styles from './styles.module.scss';
-
-interface Props {
-  recent: IFlowNode[];
-  updated: IFlowNode[];
-}
-
-const FlowRecent: FC<Props> = ({ recent, updated }) => {
-  return (
-    <>
-      <div className={styles.updates}>
-        {updated &&
-          updated.map((node) => (
-            <NodeHorizontalCard node={node} key={node.id} hasNew />
-          ))}
-      </div>
-
-      <div className={styles.recent}>
-        {recent &&
-          recent.map((node) => (
-            <NodeHorizontalCard node={node} key={node.id} />
-          ))}
-      </div>
-    </>
-  );
-};
-
-export { FlowRecent };

src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss

@@ -1,7 +0,0 @@
-@import 'src/styles/variables';
-
-.recent {
-  @container sizer (width < #{$flow_hide_recents}) {
-    display: none;
-  }
-}

src/containers/flow/FlowStamp/index.tsx

@@ -2,17 +2,15 @@ import { FC, FormEvent, useCallback, useMemo } from 'react';
 
 import classNames from 'classnames';
 
-import { Group } from '~/components/common/Group';
+import { Card } from '~/components/common/Card';
 import { Icon } from '~/components/common/Icon';
-import { Superpower } from '~/components/common/Superpower';
+import { NodeHorizontalCard } from '~/components/common/NodeHorizontalCard';
+import { SubTitle } from '~/components/common/SubTitle';
 import { InputText } from '~/components/input/InputText';
-import { Toggle } from '~/components/input/Toggle';
-import { experimentalFeatures } from '~/constants/features';
 import styles from '~/containers/flow/FlowStamp/styles.module.scss';
 import { useFlowContext } from '~/utils/providers/FlowProvider';
 import { useSearchContext } from '~/utils/providers/SearchProvider';
 
-import { FlowRecent } from './components/FlowRecent';
 import { FlowSearchResults } from './components/FlowSearchResults';
 
 interface Props {
@@ -64,7 +62,8 @@ const FlowStamp: FC<Props> = ({ isFluid, onToggleLayout }) => {
 
   return (
     <div className={styles.wrap}>
-      <form className={styles.search} onSubmit={onSearchSubmit}>
+      <Card className={styles.search}>
+        <form onSubmit={onSearchSubmit}>
           <InputText
             title="Поиск"
             value={searchText}
@@ -73,14 +72,11 @@ const FlowStamp: FC<Props> = ({ isFluid, onToggleLayout }) => {
             onKeyUp={onKeyUp}
           />
         </form>
+      </Card>
 
       {searchText ? (
-        <div className={styles.search_results}>
+        <Card className={styles.grid}>
-          <div className={styles.grid}>
+          <SubTitle>Результаты поиска</SubTitle>
-            <div className={styles.label}>
-              <span className={styles.label_text}>Результаты поиска</span>
-              <span className="line" />
-            </div>
 
           <div className={styles.items}>
             <FlowSearchResults
@@ -90,34 +86,31 @@ const FlowStamp: FC<Props> = ({ isFluid, onToggleLayout }) => {
               onLoadMore={onSearchLoadMore}
             />
           </div>
-          </div>
+        </Card>
-        </div>
       ) : (
-        <div className={styles.grid}>
+        <Card
-          <div className={classNames(styles.label, styles.whatsnew)}>
+          className={classNames(styles.grid, {
-            <span className={styles.label_text}>Что нового?</span>
+            [styles.noUpdates]: !updates.length,
-            <span className="line" />
+          })}
-          </div>
+        >
+          <SubTitle>Что нового?</SubTitle>
 
-          <div className={styles.items}>
+          {updates.length > 0 && (
-            <FlowRecent updated={updates} recent={recent} />
+            <div className={classNames(styles.items, styles.updates)}>
-          </div>
+              {updates.map((node) => (
+                <NodeHorizontalCard node={node} key={node.id} hasNew />
+              ))}
             </div>
           )}
 
-      {experimentalFeatures.liquidFlow && (
+          {recent.length > 0 && (
-        <Superpower>
+            <div className={classNames(styles.items, styles.recent)}>
-          <div className={styles.toggles}>
+              {recent.map((node) => (
-            <Group
+                <NodeHorizontalCard node={node} key={node.id} />
-              horizontal
+              ))}
-              onClick={onToggleLayout}
-              className={styles.fluid_toggle}
-            >
-              <Toggle value={isFluid} />
-              <div className={styles.toggles__label}>Жидкое течение</div>
-            </Group>
             </div>
-        </Superpower>
+          )}
+        </Card>
       )}
     </div>
   );

src/containers/flow/FlowStamp/styles.module.scss

@@ -1,22 +1,24 @@
-@import '../../../styles/variables';
+@import '~/styles/variables';
 
 .wrap {
   display: flex;
   flex-direction: column;
   width: 100%;
-  border-radius: $radius;
+  gap: $gap;
+}
+
+.search {
+  background-color: var(--content_bg_lighter);
 }
 
 .grid {
-  @include outer_shadow();
   display: flex;
   justify-content: stretch;
   flex-direction: column;
   flex: 1;
-  border-radius: $radius;
-  position: relative;
-  background: $content_bg;
   overflow: hidden;
+  gap: $gap;
+  padding: $gap;
 
   &::after {
     content: '';
@@ -33,49 +35,25 @@
       display: none;
     }
   }
+
+  &.noUpdates {
+    @container sizer (width < #{$flow_hide_recents}) {
+      display: none;
+    }
+  }
+}
+
+.items.recent {
+  @container sizer (width < #{$flow_hide_recents}) {
+    display: none;
+    background-color: red;
+  }
 }
 
 .items {
-  padding: 0 $gap 0 $gap;
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-}
-
-.label {
-  display: flex;
-  flex-direction: row;
-  min-width: 0;
-  padding: $gap;
-  border-radius: $radius;
-
-  @include title_with_line();
-
-  color: transparentize(white, $amount: 0.8);
-
-  &_search {
-    color: white;
-    padding-left: $gap * 1.2;
-  }
-
-  & > :global(.line) {
-    margin-right: $gap;
-  }
-}
-
-.label_text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.search {
-  @include outer_shadow();
-
-  background: $content_bg_lighter;
-  padding: $gap;
-  border-radius: $radius;
 }
 
 .search_icon {
@@ -89,34 +67,3 @@
   stroke-width: 0.5;
   transition: opacity 0.25s;
 }
-
-.toggles {
-  & > div {
-    padding: $gap;
-    font: $font_14_semibold;
-  }
-
-  &__label {
-    cursor: pointer;
-  }
-}
-
-.fluid_toggle {
-  @include desktop {
-    display: none;
-  }
-}
-
-.whatsnew {
-  @container sizer (width < #{$flow_hide_recents}) {
-    display: none;
-  }
-}
-
-.search_results {
-  overflow: auto;
-
-  @include tablet {
-    margin-top: $gap;
-  }
-}