fix: minor ui fixes (#488)

apps/app/components/core/issues-view.tsx

@@ -21,7 +21,13 @@ import { CreateUpdateViewModal } from "components/views";
 // ui
 import { Avatar, EmptySpace, EmptySpaceItem, PrimaryButton } from "components/ui";
 // icons
-import { PlusIcon, RectangleStackIcon, TrashIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import {
+  ListBulletIcon,
+  PlusIcon,
+  RectangleStackIcon,
+  TrashIcon,
+  XMarkIcon,
+} from "@heroicons/react/24/outline";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 // types
@@ -613,6 +619,14 @@ export const IssuesView: React.FC<Props> = ({ type = "issue", openIssuesListModa
                     document.dispatchEvent(e);
                   }}
                 />
+                {openIssuesListModal && (
+                  <EmptySpaceItem
+                    title="Add an existing issue"
+                    description="Open list"
+                    Icon={ListBulletIcon}
+                    action={openIssuesListModal}
+                  />
+                )}
               </EmptySpace>
             </div>
           )

apps/app/components/modules/single-module-card.tsx

@@ -153,8 +153,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
         setIsOpen={setModuleDeleteModal}
         data={module}
       />
-      <div className="h-full w-full min-w-[360px]">
+      <div className="flex flex-col rounded-[10px] border bg-white text-xs">
-        <div className="rounded-[10px] border bg-white text-xs">
         <div className="p-4">
           <div className="flex w-full flex-col gap-5">
             <div className="flex items-start justify-between gap-2">
@@ -261,18 +260,21 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule })
             </div>
           </div>
         </div>
