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

Author: ivicac

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

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

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(

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

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

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 (

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

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

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>

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