diff --git a/src/components/common/NodeHorizontalCard/styles.module.scss b/src/components/common/NodeHorizontalCard/styles.module.scss index 32007320..6eb626c4 100644 --- a/src/components/common/NodeHorizontalCard/styles.module.scss +++ b/src/components/common/NodeHorizontalCard/styles.module.scss @@ -27,8 +27,8 @@ &.new { &::after { content: ' '; - width: 12px; - height: 12px; + width: 8px; + height: 8px; border-radius: 100%; background: $color_danger; box-shadow: $content_bg 0 0 0 5px; diff --git a/src/components/common/SubTitle/index.tsx b/src/components/common/SubTitle/index.tsx index ebfd8961..e24510ea 100644 --- a/src/components/common/SubTitle/index.tsx +++ b/src/components/common/SubTitle/index.tsx @@ -13,9 +13,11 @@ interface Props extends DivProps { const SubTitle: FC = ({ isLoading, children, ...rest }) => (
- - {children} - + + + {children} + +
); diff --git a/src/components/common/SubTitle/styles.module.scss b/src/components/common/SubTitle/styles.module.scss index 98651785..c3a36b26 100644 --- a/src/components/common/SubTitle/styles.module.scss +++ b/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; + } } diff --git a/src/components/node/NodeRelated/styles.module.scss b/src/components/node/NodeRelated/styles.module.scss index 1d4de34d..7a26a31a 100644 --- a/src/components/node/NodeRelated/styles.module.scss +++ b/src/components/node/NodeRelated/styles.module.scss @@ -29,11 +29,6 @@ .title { padding-left: 5px; - - a { - text-decoration: none; - color: inherit; - } } .text { diff --git a/src/containers/flow/FlowStamp/components/FlowRecent/index.tsx b/src/containers/flow/FlowStamp/components/FlowRecent/index.tsx deleted file mode 100644 index f46249d0..00000000 --- a/src/containers/flow/FlowStamp/components/FlowRecent/index.tsx +++ /dev/null @@ -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 = ({ recent, updated }) => { - return ( - <> -
- {updated && - updated.map((node) => ( - - ))} -
- -
- {recent && - recent.map((node) => ( - - ))} -
- - ); -}; - -export { FlowRecent }; diff --git a/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss b/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss deleted file mode 100644 index 4925f482..00000000 --- a/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'src/styles/variables'; - -.recent { - @container sizer (width < #{$flow_hide_recents}) { - display: none; - } -} diff --git a/src/containers/flow/FlowStamp/index.tsx b/src/containers/flow/FlowStamp/index.tsx index 3569fd7c..03f271a8 100644 --- a/src/containers/flow/FlowStamp/index.tsx +++ b/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,60 +62,55 @@ const FlowStamp: FC = ({ isFluid, onToggleLayout }) => { return (
-
- - + +
+ + +
{searchText ? ( -
-
-
- Результаты поиска - -
- -
- -
-
-
- ) : ( -
-
- Что нового? - -
+ + Результаты поиска
- +
-
- )} + + ) : ( + + Что нового? - {experimentalFeatures.liquidFlow && ( - -
- - -
Жидкое течение
-
-
-
+ {updates.length > 0 && ( +
+ {updates.map((node) => ( + + ))} +
+ )} + + {recent.length > 0 && ( +
+ {recent.map((node) => ( + + ))} +
+ )} +
)}
); diff --git a/src/containers/flow/FlowStamp/styles.module.scss b/src/containers/flow/FlowStamp/styles.module.scss index 550094c3..8dd15e59 100644 --- a/src/containers/flow/FlowStamp/styles.module.scss +++ b/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; - } -}