From 92ab1ea164f258f200aed9510d0ebd0921d1e9dc Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Mon, 29 Jan 2024 19:53:46 +0530
Subject: [PATCH] chore: update sidebar border colors

---
 .../tailwind-config-custom/tailwind.config.js | 38 +++++++++++++++++++
 web/components/breadcrumbs/index.tsx          |  6 ++-
 web/components/headers/project-issues.tsx     |  2 +-
 web/components/instance/sidebar-dropdown.tsx  |  4 +-
 .../issues/issue-detail/parent-select.tsx     |  2 +-
 .../issues/issue-detail/relation-select.tsx   |  4 +-
 web/components/project/sidebar-list.tsx       |  2 +-
 web/components/workspace/sidebar-dropdown.tsx |  4 +-
 web/layouts/admin-layout/sidebar.tsx          |  2 +-
 web/layouts/app-layout/sidebar.tsx            |  2 +-
 .../settings-layout/profile/sidebar.tsx       |  2 +-
 11 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index a855f167d..43a61f507 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -273,6 +273,44 @@ export const theme = {
       110: "var(--color-orange-110)",
       120: "var(--color-orange-120)",
     },
+    sidebar: {
+      neutral: {
+        page: {
+          "surface-default": "var(--color-neutral-0)",
+          "surface-light": "var(--color-neutral-10)",
+          "surface-medium": "var(--color-neutral-20)",
+        },
+        component: {
+          "surface-light": "var(--color-neutral-30)",
+          "surface-medium": "var(--color-neutral-40)",
+          "surface-dark": "var(--color-neutral-50)",
+        },
+        border: {
+          subtle: "var(--color-neutral-60)",
+          medium: "var(--color-neutral-70)",
+          strong: "var(--color-neutral-80)",
+        },
+        solid: "var(--color-neutral-90)",
+        text: {
+          subtle: "var(--color-neutral-100)",
+          medium: "var(--color-neutral-110)",
+          strong: "var(--color-neutral-120)",
+        },
+        10: "var(--color-neutral-10)",
+        20: "var(--color-neutral-20)",
+        30: "var(--color-neutral-30)",
+        40: "var(--color-neutral-40)",
+        50: "var(--color-neutral-50)",
+        60: "var(--color-neutral-60)",
+        70: "var(--color-neutral-70)",
+        80: "var(--color-neutral-80)",
+        90: "var(--color-neutral-90)",
+        100: "var(--color-neutral-100)",
+        110: "var(--color-neutral-110)",
+        120: "var(--color-neutral-120)",
+        DEFAULT: "var(--color-neutral-90)",
+      },
+    },
   },
   extend: {
     keyframes: {
diff --git a/web/components/breadcrumbs/index.tsx b/web/components/breadcrumbs/index.tsx
index 16fa1e333..b7f72141b 100644
--- a/web/components/breadcrumbs/index.tsx
+++ b/web/components/breadcrumbs/index.tsx
@@ -16,7 +16,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
       <div className="flex w-full flex-grow items-center overflow-hidden overflow-ellipsis whitespace-nowrap">
         <button
           type="button"
-          className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
+          className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-sidebar-neutral-border-medium text-center text-sm hover:bg-custom-sidebar-background-90"
           onClick={() => router.back()}
         >
           <MoveLeft className="h-4 w-4 text-custom-sidebar-text-200 group-hover:text-custom-sidebar-text-100" />
@@ -45,7 +45,9 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
   <>
     {link ? (
       <Link href={link}>
-        <span className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${linkTruncate ? "truncate" : ""}`}>
+        <span
+          className={`border-r-2 border-sidebar-neutral-border-medium px-3 text-sm ${linkTruncate ? "truncate" : ""}`}
+        >
           <p className={`${linkTruncate ? "truncate" : ""}${icon ? "flex items-center gap-2" : ""}`}>
             {icon ?? null}
             {title}
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index 777e8213c..8ab8fd9c3 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -199,7 +199,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                 <Button variant="neutral-primary" size="sm" className="relative">
                   Inbox
                   {inboxDetails?.pending_issue_count > 0 && (
-                    <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-custom-sidebar-border-200 bg-custom-sidebar-background-80 text-custom-text-100">
+                    <span className="absolute -right-1.5 -top-1.5 h-4 w-4 rounded-full border border-sidebar-neutral-border-medium bg-custom-sidebar-background-80 text-custom-text-100">
                       {inboxDetails?.pending_issue_count}
                     </span>
                   )}
diff --git a/web/components/instance/sidebar-dropdown.tsx b/web/components/instance/sidebar-dropdown.tsx
index 2bac426d6..37e07961b 100644
--- a/web/components/instance/sidebar-dropdown.tsx
+++ b/web/components/instance/sidebar-dropdown.tsx
@@ -62,7 +62,7 @@ export const InstanceSidebarDropdown = observer(() => {
   };
 
   return (
-    <div className="flex max-h-[3.75rem] items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
+    <div className="flex max-h-[3.75rem] items-center gap-x-5 gap-y-2 border-b border-sidebar-neutral-border-medium px-4 py-3.5">
       <div className="h-full w-full truncate">
         <div
           className={`flex flex-grow items-center gap-x-2 truncate rounded py-1 ${
@@ -113,7 +113,7 @@ export const InstanceSidebarDropdown = observer(() => {
           >
             <Menu.Items
               className="absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y
-          divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
+          divide-sidebar-neutral-border-medium rounded-md border border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
             >
               <div className="flex flex-col gap-2.5 pb-2">
                 <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
diff --git a/web/components/issues/issue-detail/parent-select.tsx b/web/components/issues/issue-detail/parent-select.tsx
index 34923318a..4ff76449e 100644
--- a/web/components/issues/issue-detail/parent-select.tsx
+++ b/web/components/issues/issue-detail/parent-select.tsx
@@ -71,7 +71,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
         disabled={disabled}
       >
         {issue.parent_id && parentIssue ? (
-          <div className="flex items-center gap-1 bg-green-500/20 text-green-700 rounded px-1.5 py-1">
+          <div className="flex items-center gap-1 bg-success-component-surface-light text-success-text-medium rounded px-1.5 py-1">
             <Link
               href={`/${workspaceSlug}/projects/${projectId}/issues/${parentIssue?.id}`}
               className="text-xs font-medium"
diff --git a/web/components/issues/issue-detail/relation-select.tsx b/web/components/issues/issue-detail/relation-select.tsx
index 405dee3d7..48c266bc3 100644
--- a/web/components/issues/issue-detail/relation-select.tsx
+++ b/web/components/issues/issue-detail/relation-select.tsx
@@ -22,12 +22,12 @@ export const issueRelationObject: Record<TIssueRelationTypes, TRelationObject> =
     placeholder: "Add related issues",
   },
   blocking: {
-    className: "bg-yellow-500/20 text-yellow-700",
+    className: "bg-orange-30 text-orange-110",
     icon: (size) => <XCircle size={size} />,
     placeholder: "None",
   },
   blocked_by: {
-    className: "bg-red-500/20 text-red-700",
+    className: "bg-danger-component-surface-light text-danger-text-medium",
     icon: (size) => <CircleDot size={size} />,
     placeholder: "None",
   },
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index 24735e506..e5acddda3 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -110,7 +110,7 @@ export const ProjectSidebarList: FC = observer(() => {
       <div
         ref={containerRef}
         className={`h-full space-y-2 overflow-y-auto px-4 ${
-          isScrolled ? "border-t border-custom-sidebar-border-300" : ""
+          isScrolled ? "border-t border-sidebar-neutral-border-medium" : ""
         }`}
       >
         <DragDropContext onDragEnd={onDragEnd}>
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index 85d4805f7..c1f630f5d 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -144,7 +144,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
               leaveTo="transform opacity-0 scale-95"
             >
               <Menu.Items as={Fragment}>
-                <div className="fixed left-4 z-20 mt-1 flex w-full max-w-[19rem] origin-top-left flex-col rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg divide-y divide-neutral-border-subtle outline-none">
+                <div className="fixed left-4 z-20 mt-1 flex w-full max-w-[19rem] origin-top-left flex-col rounded-md border-[0.5px] border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 shadow-custom-shadow-rg divide-y divide-neutral-border-subtle outline-none">
                   <div className="flex max-h-96 flex-col items-start justify-start gap-2 overflow-y-scroll mb-2 px-4">
                     <h6 className="sticky top-0 z-10 h-full w-full bg-custom-background-100 pt-3 text-sm font-medium text-custom-sidebar-text-400">
                       {currentUser?.email}
@@ -273,7 +273,7 @@ export const WorkspaceSidebarDropdown = observer(() => {
           >
             <Menu.Items
               className="absolute left-0 z-20 mt-1 flex w-52 origin-top-left  flex-col divide-y
-          divide-custom-sidebar-border-200 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
+              divide-sidebar-neutral-border-medium rounded-md border border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
             >
               <div className="flex flex-col gap-2.5 pb-2">
                 <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
diff --git a/web/layouts/admin-layout/sidebar.tsx b/web/layouts/admin-layout/sidebar.tsx
index efd3cfc76..ff0349cd1 100644
--- a/web/layouts/admin-layout/sidebar.tsx
+++ b/web/layouts/admin-layout/sidebar.tsx
@@ -15,7 +15,7 @@ export const InstanceAdminSidebar: FC<IInstanceAdminSidebar> = observer(() => {
 
   return (
     <div
-      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative ${
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 duration-300 md:relative ${
         sidebarCollapsed ? "" : "md:w-[280px]"
       } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
     >
diff --git a/web/layouts/app-layout/sidebar.tsx b/web/layouts/app-layout/sidebar.tsx
index d66daa963..1e0d57bca 100644
--- a/web/layouts/app-layout/sidebar.tsx
+++ b/web/layouts/app-layout/sidebar.tsx
@@ -19,7 +19,7 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
 
   return (
     <div
-      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative ${
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r-[0.5px] border-sidebar-neutral-border-subtle bg-custom-sidebar-background-100 duration-300 md:relative ${
         themStore?.sidebarCollapsed ? "" : "md:w-[280px]"
       } ${themStore?.sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
     >
diff --git a/web/layouts/settings-layout/profile/sidebar.tsx b/web/layouts/settings-layout/profile/sidebar.tsx
index 0a97b3364..f990b5c79 100644
--- a/web/layouts/settings-layout/profile/sidebar.tsx
+++ b/web/layouts/settings-layout/profile/sidebar.tsx
@@ -73,7 +73,7 @@ export const ProfileLayoutSidebar = observer(() => {
 
   return (
     <div
-      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative ${
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-sidebar-neutral-border-medium bg-custom-sidebar-background-100 duration-300 md:relative ${
         sidebarCollapsed ? "" : "md:w-[280px]"
       } ${sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
     >