From d7eb43401a62474acfc48c69edb09625faa5d00f Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 24 Dec 2022 23:01:13 +0530
Subject: [PATCH] refactor(dev-only): fixed link item bubble bg color and text

---
 .../Components/FilesTableView/FilesTableView.tsx            | 6 +++---
 .../javascripts/Components/LinkedItems/LinkedItemBubble.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/javascripts/Components/FilesTableView/FilesTableView.tsx b/packages/web/src/javascripts/Components/FilesTableView/FilesTableView.tsx
index e33cda5e3..0920338ee 100644
--- a/packages/web/src/javascripts/Components/FilesTableView/FilesTableView.tsx
+++ b/packages/web/src/javascripts/Components/FilesTableView/FilesTableView.tsx
@@ -238,9 +238,9 @@ const FilesTableView = ({ application, filesController, featuresController, link
           }
 
           return (
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 overflow-hidden">
               <LinkedItemBubble
-                className="overflow-hidden"
+                className="overflow-hidden border border-transparent hover:border-border focus:border-info focus:shadow-none"
                 link={links[0]}
                 key={links[0].id}
                 unlinkItem={async (itemToUnlink) => {
@@ -248,7 +248,7 @@ const FilesTableView = ({ application, filesController, featuresController, link
                 }}
                 isBidirectional={false}
               />
-              {links.length > 1 && <span>and {links.length - 1} more...</span>}
+              {links.length - 1 > 1 && <span>and {links.length - 1} more...</span>}
             </div>
           )
         },
diff --git a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
index 5d1c54499..3ce8b0faa 100644
--- a/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
+++ b/packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubble.tsx
@@ -100,7 +100,7 @@ const LinkedItemBubble = ({
     <button
       ref={ref}
       className={classNames(
-        'group h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-sm',
+        'group h-6 cursor-pointer items-center rounded bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-sm',
         'text-text hover:bg-contrast focus:bg-contrast lg:text-xs',
         inlineFlex ? 'inline-flex' : 'flex',
         className,