diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 1ed7d486..3301822a 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -178,7 +178,6 @@ const TableRow = styled.tr` &:hover { background-color: ${theme.click.table.row.color.background.hover}; } - opacity: ${$isDeleted || $isDisabled ? 0.5 : 1}; cursor: ${$isDeleted || $isDisabled ? "not-allowed" : "default"} `} @@ -209,12 +208,20 @@ const TableRow = styled.tr` } `; -const TableData = styled.td<{ $size: TableSize }>` +interface TableDataProps { + $size: TableSize; + $isDeleted?: boolean; + $isDisabled?: boolean; +} +const TableData = styled.td` overflow: hidden; - ${({ theme, $size }) => ` + ${({ theme, $size, $isDeleted, $isDisabled }) => ` color: ${theme.click.table.row.color.text.default}; font: ${theme.click.table.cell.text.default}; - padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x}; + padding: ${theme.click.table.body.cell.space[$size].y} ${ + theme.click.table.body.cell.space[$size].x + }; + opacity: ${$isDeleted || $isDisabled ? 0.5 : 1}; `} @media (max-width: 768px) { width: auto; @@ -262,12 +269,15 @@ const Tbody = styled.tbody` } `; -const SelectData = styled.td<{ $size: TableSize }>` +const SelectData = styled.td` overflow: hidden; - ${({ theme, $size }) => ` - color: ${theme.click.table.row.color.text.default}; + ${({ theme, $size, $isDeleted, $isDisabled }) => ` + color: ${$isDeleted || $isDisabled ? "tomato" : "blue"}; font: ${theme.click.table.cell.text.default}; - padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x}; + padding: ${theme.click.table.body.cell.space[$size].y} ${ + theme.click.table.body.cell.space[$size].x + }; + opacity: ${$isDeleted || $isDisabled ? 0.5 : 1}; `} @media (max-width: 768px) { width: auto; @@ -353,8 +363,9 @@ interface TableRowCloseButtonProps { const TableRowCloseButton = styled.button` svg { transition: transform 200ms; - ${({ $isDeleted }) => ` + ${({ $isDeleted, theme }) => ` ${$isDeleted ? "transform: rotate(45deg)" : ""}; + color: ${$isDeleted ? theme.click.table.header.color.title.default : ""} `} } &:disabled { @@ -447,7 +458,11 @@ const TableBodyRow = ({ {...rowProps} > {isSelectable && ( - + {headers[cellIndex] && {headers[cellIndex].label}}