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 ${
+      className={`flex items-center justify-between px-1 ${
-        !isCollapsed ? "flex-col rounded-md border bg-brand-surface-2 border-brand-base" : ""
+        !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">
+            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base">
-              <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
+              <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">
+            <div className="flex items-center rounded-md shadow-sm px-2.5 py-1 cursor-default text-xs border border-brand-base">
-              <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
+              <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>
-          <div
+          <div className="flex items-center justify-between bg-brand-base px-4 py-2.5">
-            className={`flex items-center justify-between bg-brand-surface-1 px-4 py-2.5 ${
-              open ? "rounded-t-[10px]" : "rounded-[10px]"
-            }`}
-          >
             <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-green-100 text-green-500"
-              : "bg-gray-100"
+              : ""
-          } border-none`}
+          }`}
         >
           <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" }) => (
+export const Avatar: React.FC<AvatarProps> = ({
-  <div className={`relative rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`} style={{
+  user,
-    height: height,
+  index,
-    width: width,
+  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={{
+      <div
-        height: height,
+        className="grid place-items-center rounded-full border-2 border-brand-surface-1 bg-gray-700 text-xs capitalize text-white"
-        width: width,
+        style={{
-        fontSize: fontSize,
+          height: height,
-      }}>
+          width: width,
+          fontSize: fontSize,
+        }}
+      >
         {user?.first_name && user.first_name !== ""
           ? user.first_name.charAt(0)
           : user?.email?.charAt(0)}

apps/app/components/ui/custom-menu.tsx

@@ -44,30 +44,75 @@ const CustomMenu = ({
   customButton,
 }: Props) => (
   <Menu as="div" className={`relative w-min whitespace-nowrap text-left ${className}`}>
-    {customButton ? (
+    {({ open }) => (
-      <Menu.Button as="div">{customButton}</Menu.Button>
+      <>
-    ) : (
+        {customButton ? (
-      <div>
+          <Menu.Button as="div">{customButton}</Menu.Button>
-        {ellipsis || verticalEllipsis ? (
-          <Menu.Button
-            type="button"
-            className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-1 focus:outline-none"
-          >
-            <EllipsisHorizontalIcon className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`} />
-          </Menu.Button>
         ) : (
-          <Menu.Button
+          <div>
-            type="button"
+            {ellipsis || verticalEllipsis ? (
-            className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-brand-surface-1 ${
+              <Menu.Button
-              textAlignment === "right"
+                type="button"
-                ? "text-right"
+                className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-1 focus:outline-none"
-                : textAlignment === "center"
+              >
-                ? "text-center"
+                <EllipsisHorizontalIcon
-                : "text-left"
+                  className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}
+                />
+              </Menu.Button>
+            ) : (
+              <Menu.Button
+                type="button"
+                className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-brand-surface-1 ${open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"} ${
+                  textAlignment === "right"
+                    ? "text-right"
+                    : textAlignment === "center"
+                    ? "text-center"
+                    : "text-left"
+                } ${
+                  noBorder
+                    ? "rounded-md"
+                    : "rounded-md border border-brand-base shadow-sm focus:outline-none"
+                } ${
+                  width === "sm"
+                    ? "w-10"
+                    : width === "md"
+                    ? "w-20"
+                    : width === "lg"
+                    ? "w-32"
+                    : width === "xl"
+                    ? "w-48"
+                    : "w-full"
+                }`}
+              >
+                {label}
+                {!noChevron && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+              </Menu.Button>
+            )}
+          </div>
+        )}
+
+        <Transition
+          as={React.Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items
+            className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md bg-brand-surface-2 p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+              optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
             } ${
-              noBorder
+              height === "sm"
-                ? "rounded"
+                ? "max-h-28"
-                : "rounded-md border border-brand-base shadow-sm focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-skinborder-brand-accent"
+                : height === "md"
+                ? "max-h-44"
+                : height === "rg"
+                ? "max-h-56"
+                : height === "lg"
+                ? "max-h-80"
+                : ""
             } ${
               width === "sm"
                 ? "w-10"
@@ -77,53 +122,14 @@ const CustomMenu = ({
                 ? "w-32"
                 : width === "xl"
                 ? "w-48"
-                : "w-full"
+                : "min-w-full"
             }`}
           >
-            {label}
+            <div className="py-1">{children}</div>
-            {!noChevron && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
+          </Menu.Items>
-          </Menu.Button>
+        </Transition>
-        )}
+      </>
-      </div>
     )}
