fix: updated text and background colors (#1496)

* fix: custom colors opacity

* chore: update text colors for dark mode

* fix: dropdown text colors, datepicker bg color

* chore: update text colors

* chore: updated primary bg color

apps/app/components/analytics/custom-analytics/sidebar.tsx

@@ -238,8 +238,8 @@ export const AnalyticsSidebar: React.FC<Props> = ({
                               {project?.name.charAt(0)}
                             </span>
                           )}
-                          <h5 className="break-words">
+                          <h5 className="flex items-center gap-1">
-                            {project.name}
+                            <p className="break-words">{project.name}</p>
                             <span className="text-custom-text-200 text-xs ml-1">
                               ({project.identifier})
                             </span>

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

@@ -334,9 +334,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
                   {issue.project_detail.identifier}-{issue.sequence_id}
                 </div>
               )}
-              <h5 className="text-sm group-hover:text-custom-primary break-words line-clamp-3">
+              <h5 className="text-sm break-words line-clamp-3">{issue.name}</h5>
-                {issue.name}
-              </h5>
             </a>
           </Link>
           <div className="relative mt-2.5 flex flex-wrap items-center gap-2 text-xs">

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

@@ -23,10 +23,33 @@ import {
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { Properties } from "types";
+import { Properties, TIssueViewOptions } from "types";
 // constants
 import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
 
+const issueViewOptions: { type: TIssueViewOptions; icon: any }[] = [
+  {
+    type: "list",
+    icon: <ListBulletIcon className="h-4 w-4" />,
+  },
+  {
+    type: "kanban",
+    icon: <Squares2X2Icon className="h-4 w-4" />,
+  },
+  {
+    type: "calendar",
+    icon: <CalendarDaysIcon className="h-4 w-4" />,
+  },
+  {
+    type: "spreadsheet",
+    icon: <Icon iconName="table_chart" />,
+  },
+  {
+    type: "gantt_chart",
+    icon: <Icon iconName="waterfall_chart" className="rotate-90" />,
+  },
+];
+
 export const IssuesFilterView: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, viewId } = router.query;
@@ -56,53 +79,20 @@ export const IssuesFilterView: React.FC = () => {
   return (
     <div className="flex items-center gap-2">
       <div className="flex items-center gap-x-1">
-        <button
+        {issueViewOptions.map((option) => (
-          type="button"
+          <button
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
+            key={option.type}
-            issueView === "list" ? "bg-custom-sidebar-background-80" : ""
+            type="button"
-          }`}
+            className={`grid h-7 w-7 place-items-center rounded p-1 outline-none hover:bg-custom-sidebar-background-80 duration-300 ${
-          onClick={() => setIssueView("list")}
+              issueView === option.type
-        >
+                ? "bg-custom-sidebar-background-80"
-          <ListBulletIcon className="h-4 w-4 text-custom-sidebar-text-200" />
+                : "text-custom-sidebar-text-200"
-        </button>
+            }`}
-        <button
+            onClick={() => setIssueView(option.type)}
-          type="button"
+          >
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
+            {option.icon}
-            issueView === "kanban" ? "bg-custom-sidebar-background-80" : ""
+          </button>
-          }`}
+        ))}
-          onClick={() => setIssueView("kanban")}
-        >
-          <Squares2X2Icon className="h-4 w-4 text-custom-sidebar-text-200" />
-        </button>
-        <button
-          type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
-            issueView === "calendar" ? "bg-custom-sidebar-background-80" : ""
-          }`}
-          onClick={() => setIssueView("calendar")}
-        >
-          <CalendarDaysIcon className="h-4 w-4 text-custom-sidebar-text-200" />
-        </button>
-        <button
-          type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
-            issueView === "spreadsheet" ? "bg-custom-sidebar-background-80" : ""
-          }`}
-          onClick={() => setIssueView("spreadsheet")}
-        >
-          <Icon iconName="table_chart" className="text-custom-sidebar-text-200" />
-        </button>
-        <button
-          type="button"
-          className={`grid h-7 w-7 place-items-center rounded outline-none duration-300 hover:bg-custom-sidebar-background-80 ${
-            issueView === "gantt_chart" ? "bg-custom-sidebar-background-80" : ""
-          }`}
-          onClick={() => setIssueView("gantt_chart")}
-        >
-          <span className="material-symbols-rounded text-custom-sidebar-text-200 text-[18px] rotate-90">
-            waterfall_chart
-          </span>
-        </button>
       </div>
       <SelectFilters
         filters={filters}
