style: list view styling reduced (#867)

apps/app/components/core/board-view/board-header.tsx

@@ -96,17 +96,17 @@ export const BoardHeader: React.FC<Props> = ({
 
     switch (selectedGroup) {
       case "state":
-        icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor);
+        icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
         break;
       case "priority":
-        icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center");
+        icon = getPriorityIcon(groupTitle, "text-lg");
         break;
       case "labels":
         const labelColor =
           issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
         icon = (
           <span
-            className="h-[18px] w-[18px] flex-shrink-0 rounded-full"
+            className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
             style={{ backgroundColor: labelColor }}
           />
         );
@@ -143,7 +143,9 @@ export const BoardHeader: React.FC<Props> = ({
             {getGroupTitle()}
           </h2>
           <span
-            className={`${isCollapsed ? "ml-0.5" : ""} rounded-full bg-gray-100 py-1 px-3 text-sm`}
+            className={`${
+              isCollapsed ? "ml-0.5" : ""
+            } rounded-full bg-gray-100 py-1 min-w-[2.5rem] text-xs text-center`}
           >
             {groupedByIssues?.[groupTitle].length ?? 0}
           </span>

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

@@ -36,7 +36,7 @@ export const AllLists: React.FC<Props> = ({
   return (
     <>
       {groupedByIssues && (
-        <div className="flex flex-col space-y-5 bg-white">
+        <div>
           {Object.keys(groupedByIssues).map((singleGroup) => {
             const currentState =
               selectedGroup === "state" ? states?.find((s) => s.id === singleGroup) : null;

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

@@ -216,9 +216,8 @@ export const SingleListIssue: React.FC<Props> = ({
           </ContextMenu.Item>
         </a>
       </ContextMenu>
-      <div className="border-b mx-6 border-gray-300 last:border-b-0">
       <div
-          className="flex items-center justify-between gap-2  py-3"
+        className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-gray-300 last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
@@ -238,7 +237,7 @@ export const SingleListIssue: React.FC<Props> = ({
               </Tooltip>
             )}
             <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-                <span className="text-sm text-gray-800">{truncateText(issue.name, 50)}</span>
+              <span className="text-[0.825rem] text-gray-800">{truncateText(issue.name, 50)}</span>
             </Tooltip>
           </a>
         </Link>
@@ -360,7 +359,6 @@ export const SingleListIssue: React.FC<Props> = ({
           )}
         </div>
       </div>
-      </div>
     </>
   );
 };

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

@@ -104,17 +104,17 @@ export const SingleList: React.FC<Props> = ({
 
     switch (selectedGroup) {
       case "state":
-        icon = currentState && getStateGroupIcon(currentState.group, "18", "18", bgColor);
+        icon = currentState && getStateGroupIcon(currentState.group, "16", "16", bgColor);
         break;
       case "priority":
-        icon = getPriorityIcon(groupTitle, "h-[18px] w-[18px] flex items-center");
+        icon = getPriorityIcon(groupTitle, "text-lg");
         break;
       case "labels":
         const labelColor =
           issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
         icon = (
           <span
-            className="h-[18px] w-[18px] flex-shrink-0 rounded-full"
+            className="h-3 w-3 flex-shrink-0 rounded-full"
             style={{ backgroundColor: labelColor }}
           />
         );
@@ -134,24 +134,24 @@ export const SingleList: React.FC<Props> = ({
       {({ open }) => (
         <div className="bg-white">
           <div
-            className={`flex items-center justify-between bg-gray-100 px-5 py-3 ${
+            className={`flex items-center justify-between bg-gray-100 px-4 py-2.5 ${
               open ? "" : "rounded-[10px]"
             }`}
           >
             <Disclosure.Button>
               <div className="flex items-center gap-x-3">
                 {selectedGroup !== null && (
-                  <span className="flex items-center">{getGroupIcon()}</span>
+                  <div className="flex items-center">{getGroupIcon()}</div>
                 )}
                 {selectedGroup !== null ? (
-                  <h2 className="text-base font-semibold capitalize leading-6 text-gray-800">
+                  <h2 className="text-sm font-semibold capitalize leading-6 text-gray-800">
                     {getGroupTitle()}
                   </h2>
                 ) : (
                   <h2 className="font-medium leading-5">All Issues</h2>
                 )}
-                <span className="rounded-full bg-gray-200 py-0.5 px-3 text-sm text-black">
+                <span className="rounded-full bg-gray-200 py-1 min-w-[2.5rem] text-center text-xs text-black">
-                  {groupedByIssues[groupTitle as keyof IIssue].length}
+                  {groupedByIssues?.[groupTitle].length ?? 0}
                 </span>
               </div>
             </Disclosure.Button>

apps/app/components/issues/view-select/assignee.tsx

@@ -106,7 +106,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
             } items-center gap-2 text-gray-500`}
           >
             {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
-              <div className="flex items-center justify-center gap-2">
+              <div className="flex items-center justify-center gap-2 -my-0.5">
                 <AssigneesList userIds={issue.assignees} length={3} showLength={false} />
                 <span className="text-gray-500">{issue.assignees.length} Assignees</span>
               </div>

apps/app/components/ui/datepicker.tsx

@@ -34,7 +34,7 @@ export const CustomDatePicker: React.FC<Props> = ({
       if (!val) onChange(null);
       else onChange(renderDateFormat(val));
     }}
-    className={`${className} ${
+    className={`${
       renderAs === "input"
         ? "block border-gray-300 bg-transparent px-3 py-2 text-sm focus:outline-none"
         : renderAs === "button"
@@ -44,7 +44,7 @@ export const CustomDatePicker: React.FC<Props> = ({
         : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
-    } w-full rounded-md border bg-transparent caret-transparent`}
+    } w-full rounded-md border bg-transparent caret-transparent ${className}`}
     dateFormat="dd-MM-yyyy"
     isClearable={isClearable}
     disabled={disabled}