-          <div className="flex gap-2 bg-gray-100 p-4">
+        <div className="flex h-full items-end">
-            <span>
+          <div className="flex w-full items-center gap-2 justify-self-end bg-gray-100 p-4">
-              Progress
+            <span>Progress</span>
-              <br />
+            <Tooltip
-              {isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%
+              tooltipContent={`Progress ${
-            </span>
+                isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)
-            <div className="bar relative mt-1 h-1 w-full rounded bg-gray-300">
+              }%`}
+            >
+              <div className="bar relative h-1 w-full rounded bg-gray-300">
                 <div
                   className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
                   style={{ width: `${(completedIssues / (moduleIssues ?? []).length) * 100}%` }}
                 />
               </div>
+            </Tooltip>
           </div>
         </div>
       </div>

apps/app/components/project/sidebar-list.tsx

@@ -144,7 +144,7 @@ export const ProjectSidebarList: FC = () => {
       />
       <div className="mt-2.5 h-full overflow-y-auto border-t bg-white pt-2.5">
         {favoriteProjects && favoriteProjects.length > 0 && (
-          <div className="mt-3 flex flex-col space-y-2 px-6">
+          <div className="mt-3 flex flex-col space-y-2 px-3">
             {!sidebarCollapse && <h5 className="text-sm font-semibold text-gray-400">Favorites</h5>}
             {favoriteProjects.map((favoriteProject) => {
               const project = favoriteProject.project_detail;

apps/app/components/project/single-sidebar-project.tsx

@@ -146,7 +146,7 @@ export const SingleSidebarProject: React.FC<Props> = ({
                 return (
                   <Link key={item.name} href={item.href}>
                     <a
-                      className={`group flex items-center rounded-md px-2 py-2 text-xs font-medium outline-none ${
+                      className={`group flex items-center rounded-md p-2 text-xs font-medium outline-none ${
                         item.href === router.asPath
                           ? "bg-indigo-50 text-gray-900"
                           : "text-gray-500 hover:bg-indigo-50 hover:text-gray-900 focus:bg-indigo-50 focus:text-gray-900"

apps/app/components/states/single-state.tsx

@@ -134,7 +134,9 @@ export const SingleState: React.FC<Props> = ({
   };
 
   return (
-    <div className={`group flex items-center justify-between gap-2 rounded-[10px] bg-white p-5`}>
+    <div
+      className={`group flex items-center justify-between gap-2 bg-white p-5 first:rounded-t-[10px] last:rounded-b-[10px]`}
+    >
       <div className="flex items-center gap-3">
         {getStateGroupIcon(state.group, "20", "20", state.color)}
         <div>

apps/app/components/ui/empty-state.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import Image from "next/image";
 
+// ui
+import { PrimaryButton } from "components/ui";
 // icon
 import { PlusIcon } from "@heroicons/react/24/outline";
 // helper
@@ -47,9 +49,8 @@ export const EmptyState: React.FC<Props> = ({ type, title, description, imgURL,
       )}
       <p className="max-w-md text-sm text-gray-500">{description}</p>
 
-      <button
+      <PrimaryButton
-        type="button"
+        className="flex items-center gap-1"
-        className="flex items-center gap-1 rounded-lg bg-theme px-2.5 py-2 text-sm text-white"
         onClick={() => {
           if (action) {
             action();
@@ -66,7 +67,7 @@ export const EmptyState: React.FC<Props> = ({ type, title, description, imgURL,
       >
         <PlusIcon className="h-4 w-4 font-bold text-white" />
         Create New {capitalizeFirstLetter(type)}
-      </button>
+      </PrimaryButton>
     </div>
   );
 };

apps/app/components/ui/multi-level-dropdown.tsx

@@ -66,15 +66,11 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                     as="button"
                     onClick={(e: any) => {
                       if (option.children) {
-                        if (openChildFor === option.id) {
                         e.stopPropagation();
                         e.preventDefault();
-                          setOpenChildFor(null);
+
-                        } else {
+                        if (openChildFor === option.id) setOpenChildFor(null);
-                          e.stopPropagation();
+                        else setOpenChildFor(option.id);
-                          e.preventDefault();
-                          setOpenChildFor(option.id);
-                        }
                       } else {
                         onSelect(option.value);
                       }

apps/app/components/workspace/sidebar-dropdown.tsx

@@ -74,13 +74,15 @@ export const WorkspaceSidebarDropdown = () => {
 
   return (
     <div className="relative">
-      <Menu as="div" className="col-span-4 inline-block w-full px-5 py-3 text-left">
+      <Menu as="div" className="col-span-4 inline-block w-full p-3 text-left">
-        <div className="flex w-full items-center justify-between gap-2.5">
+        <div className="flex items-center justify-between gap-2.5">
-          <Menu.Button
+          <Menu.Button className="flex w-full items-center rounded-md py-2 text-sm font-semibold text-gray-700 focus:outline-none">
-            className={`inline-flex w-full items-center rounded-md px-1 py-2 text-sm font-semibold text-gray-700 focus:outline-none `}
+            <div
+              className={`flex w-full items-center gap-x-2 rounded-md bg-gray-100 px-2 py-1.5 ${
+                sidebarCollapse ? "justify-center" : ""
+              }`}
             >
-            <div className="flex w-full items-center gap-x-2 rounded-md bg-gray-100 px-2 py-1.5">
+              <div className="relative grid h-6 w-6 place-items-center rounded bg-gray-700 uppercase text-white">
-              <div className="relative flex h-6 w-6 items-center justify-center rounded bg-gray-700 p-2 uppercase text-white">
                 {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
                   <Image
                     src={activeWorkspace.logo}
@@ -95,12 +97,8 @@ export const WorkspaceSidebarDropdown = () => {
               </div>
 
               {!sidebarCollapse && (
-                <p className="text-base">
+                <p>
-                  {activeWorkspace?.name
+                  {activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
-                    ? activeWorkspace.name.length > 17
-                      ? `${activeWorkspace.name.substring(0, 15)}...`
-                      : activeWorkspace.name
-                    : "Loading..."}
                 </p>
               )}
             </div>
@@ -130,12 +128,9 @@ export const WorkspaceSidebarDropdown = () => {
             className="fixed left-2 z-20 mt-1  flex w-full max-w-[17rem] origin-top-left flex-col rounded-md
           bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
           >
-            <div className="flex flex-col items-start justify-start gap-3 px-5 py-3">
+            <div className="flex flex-col items-start justify-start gap-3 p-3">
-              <Menu.Item as="div" className="text-sm text-gray-500">
+              <div className="text-sm text-gray-500">{user?.email}</div>
-                {user?.email}
-              </Menu.Item>
               <span className="text-sm font-semibold text-gray-500">Workspace</span>
-
               {workspaces ? (
                 <div className="flex h-full w-full flex-col items-start justify-start gap-3.5">
                   {workspaces.length > 0 ? (

apps/app/components/workspace/sidebar-menu.tsx

@@ -37,7 +37,7 @@ export const WorkspaceSidebarMenu: React.FC = () => {
   const { collapsed: sidebarCollapse } = useTheme();
 
   return (
-    <div className="flex w-full flex-col items-start justify-start gap-2 px-5 py-1">
+    <div className="flex w-full flex-col items-start justify-start gap-2 px-3 py-1">
       {workspaceLinks(workspaceSlug as string).map((link, index) => (
         <Link key={index} href={link.href}>
           <a
@@ -49,12 +49,16 @@ export const WorkspaceSidebarMenu: React.FC = () => {
               sidebarCollapse ? "justify-center" : ""
             }`}
           >
+            <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
               <link.icon
                 className={`${
                   link.href === router.asPath ? "text-gray-900" : "text-gray-600"
-              } h-5 w-5 flex-shrink-0 group-hover:text-gray-900`}
+                } group-hover:text-gray-900`}
                 aria-hidden="true"
+                height="20"
+                width="20"
               />
+            </span>
             {!sidebarCollapse && link.name}
           </a>
         </Link>

apps/app/layouts/app-layout/app-sidebar.tsx

@@ -20,8 +20,8 @@ const Sidebar: React.FC<SidebarProps> = ({ toggleSidebar, setToggleSidebar }) =>
   return (
     <nav className="relative z-20 h-screen">
       <div
-        className={`${sidebarCollapse ? "" : "w-auto md:w-72"} fixed inset-y-0 top-0 ${
+        className={`${sidebarCollapse ? "" : "w-auto md:w-[17rem]"} fixed inset-y-0 top-0 ${
-          toggleSidebar ? "left-0" : "-left-60 md:left-0"
+          toggleSidebar ? "left-0" : "-left-full md:left-0"
         } flex h-full flex-col bg-white duration-300 md:relative`}
       >
         <div className="flex h-full flex-1 flex-col border-r">

apps/app/pages/[workspaceSlug]/me/profile.tsx

@@ -32,6 +32,7 @@ import {
 // types
 import type { NextPage, GetServerSidePropsContext } from "next";
 import type { IUser } from "types";
+import { useRouter } from "next/dist/client/router";
 
 const defaultValues: Partial<IUser> = {
   avatar: "",
@@ -45,6 +46,9 @@ const Profile: NextPage = () => {
   const [isRemoving, setIsRemoving] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
 
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
   const {
     register,
     handleSubmit,
@@ -131,7 +135,7 @@ const Profile: NextPage = () => {
       title: "Assigned Issues",
       number: assignedIssuesLength,
       description: "View your workspace invitations.",
-      href: "/invitations",
+      href: `/${workspaceSlug}/me/my-issues`,
     },
     {
       icon: UserPlusIcon,

apps/app/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx

@@ -82,10 +82,10 @@ const ProjectViews: NextPage = () => {
       />
       {views ? (
         views.length > 0 ? (
-          <div className="rounded-md border">
+          <div className="rounded-[10px] border">
             {views.map((view) => (
               <div
-                className="flex items-center justify-between rounded-md border-b bg-white p-4"
+                className="flex items-center justify-between border-b bg-white p-4 first:rounded-t-[10px] last:rounded-b-[10px]"
                 key={view.id}
               >
                 <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
@@ -110,7 +110,7 @@ const ProjectViews: NextPage = () => {
           <EmptyState
             type="view"
             title="Create New View"
-            description="Views are smaller, focused projects that help you group and organize issues within a specific time frame."
+            description="Views aid in saving your issues by applying various filters and grouping options."
             imgURL={emptyView}
             action={() => setIsCreateViewModalOpen(true)}
           />