@@ -146,7 +136,7 @@ export const IssuesFilterView: React.FC = () => {
         {({ open }) => (
           <>
             <Popover.Button
-              className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none ${
+              className={`group flex items-center gap-2 rounded-md border border-custom-sidebar-border-100 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
                 open
                   ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
                   : "text-custom-sidebar-text-200"

apps/app/components/cycles/single-cycle-card.tsx

@@ -279,11 +279,9 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                         e.preventDefault();
                         handleEditCycle();
                       }}
-                      className="flex cursor-pointer items-center rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-90"
+                      className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
                     >
-                      <span>
+                      <PencilIcon className="h-4 w-4" />
-                        <PencilIcon className="h-4 w-4" />
-                      </span>
                     </button>
                   )}
 

apps/app/components/cycles/single-cycle-list.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 
 import Link from "next/link";
-import Image from "next/image";
 import { useRouter } from "next/router";
 
 // hooks
@@ -157,7 +156,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
           <a className="w-full">
             <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
               <div className="flex items-center justify-between gap-1">
-                <span className="flex items-start gap-2">
+                <div className="flex items-start gap-2">
                   <ContrastIcon
                     className="mt-1 h-5 w-5"
                     color={`${
@@ -179,15 +178,15 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                       position="top-left"
                     >
                       <h3 className="break-words w-full text-base font-semibold">
-                        {truncateText(cycle.name, 70)}
+                        {truncateText(cycle.name, 60)}
                       </h3>
                     </Tooltip>
                     <p className="mt-2 text-custom-text-200 break-words w-full">
                       {cycle.description}
                     </p>
                   </div>
-                </span>
+                </div>
-                <span className="flex items-center gap-4 capitalize">
+                <div className="flex-shrink-0 flex items-center gap-4">
                   <span
                     className={`rounded-full px-1.5 py-0.5
                     ${
@@ -203,14 +202,14 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                     }`}
                   >
                     {cycleStatus === "current" ? (
-                      <span className="flex gap-1">
+                      <span className="flex gap-1 whitespace-nowrap">
                         <PersonRunningIcon className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
+                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
                       </span>
                     ) : cycleStatus === "upcoming" ? (
                       <span className="flex gap-1">
                         <AlarmClockIcon className="h-4 w-4" />
-                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
+                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
                       </span>
                     ) : cycleStatus === "completed" ? (
                       <span className="flex items-center gap-1">
@@ -236,12 +235,12 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
 
                   {cycleStatus !== "draft" && (
                     <div className="flex items-center justify-start gap-2 text-custom-text-200">
-                      <div className="flex items-start gap-1 ">
+                      <div className="flex items-start gap-1 whitespace-nowrap">
                         <CalendarDaysIcon className="h-4 w-4" />
                         <span>{renderShortDateWithYearFormat(startDate)}</span>
                       </div>
                       <ArrowRightIcon className="h-4 w-4" />
-                      <div className="flex items-start gap-1 ">
+                      <div className="flex items-start gap-1 whitespace-nowrap">
                         <TargetIcon className="h-4 w-4" />
                         <span>{renderShortDateWithYearFormat(endDate)}</span>
                       </div>
@@ -287,7 +286,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                     }`}
                     >
                       {cycleStatus === "current" ? (
-                        <span className="flex gap-1">
+                        <span className="flex gap-1 whitespace-nowrap">
                           {cycle.total_issues > 0 ? (
                             <>
                               <RadialProgressBar
@@ -380,7 +379,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                       </CustomMenu.MenuItem>
                     </CustomMenu>
                   </div>
-                </span>
+                </div>
               </div>
             </div>
           </a>

apps/app/components/estimates/single-estimate.tsx

@@ -72,7 +72,7 @@ export const SingleEstimate: React.FC<Props> = ({
             <h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
               {estimate.name}
               {projectDetails?.estimate && projectDetails?.estimate === estimate.id && (
-                <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs capitalize text-green-500">
+                <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">
                   In use
                 </span>
               )}
@@ -83,7 +83,10 @@ export const SingleEstimate: React.FC<Props> = ({
           </div>
           <div className="flex items-center gap-2">
             {projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
-              <SecondaryButton onClick={handleUseEstimate} className="py-1">
+              <SecondaryButton
+                onClick={handleUseEstimate}
+                className="!py-1 text-custom-text-200 hover:text-custom-text-100"
+              >
                 Use
               </SecondaryButton>
             )}

apps/app/components/issues/view-select/due-date.tsx

@@ -8,6 +8,7 @@ import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date
 import trackEventServices from "services/track-event.service";
 // types
 import { ICurrentUserResponse, IIssue } from "types";
+import useIssuesView from "hooks/use-issues-view";
 
 type Props = {
   issue: IIssue;
@@ -29,6 +30,8 @@ export const ViewDueDateSelect: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { issueView } = useIssuesView();
+
   return (
     <Tooltip
       tooltipHeading="Due Date"
@@ -71,7 +74,9 @@ export const ViewDueDateSelect: React.FC<Props> = ({
               user
             );
           }}
-          className={issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"}
+          className={`${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
+            issueView === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
+          }`}
           noBorder={noBorder}
           disabled={isNotAllowed}
         />

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

@@ -71,9 +71,15 @@ export const ViewLabelSelect: React.FC<Props> = ({
       position={tooltipPosition}
       tooltipHeading="Labels"
       tooltipContent={
-        issue.label_details.length > 0
+        issue.labels.length > 0
-          ? issue.label_details.map((label) => label.name ?? "").join(", ")
+          ? issue.labels
-          : "No Label"
+              .map((labelId) => {
+                const label = issueLabels?.find((l) => l.id === labelId);
+
+                return label?.name ?? "";
+              })
+              .join(", ")
+          : "No label"
       }
     >
       <div
@@ -81,20 +87,23 @@ export const ViewLabelSelect: React.FC<Props> = ({
           isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
         } items-center gap-2 text-custom-text-200`}
       >
-        {issue.label_details.length > 0 ? (
+        {issue.labels.length > 0 ? (
           <>
-            {issue.label_details.slice(0, 4).map((label, index) => (
+            {issue.labels.slice(0, 4).map((labelId, index) => {
-              <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
+              const label = issueLabels?.find((l) => l.id === labelId);
-                <span
+
-                  className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-100
+              return (
-                          `}
+                <div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
-                  style={{
+                  <span
-                    backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
+                    className={`h-4 w-4 flex-shrink-0 rounded-full border group-hover:bg-custom-background-80 border-custom-border-100`}
-                  }}
+                    style={{
-                />
+                      backgroundColor: label?.color ?? "#000000",
-              </div>
+                    }}
-            ))}
+                  />
-            {issue.label_details.length > 4 ? <span>+{issue.label_details.length - 4}</span> : null}
+                </div>
+              );
+            })}
+            {issue.labels.length > 4 ? <span>+{issue.labels.length - 4}</span> : null}
           </>
         ) : (
           <>

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

@@ -10,7 +10,6 @@ import { CustomSearchSelect, Tooltip } from "components/ui";
 // icons
 import { getStateGroupIcon } from "components/icons";
 // helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
 import { getStatesList } from "helpers/state.helper";
 // types
 import { ICurrentUserResponse, IIssue } from "types";
@@ -67,7 +66,7 @@ export const ViewStateSelect: React.FC<Props> = ({
   const stateLabel = (
     <Tooltip
       tooltipHeading="State"
-      tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
+      tooltipContent={selectedOption?.name ?? ""}
       position={tooltipPosition}
     >
       <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">

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

@@ -185,12 +185,12 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
               <div className="flex items-start gap-1">
                 <CalendarDaysIcon className="h-4 w-4" />
                 <span>Start:</span>
-                <span>{renderShortDateWithYearFormat(startDate)}</span>
+                <span>{renderShortDateWithYearFormat(startDate, "Not set")}</span>
               </div>
               <div className="flex items-start gap-1">
                 <TargetIcon className="h-4 w-4" />
                 <span>End:</span>
-                <span>{renderShortDateWithYearFormat(endDate)}</span>
+                <span>{renderShortDateWithYearFormat(endDate, "Not set")}</span>
               </div>
             </div>
           </div>

apps/app/components/project/create-project-modal.tsx

@@ -184,7 +184,7 @@ export const CreateProjectModal: React.FC<Props> = (props) => {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="transform rounded-lg bg-custom-background-80 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="transform rounded-lg bg-custom-background-100 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <div className="relative h-36 w-full rounded-t-lg bg-custom-background-80">
                   {watch("cover_image") !== null && (
                     <img

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

@@ -111,9 +111,9 @@ export const SingleSidebarProject: React.FC<Props> = ({
                 )}
 
                 {!sidebarCollapse && (
-                  <p className="overflow-hidden text-ellipsis text-[0.875rem]">
+                  <h5 className={`overflow-hidden text-sm ${open ? "" : "text-custom-text-200"}`}>
                     {truncateText(project?.name, 20)}
-                  </p>
+                  </h5>
                 )}
               </div>
               {!sidebarCollapse && (

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

@@ -59,7 +59,7 @@ const CustomMenu = ({
             {ellipsis || verticalEllipsis ? (
               <Menu.Button
                 type="button"
-                className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none"
+                className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:bg-custom-background-80 outline-none"
               >
                 <EllipsisHorizontalIcon
                   className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}

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

@@ -148,8 +148,8 @@ export const CustomSearchSelect = ({
                         value={option.value}
                         className={({ active, selected }) =>
                           `${active || selected ? "bg-custom-background-80" : ""} ${
-                            selected ? "font-medium" : ""
+                            selected ? "text-custom-text-100" : "text-custom-text-200"
-                          } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-custom-text-200`
+                          } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5`
                         }
                       >
                         {({ active, selected }) => (
@@ -157,7 +157,7 @@ export const CustomSearchSelect = ({
                             {option.content}
                             {multiple ? (
                               <div
-                                className={`flex items-center justify-center rounded border border-gray-500 p-0.5 ${
+                                className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
                                   active || selected ? "opacity-100" : "opacity-0"
                                 }`}
                               >

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

@@ -118,8 +118,8 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
     value={value}
     className={({ active, selected }) =>
       `${className} ${active || selected ? "bg-custom-background-80" : ""} ${
-        selected ? "font-medium" : ""
+        selected ? "text-custom-text-100" : "text-custom-text-200"
-      } cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200`
+      } cursor-pointer select-none truncate rounded px-1 py-1.5`
     }
   >
     {({ selected }) => (

apps/app/components/ui/datepicker.tsx

@@ -42,13 +42,13 @@ export const CustomDatePicker: React.FC<Props> = ({
         : renderAs === "button"
         ? `px-2 py-1 text-xs shadow-sm ${
             disabled ? "" : "hover:bg-custom-background-80"
-          } duration-300 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary`
+          } duration-300`
         : ""
     } ${error ? "border-red-500 bg-red-100" : ""} ${
       disabled ? "cursor-not-allowed" : "cursor-pointer"
     } ${
       noBorder ? "" : "border border-custom-border-100"
-    } w-full rounded-md bg-transparent caret-transparent ${className}`}
+    } w-full rounded-md caret-transparent outline-none ${className}`}
     dateFormat="MMM dd, yyyy"
     isClearable={isClearable}
     disabled={disabled}

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

@@ -64,13 +64,13 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
             <Icon className="h-6 w-6 text-white" aria-hidden="true" />
           </span>
         </div>
-        <div className="min-w-0 flex-1">
+        <div className="min-w-0 flex-1 text-custom-text-200">
-          <div className="text-sm font-medium text-custom-text-100">{title}</div>
+          <div className="text-sm font-medium group-hover:text-custom-text-100">{title}</div>
-          {description ? <div className="text-sm text-custom-text-200">{description}</div> : null}
+          {description ? <div className="text-sm">{description}</div> : null}
         </div>
         <div className="flex-shrink-0 self-center">
           <ChevronRightIcon
-            className="h-5 w-5 text-custom-text-100 group-hover:text-custom-text-200"
+            className="h-5 w-5 text-custom-text-200 group-hover:text-custom-text-100"
             aria-hidden="true"
           />
         </div>

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

@@ -43,7 +43,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-custom-border-100 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none ${
+                className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-100 px-3 py-1.5 text-xs shadow-sm duration-300 focus:outline-none hover:text-custom-text-100 hover:bg-custom-background-90 ${
                   open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
                 }`}
               >

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

@@ -108,9 +108,9 @@ export const WorkspaceSidebarDropdown = () => {
               </div>
 
               {!sidebarCollapse && (
-                <p>
+                <h4 className="text-custom-text-100">
                   {activeWorkspace?.name ? truncateText(activeWorkspace.name, 14) : "Loading..."}
-                </p>
+                </h4>
               )}
             </div>
           </Menu.Button>
@@ -166,7 +166,13 @@ export const WorkspaceSidebarDropdown = () => {
                                 )}
                               </span>
 
-                              <h5 className="text-sm">{truncateText(workspace.name, 18)}</h5>
+                              <h5
+                                className={`text-sm ${
+                                  workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
+                                }`}
+                              >
+                                {truncateText(workspace.name, 18)}
+                              </h5>
                             </div>
                             <span className="p-1">
                               <CheckIcon

apps/app/constants/issue.ts

@@ -73,6 +73,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
       ...prevData[issueIndex],
       ...formData,
       assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees,
+      labels: formData?.labels_list ?? prevData[issueIndex]?.labels,
     };
 
     prevData.splice(issueIndex, 1, updatedIssue);
@@ -90,6 +91,7 @@ export const handleIssuesMutation: THandleIssuesMutation = (
       ...oldGroup[issueIndex],
       ...formData,
       assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees,
+      labels: formData?.labels_list ?? oldGroup[issueIndex]?.labels,
     };
 
     if (selectedGroupBy !== Object.keys(formData)[0])

apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx

@@ -140,7 +140,7 @@ const SingleCycle: React.FC = () => {
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 font-normal rounded-md text-custom-text-200"
+              className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
               outline
             >
               Analytics

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

@@ -63,7 +63,7 @@ const ProjectIssues: NextPage = () => {
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:bg-custom-sidebar-background-90"
+              className="!py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
               outline
             >
               Analytics
@@ -72,7 +72,7 @@ const ProjectIssues: NextPage = () => {
               <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`}>
                 <a>
                   <SecondaryButton
-                    className="relative !py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:bg-custom-sidebar-background-90"
+                    className="relative !py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-sidebar-border-100 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
                     outline
                   >
                     <span>Inbox</span>

apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx

@@ -144,7 +144,7 @@ const SingleModule: React.FC = () => {
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 font-normal rounded-md text-custom-text-200"
+              className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
               outline
             >
               Analytics

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx

@@ -122,14 +122,14 @@ const EstimatesSettings: NextPage = () => {
           </Breadcrumbs>
         }
       >
-        <div className="p-8">
+        <div className="h-full flex flex-col p-8 overflow-hidden">
           <SettingsHeader />
           <section className="flex items-center justify-between">
             <h3 className="text-2xl font-semibold">Estimates</h3>
             <div className="col-span-12 space-y-5 sm:col-span-7">
               <div className="flex items-center gap-2">
-                <span
+                <div
-                  className="flex cursor-pointer items-center gap-2 text-theme"
+                  className="flex cursor-pointer items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200"
                   onClick={() => {
                     setEstimateToUpdate(undefined);
                     setEstimateFormOpen(true);
@@ -137,7 +137,7 @@ const EstimatesSettings: NextPage = () => {
                 >
                   <PlusIcon className="h-4 w-4" />
                   Create New Estimate
-                </span>
+                </div>
                 {projectDetails?.estimate && (
                   <SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
                 )}
@@ -146,7 +146,7 @@ const EstimatesSettings: NextPage = () => {
           </section>
           {estimatesList ? (
             estimatesList.length > 0 ? (
-              <section className="mt-5 divide-y divide-custom-border-100 rounded-xl border border-custom-border-100 bg-custom-background-100 px-6">
+              <section className="h-full mt-5 divide-y divide-custom-border-100 rounded-xl border border-custom-border-100 bg-custom-background-100 px-6 overflow-y-auto">
                 {estimatesList.map((estimate) => (
                   <SingleEstimate
                     key={estimate.id}
@@ -158,7 +158,7 @@ const EstimatesSettings: NextPage = () => {
                 ))}
               </section>
             ) : (
-              <div className="mt-5">
+              <div className="grid h-full w-full place-items-center">
                 <EmptyState
                   type="estimate"
                   title="Create New Estimate"

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx

@@ -188,7 +188,7 @@ const FeaturesSettings: NextPage = () => {
               >
                 <div className="flex items-start gap-3">
                   {feature.icon}
-                  <div>
+                  <div className="">
                     <h4 className="text-lg font-semibold">{feature.title}</h4>
                     <p className="text-sm text-custom-text-200">{feature.description}</p>
                   </div>
@@ -219,11 +219,21 @@ const FeaturesSettings: NextPage = () => {
               </div>
             ))}
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2 text-custom-text-200">
-            <a href="https://plane.so/" target="_blank" rel="noreferrer">
+            <a
+              href="https://plane.so/"
+              target="_blank"
+              rel="noreferrer"
+              className="hover:text-custom-text-100"
+            >
               <SecondaryButton outline>Plane is open-source, view Roadmap</SecondaryButton>
             </a>
-            <a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
+            <a
+              href="https://github.com/makeplane/plane"
+              target="_blank"
+              rel="noreferrer"
+              className="hover:text-custom-text-100"
+            >
               <SecondaryButton outline>Star us on GitHub</SecondaryButton>
             </a>
           </div>

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx

@@ -58,11 +58,11 @@ const ProjectIntegrations: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <div className="p-8">
+      <div className="h-full flex flex-col p-8 overflow-hidden">
         <SettingsHeader />
         {workspaceIntegrations ? (
           workspaceIntegrations.length > 0 ? (
-            <section className="space-y-8">
+            <section className="space-y-8 overflow-y-auto">
               <IntegrationAndImportExportBanner bannerName="Integrations" />
               <div className="space-y-5">
                 {workspaceIntegrations.map((integration) => (

apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx

@@ -85,10 +85,10 @@ const StatesSettings: NextPage = () => {
                     return (
                       <div key={key}>
                         <div className="mb-2 flex w-full justify-between">
-                          <h4 className="font-medium capitalize">{key}</h4>
+                          <h4 className="text-custom-text-200 capitalize">{key}</h4>
                           <button
                             type="button"
-                            className="flex items-center gap-2 text-custom-primary outline-none"
+                            className="flex items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200 outline-none"
                             onClick={() => setActiveGroup(key as keyof StateGroup)}
                           >
                             <PlusIcon className="h-4 w-4" />

apps/app/styles/globals.css

@@ -88,26 +88,26 @@
   [data-theme="dark"] {
     color-scheme: dark !important;
 
-    --color-background-100: 0, 0, 0; /* primary bg */
+    --color-background-100: 7, 7, 7; /* primary bg */
     --color-background-90: 11, 11, 11; /* secondary bg */
     --color-background-80: 23, 23, 23; /* tertiary bg */
 
-    --color-text-100: 255, 255, 255; /* primary text */
+    --color-text-100: 241, 241, 241; /* primary text */
-    --color-text-200: 82, 82, 82; /* secondary text */
+    --color-text-200: 115, 115, 115; /* secondary text */
-    --color-text-300: 115, 115, 115; /* tertiary text */
+    --color-text-300: 163, 163, 163; /* tertiary text */
 
     --color-border-100: 34, 34, 34; /* subtle border= 1 */
     --color-border-200: 38, 38, 38; /* subtle border- 2 */
     --color-border-300: 46, 46, 46; /* strong border- 1 */
     --color-border-400: 58, 58, 58; /* strong border- 2 */
 
-    --color-sidebar-background-100: 0, 0, 0; /* primary sidebar bg */
+    --color-sidebar-background-100: 7, 7, 7; /* primary sidebar bg */
     --color-sidebar-background-90: 11, 11, 11; /* secondary sidebar bg */
     --color-sidebar-background-80: 23, 23, 23; /* tertiary sidebar bg */
 
-    --color-sidebar-text-100: 255, 255, 255; /* primary sidebar text */
+    --color-sidebar-text-100: 241, 241, 241; /* primary sidebar text */
-    --color-sidebar-text-200: 82, 82, 82; /* secondary sidebar text */
+    --color-sidebar-text-200: 115, 115, 115; /* secondary sidebar text */
-    --color-sidebar-text-300: 115, 115, 115; /* tertiary sidebar text */
+    --color-sidebar-text-300: 163, 163, 163; /* tertiary sidebar text */
 
     --color-sidebar-border-100: 34, 34, 34; /* subtle sidebar border= 1 */
     --color-sidebar-border-200: 38, 38, 38; /* subtle sidebar border- 2 */

apps/app/tailwind.config.js

@@ -1,4 +1,4 @@
-const convertToRGB = (variableName) => `rgb(var(${variableName}))`;
+const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
 
 module.exports = {
   darkMode: "class",