From e6f947ad90b4139388b1c50ee9646c0de9ae1710 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Mon, 13 Nov 2023 14:42:45 +0530
Subject: [PATCH] style: ui improvements and bug fixes (#2758)

* style: add transition to favorite projects dropdown.

* style: update project integration settings borders.

* style: fix text overflow issue in project views.

* fix: issue with non-functional cancel button in leave project modal.
---
 web/components/project/integration-card.tsx   |  2 +-
 .../project/leave-project-modal.tsx           |  3 +-
 web/components/project/sidebar-list.tsx       | 55 +++++++++++--------
 web/components/views/delete-view-modal.tsx    |  2 +-
 web/components/views/view-list-item.tsx       |  6 +-
 .../[projectId]/settings/integrations.tsx     |  2 +-
 6 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/web/components/project/integration-card.tsx b/web/components/project/integration-card.tsx
index 8a53fa50d..786f5d79e 100644
--- a/web/components/project/integration-card.tsx
+++ b/web/components/project/integration-card.tsx
@@ -91,7 +91,7 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
   return (
     <>
       {integration && (
-        <div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6">
+        <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
           <div className="flex items-start gap-4">
             <div className="h-10 w-10 flex-shrink-0">
               <Image
diff --git a/web/components/project/leave-project-modal.tsx b/web/components/project/leave-project-modal.tsx
index 8f534cecb..421234ab6 100644
--- a/web/components/project/leave-project-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -30,7 +30,7 @@ export interface ILeaveProjectModal {
 }
 
 export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
-  const { project, isOpen } = props;
+  const { project, isOpen, onClose } = props;
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -48,6 +48,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
 
   const handleClose = () => {
     reset({ ...defaultValues });
+    onClose();
   };
 
   const onSubmit = async (data: any) => {
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index cb501a697..a889e7fae 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -149,29 +149,38 @@ export const ProjectSidebarList: FC = observer(() => {
                             </button>
                           </div>
                         )}
-                        <Disclosure.Panel as="div" className="space-y-2">
-                          {orderedFavProjects.map((project, index) => (
-                            <Draggable
-                              key={project.id}
-                              draggableId={project.id}
-                              index={index}
-                              isDragDisabled={!project.is_member}
-                            >
-                              {(provided, snapshot) => (
-                                <div ref={provided.innerRef} {...provided.draggableProps}>
-                                  <ProjectSidebarListItem
-                                    key={project.id}
-                                    project={project}
-                                    provided={provided}
-                                    snapshot={snapshot}
-                                    handleCopyText={() => handleCopyText(project.id)}
-                                    shortContextMenu
-                                  />
-                                </div>
-                              )}
-                            </Draggable>
-                          ))}
-                        </Disclosure.Panel>
+                        <Transition
+                          enter="transition duration-100 ease-out"
+                          enterFrom="transform scale-95 opacity-0"
+                          enterTo="transform scale-100 opacity-100"
+                          leave="transition duration-75 ease-out"
+                          leaveFrom="transform scale-100 opacity-100"
+                          leaveTo="transform scale-95 opacity-0"
+                        >
+                          <Disclosure.Panel as="div" className="space-y-2">
+                            {orderedFavProjects.map((project, index) => (
+                              <Draggable
+                                key={project.id}
+                                draggableId={project.id}
+                                index={index}
+                                isDragDisabled={!project.is_member}
+                              >
+                                {(provided, snapshot) => (
+                                  <div ref={provided.innerRef} {...provided.draggableProps}>
+                                    <ProjectSidebarListItem
+                                      key={project.id}
+                                      project={project}
+                                      provided={provided}
+                                      snapshot={snapshot}
+                                      handleCopyText={() => handleCopyText(project.id)}
+                                      shortContextMenu
+                                    />
+                                  </div>
+                                )}
+                              </Draggable>
+                            ))}
+                          </Disclosure.Panel>
+                        </Transition>
                         {provided.placeholder}
                       </>
                     )}
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
index 5bf07fb66..31be08379 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -104,7 +104,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete view-{" "}
-                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
+                          <span className="break-all font-medium text-custom-text-100">{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/web/components/views/view-list-item.tsx b/web/components/views/view-list-item.tsx
index 3f145be53..41e3a7ae8 100644
--- a/web/components/views/view-list-item.tsx
+++ b/web/components/views/view-list-item.tsx
@@ -61,12 +61,12 @@ export const ProjectViewListItem: React.FC<Props> = observer((props) => {
           <a className="flex items-center justify-between relative rounded p-4 w-full">
             <div className="flex items-center justify-between w-full">
               <div className="flex items-center gap-4">
-                <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
+                <div className="grid place-items-center flex-shrink-0 h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
                   <PhotoFilterIcon className="h-3.5 w-3.5" />
                 </div>
                 <div className="flex flex-col">
-                  <p className="truncate text-sm leading-4 font-medium">{truncateText(view.name, 75)}</p>
-                  {view?.description && <p className="text-xs text-custom-text-200">{view.description}</p>}
+                  <p className="text-sm leading-4 font-medium break-all">{truncateText(view.name, 75)}</p>
+                  {view?.description && <p className="text-xs text-custom-text-200 break-all">{view.description}</p>}
                 </div>
               </div>
               <div className="ml-2 flex flex-shrink-0">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index 06b8c25b2..08bce4c4c 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -43,7 +43,7 @@ const ProjectIntegrationsPage: NextPageWithLayout = () => {
 
   return (
     <div className={`pr-9 py-8 gap-10 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
-      <div className="flex items-center py-3.5 border-b border-custom-border-200">
+      <div className="flex items-center py-3.5 border-b border-custom-border-100">
         <h3 className="text-xl font-medium">Integrations</h3>
       </div>
       {workspaceIntegrations ? (