-
-    <Transition
-      as={React.Fragment}
-      enter="transition ease-out duration-100"
-      enterFrom="transform opacity-0 scale-95"
-      enterTo="transform opacity-100 scale-100"
-      leave="transition ease-in duration-75"
-      leaveFrom="transform opacity-100 scale-100"
-      leaveTo="transform opacity-0 scale-95"
-    >
-      <Menu.Items
-        className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md bg-brand-surface-2 p-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
-          optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
-        } ${
-          height === "sm"
-            ? "max-h-28"
-            : height === "md"
-            ? "max-h-44"
-            : height === "rg"
-            ? "max-h-56"
-            : height === "lg"
-            ? "max-h-80"
-            : ""
-        } ${
-          width === "sm"
-            ? "w-10"
-            : width === "md"
-            ? "w-20"
-            : width === "lg"
-            ? "w-32"
-            : width === "xl"
-            ? "w-48"
-            : "min-w-full"
-        }`}
-      >
-        <div className="py-1">{children}</div>
-      </Menu.Items>
-    </Transition>
   </Menu>
 );
 
@@ -141,7 +147,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
           <a
             className={`${className} ${
               active ? "bg-brand-surface-1" : ""
-            } inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-muted-1`}
+            } hover:text-brand-muted-1 inline-block w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1`}
             onClick={close}
           >
             {children}
