From 844ae4869ac3bd67579208be85a11fb2c151ae8c Mon Sep 17 00:00:00 2001
From: Kunal Vishwakarma <116634168+kunalv17@users.noreply.github.com>
Date: Fri, 31 Mar 2023 17:54:05 +0530
Subject: [PATCH] fix: view list link (#653)

* fix: viewlist link

* fix/removed side effects

* fix: deadzones in the link
---
 .../project/confirm-project-member-remove.tsx |   8 +-
 .../components/states/delete-state-modal.tsx  |   6 +-
 .../components/views/delete-view-modal.tsx    |   8 +-
 .../app/components/views/single-view-item.tsx | 111 ++++++++++--------
 .../confirm-workspace-member-remove.tsx       |   8 +-
 5 files changed, 76 insertions(+), 65 deletions(-)

diff --git a/apps/app/components/project/confirm-project-member-remove.tsx b/apps/app/components/project/confirm-project-member-remove.tsx
index 4ecb30218..646400cde 100644
--- a/apps/app/components/project/confirm-project-member-remove.tsx
+++ b/apps/app/components/project/confirm-project-member-remove.tsx
@@ -53,7 +53,7 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
@@ -68,9 +68,9 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
-                          Are you sure you want to remove member - {`"`}
-                          <span className="italic">{data?.email}</span>
-                          {`"`} ? They will no longer have access to this project. This action
+                          Are you sure you want to remove member- {" "}
+                          <span className="font-bold">{data?.email}</span>
+                          ? They will no longer have access to this project. This action
                           cannot be undone.
                         </p>
                       </div>
diff --git a/apps/app/components/states/delete-state-modal.tsx b/apps/app/components/states/delete-state-modal.tsx
index 2496a28da..a3b09d0ec 100644
--- a/apps/app/components/states/delete-state-modal.tsx
+++ b/apps/app/components/states/delete-state-modal.tsx
@@ -104,7 +104,7 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
@@ -119,9 +119,9 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data }) =>
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
-                          Are you sure you want to delete state - {`"`}
+                          Are you sure you want to delete state- {" "}
                           <span className="italic">{data?.name}</span>
-                          {`"`} ? All of the data related to the state will be permanently removed.
+                          ? All of the data related to the state will be permanently removed.
                           This action cannot be undone.
                         </p>
                       </div>
diff --git a/apps/app/components/views/delete-view-modal.tsx b/apps/app/components/views/delete-view-modal.tsx
index c93ea1f92..7563cdf40 100644
--- a/apps/app/components/views/delete-view-modal.tsx
+++ b/apps/app/components/views/delete-view-modal.tsx
@@ -96,7 +96,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, onClose, onSucc
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
@@ -111,9 +111,9 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, onClose, onSucc
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
-                          Are you sure you want to delete view - {`"`}
-                          <span className="italic">{data?.name}</span>
-                          {`?"`} All of the data related to the view will be permanently removed.
+                          Are you sure you want to delete view- {" "}
+                          <span className="font-bold">{data?.name}</span>
+                          ? All of the data related to the view will be permanently removed.
                           This action cannot be undone.
                         </p>
                       </div>
diff --git a/apps/app/components/views/single-view-item.tsx b/apps/app/components/views/single-view-item.tsx
index 62e7eb840..5b8bab19e 100644
--- a/apps/app/components/views/single-view-item.tsx
+++ b/apps/app/components/views/single-view-item.tsx
@@ -20,16 +20,11 @@ import { VIEWS_LIST } from "constants/fetch-keys";
 import useToast from "hooks/use-toast";
 
 type Props = {
-  view: IView,
-  setSelectedView: React.Dispatch<React.SetStateAction<IView | null>>,
+  view: IView;
+  setSelectedView: React.Dispatch<React.SetStateAction<IView | null>>;
 };
 
-
-export const SingleViewItem: React.FC<Props> = ({
-  view,
-  setSelectedView,
-}) => {
-
+export const SingleViewItem: React.FC<Props> = ({ view, setSelectedView }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -86,47 +81,63 @@ export const SingleViewItem: React.FC<Props> = ({
   };
 
   return (
-    <div
-      className="flex items-center justify-between border-b bg-white p-4 first:rounded-t-[10px] last:rounded-b-[10px]"
-    >
-      <div className="flex flex-col w-full gap-3">
-        <div className="flex justify-between w-full">
-          <div className="flex items-center gap-2">
-            <StackedLayersIcon height={18} width={18} />
-            <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
-              <a>{view.name}</a>
-            </Link>
-          </div>
-          <div className="flex">
-            {
-              view.is_favorite ? (
-                <button type="button" onClick={handleRemoveFromFavorites}>
-                  <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                </button>
-              ) : (
-                <button type="button" onClick={handleAddToFavorites}>
-                  <StarIcon className="h-4 w-4 " color="#858E96" />
-                </button>
-              )
-            }
-            <CustomMenu width="auto" verticalEllipsis>
-              <CustomMenu.MenuItem
-                onClick={() => {
-                  setSelectedView(view);
-                }}
-              >
-                <span className="flex items-center justify-start gap-2">
-                  <TrashIcon className="h-4 w-4" />
-                  <span>Delete</span>
-                </span>
-              </CustomMenu.MenuItem>
-            </CustomMenu>
+    <>
+      <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
+        <div className="flex items-center cursor-pointer justify-between border-b bg-white p-4 first:rounded-t-[10px] last:rounded-b-[10px]">
+          <div className="flex flex-col w-full gap-3">
+            <div className="flex justify-between w-full">
+              <div className="flex items-center gap-2">
+                <StackedLayersIcon height={18} width={18} />
+                <a>{view.name}</a>
+              </div>
+              <div className="flex">
+                {view.is_favorite ? (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleRemoveFromFavorites();
+                    }}
+                  >
+                    <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleAddToFavorites();
+                    }}
+                  >
+                    <StarIcon className="h-4 w-4 " color="#858E96" />
+                  </button>
+                )}
+                <CustomMenu width="auto" verticalEllipsis>
+                  <CustomMenu.MenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setSelectedView(view);
+                    }}
+                  >
+                    <span className="flex items-center justify-start gap-2">
+                      <TrashIcon className="h-4 w-4" />
+                      <span>Delete</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+                </CustomMenu>
+              </div>
+            </div>
+            {view?.description && (
+              <p className="text-sm text-[#858E96] font-normal leading-5 px-[27px]">
+                {view.description}
+              </p>
+            )}
           </div>
         </div>
-        {view?.description && <p className="text-sm text-[#858E96] font-normal leading-5 px-[27px]">
-          {view.description}
-        </p>}
-      </div>
-    </div>
-  )
-}
+      </Link>
+    </>
+  );
+};
diff --git a/apps/app/components/workspace/confirm-workspace-member-remove.tsx b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
index 0dee47008..c70c5c98d 100644
--- a/apps/app/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/app/components/workspace/confirm-workspace-member-remove.tsx
@@ -53,7 +53,7 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
                 <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
@@ -68,9 +68,9 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-gray-500">
-                          Are you sure you want to remove member - {`"`}
-                          <span className="italic">{data?.email}</span>
-                          {`"`} ? They will no longer have access to this workspace. This action
+                          Are you sure you want to remove member- {" "}
+                          <span className="font-bold">{data?.email}</span>
+                          ? They will no longer have access to this workspace. This action
                           cannot be undone.
                         </p>
                       </div>