From 08f7ac6da77abd2f7a272f0872637f1c7c10933d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 23 Oct 2023 18:07:38 +0530
Subject: [PATCH] chore: sidebar fix and ui improvement (#2527)

* fix: cycle sidebar overlapping fix

* style: issue sidebar related to and duplicate icon fix
---
 web/components/cycles/sidebar.tsx                   | 4 ++--
 web/components/issues/sidebar-select/duplicate.tsx  | 5 ++---
 web/components/issues/sidebar-select/relates-to.tsx | 6 +++---
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index 4d8653ac7..1d902e6e5 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -293,9 +293,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
         />
       )}
       <div
-        className={`absolute top-0 z-20 ${
+        className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
-        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
+        } h-full w-[24rem] overflow-y-auto border-l border-custom-border-200 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
       >
         {cycleDetails ? (
           <>
diff --git a/web/components/issues/sidebar-select/duplicate.tsx b/web/components/issues/sidebar-select/duplicate.tsx
index 561072ceb..a28d472ba 100644
--- a/web/components/issues/sidebar-select/duplicate.tsx
+++ b/web/components/issues/sidebar-select/duplicate.tsx
@@ -9,7 +9,6 @@ import useUser from "hooks/use-user";
 // icons
 import { X, CopyPlus } from "lucide-react";
 // components
-import { BlockerIcon } from "@plane/ui";
 import { ExistingIssuesListModal } from "components/core";
 // services
 import { IssueService } from "services/issue";
@@ -116,7 +115,7 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
               ? duplicateIssuesRelation.map((relation) => (
                   <div
                     key={relation.issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs  duration-300 "
                   >
                     <a
                       href={`/${workspaceSlug}/projects/${relation.issue_detail?.project_detail.id}/issues/${relation.issue_detail?.id}`}
@@ -124,7 +123,7 @@ export const SidebarDuplicateSelect: React.FC<Props> = (props) => {
                       rel="noopener noreferrer"
                       className="flex items-center gap-1"
                     >
-                      <BlockerIcon height={10} width={10} />
+                      <CopyPlus height={10} width={10} />
                       {`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
                     </a>
                     <button
diff --git a/web/components/issues/sidebar-select/relates-to.tsx b/web/components/issues/sidebar-select/relates-to.tsx
index 3ffc18886..2f543e381 100644
--- a/web/components/issues/sidebar-select/relates-to.tsx
+++ b/web/components/issues/sidebar-select/relates-to.tsx
@@ -8,7 +8,7 @@ import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
 // icons
 import { X } from "lucide-react";
-import { BlockerIcon, RelatedIcon } from "@plane/ui";
+import { RelatedIcon } from "@plane/ui";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // services
@@ -116,7 +116,7 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
               ? relatedToIssueRelation.map((relation) => (
                   <div
                     key={relation.issue_detail?.id}
-                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20"
+                    className="group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs duration-300"
                   >
                     <a
                       href={`/${workspaceSlug}/projects/${relation.issue_detail?.project_detail.id}/issues/${relation.issue_detail?.id}`}
@@ -124,7 +124,7 @@ export const SidebarRelatesSelect: React.FC<Props> = (props) => {
                       rel="noopener noreferrer"
                       className="flex items-center gap-1"
                     >
-                      <BlockerIcon height={10} width={10} />
+                      <RelatedIcon height={10} width={10} />
                       {`${relation.issue_detail?.project_detail.identifier}-${relation.issue_detail?.sequence_id}`}
                     </a>
                     <button