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

@@ -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

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) => {

web/components/project/sidebar-list.tsx

@@ -149,6 +149,14 @@ export const ProjectSidebarList: FC = observer(() => {
                             </button>
                           </div>
                         )}
+                        <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
@@ -172,6 +180,7 @@ export const ProjectSidebarList: FC = observer(() => {
                               </Draggable>
                             ))}
                           </Disclosure.Panel>
+                        </Transition>
                         {provided.placeholder}
                       </>
                     )}

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>

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>
+                  <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">{view.description}</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">

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 ? (