From 37bf465fcda112a74dc59b17d734ec092c205874 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Tue, 7 Nov 2023 13:12:05 +0530
Subject: [PATCH] style: update border across workspace and project settings.
 (#2669)

* style: update border across workspace and project settings.

* update border width
---
 web/components/automation/auto-archive-automation.tsx         | 4 ++--
 web/components/automation/auto-close-automation.tsx           | 4 ++--
 web/components/estimates/estimate-list-item.tsx               | 2 +-
 web/components/estimates/estimate-list.tsx                    | 2 +-
 web/components/exporter/guide.tsx                             | 4 ++--
 web/components/integration/guide.tsx                          | 4 ++--
 web/components/integration/single-integration-card.tsx        | 2 +-
 web/components/labels/project-setting-label-group.tsx         | 4 ++--
 web/components/labels/project-setting-label-list-item.tsx     | 2 +-
 web/components/labels/project-setting-label-list.tsx          | 2 +-
 web/components/project/member-list.tsx                        | 4 ++--
 web/components/project/project-settings-member-defaults.tsx   | 2 +-
 web/components/project/settings/delete-project-section.tsx    | 2 +-
 web/components/project/settings/features-list.tsx             | 2 +-
 web/components/states/project-setting-state-list-item.tsx     | 2 +-
 web/components/states/project-setting-state-list.tsx          | 2 +-
 web/components/ui/integration-and-import-export-banner.tsx    | 2 +-
 web/components/workspace/settings/workspace-details.tsx       | 4 ++--
 web/pages/[workspaceSlug]/me/profile/activity.tsx             | 4 ++--
 web/pages/[workspaceSlug]/me/profile/preferences.tsx          | 2 +-
 .../projects/[projectId]/settings/automations.tsx             | 2 +-
 .../projects/[projectId]/settings/features.tsx                | 2 +-
 .../[workspaceSlug]/projects/[projectId]/settings/states.tsx  | 2 +-
 web/pages/[workspaceSlug]/settings/billing.tsx                | 2 +-
 web/pages/[workspaceSlug]/settings/exports.tsx                | 2 +-
 web/pages/[workspaceSlug]/settings/imports.tsx                | 2 +-
 web/pages/[workspaceSlug]/settings/members.tsx                | 2 +-
 27 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index 3e664bef4..966892595 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -29,7 +29,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
+      <div className="flex flex-col gap-4 border-b border-custom-border-100 px-4 py-6">
         <div className="flex items-center justify-between">
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
@@ -54,7 +54,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleC
 
         {projectDetails?.archive_in !== 0 && (
           <div className="ml-12">
-            <div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
+            <div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border-[0.5px] border-custom-border-200 gap-2 w-full">
               <div className="w-1/2 text-sm font-medium">Auto-archive issues that are closed for</div>
               <div className="w-1/2">
                 <CustomSelect
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 7da250295..b0aad20cd 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -73,7 +73,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
         handleChange={handleChange}
       />
 
-      <div className="flex flex-col gap-4 border-b border-custom-border-200 px-4 py-6">
+      <div className="flex flex-col gap-4 border-b border-custom-border-100 px-4 py-6">
         <div className="flex items-center justify-between">
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
@@ -100,7 +100,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleCha
 
         {projectDetails?.close_in !== 0 && (
           <div className="ml-12">
-            <div className="flex flex-col rounded bg-custom-background-90 border border-custom-border-200 p-2">
+            <div className="flex flex-col rounded bg-custom-background-90 border-[0.5px] border-custom-border-200 p-2">
               <div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
                 <div className="w-1/2 text-sm font-medium">Auto-close issues that are inactive for</div>
                 <div className="w-1/2">
diff --git a/web/components/estimates/estimate-list-item.tsx b/web/components/estimates/estimate-list-item.tsx
index becf16ff4..beaa942d3 100644
--- a/web/components/estimates/estimate-list-item.tsx
+++ b/web/components/estimates/estimate-list-item.tsx
@@ -54,7 +54,7 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="gap-2 p-4 border-b border-custom-border-200">
+      <div className="gap-2 p-4 border-b border-custom-border-100">
         <div className="flex items-center justify-between">
           <div>
             <h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
diff --git a/web/components/estimates/estimate-list.tsx b/web/components/estimates/estimate-list.tsx
index 489545098..07770b183 100644
--- a/web/components/estimates/estimate-list.tsx
+++ b/web/components/estimates/estimate-list.tsx
@@ -71,7 +71,7 @@ export const EstimatesList: React.FC = observer(() => {
         data={projectStore.getProjectEstimateById(estimateToDelete!)}
       />
 
-      <section className="flex items-center justify-between py-3.5 border-b border-custom-border-200">
+      <section className="flex items-center justify-between py-3.5 border-b border-custom-border-100">
         <h3 className="text-xl font-medium">Estimates</h3>
         <div className="col-span-12 space-y-5 sm:col-span-7">
           <div className="flex items-center gap-2">
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index bb64e6170..2d7eb9d65 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -53,7 +53,7 @@ const IntegrationGuide = () => {
             {EXPORTERS_LIST.map((service) => (
               <div
                 key={service.provider}
-                className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6"
+                className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
               >
                 <div className="flex items-start justify-between gap-4 w-full">
                   <div className="flex item-center gap-2.5">
@@ -79,7 +79,7 @@ const IntegrationGuide = () => {
             ))}
           </div>
           <div>
-            <div className="flex items-center justify-between pt-7 pb-3.5 border-b border-custom-border-200">
+            <div className="flex items-center justify-between pt-7 pb-3.5 border-b border-custom-border-100">
               <div className="flex gap-2 items-center">
                 <h3 className="flex gap-2 text-xl font-medium">Previous Exports</h3>
 
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index a0876e673..d083de590 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -79,7 +79,7 @@ const IntegrationGuide = () => {
             {IMPORTERS_EXPORTERS_LIST.map((service) => (
               <div
                 key={service.provider}
-                className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6"
+                className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6"
               >
                 <div className="flex items-start gap-4">
                   <div className="relative h-10 w-10 flex-shrink-0">
@@ -100,7 +100,7 @@ const IntegrationGuide = () => {
               </div>
             ))}
             <div>
-              <div className="flex items-center pt-7 pb-3.5 border-b border-custom-border-200">
+              <div className="flex items-center pt-7 pb-3.5 border-b border-custom-border-100">
                 <h3 className="flex gap-2 text-xl font-medium">
                   Previous Imports
                   <button
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index 56c0c2408..28fca6fcd 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -93,7 +93,7 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
   const isInstalled = workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
 
   return (
-    <div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6">
+    <div className="flex items-center justify-between gap-2 border-b border-custom-border-100 bg-custom-background-100 px-4 py-6">
       <div className="flex items-start gap-4">
         <div className="h-10 w-10 flex-shrink-0">
           <Image src={integrationDetails[integration.provider].logo} alt={`${integration.title} Logo`} />
diff --git a/web/components/labels/project-setting-label-group.tsx b/web/components/labels/project-setting-label-group.tsx
index a9949bb00..8db46cb1d 100644
--- a/web/components/labels/project-setting-label-group.tsx
+++ b/web/components/labels/project-setting-label-group.tsx
@@ -41,7 +41,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
   return (
     <Disclosure
       as="div"
-      className="rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-3 text-custom-text-100"
+      className="rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3.5 py-3 text-custom-text-100"
       defaultOpen
     >
       {({ open }) => (
@@ -95,7 +95,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
                 {labelChildren.map((child) => (
                   <div
                     key={child.id}
-                    className="group flex items-center justify-between border-b border-custom-border-200 px-4 py-2.5 text-sm last:border-0"
+                    className="group flex items-center justify-between border-b-[0.5px] border-custom-border-200 px-4 py-2.5 text-sm last:border-0"
                   >
                     <h5 className="flex items-center gap-3">
                       <span
diff --git a/web/components/labels/project-setting-label-list-item.tsx b/web/components/labels/project-setting-label-list-item.tsx
index 1729a6d8b..fec3bcd2e 100644
--- a/web/components/labels/project-setting-label-list-item.tsx
+++ b/web/components/labels/project-setting-label-list-item.tsx
@@ -25,7 +25,7 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
 
   return (
-    <div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
+    <div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
       <div className="flex items-center gap-3">
         <span
           className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
diff --git a/web/components/labels/project-setting-label-list.tsx b/web/components/labels/project-setting-label-list.tsx
index 42ebb417d..84bda8f97 100644
--- a/web/components/labels/project-setting-label-list.tsx
+++ b/web/components/labels/project-setting-label-list.tsx
@@ -76,7 +76,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
         onClose={() => setSelectDeleteLabel(null)}
       />
 
-      <div className="flex items-center py-3.5 border-b border-custom-border-200 justify-between">
+      <div className="flex items-center py-3.5 border-b border-custom-border-100 justify-between">
         <h3 className="text-xl font-medium">Labels</h3>
         <Button variant="primary" onClick={newLabel} size="sm">
           Add label
diff --git a/web/components/project/member-list.tsx b/web/components/project/member-list.tsx
index aea4ccda2..e24149028 100644
--- a/web/components/project/member-list.tsx
+++ b/web/components/project/member-list.tsx
@@ -87,7 +87,7 @@ export const ProjectMemberList: React.FC = observer(() => {
         }}
       />
 
-      <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
+      <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-100">
         <h4 className="text-xl font-medium">Members</h4>
         <div className="flex gap-1 items-center justify-start ml-auto text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
           <Search className="h-3.5 w-3.5" />
@@ -111,7 +111,7 @@ export const ProjectMemberList: React.FC = observer(() => {
           <Loader.Item height="40px" />
         </Loader>
       ) : (
-        <div className="divide-y divide-custom-border-200">
+        <div className="divide-y divide-custom-border-100">
           {members.length > 0
             ? searchedMembers.map((member) => <ProjectMemberListItem key={member.id} member={member} />)
             : null}
diff --git a/web/components/project/project-settings-member-defaults.tsx b/web/components/project/project-settings-member-defaults.tsx
index a8d8fc0c8..fd0f806c3 100644
--- a/web/components/project/project-settings-member-defaults.tsx
+++ b/web/components/project/project-settings-member-defaults.tsx
@@ -83,7 +83,7 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
 
   return (
     <>
-      <div className="flex items-center py-3.5 border-b border-custom-border-200">
+      <div className="flex items-center py-3.5 border-b border-custom-border-100">
         <h3 className="text-xl font-medium">Defaults</h3>
       </div>
 
diff --git a/web/components/project/settings/delete-project-section.tsx b/web/components/project/settings/delete-project-section.tsx
index 44d4d7f8f..7d5b3d26b 100644
--- a/web/components/project/settings/delete-project-section.tsx
+++ b/web/components/project/settings/delete-project-section.tsx
@@ -17,7 +17,7 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
   const { projectDetails, handleDelete } = props;
 
   return (
-    <Disclosure as="div" className="border-t border-custom-border-400">
+    <Disclosure as="div" className="border-t border-custom-border-100">
       {({ open }) => (
         <div className="w-full">
           <Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4">
diff --git a/web/components/project/settings/features-list.tsx b/web/components/project/settings/features-list.tsx
index 6e4e727c4..995a62701 100644
--- a/web/components/project/settings/features-list.tsx
+++ b/web/components/project/settings/features-list.tsx
@@ -96,7 +96,7 @@ export const ProjectFeaturesList: FC<Props> = observer(() => {
       {PROJECT_FEATURES_LIST.map((feature) => (
         <div
           key={feature.property}
-          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4"
+          className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-100 bg-custom-background-100 p-4"
         >
           <div className="flex items-start gap-3">
             <div className="flex items-center justify-center p-3 rounded bg-custom-background-90">{feature.icon}</div>
diff --git a/web/components/states/project-setting-state-list-item.tsx b/web/components/states/project-setting-state-list-item.tsx
index 7fc5dfc88..b3146f43d 100644
--- a/web/components/states/project-setting-state-list-item.tsx
+++ b/web/components/states/project-setting-state-list-item.tsx
@@ -56,7 +56,7 @@ export const ProjectSettingListItem: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <div className="group flex items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-4 py-3">
+    <div className="group flex items-center justify-between gap-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-4 py-3">
       <div className="flex items-center gap-3">
         <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
         <div>
diff --git a/web/components/states/project-setting-state-list.tsx b/web/components/states/project-setting-state-list.tsx
index 37205f4f9..94a33a11b 100644
--- a/web/components/states/project-setting-state-list.tsx
+++ b/web/components/states/project-setting-state-list.tsx
@@ -93,7 +93,7 @@ export const ProjectSettingStateList: React.FC = observer(() => {
                           handleDeleteState={() => setSelectDeleteState(state.id)}
                         />
                       ) : (
-                        <div className="border-b border-custom-border-200 last:border-b-0" key={state.id}>
+                        <div className="border-b-[0.5px] border-custom-border-200 last:border-b-0" key={state.id}>
                           <CreateUpdateStateInline
                             onClose={() => {
                               setActiveGroup(null);
diff --git a/web/components/ui/integration-and-import-export-banner.tsx b/web/components/ui/integration-and-import-export-banner.tsx
index f1f637efc..a4ced132b 100644
--- a/web/components/ui/integration-and-import-export-banner.tsx
+++ b/web/components/ui/integration-and-import-export-banner.tsx
@@ -6,7 +6,7 @@ type Props = {
 };
 
 export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
-  <div className="flex items-start gap-3 py-3.5 border-b border-custom-border-200">
+  <div className="flex items-start gap-3 py-3.5 border-b border-custom-border-100">
     <h3 className="text-xl font-medium">{bannerName}</h3>
     {description && (
       <div className="flex items-center gap-3 rounded-[10px] border border-custom-primary/75 bg-custom-primary/5 p-4 text-sm text-custom-text-100">
diff --git a/web/components/workspace/settings/workspace-details.tsx b/web/components/workspace/settings/workspace-details.tsx
index 0251df6c0..26e1d0262 100644
--- a/web/components/workspace/settings/workspace-details.tsx
+++ b/web/components/workspace/settings/workspace-details.tsx
@@ -135,7 +135,7 @@ export const WorkspaceDetails: React.FC = observer(() => {
         value={watch("logo")}
       />
       <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
-        <div className="flex gap-5 items-center pb-7 border-b border-custom-border-200">
+        <div className="flex gap-5 items-center pb-7 border-b border-custom-border-100">
           <div className="flex flex-col gap-1">
             <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
               {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
@@ -265,7 +265,7 @@ export const WorkspaceDetails: React.FC = observer(() => {
           </div>
         </div>
         {isAdmin && (
-          <Disclosure as="div" className="border-t border-custom-border-200">
+          <Disclosure as="div" className="border-t border-custom-border-100">
             {({ open }) => (
               <div className="w-full">
                 <Disclosure.Button as="button" type="button" className="flex items-center justify-between w-full py-4">
diff --git a/web/pages/[workspaceSlug]/me/profile/activity.tsx b/web/pages/[workspaceSlug]/me/profile/activity.tsx
index 3b5e60f59..820a62596 100644
--- a/web/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -37,7 +37,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
     <>
       {userActivity ? (
         <section className="pr-9 py-8 w-full overflow-y-auto">
-          <div className="flex items-center py-3.5 border-b border-custom-border-200">
+          <div className="flex items-center py-3.5 border-b border-custom-border-100">
             <h3 className="text-xl font-medium">Activity</h3>
           </div>
           <div className={`flex flex-col gap-2 py-4 w-full`}>
@@ -153,7 +153,7 @@ const ProfileActivityPage: NextPageWithLayout = () => {
                                 </div>
                               </div>
                             </div>
-                            <div className="min-w-0 flex-1 py-4 border-b border-custom-border-200">
+                            <div className="min-w-0 flex-1 py-4 border-b border-custom-border-100">
                               <div className="text-sm text-custom-text-200 break-words">
                                 {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                                   <span className="text-gray font-medium">Plane</span>
diff --git a/web/pages/[workspaceSlug]/me/profile/preferences.tsx b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
index 842740f7a..5f915ec10 100644
--- a/web/pages/[workspaceSlug]/me/profile/preferences.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
@@ -50,7 +50,7 @@ const ProfilePreferencesPage: NextPageWithLayout = observer(() => {
     <>
       {userStore.currentUser ? (
         <div className="pr-9 py-8 w-full overflow-y-auto">
-          <div className="flex items-center py-3.5 border-b border-custom-border-200">
+          <div className="flex items-center py-3.5 border-b border-custom-border-100">
             <h3 className="text-xl font-medium">Preferences</h3>
           </div>
           <div className="grid grid-cols-12 gap-4 sm:gap-16 py-6">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index 0a000e847..313d8e549 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -69,7 +69,7 @@ const AutomationSettingsPage: NextPageWithLayout = () => {
 
   return (
     <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
-      <div className="flex items-center py-3.5 border-b border-custom-border-200">
+      <div className="flex items-center py-3.5 border-b border-custom-border-100">
         <h3 className="text-xl font-medium">Automations</h3>
       </div>
       <AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index ecb8ca027..2e9597b3d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -29,7 +29,7 @@ const FeaturesSettingsPage: NextPageWithLayout = () => {
 
   return (
     <section className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
-      <div className="flex items-center py-3.5 border-b border-custom-border-200">
+      <div className="flex items-center py-3.5 border-b border-custom-border-100">
         <h3 className="text-xl font-medium">Features</h3>
       </div>
       <ProjectFeaturesList />
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index cc87c20f4..6895a53ae 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -10,7 +10,7 @@ import { NextPageWithLayout } from "types/app";
 
 const StatesSettingsPage: NextPageWithLayout = () => (
   <div className="pr-9 py-8 gap-10 w-full overflow-y-auto">
-    <div className="flex items-center py-3.5 border-b border-custom-border-200">
+    <div className="flex items-center py-3.5 border-b border-custom-border-100">
       <h3 className="text-xl font-medium">States</h3>
     </div>
     <ProjectSettingStateList />
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index 751b5cfab..bd7fe3f2f 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -12,7 +12,7 @@ import { NextPageWithLayout } from "types/app";
 const BillingSettingsPage: NextPageWithLayout = () => (
   <section className="pr-9 py-8 w-full overflow-y-auto">
     <div>
-      <div className="flex  items-center py-3.5 border-b border-custom-border-200">
+      <div className="flex  items-center py-3.5 border-b border-custom-border-100">
         <h3 className="text-xl font-medium">Billing & Plans</h3>
       </div>
     </div>
diff --git a/web/pages/[workspaceSlug]/settings/exports.tsx b/web/pages/[workspaceSlug]/settings/exports.tsx
index ce0786634..fdf3a3393 100644
--- a/web/pages/[workspaceSlug]/settings/exports.tsx
+++ b/web/pages/[workspaceSlug]/settings/exports.tsx
@@ -12,7 +12,7 @@ const ExportsPage: NextPageWithLayout = () => (
   <AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
     <WorkspaceSettingLayout>
       <div className="pr-9 py-8 w-full overflow-y-auto">
-        <div className="flex items-center py-3.5 border-b border-custom-border-200">
+        <div className="flex items-center py-3.5 border-b border-custom-border-100">
           <h3 className="text-xl font-medium">Exports</h3>
         </div>
         <ExportGuide />
diff --git a/web/pages/[workspaceSlug]/settings/imports.tsx b/web/pages/[workspaceSlug]/settings/imports.tsx
index c75c2d7e7..932c939f6 100644
--- a/web/pages/[workspaceSlug]/settings/imports.tsx
+++ b/web/pages/[workspaceSlug]/settings/imports.tsx
@@ -10,7 +10,7 @@ import { NextPageWithLayout } from "types/app";
 
 const ImportsPage: NextPageWithLayout = () => (
   <section className="pr-9 py-8 w-full overflow-y-auto">
-    <div className="flex items-center py-3.5 border-b border-custom-border-200">
+    <div className="flex items-center py-3.5 border-b border-custom-border-100">
       <h3 className="text-xl font-medium">Imports</h3>
     </div>
     <IntegrationGuide />
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index 90c9848ca..74a9c6724 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -35,7 +35,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = () => {
         />
       )}
       <section className="pr-9 py-8 w-full overflow-y-auto">
-        <div className="flex items-center justify-between gap-4 py-3.5 border-b-[0.5px] border-custom-border-200">
+        <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-100">
           <h4 className="text-xl font-medium">Members</h4>
           <div className="flex gap-1 items-center justify-start ml-auto text-custom-text-400 rounded-md px-2.5 py-1.5 border border-custom-border-200 bg-custom-background-100">
             <Search className="h-3.5 w-3.5" />