From 5433b93d3aff3975f41f968fd99492739e5e8058 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Thu, 7 Nov 2024 16:19:40 +0530
Subject: [PATCH 1/2] chore-issue-link-ui

---
 web/core/components/issues/issue-detail/links/link-item.tsx | 2 +-
 web/core/components/issues/issue-detail/links/link-list.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/core/components/issues/issue-detail/links/link-item.tsx b/web/core/components/issues/issue-detail/links/link-item.tsx
index d758b08d3e3..35c67c49bd3 100644
--- a/web/core/components/issues/issue-detail/links/link-item.tsx
+++ b/web/core/components/issues/issue-detail/links/link-item.tsx
@@ -46,7 +46,7 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
           <LinkIcon className="h-3 w-3 flex-shrink-0" />
           <Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
             <span
-              className="truncate text-xs cursor-pointer"
+              className="truncate text-sm cursor-pointer"
               onClick={() => {
                 copyTextToClipboard(linkDetail.url);
                 setToast({
diff --git a/web/core/components/issues/issue-detail/links/link-list.tsx b/web/core/components/issues/issue-detail/links/link-list.tsx
index 455671537fd..7f20d53677c 100644
--- a/web/core/components/issues/issue-detail/links/link-list.tsx
+++ b/web/core/components/issues/issue-detail/links/link-list.tsx
@@ -27,7 +27,7 @@ export const LinkList: FC<TLinkList> = observer((props) => {
   if (!issueLinks) return null;
 
   return (
-    <div className="grid grid-cols-12 3xl:grid-cols-10 gap-2 px-9 py-4">
+    <div className="flex flex-col gap-2 py-4">
       {issueLinks.map((linkId) => (
         <IssueLinkItem key={linkId} linkId={linkId} linkOperations={linkOperations} isNotAllowed={disabled} />
       ))}

From 82de0547d06ce9c2fb3f1f6776982c4034b87a2b Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Thu, 7 Nov 2024 17:23:45 +0530
Subject: [PATCH 2/2] chore: issue link ui revamp

---
 .../issues/issue-detail/links/link-item.tsx      | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/core/components/issues/issue-detail/links/link-item.tsx b/web/core/components/issues/issue-detail/links/link-item.tsx
index 35c67c49bd3..c7629b5dce2 100644
--- a/web/core/components/issues/issue-detail/links/link-item.tsx
+++ b/web/core/components/issues/issue-detail/links/link-item.tsx
@@ -40,13 +40,13 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
     <>
       <div
         key={linkId}
-        className="col-span-12 lg:col-span-6 xl:col-span-4 2xl:col-span-3 3xl:col-span-2 flex items-center justify-between gap-3 h-8 flex-shrink-0 px-3 bg-custom-background-90 border-[0.5px] border-custom-border-200 rounded"
+        className="group col-span-12 lg:col-span-6 xl:col-span-4 2xl:col-span-3 3xl:col-span-2 flex items-center justify-between gap-3 h-10 flex-shrink-0 px-3 bg-custom-background-90 hover:bg-custom-background-80 border-[0.5px] border-custom-border-200 rounded"
       >
-        <div className="flex items-center gap-2.5 truncate">
-          <LinkIcon className="h-3 w-3 flex-shrink-0" />
+        <div className="flex items-center gap-2.5 truncate flex-grow">
+          <LinkIcon className="size-4 flex-shrink-0 text-custom-text-400 group-hover:text-custom-text-200" />
           <Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
             <span
-              className="truncate text-sm cursor-pointer"
+              className="truncate text-sm cursor-pointer flex-grow"
               onClick={() => {
                 copyTextToClipboard(linkDetail.url);
                 setToast({
@@ -60,21 +60,21 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
             </span>
           </Tooltip>
         </div>
-        <div className="flex items-center gap-1">
-          <p className="p-1 text-xs align-bottom leading-5 text-custom-text-300">
+        <div className="flex items-center gap-1 flex-shrink-0">
+          <p className="p-1 text-xs align-bottom leading-5 text-custom-text-400 group-hover-text-custom-text-200">
             {calculateTimeAgoShort(linkDetail.created_at)}
           </p>
           <a
             href={linkDetail.url}
             target="_blank"
             rel="noopener noreferrer"
-            className="relative grid place-items-center rounded p-1 text-custom-text-300 outline-none hover:text-custom-text-200 cursor-pointer hover:bg-custom-background-80"
+            className="relative grid place-items-center rounded p-1 text-custom-text-400 outline-none group-hover:text-custom-text-200 cursor-pointer hover:bg-custom-background-80"
           >
             <ExternalLink className="h-3.5 w-3.5 stroke-[1.5]" />
           </a>
           <CustomMenu
             ellipsis
-            buttonClassName="text-custom-text-300 hover:text-custom-text-200"
+            buttonClassName="text-custom-text-400 group-hover:text-custom-text-200"
             placement="bottom-end"
             closeOnSelect
             disabled={isNotAllowed}