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

@@ -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

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">

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">

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">

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>
 

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

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`} />

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

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"

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

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}

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>
 

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">

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>

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>

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);

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">

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">

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>

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">

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} />

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 />

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 />

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>

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 />

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 />

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" />