@@ -152,7 +158,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
           type="button"
           className={`${className} ${
             active ? "bg-brand-surface-1" : ""
-          } w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-muted-1`}
+          } hover:text-brand-muted-1 w-full select-none gap-2 truncate rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1`}
           onClick={onClick}
         >
           {children}

apps/app/components/ui/custom-search-select.tsx

@@ -68,11 +68,11 @@ export const CustomSearchSelect = ({
             <Combobox.Button as="div">{customButton}</Combobox.Button>
           ) : (
             <Combobox.Button
-              className={`flex w-full ${
+              className={`flex w-full border border-brand-base ${
-                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
+                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-base"
               } ${
-                input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+                input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
-              } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent ${
+              } items-center justify-between gap-1 rounded-md shadow-sm duration-300 focus:outline-none focus:ring-1 focus:ring-brand-base ${
                 textAlignment === "right"
                   ? "text-right"
                   : textAlignment === "center"
@@ -132,7 +132,7 @@ export const CustomSearchSelect = ({
                         className={({ active, selected }) =>
                           `${active || selected ? "bg-brand-surface-1" : ""} ${
                             selected ? "font-medium" : ""
-                          } text-brand-muted-1 flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5`
+                          } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
                         }
                       >
                         {({ active, selected }) => (

apps/app/components/ui/custom-select.tsx

@@ -51,8 +51,8 @@ const CustomSelect = ({
       ) : (
         <Listbox.Button
           className={`flex w-full ${
-            disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
+            disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-base"
-          } items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:border-brand-accent focus:outline-none focus:ring-1 focus:ring-brand-accent ${
+          } items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none focus:ring-1 focus:ring-brand-base ${
             input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
           } ${
             textAlignment === "right"

apps/app/components/ui/datepicker.tsx

@@ -36,7 +36,7 @@ export const CustomDatePicker: React.FC<Props> = ({
     }}
     className={`${
       renderAs === "input"
-        ? "block border-brand-base bg-transparent px-3 py-2 text-sm focus:outline-none"
+        ? "block px-3 py-2 text-sm focus:outline-none"
         : renderAs === "button"
         ? `px-3 py-1 text-xs shadow-sm ${
             disabled ? "" : "hover:bg-brand-surface-1"
@@ -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 ${className}`}
+    } w-full rounded-md border border-brand-base bg-transparent caret-transparent ${className}`}
     dateFormat="dd-MM-yyyy"
     isClearable={isClearable}
     disabled={disabled}

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

@@ -41,7 +41,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
           <div>
             <Menu.Button
               onClick={() => setOpenChildFor(null)}
-              className={`group flex items-center justify-between gap-2 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+              className={`group flex items-center justify-between gap-2 rounded-md border border-brand-base px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none ${
                 open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
               }`}
             >
@@ -83,8 +83,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                       <>
                         <div
                           className={`${
-                            active || option.selected ? "bg-brand-surface-1" : "text-brand-base"
+                            active || option.selected ? "bg-brand-surface-1" : ""
-                          } flex items-center gap-1 rounded px-1 py-1.5 ${
+                          } flex items-center gap-1 rounded px-1 py-1.5 text-brand-secondary ${
                             direction === "right" ? "justify-between" : ""
                           }`}
                         >
@@ -126,8 +126,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                               onSelect(child.value);
                             }}
                             className={`${
-                              child.selected ? "bg-brand-surface-1" : "text-brand-base"
+                              child.selected ? "bg-brand-surface-1" : ""
-                            } flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize hover:bg-brand-surface-1`}
+                            } flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-1`}
                           >
                             {child.label}
                           </button>

apps/app/components/views/select-filters.tsx

@@ -160,7 +160,7 @@ export const SelectFilters: React.FC<Props> = ({
               label: (
                 <div className="flex items-center gap-2">
                   <div
-                    className="w-2 h-2 rounded-full"
+                    className="h-2 w-2 rounded-full"
                     style={{
                       backgroundColor: label.color && label.color !== "" ? label.color : "#000000",
                     }}

apps/app/layouts/auth-layout/project-authorization-wrapper.tsx

@@ -12,7 +12,6 @@ import Container from "layouts/container";
 import AppHeader from "layouts/app-layout/app-header";
 import AppSidebar from "layouts/app-layout/app-sidebar";
 import SettingsNavbar from "layouts/settings-navbar";
-import { WorkspaceAuthorizationLayout } from "./workspace-authorization-wrapper";
 // components
 import { NotAuthorizedView, JoinProject } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
@@ -72,7 +71,7 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
       <div className="flex h-screen w-full overflow-x-hidden">
         <AppSidebar toggleSidebar={toggleSidebar} setToggleSidebar={setToggleSidebar} />
         {loading ? (
-          <div className="h-full w-full grid place-items-center p-4">
+          <div className="grid h-full w-full place-items-center p-4">
             <div className="flex flex-col items-center gap-3 text-center">
               <h3 className="text-xl">Loading your project...</h3>
               <Spinner />
@@ -81,8 +80,8 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
         ) : error?.status === 401 || error?.status === 403 ? (
           <JoinProject />
         ) : error?.status === 404 ? (
-          <div className="container h-screen grid place-items-center">
+          <div className="container grid h-screen place-items-center">
-            <div className="text-center space-y-4">
+            <div className="space-y-4 text-center">
               <p className="text-2xl font-semibold">No such project exist. Create one?</p>
               <PrimaryButton
                 onClick={() => {
@@ -121,7 +120,11 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
               className={`flex w-full flex-grow flex-col ${
                 noPadding || issueView === "list" ? "" : settingsLayout ? "p-8 lg:px-28" : "p-8"
               } ${
-                bg === "primary" ? "bg-brand-base" : bg === "secondary" ? "bg-brand-surface-1" : "bg-brand-base"
+                bg === "primary"
+                  ? "bg-brand-base"
+                  : bg === "secondary"
+                  ? "bg-brand-surface-1"
+                  : "bg-brand-base"
               }`}
             >
               {settingsLayout && (

apps/app/styles/globals.css

@@ -113,12 +113,11 @@
 
 .horizontal-scroll-enable::-webkit-scrollbar-track {
   height: 7px;
-  background-color: #f5f5f5;
 }
 
 .horizontal-scroll-enable::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: #9ca3af;
+  background-color: rgba(var(--color-bg-surface-1));
 }
 
 .vertical-scroll-enable::-webkit-scrollbar {
@@ -128,12 +127,11 @@
 
 .vertical-scroll-enable::-webkit-scrollbar-track {
   width: 5px;
-  background-color: #f5f5f5;
 }
 
 .vertical-scroll-enable::-webkit-scrollbar-thumb {
   border-radius: 5px;
-  background-color: #9ca3af;
+  background-color: rgba(var(--color-bg-surface-1));
 }
 /* end scrollbar style */
 

apps/app/tailwind.config.js

@@ -1,8 +1,7 @@
 function withOpacity(variableName) {
   return ({ opacityValue }) => {
-    if (opacityValue !== undefined) {
+    if (opacityValue !== undefined) return `rgba(var(${variableName}), ${opacityValue})`;
-      return `rgba(var(${variableName}), ${opacityValue})`;
+
-    }
     return `rgb(var(${variableName}))`;
   };
 }
@@ -19,11 +18,14 @@ module.exports = {
         secondary: "white",
         brand: {
           accent: withOpacity("--color-accent"),
+          base: withOpacity("--color-border"),
         },
       },
       borderColor: {
         brand: {
           base: withOpacity("--color-border"),
+          "surface-1": withOpacity("--color-bg-surface-1"),
+          "surface-2": withOpacity("--color-bg-surface-2"),
         },
       },
       backgroundColor: {