PCF-322 White table row corners in dark mode (mozilla#583)

fix css styling for row corners and cell colour
esanuandra · Dec 22, 2023 · 984f72e · 984f72e
1 parent 5f2e34a
commit 984f72e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/components/CompareResults/RevisionRow.tsx b/src/components/CompareResults/RevisionRow.tsx
@@ -88,7 +88,9 @@ function RevisionRow(props: RevisionRowProps) {
 
   const styles = {
     revisionRow: style({
+      borderRadius: '4px 0px 0px 4px',
       display: 'grid',
+      margin: `${Spacing.Small}px 0px`,
       // Should be kept in sync with the gridTemplateColumns from TableHeader
       gridTemplateColumns: '2fr 1fr 0.2fr 1fr 1fr 1fr 1fr 1fr 2fr 0.2fr',
       $nest: {
@@ -116,17 +118,19 @@ function RevisionRow(props: RevisionRowProps) {
           backgroundColor: themeColor200,
         },
         '.platform': {
+          backgroundColor: themeColor200,
+          borderRadius: '4px 0 0 4px',
           paddingLeft: Spacing.xLarge,
           justifyContent: 'left',
         },
         '.platform-container': {
           alignItems: 'flex-end',
           backgroundColor: themeColor200,
           display: 'flex',
-          borderRadius: '4px 0 0 4px',
         },
         '.retrigger-button': {
           backgroundColor: themeColor200,
+          borderRadius: '0px 4px 4px 0px',
           cursor: 'not-allowed',
         },
         '.status': {
@@ -138,6 +142,8 @@ function RevisionRow(props: RevisionRowProps) {
         },
 
         '.row-buttons': {
+          backgroundColor: themeColor200,
+          borderRadius: '0px 4px 4px 0px',
           display: 'flex',
           justifyContent: 'flex-end',
           $nest: {

diff --git a/src/components/CompareResults/TableContent.tsx b/src/components/CompareResults/TableContent.tsx
@@ -1,6 +1,6 @@
 import { style } from 'typestyle';
 
-import { Colors, Spacing } from '../../styles';
+import { Spacing } from '../../styles';
 import type {
   CompareResultsItem,
   RevisionsHeader,
@@ -15,12 +15,6 @@ function TableContent(props: TableContentProps) {
   const styles = {
     tableBody: style({
       marginTop: Spacing.Large,
-      $nest: {
-        '.revisionRow': {
-          backgroundColor: Colors.Background200,
-          margin: `${Spacing.Small}px 0px`,
-        },
-      },
     }),
   };
   return (