fix: table highlighting and modal fill level (#638)

pluralsh · Aug 23, 2024 · c416290 · c416290
1 parent a27ad7a
commit c416290
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -79,14 +79,13 @@ const sizeToWidth = {
 const ModalSC = styled(Card)<{
   $width: number
   $maxWidth: number
-}>(({ theme, $width, $maxWidth }) => ({
+}>(({ $width, $maxWidth }) => ({
   position: 'relative',
   display: 'flex',
   flexDirection: 'column',
   height: '100%',
   width: $width,
   maxWidth: $maxWidth,
-  backgroundColor: theme.colors['fill-one'],
 }))
 
 const ModalContentSC = styled.div<{
@@ -186,6 +185,7 @@ function ModalRef(
       {...props}
     >
       <ModalSC
+        fillLevel={1}
         forwardedAs={asForm ? 'form' : undefined}
         $width={sizeToWidth[size]}
         $maxWidth={maxWidth}

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -172,7 +172,8 @@ const Tr = styled.tr<{
     ...(clickable && {
       cursor: 'pointer',
 
-      '&:hover': {
+      // highlight when hovered, but don't highlight if a child button is hovered
+      '&:not(:has(button:hover)):hover': {
         backgroundColor: selectable
           ? selected
             ? theme.colors['fill-zero-hover']