style: list view (#409)

* style: list view

* style: list board header spacing fix

apps/app/components/core/list-view/all-lists.tsx

@@ -38,15 +38,25 @@ export const AllLists: React.FC<Props> = ({
   return (
     <div className="flex flex-col space-y-5">
       {Object.keys(groupedByIssues).map((singleGroup) => {
+        const currentState =
+          selectedGroup === "state_detail.name"
+            ? states?.find((s) => s.name === singleGroup)
+            : null;
         const stateId =
           selectedGroup === "state_detail.name"
             ? states?.find((s) => s.name === singleGroup)?.id ?? null
             : null;
+        const bgColor =
+          selectedGroup === "state_detail.name"
+            ? states?.find((s) => s.name === singleGroup)?.color
+            : "#000000";
 
         return (
           <SingleList
             key={singleGroup}
             type={type}
+            currentState={currentState}
+            bgColor={bgColor}
             groupTitle={singleGroup}
             groupedByIssues={groupedByIssues}
             selectedGroup={selectedGroup}

apps/app/components/core/list-view/single-issue.tsx

@@ -27,7 +27,7 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/outline";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import { CycleIssueResponse, IIssue, ModuleIssueResponse, Properties, UserAuth } from "types";
 // fetch-keys
@@ -176,21 +176,15 @@ export const SingleListIssue: React.FC<Props> = ({
           Copy issue link
         </ContextMenu.Item>
       </ContextMenu>
+      <div className="border-b border-gray-300 last:border-b-0">
         <div
-        className="flex items-center justify-between gap-2 px-4 py-3 text-sm"
+          className="flex items-center justify-between gap-2 px-4 py-4"
           onContextMenu={(e) => {
             e.preventDefault();
             setContextMenu(true);
             setContextMenuPosition({ x: e.pageX, y: e.pageY });
           }}
         >
-        <div className="flex items-center gap-2">
-          <span
-            className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
-            style={{
-              backgroundColor: issue.state_detail.color,
-            }}
-          />
           <Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
             <a className="group relative flex items-center gap-2">
               {properties.key && (
@@ -198,20 +192,18 @@ export const SingleListIssue: React.FC<Props> = ({
                   tooltipHeading="ID"
                   tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
                 >
-                  <span className="flex-shrink-0 text-xs text-gray-500">
+                  <span className="flex-shrink-0 text-sm text-gray-400">
                     {issue.project_detail?.identifier}-{issue.sequence_id}
                   </span>
                 </Tooltip>
               )}
               <Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
-                <span className="w-auto max-w-lg overflow-hidden text-ellipsis whitespace-nowrap">
+                <span className="text-base text-gray-800">{truncateText(issue.name, 50)}</span>
-                  {issue.name}
-                </span>
               </Tooltip>
             </a>
           </Link>
-        </div>
+
-        <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
+          <div className="flex  flex-wrap items-center gap-3 text-xs">
             {properties.priority && (
               <ViewPrioritySelect
                 issue={issue}
@@ -236,11 +228,11 @@ export const SingleListIssue: React.FC<Props> = ({
               />
             )}
             {properties.sub_issue_count && (
-            <div className="flex flex-shrink-0 items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
+              <div className="flex  items-center gap-1 rounded-md border px-3 py-1.5 text-xs shadow-sm">
                 {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
               </div>
             )}
-          {properties.labels && (
+            {properties.labels && issue.label_details.length > 0 ? (
               <div className="flex flex-wrap gap-1">
                 {issue.label_details.map((label) => (
                   <span
@@ -248,7 +240,7 @@ export const SingleListIssue: React.FC<Props> = ({
                     className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
                   >
                     <span
-                    className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
+                      className="h-1.5 w-1.5  rounded-full"
                       style={{
                         backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
                       }}
@@ -257,6 +249,8 @@ export const SingleListIssue: React.FC<Props> = ({
                   </span>
                 ))}
               </div>
+            ) : (
+              ""
             )}
             {properties.assignee && (
               <ViewAssigneeSelect
@@ -282,6 +276,7 @@ export const SingleListIssue: React.FC<Props> = ({
             )}
           </div>
         </div>
+      </div>
     </>
   );
 };

apps/app/components/core/list-view/single-list.tsx

@@ -7,15 +7,18 @@ import useIssuesProperties from "hooks/use-issue-properties";
 // components
 import { SingleListIssue } from "components/core";
 // icons
-import { ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { PlusIcon } from "@heroicons/react/24/outline";
+import { getStateGroupIcon } from "components/icons";
 // helpers
 import { addSpaceIfCamelCase } from "helpers/string.helper";
 // types
-import { IIssue, IProjectMember, NestedKeyOf, UserAuth } from "types";
+import { IIssue, IProjectMember, IState, NestedKeyOf, UserAuth } from "types";
 import { CustomMenu } from "components/ui";
 
 type Props = {
   type?: "issue" | "cycle" | "module";
+  currentState?: IState | null;
+  bgColor?: string;
   groupTitle: string;
   groupedByIssues: {
     [key: string]: IIssue[];
@@ -33,6 +36,8 @@ type Props = {
 
 export const SingleList: React.FC<Props> = ({
   type,
+  currentState,
+  bgColor,
   groupTitle,
   groupedByIssues,
   selectedGroup,
@@ -69,17 +74,23 @@ export const SingleList: React.FC<Props> = ({
   return (
     <Disclosure key={groupTitle} as="div" defaultOpen>
       {({ open }) => (
-        <div className="rounded-lg bg-white">
+        <div className="rounded-[10px] border border-gray-300 bg-white">
-          <div className="rounded-t-lg bg-gray-100 px-4 py-3">
+          <div
+            className={`flex items-center justify-between bg-gray-100 px-5 py-3 ${
+              open ? "rounded-t-[10px]" : "rounded-[10px]"
+            }`}
+          >
             <Disclosure.Button>
-              <div className="flex items-center gap-x-2">
+              <div className="flex items-center gap-x-3">
+                {selectedGroup !== null && selectedGroup === "state_detail.name" ? (
                   <span>
-                  <ChevronDownIcon
+                    {currentState && getStateGroupIcon(currentState.group, "20", "20", bgColor)}
-                    className={`h-4 w-4 text-gray-500 ${!open ? "-rotate-90 transform" : ""}`}
-                  />
                   </span>
+                ) : (
+                  ""
+                )}
                 {selectedGroup !== null ? (
-                  <h2 className="font-medium capitalize leading-5">
+                  <h2 className="text-xl font-semibold capitalize leading-6 text-gray-800">
                     {selectedGroup === "created_by"
                       ? createdBy
                       : selectedGroup === "assignees"
@@ -89,11 +100,38 @@ export const SingleList: React.FC<Props> = ({
                 ) : (
                   <h2 className="font-medium leading-5">All Issues</h2>
                 )}
-                <p className="text-sm text-gray-500">
+                <span className="rounded-full bg-gray-200 py-0.5 px-3 text-sm text-black">
                   {groupedByIssues[groupTitle as keyof IIssue].length}
-                </p>
+                </span>
               </div>
             </Disclosure.Button>
+
+            {type === "issue" ? (
+              <button
+                type="button"
+                className="p-1  text-gray-500 hover:bg-gray-100"
+                onClick={addIssueToState}
+              >
+                <PlusIcon className="h-4 w-4" />
+              </button>
+            ) : (
+              <CustomMenu
+                label={
+                  <span className="flex items-center">
+                    <PlusIcon className="h-4 w-4" />
+                  </span>
+                }
+                optionsPosition="left"
+                noBorder
+              >
+                <CustomMenu.MenuItem onClick={addIssueToState}>Create new</CustomMenu.MenuItem>
+                {openIssuesListModal && (
+                  <CustomMenu.MenuItem onClick={openIssuesListModal}>
+                    Add an existing issue
+                  </CustomMenu.MenuItem>
+                )}
+              </CustomMenu>
+            )}
           </div>
           <Transition
             show={open}
@@ -105,7 +143,6 @@ export const SingleList: React.FC<Props> = ({
             leaveTo="transform opacity-0"
           >
             <Disclosure.Panel>
-              <div className="divide-y-2">
               {groupedByIssues[groupTitle] ? (
                 groupedByIssues[groupTitle].length > 0 ? (
                   groupedByIssues[groupTitle].map((issue: IIssue) => (
@@ -129,39 +166,8 @@ export const SingleList: React.FC<Props> = ({
               ) : (
                 <div className="flex h-full w-full items-center justify-center">Loading...</div>
               )}
-              </div>
             </Disclosure.Panel>
           </Transition>
-          <div className="p-3">
-            {type === "issue" ? (
-              <button
-                type="button"
-                className="flex items-center gap-1 rounded px-2 py-1 text-xs font-medium hover:bg-gray-100"
-                onClick={addIssueToState}
-              >
-                <PlusIcon className="h-3 w-3" />
-                Add issue
-              </button>
-            ) : (
-              <CustomMenu
-                label={
-                  <span className="flex items-center gap-1">
-                    <PlusIcon className="h-3 w-3" />
-                    Add issue
-                  </span>
-                }
-                optionsPosition="left"
-                noBorder
-              >
-                <CustomMenu.MenuItem onClick={addIssueToState}>Create new</CustomMenu.MenuItem>
-                {openIssuesListModal && (
-                  <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                    Add an existing issue
-                  </CustomMenu.MenuItem>
-                )}
-              </CustomMenu>
-            )}
-          </div>
         </div>
       )}
     </Disclosure>