From d0be97a513642656dfaeeafe159c0133ceb1208d Mon Sep 17 00:00:00 2001
From: IvoPaunov <ivo.paunov@gmail.com>
Date: Mon, 19 Aug 2024 13:59:45 +0300
Subject: [PATCH] fix blocked srcs styles

---
 .../CampaignAnalytics/Placements.tsx           |  6 +++---
 .../common/CustomTable/CustomTable.tsx         | 18 +++++++++++++-----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/CampaignAnalytics/Placements.tsx b/src/components/CampaignAnalytics/Placements.tsx
index 0f4ce3ee..ddce2116 100644
--- a/src/components/CampaignAnalytics/Placements.tsx
+++ b/src/components/CampaignAnalytics/Placements.tsx
@@ -69,7 +69,7 @@ const Placements = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: s
             const isBlocked = !!campaign.targetingInput.inputs.publishers.nin.includes(item.segment)
             const srcName = getHumneSrcName(item.segment, placement)
             const data: PlacementsTableElement = {
-              rowColor: isBlocked ? 'red' : 'inherit',
+              rowColor: isBlocked ? 'warning' : 'inherit',
               actionData: {
                 srcName,
                 isBlocked,
@@ -134,7 +134,7 @@ const Placements = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: s
                   srcName
                 }))
               }),
-            label: (selectedElements) => `Block selected ${selectedElements?.size}`,
+            label: (selectedElements) => `Block selected (${selectedElements?.size})`,
             icon: (
               <ThemeIcon variant="transparent" size="xs">
                 <BlockIcon size="inherit" />
@@ -151,7 +151,7 @@ const Placements = ({ forAdmin, campaignId }: { forAdmin: boolean; campaignId: s
                   srcName
                 }))
               }),
-            label: (selectedElements) => `Unblock selected ${selectedElements?.size}`,
+            label: (selectedElements) => `Unblock selected (${selectedElements?.size})`,
             // icon: () => <VisibilityIcon size="10px" />,
             color: 'success'
           }
diff --git a/src/components/common/CustomTable/CustomTable.tsx b/src/components/common/CustomTable/CustomTable.tsx
index 710c8326..dddcde63 100644
--- a/src/components/common/CustomTable/CustomTable.tsx
+++ b/src/components/common/CustomTable/CustomTable.tsx
@@ -175,7 +175,7 @@ export const CustomTable = ({
             return (
               <Tooltip key={label} label={label}>
                 <ActionIcon
-                  size="23px"
+                  size="sm"
                   variant="transparent"
                   color={a.color || 'mainText'}
                   onClick={() => a.action(e.actionData || e)}
@@ -203,7 +203,7 @@ export const CustomTable = ({
                       color={a.color || 'mainText'}
                       key={label}
                       leftSection={
-                        <ThemeIcon size="20px" variant="transparent" color={a.color || 'mainText'}>
+                        <ThemeIcon size="sm" variant="transparent" color={a.color || 'mainText'}>
                           {getIcon(a.icon, e.actionData)}
                         </ThemeIcon>
                       }
@@ -229,6 +229,7 @@ export const CustomTable = ({
           e[column] ||
           (column === 'select' && (
             <Checkbox
+              aria-label="Select row"
               checked={selectedElements.has(e.id || '')}
               onChange={(el) => handleCheckbox(el.currentTarget.checked, e.id || '')}
             />
@@ -246,7 +247,7 @@ export const CustomTable = ({
             <Divider />
           </Stack>
         ) : (
-          <Table.Td key={column}>
+          <Table.Td key={column} maw={20}>
             <Text size="sm" c={color} truncate maw={290}>
               {columnParsed}
             </Text>
@@ -292,10 +293,17 @@ export const CustomTable = ({
           </Stack>
         ) : (
           <ScrollArea scrollbars="x" type="auto" offsetScrollbars>
-            <Table {...tableProps} mih={420} w="100%" highlightOnHover verticalSpacing="sm">
+            <Table
+              {...tableProps}
+              mih={420}
+              w="100%"
+              highlightOnHover
+              verticalSpacing="sm"
+              layout="auto"
+            >
               <Table.Thead bg="alternativeBackground">
                 <Table.Tr>
-                  {selectedActions && <Table.Th maw={20}>{masterSelectAction}</Table.Th>}
+                  {selectedActions && <Table.Th w="sm">{masterSelectAction}</Table.Th>}
                   {headings.map((h) => (
                     <Table.Th key={h}>{h}</Table.Th>
                   ))}