From dfcf0a541d125043205a65e16b3deef35964fb47 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 17 Oct 2022 11:27:54 +0600
Subject: [PATCH] using lab icon on recent posts

---
 src/components/flow/FlowRecentItem/index.tsx  |  9 +++--
 src/components/node/NodeRelatedItem/index.tsx | 39 ++++++++++++++-----
 .../node/NodeRelatedItem/styles.module.scss   | 14 +++++++
 3 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/components/flow/FlowRecentItem/index.tsx b/src/components/flow/FlowRecentItem/index.tsx
index 968e645c..9c01f980 100644
--- a/src/components/flow/FlowRecentItem/index.tsx
+++ b/src/components/flow/FlowRecentItem/index.tsx
@@ -11,7 +11,6 @@ import { getPrettyDate } from '~/utils/dom';
 
 import styles from './styles.module.scss';
 
-
 interface IProps {
   node: Partial<INode>;
   has_new?: boolean;
@@ -20,7 +19,12 @@ interface IProps {
 
 const FlowRecentItem: FC<IProps> = ({ node, has_new, onClick }) => {
   return (
-    <Anchor key={node.id} className={styles.item} href={URLS.NODE_URL(node.id)} onClick={onClick}>
+    <Anchor
+      key={node.id}
+      className={styles.item}
+      href={URLS.NODE_URL(node.id)}
+      onClick={onClick}
+    >
       <div
         className={classNames(styles.thumb, {
           [styles.new]: has_new,
@@ -34,7 +38,6 @@ const FlowRecentItem: FC<IProps> = ({ node, has_new, onClick }) => {
         <div className={styles.title}>{node.title || '...'}</div>
 
         <div className={styles.comment}>
-          {!node.is_promoted && <Icon icon="lab" size={14} />}
           <span>{getPrettyDate(node.created_at)}</span>
         </div>
       </div>
diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx
index 4167acf0..be7186f1 100644
--- a/src/components/node/NodeRelatedItem/index.tsx
+++ b/src/components/node/NodeRelatedItem/index.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import { ImageWithSSRLoad } from '~/components/common/ImageWithSSRLoad';
 import { Square } from '~/components/common/Square';
+import { Icon } from '~/components/input/Icon';
 import { ImagePresets } from '~/constants/urls';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
@@ -26,7 +27,7 @@ const getTitleLetters = (title?: string): string => {
   return words.length > 1
     ? words
         .slice(0, 2)
-        .map(word => word[0])
+        .map((word) => word[0])
         .join('')
         .toUpperCase()
     : words[0].substr(0, 2).toUpperCase();
@@ -39,8 +40,11 @@ const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const thumb = useMemo(
-    () => (item.thumbnail ? getURL({ url: item.thumbnail }, ImagePresets.avatar) : ''),
-    [item]
+    () =>
+      item.thumbnail
+        ? getURL({ url: item.thumbnail }, ImagePresets.avatar)
+        : '',
+    [item],
   );
 
   const background = useColorGradientFromString(!thumb ? item.title : '');
@@ -63,13 +67,16 @@ const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
     return 'small';
   }, [width]);
 
-  const image = useMemo(() => getURL({ url: item.thumbnail }, ImagePresets.avatar), [
-    item.thumbnail,
-  ]);
+  const image = useMemo(
+    () => getURL({ url: item.thumbnail }, ImagePresets.avatar),
+    [item.thumbnail],
+  );
 
   return (
     <div
-      className={classNames(styles.item, styles[size], { [styles.is_loaded]: is_loaded })}
+      className={classNames(styles.item, styles[size], {
+        [styles.is_loaded]: is_loaded,
+      })}
       key={item.id}
       onClick={onClick}
       ref={ref}
@@ -78,8 +85,16 @@ const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
         <Square
           image={getURLFromString(item.thumbnail, 'avatar')}
           onClick={onClick}
-          className={classNames(styles.thumb, { [styles.is_loaded]: is_loaded })}
-        />
+          className={classNames(styles.thumb, {
+            [styles.is_loaded]: is_loaded,
+          })}
+        >
+          {!item.is_promoted && (
+            <div className={styles.suffix}>
+              <Icon icon="lab" size={12} />
+            </div>
+          )}
+        </Square>
       )}
 
       {!item.thumbnail && size === 'small' && (
@@ -94,7 +109,11 @@ const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
         </div>
       )}
 
-      <ImageWithSSRLoad src={image} alt="loader" onLoad={() => setIsLoaded(true)} />
+      <ImageWithSSRLoad
+        src={image}
+        alt="loader"
+        onLoad={() => setIsLoaded(true)}
+      />
     </div>
   );
 });
diff --git a/src/components/node/NodeRelatedItem/styles.module.scss b/src/components/node/NodeRelatedItem/styles.module.scss
index 3214b83a..fd2a0902 100644
--- a/src/components/node/NodeRelatedItem/styles.module.scss
+++ b/src/components/node/NodeRelatedItem/styles.module.scss
@@ -64,3 +64,17 @@ div.thumb {
     font: $font_12_bold;
   }
 }
+
+.suffix {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: var(--content_bg);
+  height: 16px;
+  width: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $cell_radius 0 $cell_radius 0;
+  fill: var(--gray_25);
+}