From 6f03022f654f2a6dc356d3feaedf474705e5dad4 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 21 Apr 2023 10:46:04 +0530
Subject: [PATCH] chore: changed light mode colors (#913)

---
 .../app/components/core/issues-view-filter.tsx | 18 +++++++++---------
 apps/app/components/core/issues-view.tsx       |  2 +-
 .../components/core/list-view/single-issue.tsx |  2 +-
 .../components/core/list-view/single-list.tsx  |  6 ++++--
 apps/app/components/issues/activity.tsx        |  4 ++--
 .../issues/sidebar-select/blocked.tsx          |  2 +-
 .../issues/sidebar-select/blocker.tsx          |  2 +-
 .../issues/sidebar-select/parent.tsx           |  2 +-
 .../app/components/pages/single-page-block.tsx | 18 +++++++++---------
 apps/app/components/ui/context-menu.tsx        | 12 ++++++++----
 apps/app/components/ui/custom-menu.tsx         | 16 +++++++++-------
 .../app/components/ui/custom-search-select.tsx |  8 ++++----
 apps/app/components/ui/custom-select.tsx       |  8 ++++----
 .../app/components/ui/multi-level-dropdown.tsx | 10 +++++-----
 .../workspace-authorization-wrapper.tsx        |  6 +++---
 .../projects/[projectId]/issues/[issueId].tsx  |  2 +-
 .../projects/[projectId]/pages/[pageId].tsx    |  6 +++---
 apps/app/styles/globals.css                    |  4 ++--
 18 files changed, 68 insertions(+), 60 deletions(-)

diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx
index cda745a23..49bf5cf6b 100644
--- a/apps/app/components/core/issues-view-filter.tsx
+++ b/apps/app/components/core/issues-view-filter.tsx
@@ -57,8 +57,8 @@ export const IssuesFilterView: React.FC = () => {
       <div className="flex items-center gap-x-1">
         <button
           type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-1 ${
-            issueView === "list" ? "bg-brand-base" : ""
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+            issueView === "list" ? "bg-brand-surface-2" : ""
           }`}
           onClick={() => setIssueView("list")}
         >
@@ -66,8 +66,8 @@ export const IssuesFilterView: React.FC = () => {
         </button>
         <button
           type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-base ${
-            issueView === "kanban" ? "bg-brand-base" : ""
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+            issueView === "kanban" ? "bg-brand-surface-2" : ""
           }`}
           onClick={() => setIssueView("kanban")}
         >
@@ -75,8 +75,8 @@ export const IssuesFilterView: React.FC = () => {
         </button>
         <button
           type="button"
-          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-base ${
-            issueView === "calendar" ? "bg-brand-base" : ""
+          className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-brand-surface-2 ${
+            issueView === "calendar" ? "bg-brand-surface-2" : ""
           }`}
           onClick={() => setIssueView("calendar")}
         >
@@ -134,7 +134,7 @@ export const IssuesFilterView: React.FC = () => {
               leaveFrom="opacity-100 translate-y-0"
               leaveTo="opacity-0 translate-y-1"
             >
-              <Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg bg-brand-surface-2 p-3 shadow-lg">
+              <Popover.Panel className="absolute right-0 z-20 mt-1 w-screen max-w-xs transform overflow-hidden rounded-lg border border-brand-base bg-brand-surface-1 p-3 shadow-lg">
                 <div className="relative divide-y-2 divide-brand-base">
                   <div className="space-y-4 pb-3 text-xs">
                     {issueView !== "calendar" && (
@@ -259,8 +259,8 @@ export const IssuesFilterView: React.FC = () => {
                               type="button"
                               className={`rounded border px-2 py-1 text-xs capitalize ${
                                 properties[key as keyof Properties]
-                                  ? "border-theme bg-theme text-white"
-                                  : "border-gray-300"
+                                  ? "border-brand-accent bg-brand-accent text-brand-base"
+                                  : "border-brand-base"
                               }`}
                               onClick={() => setProperties(key as keyof Properties)}
                             >
diff --git a/apps/app/components/core/issues-view.tsx b/apps/app/components/core/issues-view.tsx
index b78c6512f..240b7fbd0 100644
--- a/apps/app/components/core/issues-view.tsx
+++ b/apps/app/components/core/issues-view.tsx
@@ -399,7 +399,7 @@ export const IssuesView: React.FC<Props> = ({
       <>
         <div
           className={`flex items-center justify-between gap-2 ${
-            issueView === "list" && areFiltersApplied ? "mt-6 px-8" : "-mt-2"
+            issueView === "list" ? (areFiltersApplied ? "mt-6 px-8" : "") : "-mt-2"
           }`}
         >
           <FilterList filters={filters} setFilters={setFilters} />
diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
index c1e6afaab..0d34adf9e 100644
--- a/apps/app/components/core/list-view/single-issue.tsx
+++ b/apps/app/components/core/list-view/single-issue.tsx
@@ -216,7 +216,7 @@ export const SingleListIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className="flex items-center justify-between gap-2 border-b border-brand-base px-4 py-2.5 last:border-b-0"
+        className="flex items-center justify-between gap-2 border-b border-brand-base bg-brand-base px-4 py-2.5 last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
diff --git a/apps/app/components/core/list-view/single-list.tsx b/apps/app/components/core/list-view/single-list.tsx
index c7cfbd820..c39e6a56b 100644
--- a/apps/app/components/core/list-view/single-list.tsx
+++ b/apps/app/components/core/list-view/single-list.tsx
@@ -133,7 +133,7 @@ export const SingleList: React.FC<Props> = ({
     <Disclosure as="div" defaultOpen>
       {({ open }) => (
         <div>
-          <div className="flex items-center justify-between bg-brand-base px-4 py-2.5">
+          <div className="flex items-center justify-between px-4 py-2.5">
             <Disclosure.Button>
               <div className="flex items-center gap-x-3">
                 {selectedGroup !== null && (
@@ -211,7 +211,9 @@ export const SingleList: React.FC<Props> = ({
                     />
                   ))
                 ) : (
-                  <p className="px-4 py-2.5 text-sm text-brand-secondary">No issues.</p>
+                  <p className="bg-brand-base 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>
diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index 57e546ef4..f14ee2761 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -302,7 +302,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
                 <div className="relative pb-1">
                   {issueActivities.length > 1 && activityItemIdx !== issueActivities.length - 1 ? (
                     <span
-                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-base"
+                      className="absolute top-5 left-5 -ml-px h-full w-0.5 bg-brand-surface-2"
                       aria-hidden="true"
                     />
                   ) : null}
@@ -311,7 +311,7 @@ export const IssueActivitySection: React.FC<Props> = () => {
                       <div>
                         <div className="relative px-1.5">
                           <div className="mt-1.5">
-                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-base ring-white">
+                            <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-brand-surface-2 ring-white">
                               {activityItem.field ? (
                                 activityDetails[activityItem.field as keyof typeof activityDetails]
                                   ?.icon
diff --git a/apps/app/components/issues/sidebar-select/blocked.tsx b/apps/app/components/issues/sidebar-select/blocked.tsx
index 319ad3135..3ff3c4c8d 100644
--- a/apps/app/components/issues/sidebar-select/blocked.tsx
+++ b/apps/app/components/issues/sidebar-select/blocked.tsx
@@ -288,7 +288,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
         <button
           type="button"
           className={`flex w-full text-brand-secondary ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
           } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
           onClick={() => setIsBlockedModalOpen(true)}
           disabled={isNotAllowed}
diff --git a/apps/app/components/issues/sidebar-select/blocker.tsx b/apps/app/components/issues/sidebar-select/blocker.tsx
index d35c2d975..b35da8a84 100644
--- a/apps/app/components/issues/sidebar-select/blocker.tsx
+++ b/apps/app/components/issues/sidebar-select/blocker.tsx
@@ -285,7 +285,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
         <button
           type="button"
           className={`flex w-full text-brand-secondary ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
           } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
           onClick={() => setIsBlockerModalOpen(true)}
           disabled={isNotAllowed}
diff --git a/apps/app/components/issues/sidebar-select/parent.tsx b/apps/app/components/issues/sidebar-select/parent.tsx
index c8c017711..36c4a57cc 100644
--- a/apps/app/components/issues/sidebar-select/parent.tsx
+++ b/apps/app/components/issues/sidebar-select/parent.tsx
@@ -78,7 +78,7 @@ export const SidebarParentSelect: React.FC<Props> = ({
         <button
           type="button"
           className={`flex w-full ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
+            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
           } items-center justify-between gap-1 rounded-md border border-brand-base px-2 py-1 text-xs shadow-sm duration-300 focus:outline-none`}
           onClick={() => setIsParentModalOpen(true)}
           disabled={isNotAllowed}
diff --git a/apps/app/components/pages/single-page-block.tsx b/apps/app/components/pages/single-page-block.tsx
index 147a256b6..34b7f6583 100644
--- a/apps/app/components/pages/single-page-block.tsx
+++ b/apps/app/components/pages/single-page-block.tsx
@@ -301,14 +301,14 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
           ) : (
             <div
               className={`group relative text-brand-secondary ${
-                snapshot.isDragging ? "rounded-[10px] bg-brand-surface-1 p-6 shadow" : ""
+                snapshot.isDragging ? "rounded-[10px] bg-brand-surface-2 p-6 shadow" : ""
               }`}
               ref={provided.innerRef}
               {...provided.draggableProps}
             >
               <button
                 type="button"
-                className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-brand-surface-1 group-hover:!flex"
+                className="absolute top-4 -left-4 hidden rounded p-0.5 hover:bg-brand-surface-2 group-hover:!flex"
                 {...provided.dragHandleProps}
               >
                 <EllipsisVerticalIcon className="h-[18px]" />
@@ -321,7 +321,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 }`}
               >
                 {block.issue && block.sync && (
-                  <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-brand-surface-1 py-1 px-1.5 text-xs">
+                  <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded bg-brand-surface-2 py-1 px-1.5 text-xs">
                     {isSyncing ? (
                       <ArrowPathIcon className="h-3 w-3 animate-spin" />
                     ) : (
@@ -332,8 +332,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 )}
                 <button
                   type="button"
-                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1 ${
-                    iAmFeelingLucky ? "cursor-wait bg-brand-surface-1" : ""
+                  className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2 ${
+                    iAmFeelingLucky ? "cursor-wait bg-brand-surface-2" : ""
                   }`}
                   onClick={handleAutoGenerateDescription}
                   disabled={iAmFeelingLucky}
@@ -348,7 +348,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2"
                   onClick={() => setGptAssistantModal((prevData) => !prevData)}
                 >
                   <SparklesIcon className="h-4 w-4" />
@@ -356,7 +356,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 </button>
                 <button
                   type="button"
-                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-1"
+                  className="-mr-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-brand-surface-2"
                   onClick={() => setCreateBlockForm(true)}
                 >
                   <PencilIcon className="h-3.5 w-3.5" />
@@ -364,7 +364,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                 <CustomMenu
                   customButton={
                     <button
-                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-1"
+                      className="flex w-full cursor-pointer items-center justify-between gap-1 rounded px-2.5 py-1 text-left text-xs duration-300 hover:bg-brand-surface-2"
                       onClick={() => setIsMenuActive(!isMenuActive)}
                     >
                       <BoltIcon className="h-4.5 w-3.5" />
@@ -417,7 +417,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, index
                         <Link
                           href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
                         >
-                          <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-brand-surface-1 px-1.5 py-1 text-xs">
+                          <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-brand-surface-2 px-1.5 py-1 text-xs">
                             <LayerDiagonalIcon height="16" width="16" />
                             {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
                           </a>
diff --git a/apps/app/components/ui/context-menu.tsx b/apps/app/components/ui/context-menu.tsx
index c1ea7eb70..755318b34 100644
--- a/apps/app/components/ui/context-menu.tsx
+++ b/apps/app/components/ui/context-menu.tsx
@@ -37,13 +37,17 @@ const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) =>
       }`}
     >
       <div
-        className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-brand-base bg-brand-surface-2 p-2 text-xs shadow-lg`}
+        className={`fixed z-20 flex min-w-[8rem] flex-col items-stretch gap-1 rounded-md border border-brand-base bg-brand-surface-1 p-2 text-xs shadow-lg`}
         style={{
           left: `${position.x}px`,
           top: `${position.y}px`,
         }}
       >
-        {title && <h4 className="border-b px-1 py-1 pb-2 text-[0.8rem] font-medium">{title}</h4>}
+        {title && (
+          <h4 className="border-b border-brand-base px-1 py-1 pb-2 text-[0.8rem] font-medium">
+            {title}
+          </h4>
+        )}
         {children}
       </div>
     </div>
@@ -71,7 +75,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
     {renderAs === "a" ? (
       <Link href={href}>
         <a
-          className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-base`}
+          className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
         >
           <>
             {Icon && <Icon />}
@@ -82,7 +86,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
     ) : (
       <button
         type="button"
-        className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-1 hover:text-brand-base`}
+        className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left text-brand-secondary hover:bg-brand-surface-2`}
         onClick={onClick}
       >
         <>
diff --git a/apps/app/components/ui/custom-menu.tsx b/apps/app/components/ui/custom-menu.tsx
index ec67d07d6..5bae6fe0f 100644
--- a/apps/app/components/ui/custom-menu.tsx
+++ b/apps/app/components/ui/custom-menu.tsx
@@ -53,7 +53,7 @@ const CustomMenu = ({
             {ellipsis || verticalEllipsis ? (
               <Menu.Button
                 type="button"
-                className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-1 focus:outline-none"
+                className="relative grid place-items-center rounded p-1 hover:bg-brand-surface-2 focus:outline-none"
               >
                 <EllipsisHorizontalIcon
                   className={`h-4 w-4 ${verticalEllipsis ? "rotate-90" : ""}`}
@@ -62,7 +62,9 @@ const CustomMenu = ({
             ) : (
               <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"} ${
+                className={`flex cursor-pointer items-center justify-between gap-1 px-2.5 py-1 text-xs duration-300 hover:bg-brand-surface-2 ${
+                  open ? "bg-brand-surface-1 text-brand-base" : "text-brand-secondary"
+                } ${
                   textAlignment === "right"
                     ? "text-right"
                     : textAlignment === "center"
@@ -101,7 +103,7 @@ const CustomMenu = ({
           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 ${
+            className={`absolute z-20 mt-1 overflow-y-scroll whitespace-nowrap rounded-md border border-brand-base bg-brand-surface-1 p-1 text-xs shadow-lg focus:outline-none ${
               optionsPosition === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"
             } ${
               height === "sm"
@@ -146,8 +148,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
         <Link href={href ?? ""}>
           <a
             className={`${className} ${
-              active ? "bg-brand-surface-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`}
+              active ? "bg-brand-surface-2" : ""
+            } 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-2`}
             onClick={close}
           >
             {children}
@@ -157,8 +159,8 @@ const MenuItem: React.FC<MenuItemProps> = ({
         <button
           type="button"
           className={`${className} ${
-            active ? "bg-brand-surface-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`}
+            active ? "bg-brand-surface-2" : ""
+          } 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-2`}
           onClick={onClick}
         >
           {children}
diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
index 8daeed336..b4261f1a5 100644
--- a/apps/app/components/ui/custom-search-select.tsx
+++ b/apps/app/components/ui/custom-search-select.tsx
@@ -69,7 +69,7 @@ export const CustomSearchSelect = ({
           ) : (
             <Combobox.Button
               className={`flex w-full border border-brand-base ${
-                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-base"
+                disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
               } ${
                 input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
               } items-center justify-between gap-1 rounded-md shadow-sm duration-300 focus:outline-none focus:ring-1 focus:ring-brand-base ${
@@ -97,9 +97,9 @@ export const CustomSearchSelect = ({
             leaveTo="opacity-0 translate-y-1"
           >
             <Combobox.Options
-              className={`${optionsClassName} absolute min-w-[10rem] p-2 ${
+              className={`${optionsClassName} absolute min-w-[10rem] border border-brand-base p-2 ${
                 position === "right" ? "right-0" : "left-0"
-              } z-10 mt-1 origin-top-right rounded-md bg-brand-surface-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
+              } z-10 mt-1 origin-top-right rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none`}
             >
               <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-brand-base bg-brand-surface-1 px-2">
                 <MagnifyingGlassIcon className="text-brand-muted-1 h-3 w-3" />
@@ -130,7 +130,7 @@ export const CustomSearchSelect = ({
                         key={option.value}
                         value={option.value}
                         className={({ active, selected }) =>
-                          `${active || selected ? "bg-brand-surface-1" : ""} ${
+                          `${active || selected ? "bg-brand-surface-2" : ""} ${
                             selected ? "font-medium" : ""
                           } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-brand-secondary`
                         }
diff --git a/apps/app/components/ui/custom-select.tsx b/apps/app/components/ui/custom-select.tsx
index 4117daf06..81f2e9b5a 100644
--- a/apps/app/components/ui/custom-select.tsx
+++ b/apps/app/components/ui/custom-select.tsx
@@ -51,7 +51,7 @@ const CustomSelect = ({
       ) : (
         <Listbox.Button
           className={`flex w-full ${
-            disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-1"
+            disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-brand-surface-2"
           } items-center justify-between gap-1 rounded-md border border-brand-base shadow-sm duration-300 focus:outline-none ${
             input ? "border-brand-base px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
           } ${
@@ -78,9 +78,9 @@ const CustomSelect = ({
       leaveTo="transform opacity-0 scale-95"
     >
       <Listbox.Options
-        className={`${optionsClassName} absolute ${
+        className={`${optionsClassName} absolute border border-brand-base ${
           position === "right" ? "right-0" : "left-0"
-        } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-brand-surface-2 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+        } z-10 mt-1 origin-top-right overflow-y-auto rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none ${
           width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
         } ${input ? "max-h-48" : ""} ${
           maxHeight === "lg"
@@ -110,7 +110,7 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
   <Listbox.Option
     value={value}
     className={({ active, selected }) =>
-      `${className} ${active || selected ? "bg-brand-surface-1" : ""} ${
+      `${className} ${active || selected ? "bg-brand-surface-2" : ""} ${
         selected ? "font-medium" : ""
       } cursor-pointer select-none truncate rounded px-1 py-1.5 text-brand-secondary`
     }
diff --git a/apps/app/components/ui/multi-level-dropdown.tsx b/apps/app/components/ui/multi-level-dropdown.tsx
index 0705f53a0..36e4e84c0 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/apps/app/components/ui/multi-level-dropdown.tsx
@@ -60,7 +60,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
           >
             <Menu.Items
               static
-              className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-brand-surface-2 text-xs shadow-lg focus:outline-none"
+              className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-brand-surface-1 text-xs shadow-lg focus:outline-none"
             >
               {options.map((option) => (
                 <div className="relative p-1" key={option.id}>
@@ -83,7 +83,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                       <>
                         <div
                           className={`${
-                            active || option.selected ? "bg-brand-surface-1" : ""
+                            active || option.selected ? "bg-brand-surface-2" : ""
                           } flex items-center gap-1 rounded px-1 py-1.5 text-brand-secondary ${
                             direction === "right" ? "justify-between" : ""
                           }`}
@@ -101,7 +101,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                   </Menu.Item>
                   {option.children && option.id === openChildFor && (
                     <div
-                      className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-2 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
+                      className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-brand-surface-1 shadow-lg focus:outline-none ${
                         direction === "left"
                           ? "right-full -translate-x-1"
                           : "left-full translate-x-1"
@@ -126,8 +126,8 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                               onSelect(child.value);
                             }}
                             className={`${
-                              child.selected ? "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.selected ? "bg-brand-surface-2" : ""
+                            } flex w-full items-center break-all rounded px-1 py-1.5 text-left capitalize text-brand-secondary hover:bg-brand-surface-2`}
                           >
                             {child.label}
                           </button>
diff --git a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
index cd3766cf1..a1bfafa1c 100644
--- a/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
+++ b/apps/app/layouts/auth-layout/workspace-authorization-wrapper.tsx
@@ -70,7 +70,7 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
 
   if (!workspaceMemberMe && !error)
     return (
-      <div className="h-screen grid place-items-center p-4">
+      <div className="grid h-screen place-items-center p-4">
         <div className="flex flex-col items-center gap-3 text-center">
           <h3 className="text-xl">Loading your workspace...</h3>
           <Spinner />
@@ -83,7 +83,7 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
   // FIXME: show 404 for workspace not workspace member
   if (error?.status === 404) {
     return (
-      <div className="container h-screen flex justify-center items-center">
+      <div className="container flex h-screen items-center justify-center">
         <p className="text-2xl font-semibold">No such workspace exist. Create one?</p>
       </div>
     );
@@ -131,7 +131,7 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
                   noPadding ? "" : settingsLayout || profilePage ? "p-8 lg:px-28" : "p-8"
                 } ${
                   bg === "primary"
-                    ? "bg-brand-base"
+                    ? "bg-brand-surface-1"
                     : bg === "secondary"
                     ? "bg-brand-surface-1"
                     : "bg-brand-base"
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 3bdc2a878..5e1214fcc 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -142,7 +142,7 @@ const IssueDetailsPage: NextPage = () => {
           <div className="basis-2/3 space-y-5 divide-y-2 divide-brand-base p-5">
             <div className="rounded-lg">
               {issueDetails?.parent && issueDetails.parent !== "" ? (
-                <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-base p-2 text-xs">
+                <div className="mb-5 flex w-min items-center gap-2 whitespace-nowrap rounded bg-brand-surface-2 p-2 text-xs">
                   <Link
                     href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
                       issueDetails.parent
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index 78dedbadc..1ff51eccb 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -358,7 +358,7 @@ const SinglePage: NextPage = () => {
                     customButton={
                       <button
                         type="button"
-                        className="flex items-center gap-1 rounded-md bg-brand-surface-1 p-1.5 text-xs hover:bg-brand-surface-2"
+                        className="flex items-center gap-1 rounded-md bg-brand-surface-2 p-1.5 text-xs"
                       >
                         <PlusIcon className="h-3.5 w-3.5" />
                       </button>
@@ -375,7 +375,7 @@ const SinglePage: NextPage = () => {
                   customButton={
                     <button
                       type="button"
-                      className="flex items-center gap-1 rounded-md bg-brand-surface-1 px-3 py-1.5 text-xs hover:bg-brand-surface-2"
+                      className="flex items-center gap-1 rounded-md bg-brand-surface-2 px-3 py-1.5 text-xs"
                     >
                       <PlusIcon className="h-3 w-3" />
                       Add label
@@ -515,7 +515,7 @@ const SinglePage: NextPage = () => {
                 {!createBlockForm && (
                   <button
                     type="button"
-                    className="mt-4 flex items-center gap-1 rounded-full bg-brand-base px-2 py-1 pr-2.5 text-xs hover:bg-brand-surface-1"
+                    className="mt-4 flex items-center gap-1 rounded-full bg-brand-base px-2 py-1 pr-2.5 text-xs hover:bg-brand-surface-2"
                     onClick={handleNewBlock}
                   >
                     <PlusIcon className="h-3 w-3" />
diff --git a/apps/app/styles/globals.css b/apps/app/styles/globals.css
index c7c316c26..e6eab6ce2 100644
--- a/apps/app/styles/globals.css
+++ b/apps/app/styles/globals.css
@@ -30,9 +30,9 @@
   }
 
   [data-theme="light"] {
-    --color-bg-base: 243, 244, 246;
+    --color-bg-base: 255, 255, 255;
     --color-bg-surface-1: 249, 250, 251;
-    --color-bg-surface-2: 255, 255, 255;
+    --color-bg-surface-2: 243, 244, 246;
 
     --color-border: 229, 231, 235;
     --color-bg-sidebar: 255, 255, 255;