1380 - client - Update borders by replacing border-muted with border-…

…*-border
bytechefhq · Nov 18, 2024 · 63f0ef2 · 63f0ef2
1 parent 952c7ef
commit 63f0ef2
Show file tree

Hide file tree

Showing 56 changed files with 105 additions and 92 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -230,7 +230,7 @@ function App() {
                     <Outlet />
 
                     {ai.enabled && showCopilot && (
-                        <aside className="border-l">
+                        <aside className="border-l border-l-border/70">
                             <CopilotPanel />
                         </aside>
                     )}

diff --git a/client/src/components/TagList.tsx b/client/src/components/TagList.tsx
@@ -23,7 +23,7 @@ interface TagProps {
 }
 
 const Tag = ({onDeleteTag, tag}: TagProps) => (
-    <div className="group flex max-h-8 items-center justify-between rounded-full border border-muted pl-2 pr-1 text-xs text-gray-700">
+    <div className="group flex max-h-8 items-center justify-between rounded-full border border-border/50 pl-2 pr-1 text-xs text-gray-700">
         <span className="py-1">{tag.name}</span>
 
         <Tooltip>
@@ -153,7 +153,7 @@ const TagList = ({getRequest, id, remainingTags, tags, updateTagsMutation}: TagL
                 </>
             ) : (
                 <div
-                    className="flex size-6 cursor-pointer items-center justify-center rounded border border-muted hover:bg-gray-200"
+                    className="flex size-6 cursor-pointer items-center justify-center rounded border border-border/50 hover:bg-gray-200"
                     onClick={(event) => {
                         event.preventDefault();
 

diff --git a/client/src/ee/pages/automation/api-platform/api-clients/components/ApiClientTable.tsx b/client/src/ee/pages/automation/api-platform/api-clients/components/ApiClientTable.tsx
@@ -148,7 +148,7 @@ const ApiClientTable = ({apiClients}: ApiClientTableProps) => {
             <Table className="table-auto">
                 <TableHeader>
                     {headerGroups.map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
+                        <TableRow className="border-b-border/50" key={headerGroup.id}>
                             {headerGroup.headers.map((header) => (
                                 <TableHead
                                     className="sticky top-0 z-10 bg-white p-3 text-left text-xs font-medium uppercase tracking-wide text-gray-500"
@@ -162,9 +162,9 @@ const ApiClientTable = ({apiClients}: ApiClientTableProps) => {
                     ))}
                 </TableHeader>
 
-                <TableBody className="divide-y divide-gray-200 bg-white">
+                <TableBody>
                     {rows.map((row) => (
-                        <TableRow className="cursor-pointer" key={row.id}>
+                        <TableRow className="cursor-pointer border-b-border/50" key={row.id}>
                             {row.getVisibleCells().map((cell) => (
                                 <TableCell
                                     className={twMerge(

diff --git a/client/src/ee/pages/automation/api-platform/api-collections/ApiCollections.tsx b/client/src/ee/pages/automation/api-platform/api-collections/ApiCollections.tsx
@@ -23,7 +23,6 @@ export enum Type {
 }
 
 const ApiCollections = () => {
-    console.log('ApiCollections');
     const {currentWorkspaceId} = useWorkspaceStore();
 
     const location = useLocation();

diff --git a/...ee/pages/automation/api-platform/api-collections/components/ApiCollectionEndpointList.tsx b/...ee/pages/automation/api-platform/api-collections/components/ApiCollectionEndpointList.tsx
@@ -26,7 +26,7 @@ const ApiCollectionEndpointList = ({
     const {data: projectInstance} = useGetProjectInstanceQuery(projectInstanceId);
 
     return (
-        <div className="border-b border-b-gray-100 py-3 pl-4">
+        <div className="border-b border-b-border/50 py-3 pl-4">
             {apiCollectionEndpoints && apiCollectionEndpoints.length > 0 ? (
                 <>
                     <div className="mb-1 flex items-center justify-between">

diff --git a/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionList.tsx b/client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionList.tsx
@@ -6,7 +6,7 @@ import ApiCollectionListItem from './ApiCollectionListItem';
 
 const ApiCollectionList = ({apiCollections}: {apiCollections: ApiCollection[]}) => {
     return (
-        <div className="w-full px-2 2xl:mx-auto 2xl:w-4/5">
+        <div className="w-full divide-y divide-border/50 px-4 2xl:mx-auto 2xl:w-4/5">
             {apiCollections.length > 0 &&
                 apiCollections.map((apiCollection) => {
                     return (

diff --git a/...src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionListItem.tsx b/...src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionListItem.tsx
@@ -76,7 +76,7 @@ const ApiCollectionListItem = ({apiCollection}: ApiCollectionListItemProps) => {
     return (
         <>
             <div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50">
-                <div className="flex flex-1 items-center border-b border-muted py-5 group-data-[state='open']:border-none">
+                <div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
                     <div className="flex-1">
                         <div className="flex items-center justify-between">
                             <div className="flex w-full items-center justify-between">
@@ -131,7 +131,9 @@ const ApiCollectionListItem = ({apiCollection}: ApiCollectionListItemProps) => {
                             <span>V{apiCollection.collectionVersion}</span>
                         </Badge>
 
-                        <Badge variant="secondary">{apiCollection.projectInstance?.environment}</Badge>
+                        <div className="flex min-w-28 justify-end">
+                            <Badge variant="secondary">{apiCollection.projectInstance?.environment}</Badge>
+                        </div>
 
                         <div className="flex min-w-52 flex-col items-end gap-y-4">
                             <Switch checked={apiCollection.enabled} onCheckedChange={handleOnCheckedChange} />

diff --git a/...ee/pages/automation/api-platform/api-collections/components/ApiCollectionsFilterTitle.tsx b/...ee/pages/automation/api-platform/api-collections/components/ApiCollectionsFilterTitle.tsx
@@ -31,7 +31,7 @@ const ApiCollectionsFilterTitle = ({
 
             <Badge variant="secondary">
                 <span className="text-sm">
-                    {environment === undefined ? 'All environments' : environment === 1 ? 'Test' : 'Production'}
+                    {environment === undefined ? 'All Environments' : environment === 1 ? 'Test' : 'Production'}
                 </span>
             </Badge>
 

diff --git a/client/src/ee/pages/settings/platform/api-connectors/components/ApiConnectorEndpointList.tsx b/client/src/ee/pages/settings/platform/api-connectors/components/ApiConnectorEndpointList.tsx
@@ -5,7 +5,7 @@ import ApiConnectorEndpointListItem from './ApiConnectorEndpointListItem';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ApiConnectorEndpointList = ({apiConnectorEndpoints}: {apiConnectorEndpoints?: Array<ApiConnectorEndpoint>}) => {
     return (
-        <div className="border-b border-b-gray-100 py-3 pl-4">
+        <div className="border-b border-b-border/50 py-3 pl-4">
             <h3 className="flex justify-start pl-2 text-sm font-semibold uppercase text-gray-400">Endpoints</h3>
 
             <ul>

diff --git a/client/src/pages/account/settings/Appearance.tsx b/client/src/pages/account/settings/Appearance.tsx
@@ -58,7 +58,7 @@ export default function Appearance() {
                                                 <RadioGroupItem className="sr-only" value="light" />
                                             </FormControl>
 
-                                            <div className="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
+                                            <div className="items-center rounded-md border-2 border-border/50 p-1 hover:border-accent">
                                                 <div className="space-y-2 rounded-sm bg-input p-2">
                                                     <div className="space-y-2 rounded-md bg-white p-2 shadow-sm">
                                                         <div className="h-2 w-appearance-theme-choice-skeleton-small-width rounded-lg bg-input" />
@@ -90,7 +90,7 @@ export default function Appearance() {
                                                 <RadioGroupItem className="sr-only" value="dark" />
                                             </FormControl>
 
-                                            <div className="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
+                                            <div className="items-center rounded-md border-2 border-border/50 bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
                                                 <div className="space-y-2 rounded-sm bg-slate-950 p-2">
                                                     <div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
                                                         <div className="h-2 w-appearance-theme-choice-skeleton-small-width rounded-lg bg-slate-400" />
@@ -122,7 +122,7 @@ export default function Appearance() {
                                                 <RadioGroupItem className="sr-only" value="system" />
                                             </FormControl>
 
-                                            <div className="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
+                                            <div className="items-center rounded-md border-2 border-border/50 bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
                                                 <div className="space-y-2 rounded-sm bg-input p-2">
                                                     <div className="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
                                                         <div className="h-2 w-appearance-theme-choice-skeleton-small-width rounded-lg bg-slate-400" />

diff --git a/client/src/pages/account/settings/Sessions.tsx b/client/src/pages/account/settings/Sessions.tsx
@@ -62,7 +62,7 @@ const Sessions = () => {
                     <div className="w-full px-2 2xl:mx-auto 2xl:w-4/5">
                         <Table className="table-auto">
                             <TableHeader>
-                                <TableRow>
+                                <TableRow className="border-b-border/50">
                                     <TableHead>IP Address</TableHead>
 
                                     <TableHead>User agent</TableHead>
@@ -75,7 +75,7 @@ const Sessions = () => {
 
                             <TableBody>
                                 {sessions.map((s, index) => (
-                                    <TableRow key={index}>
+                                    <TableRow className="cursor-pointer border-b-border/50" key={index}>
                                         <TableCell>{s.ipAddress}</TableCell>
 
                                         <TableCell>

diff --git a/client/src/pages/automation/connections/components/connection-list/ConnectionList.tsx b/client/src/pages/automation/connections/components/connection-list/ConnectionList.tsx
@@ -4,7 +4,7 @@ import ConnectionListItem from './ConnectionListItem';
 
 const ConnectionList = ({connections, tags}: {connections: Connection[]; tags: Tag[]}) => {
     return (
-        <ul className="w-full px-2 2xl:mx-auto 2xl:w-4/5" role="list">
+        <ul className="w-full divide-y divide-border/50 px-4 2xl:mx-auto 2xl:w-4/5" role="list">
             {connections.map((connection) => {
                 const connectionTagIds = connection.tags?.map((tag) => tag.id);
 

diff --git a/client/src/pages/automation/connections/components/connection-list/ConnectionListItem.tsx b/client/src/pages/automation/connections/components/connection-list/ConnectionListItem.tsx
@@ -90,7 +90,7 @@ const ConnectionListItem = ({connection, remainingTags}: ConnectionListItemProps
         <li key={connection.id}>
             <>
                 <div className="group flex items-center rounded-md bg-white px-2 hover:bg-gray-50">
-                    <div className="flex flex-1 items-center border-b border-muted py-5">
+                    <div className="flex flex-1 items-center py-5">
                         <div className="flex-1">
                             <div className="flex items-center justify-between">
                                 <div className="relative flex items-center gap-2">

diff --git a/client/src/pages/automation/project-instances/ProjectInstances.tsx b/client/src/pages/automation/project-instances/ProjectInstances.tsx
@@ -200,7 +200,7 @@ const ProjectInstances = () => {
                 loading={projectsIsLoading || projectInstancesIsLoading || tagsIsLoading}
             >
                 {projectInstances && projectInstances?.length > 0 ? (
-                    <div className="w-full px-2 2xl:mx-auto 2xl:w-4/5">
+                    <div className="w-full divide-y divide-border/50 px-4 2xl:mx-auto 2xl:w-4/5">
                         {Array.from(projectInstanceMap.keys())?.map(
                             (projectId) =>
                                 projects &&

diff --git a/...ges/automation/project-instances/components/project-instance-list/ProjectInstanceList.tsx b/...ges/automation/project-instances/components/project-instance-list/ProjectInstanceList.tsx
@@ -17,7 +17,7 @@ const ProjectInstanceList = ({
     const projectInstanceMap = useProjectInstancesEnabledStore(({projectInstanceMap}) => projectInstanceMap);
 
     return (
-        <div className="w-full">
+        <>
             {projectInstances.map((projectInstance) => {
                 const projectTagIds = projectInstance.tags?.map((tag) => tag.id);
 
@@ -51,7 +51,7 @@ const ProjectInstanceList = ({
                     </Collapsible>
                 );
             })}
-        </div>
+        </>
     );
 };
 

diff --git a/...automation/project-instances/components/project-instance-list/ProjectInstanceListItem.tsx b/...automation/project-instances/components/project-instance-list/ProjectInstanceListItem.tsx
@@ -90,7 +90,7 @@ const ProjectInstanceListItem = ({projectInstance, remainingTags}: ProjectInstan
     return (
         <>
             <div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50">
-                <div className="flex flex-1 items-center border-b border-muted py-5 group-data-[state='open']:border-none">
+                <div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
                     <div className="flex-1">
                         <div className="flex items-center justify-between">
                             <div className="flex w-full items-center gap-2">
@@ -143,7 +143,9 @@ const ProjectInstanceListItem = ({projectInstance, remainingTags}: ProjectInstan
                     <div className="flex items-center justify-end gap-x-6">
                         <Badge variant="secondary">V{projectInstance.projectVersion}</Badge>
 
-                        <Badge variant="secondary">{projectInstance.environment}</Badge>
+                        <div className="flex min-w-28 justify-end">
+                            <Badge variant="secondary">{projectInstance.environment}</Badge>
+                        </div>
 
                         <div className="flex min-w-52 flex-col items-end gap-y-4">
                             <div className="flex items-center">

diff --git a/client/src/pages/automation/project/Project.tsx b/client/src/pages/automation/project/Project.tsx
@@ -273,7 +273,7 @@ const Project = () => {
                 rightSidebarOpen={rightSidebarOpen}
                 rightSidebarWidth="96"
                 rightToolbarBody={<RightSidebar navigation={rightSidebarNavigation} />}
-                rightToolbarClass="border-l"
+                rightToolbarClass="border-l border-l-border/50"
                 rightToolbarOpen={true}
                 topHeader={
                     projectId && (

diff --git a/client/src/pages/automation/project/components/project-header/ProjectHeader.tsx b/client/src/pages/automation/project/components/project-header/ProjectHeader.tsx
@@ -179,7 +179,7 @@ const ProjectHeader = ({
     };
 
     return (
-        <header className="flex items-center border-b py-2.5 pl-3 pr-2.5">
+        <header className="flex items-center border-b border-b-border/50 py-2.5 pl-3 pr-2.5">
             <div className="flex flex-1">{project && <ProjectHeaderTitle project={project} />}</div>
 
             <div className="flex items-center space-x-12">

diff --git a/client/src/pages/automation/projects/components/project-list/ProjectList.tsx b/client/src/pages/automation/projects/components/project-list/ProjectList.tsx
@@ -6,7 +6,7 @@ import ProjectWorkflowList from '../project-workflow-list/ProjectWorkflowList';
 
 const ProjectList = ({projects, tags}: {projects: Project[]; tags: Tag[]}) => {
     return (
-        <div className="w-full px-2 2xl:mx-auto 2xl:w-4/5">
+        <div className="w-full divide-y divide-border/50 px-4 2xl:mx-auto 2xl:w-4/5">
             {projects.map((project) => {
                 const projectTagIds = project.tags?.map((tag) => tag.id);
 

diff --git a/client/src/pages/automation/projects/components/project-list/ProjectListItem.tsx b/client/src/pages/automation/projects/components/project-list/ProjectListItem.tsx
@@ -131,8 +131,8 @@ const ProjectListItem = ({project, remainingTags}: ProjectItemProps) => {
 
     return (
         <>
-            <div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-gray-50">
-                <div className="flex flex-1 items-center border-b border-muted py-5 group-data-[state='open']:border-none">
+            <div className="flex w-full items-center justify-between rounded-md px-2 hover:bg-muted/50">
+                <div className="flex flex-1 items-center py-5 group-data-[state='open']:border-none">
                     <div className="flex-1">
                         <div className="flex items-center gap-2">
                             {project.projectWorkflowIds && project.projectWorkflowIds.length > 0 ? (

diff --git a/client/src/pages/automation/workflow-executions/components/WorkflowExecutionsTable.tsx b/client/src/pages/automation/workflow-executions/components/WorkflowExecutionsTable.tsx
@@ -85,7 +85,7 @@ const WorkflowExecutionsTable = ({data}: {data: WorkflowExecution[]}) => {
             <Table>
                 <TableHeader>
                     {headerGroups.map((headerGroup) => (
-                        <TableRow key={headerGroup.id}>
+                        <TableRow className="border-b-border/50" key={headerGroup.id}>
                             {headerGroup.headers.map((header, index) => (
                                 <TableHead key={`${headerGroup.id}_${header.id}_${index}`}>
                                     {!header.isPlaceholder &&
@@ -98,7 +98,11 @@ const WorkflowExecutionsTable = ({data}: {data: WorkflowExecution[]}) => {
 
                 <TableBody>
                     {rows.map((row) => (
-                        <TableRow className="cursor-pointer" key={row.id} onClick={() => handleRowClick(row.index)}>
+                        <TableRow
+                            className="cursor-pointer border-b-border/50"
+                            key={row.id}
+                            onClick={() => handleRowClick(row.index)}
+                        >
                             {row.getVisibleCells().map((cell, index) => (
                                 <TableCell className="whitespace-nowrap py-4" key={`${row.id}_${cell.id}_${index}`}>
                                     {flexRender(cell.column.columnDef.cell, cell.getContext())}

diff --git a/...mation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx b/...mation/workflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheet.tsx
@@ -24,7 +24,7 @@ const WorkflowExecutionSheet = () => {
             <SheetContent className="flex w-11/12 gap-0 p-0 sm:max-w-screen-xl">
                 {workflowExecutionLoading && <span>Loading...</span>}
 
-                <div className="flex min-w-workflow-execution-sheet-width max-w-workflow-execution-sheet-width flex-col border-r border-muted bg-white">
+                <div className="flex min-w-workflow-execution-sheet-width max-w-workflow-execution-sheet-width flex-col border-r border-r-border/50 bg-white">
                     {workflowExecution?.job && (
                         <WorkflowExecutionSheetAccordion
                             job={workflowExecution.job}

diff --git a/...rkflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheetAccordion.tsx b/...rkflow-executions/components/workflow-execution-sheet/WorkflowExecutionSheetAccordion.tsx
@@ -51,11 +51,11 @@ const WorkflowExecutionSheetAccordion = ({job, triggerExecution}: {job: Job; tri
                 <Accordion collapsible defaultValue={triggerExecution?.id || ''} type="single">
                     {triggerExecution && (
                         <AccordionItem key={triggerExecution.id} value={triggerExecution.id || ''}>
-                            <AccordionTrigger className="flex w-full items-center justify-between border-muted bg-background data-[state=closed]:border-b">
+                            <AccordionTrigger className="flex w-full items-center justify-between border-border/50 bg-background data-[state=closed]:border-b">
                                 <WorkflowTriggerExecutionItem triggerExecution={triggerExecution} />
                             </AccordionTrigger>
 
-                            <AccordionContent className="space-y-4 border-b border-muted p-3">
+                            <AccordionContent className="space-y-4 border-b border-b-border/50 p-3">
                                 <WorkflowExecutionContent {...triggerExecution} />
                             </AccordionContent>
                         </AccordionItem>
@@ -64,11 +64,11 @@ const WorkflowExecutionSheetAccordion = ({job, triggerExecution}: {job: Job; tri
                     {job?.taskExecutions &&
                         job?.taskExecutions.map((taskExecution) => (
                             <AccordionItem key={taskExecution.id} value={taskExecution.id || ''}>
-                                <AccordionTrigger className="flex w-full items-center justify-between border-muted bg-background data-[state=closed]:border-b">
+                                <AccordionTrigger className="flex w-full items-center justify-between border-border/50 bg-background data-[state=closed]:border-b">
                                     <WorkflowTaskExecutionItem taskExecution={taskExecution} />
                                 </AccordionTrigger>
 
-                                <AccordionContent className="space-y-4 border-b border-muted p-3">
+                                <AccordionContent className="space-y-4 border-b border-b-border/50 p-3">
                                     <WorkflowExecutionContent {...taskExecution} />
                                 </AccordionContent>
                             </AccordionItem>

diff --git a/client/src/pages/embedded/app-events/components/AppEventList.tsx b/client/src/pages/embedded/app-events/components/AppEventList.tsx
@@ -3,7 +3,7 @@ import {AppEvent} from '@/shared/middleware/embedded/configuration';
 
 const AppEventList = ({appEvents}: {appEvents: AppEvent[]}) => {
     return (
-        <ul className="w-full divide-y divide-gray-100 px-2 2xl:mx-auto 2xl:w-4/5" role="list">
+        <ul className="w-full divide-y divide-gray-100 px-4 2xl:mx-auto 2xl:w-4/5" role="list">
             {appEvents.map((appEvent) => {
                 return <AppEventListItem appEvent={appEvent} key={appEvent.id} />;
             })}