From dac719dc5a7fdf175740b0d424f1014b8027eae8 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 18 May 2023 15:20:32 +0530
Subject: [PATCH] chore: make note pinned status more prominent

---
 .../ContentListView/ListItemFlagIcons.tsx     |  5 ----
 .../ContentListView/ListItemTitle.tsx         | 23 +++++++++++++------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx
index d8ba436ee..4a993fd6d 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ListItemFlagIcons.tsx
@@ -40,11 +40,6 @@ const ListItemFlagIcons: FunctionComponent<Props> = ({
           <Icon ariaLabel="Archived" type="archive" className="text-accessory-tint-3" size="medium" />
         </span>
       )}
-      {item.pinned && (
-        <span className="ml-1.5 flex items-center" title="Pinned">
-          <Icon ariaLabel="Pinned" type="pin-filled" className="text-info" size="medium" />
-        </span>
-      )}
       {hasFiles && (
         <span className="ml-1.5 flex items-center" title="Files">
           <Icon ariaLabel="Files" type="attachment-file" className="text-info" size="medium" />
diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemTitle.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemTitle.tsx
index 5df517ce0..88a6211b7 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemTitle.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ListItemTitle.tsx
@@ -1,14 +1,23 @@
 import { FunctionComponent } from 'react'
 import { ListableContentItem } from './Types/ListableContentItem'
+import Icon from '../Icon/Icon'
 
 export const ListItemTitle: FunctionComponent<{ item: ListableContentItem }> = ({ item }) => {
   return (
-    <div
-      className={`break-word mr-2 flex items-start justify-between overflow-hidden text-lg font-semibold leading-[1.3] lg:text-base lg:leading-[1.3] ${
-        item.archived ? 'opacity-60' : ''
-      }`}
-    >
-      {item.title}
-    </div>
+    <>
+      {item.pinned && (
+        <div className="mb-2 inline-flex items-center gap-0.5 rounded bg-info py-1 px-1.5 text-[0.65rem] leading-3 text-info-contrast">
+          <Icon type="pin-filled" className="h-3 w-3" size="custom" />
+          Pinned
+        </div>
+      )}
+      <div
+        className={`break-word mr-2 flex items-start justify-between overflow-hidden text-lg font-semibold leading-[1.3] lg:text-base lg:leading-[1.3] ${
+          item.archived ? 'opacity-60' : ''
+        }`}
+      >
+        {item.title}
+      </div>
+    </>
   )
 }