style: list and kanban view theming (#906)

* fix: sidebar workspace dropdown logo

* style: list and kanban view theming

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

@@ -123,8 +123,8 @@ export const BoardHeader: React.FC<Props> = ({
 
   return (
     <div
-      className={`flex justify-between items-center px-1 ${
-        !isCollapsed ? "flex-col rounded-md border bg-brand-surface-2 border-brand-base" : ""
+      className={`flex items-center justify-between px-1 ${
+        !isCollapsed ? "flex-col rounded-md bg-brand-surface-1" : ""
       }`}
     >
       <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
@@ -145,7 +145,7 @@ export const BoardHeader: React.FC<Props> = ({
           <span
             className={`${
               isCollapsed ? "ml-0.5" : ""
-            } rounded-full bg-brand-surface-2 py-1 min-w-[2.5rem] text-xs text-center`}
+            } min-w-[2.5rem] rounded-full bg-brand-surface-2 py-1 text-center text-xs`}
           >
             {groupedByIssues?.[groupTitle].length ?? 0}
           </span>

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

@@ -358,7 +358,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
                 {issue.label_details.map((label) => (
                   <div
                     key={label.id}
-                    className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
+                    className="group flex items-center gap-1 rounded-2xl border border-brand-base px-2 py-0.5 text-xs text-brand-secondary"
                   >
                     <span
                       className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
@@ -389,7 +389,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
               />
             )}
             {properties.link && (
-              <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
+              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
                   <div className="flex items-center gap-1 text-gray-500">
                     <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
@@ -399,10 +399,10 @@ export const SingleBoardIssue: React.FC<Props> = ({
               </div>
             )}
             {properties.attachment_count && (
-              <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
+              <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
                   <div className="flex items-center gap-1 text-gray-500">
-                    <PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" />
+                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
                     {issue.attachment_count}
                   </div>
                 </Tooltip>

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

@@ -12,7 +12,12 @@ import { SelectFilters } from "components/views";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import { ChevronDownIcon, ListBulletIcon, Squares2X2Icon, CalendarDaysIcon } from "@heroicons/react/24/outline";
+import {
+  ChevronDownIcon,
+  ListBulletIcon,
+  Squares2X2Icon,
+  CalendarDaysIcon,
+} from "@heroicons/react/24/outline";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
@@ -113,7 +118,7 @@ export const IssuesFilterView: React.FC = () => {
           <>
             <Popover.Button
               className={`group flex items-center gap-2 rounded-md border border-brand-base bg-transparent px-3 py-1.5 text-xs hover:bg-brand-surface-1 hover:text-brand-base focus:outline-none ${
-                open ? "bg-brand-surface-1 text-brand-base" : "text-brand-muted-1"
+                open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
               }`}
             >
               View

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

@@ -217,7 +217,7 @@ export const SingleListIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-brand-base last:border-b-0"
+        className="flex items-center justify-between gap-2 px-4 py-2.5 border-b border-brand-base bg-brand-surface-1 last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
@@ -231,13 +231,15 @@ export const SingleListIssue: React.FC<Props> = ({
                 tooltipHeading="Issue ID"
                 tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
               >
-                <span className="flex-shrink-0 text-xs text-gray-400">
+                <span className="flex-shrink-0 text-xs text-brand-secondary">
                   {issue.project_detail?.identifier}-{issue.sequence_id}
                 </span>
               </Tooltip>
             )}
             <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-              <span className="text-[0.825rem] text-gray-800">{truncateText(issue.name, 50)}</span>
+              <span className="text-[0.825rem] text-brand-base">
+                {truncateText(issue.name, 50)}
+              </span>
             </Tooltip>
           </a>
         </Link>
@@ -267,7 +269,7 @@ export const SingleListIssue: React.FC<Props> = ({
             />
           )}
           {properties.sub_issue_count && (
-            <div className="flex  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 border-brand-base text-brand-secondary px-3 py-1 text-xs shadow-sm">
               {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
             </div>
           )}
@@ -276,7 +278,7 @@ export const SingleListIssue: React.FC<Props> = ({
               {issue.label_details.map((label) => (
                 <span
                   key={label.id}
-                  className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
+                  className="group flex items-center gap-1 rounded-2xl border border-brand-base text-brand-secondary px-2 py-0.5 text-xs"
                 >
                   <span
                     className="h-1.5 w-1.5  rounded-full"
@@ -308,8 +310,8 @@ export const SingleListIssue: React.FC<Props> = ({
             />
           )}
           {properties.link && (
-            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
-              <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
+            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base">
+              <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
                 <div className="flex items-center gap-1 text-gray-500">
                   <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
                   {issue.link_count}
@@ -318,8 +320,8 @@ export const SingleListIssue: React.FC<Props> = ({
             </div>
           )}
           {properties.attachment_count && (
-            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-gray-200">
-              <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
+            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base">
+              <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
                 <div className="flex items-center gap-1 text-gray-500">
                   <PaperClipIcon className="h-3.5 w-3.5 text-gray-500 -rotate-45" />
                   {issue.attachment_count}

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

@@ -130,14 +130,10 @@ export const SingleList: React.FC<Props> = ({
   };
 
   return (
-    <Disclosure key={groupTitle} as="div" defaultOpen>
+    <Disclosure as="div" defaultOpen>
       {({ open }) => (
-        <div className="rounded-[10px] border border-brand-base bg-brand-surface-2">
-          <div
-            className={`flex items-center justify-between bg-brand-surface-1 px-4 py-2.5 ${
-              open ? "rounded-t-[10px]" : "rounded-[10px]"
-            }`}
-          >
+        <div>
+          <div className="flex items-center justify-between bg-brand-base px-4 py-2.5">
             <Disclosure.Button>
               <div className="flex items-center gap-x-3">
                 {selectedGroup !== null && (
@@ -150,7 +146,7 @@ export const SingleList: React.FC<Props> = ({
                 ) : (
                   <h2 className="font-medium leading-5">All Issues</h2>
                 )}
-                <span className="rounded-full bg-brand-surface-2 py-1 min-w-[2.5rem] text-center text-xs text-brand-2">
+                <span className="text-brand-2 min-w-[2.5rem] rounded-full bg-brand-surface-2 py-1 text-center text-xs">
                   {groupedByIssues[groupTitle as keyof IIssue].length}
                 </span>
               </div>
@@ -168,7 +164,7 @@ export const SingleList: React.FC<Props> = ({
             ) : (
               <CustomMenu
                 customButton={
-                  <div className="flex items-center cursor-pointer">
+                  <div className="flex cursor-pointer items-center">
                     <PlusIcon className="h-4 w-4" />
                   </div>
                 }
@@ -215,7 +211,9 @@ export const SingleList: React.FC<Props> = ({
                     />
                   ))
                 ) : (
-                  <p className="px-4 py-3 text-sm text-brand-secondary">No issues.</p>
+                  <p className="bg-brand-surface-1 px-4 py-2.5 text-sm text-brand-secondary">
+                    No issues.
+                  </p>
                 )
               ) : (
                 <div className="flex h-full w-full items-center justify-center">Loading...</div>

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

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

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

@@ -52,19 +52,19 @@ export const ViewPrioritySelect: React.FC<Props> = ({
       customButton={
         <button
           type="button"
-          className={`grid h-6 w-6 place-items-center rounded ${
+          className={`grid h-6 w-6 place-items-center rounded border border-brand-base ${
             isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-          } items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+          } items-center shadow-sm ${
             issue.priority === "urgent"
-              ? "bg-red-100 text-red-600 hover:bg-red-100"
+              ? "text-red-600"
               : issue.priority === "high"
-              ? "bg-orange-100 text-orange-500 hover:bg-orange-100"
+              ? "text-orange-500"
               : issue.priority === "medium"
-              ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
+              ? "text-yellow-500"
               : issue.priority === "low"
-              ? "bg-green-100 text-green-500 hover:bg-green-100"
-              : "bg-gray-100"
-          } border-none`}
+              ? "bg-green-100 text-green-500"
+              : ""
+          }`}
         >
           <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"}>
             <span>

apps/app/components/ui/avatar.tsx

@@ -17,18 +17,27 @@ type AvatarProps = {
   index?: number;
   height?: string;
   width?: string;
-  fontSize?: string
+  fontSize?: string;
 };
 
-export const Avatar: React.FC<AvatarProps> = ({ user, index, height="20px", width="20px", fontSize="12px" }) => (
-  <div className={`relative rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`} style={{
-    height: height,
-    width: width,
-  }}>
+export const Avatar: React.FC<AvatarProps> = ({
+  user,
+  index,
+  height = "20px",
+  width = "20px",
+  fontSize = "12px",
+}) => (
+  <div
+    className={`relative rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}
+    style={{
+      height: height,
+      width: width,
+    }}
+  >
     {user && user.avatar && user.avatar !== "" ? (
       <div
         className={`rounded-full border-2 ${
-          index ? "border-white bg-brand-surface-2" : "border-transparent"
+          index ? "border-brand-surface-1 bg-brand-surface-2" : "border-transparent"
         }`}
         style={{
           height: height,
@@ -44,11 +53,14 @@ export const Avatar: React.FC<AvatarProps> = ({ user, index, height="20px", widt
         />
       </div>
     ) : (
-      <div className="grid place-items-center rounded-full border-2 border-white bg-gray-700 text-xs capitalize text-white" style={{
-        height: height,
-        width: width,
-        fontSize: fontSize,
-      }}>
+      <div
+        className="grid place-items-center rounded-full border-2 border-brand-surface-1 bg-gray-700 text-xs capitalize text-white"
+        style={{
+          height: height,
+          width: width,
+          fontSize: fontSize,
+        }}
+      >
         {user?.first_name && user.first_name !== ""
           ? user.first_name.charAt(0)
           : user?.email?.charAt(0)}