From 984f72e125d645b975d90d3e5c9f2eb29c0548d6 Mon Sep 17 00:00:00 2001 From: esanuandra <63001299+esanuandra@users.noreply.github.com> Date: Fri, 22 Dec 2023 10:31:47 +0200 Subject: [PATCH] PCF-322 White table row corners in dark mode (#583) fix css styling for row corners and cell colour --- src/components/CompareResults/RevisionRow.tsx | 8 +++++++- src/components/CompareResults/TableContent.tsx | 8 +------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/CompareResults/RevisionRow.tsx b/src/components/CompareResults/RevisionRow.tsx index 53c4b6b96..9fa4e7af5 100644 --- 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,6 +118,8 @@ function RevisionRow(props: RevisionRowProps) { backgroundColor: themeColor200, }, '.platform': { + backgroundColor: themeColor200, + borderRadius: '4px 0 0 4px', paddingLeft: Spacing.xLarge, justifyContent: 'left', }, @@ -123,10 +127,10 @@ function RevisionRow(props: RevisionRowProps) { 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 index fab8f6848..0d6f9ccc7 100644 --- 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 (