From f2ccb7547f2ea44364dcb3152c6f3d5f54509966 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 3 Dec 2024 07:57:23 -0500 Subject: [PATCH 1/3] fix: Fixed dark mode bug. --- packages/module/src/LogViewer/LogViewer.tsx | 2 +- packages/module/src/LogViewer/css/log-viewer.css | 10 +++++----- packages/module/src/LogViewer/css/log-viewer.ts | 1 + 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/module/src/LogViewer/LogViewer.tsx b/packages/module/src/LogViewer/LogViewer.tsx index e8d5e50..a401d9c 100644 --- a/packages/module/src/LogViewer/LogViewer.tsx +++ b/packages/module/src/LogViewer/LogViewer.tsx @@ -312,7 +312,7 @@ const LogViewerBase: React.FunctionComponent = memo( hasLineNumbers && styles.modifiers.lineNumbers, !isTextWrapped && styles.modifiers.nowrap, initialIndexWidth && styles.modifiers.lineNumberChars, - theme === 'dark' && styles.themeDark + theme === 'dark' && styles.modifiers.dark )} {...(initialIndexWidth && { style: { diff --git a/packages/module/src/LogViewer/css/log-viewer.css b/packages/module/src/LogViewer/css/log-viewer.css index 955ec38..6563afe 100644 --- a/packages/module/src/LogViewer/css/log-viewer.css +++ b/packages/module/src/LogViewer/css/log-viewer.css @@ -50,14 +50,14 @@ height: var(--pf-v6-c-log-viewer--Height); max-height: var(--pf-v6-c-log-viewer--MaxHeight); } -.pf-v6-c-log-viewer.pf-v6-theme-dark { +.pf-v6-c-log-viewer.pf-m-dark { --pf-v6-c-log-viewer__main--BorderWidth: var(--pf-v6-c-log-viewer--m-dark__main--BorderWidth); } -.pf-v6-c-log-viewer.pf-v6-theme-dark .pf-v6-c-log-viewer__main { - --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-t--global--background--color--primary--default); +html:not(.pf-v6-theme-dark) .pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main { + --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-t--global--background--color--inverse--default); --pf-v6-c-log-viewer__main--BorderColor: var(--pf-t--global--border--color--default); - --pf-v6-c-log-viewer__text--Color: var(--pf-t--global--text--color--regular); - --pf-v6-c-log-viewer__index--Color: var(--pf-t--global--text--color--subtle); + --pf-v6-c-log-viewer__text--Color: var(--pf-t--global--text--color--inverse); + --pf-v6-c-log-viewer__index--Color: var(--pf-t--global--text--color--inverse); --pf-v6-c-log-viewer--m-line-numbers__list--before--BackgroundColor: var(--pf-t--global--border--color--default); } .pf-v6-c-log-viewer.pf-m-wrap-text { diff --git a/packages/module/src/LogViewer/css/log-viewer.ts b/packages/module/src/LogViewer/css/log-viewer.ts index 43565ec..ea7cac5 100644 --- a/packages/module/src/LogViewer/css/log-viewer.ts +++ b/packages/module/src/LogViewer/css/log-viewer.ts @@ -11,6 +11,7 @@ export default { "logViewerText": "pf-v6-c-log-viewer__text", "logViewerTimestamp": "pf-v6-c-log-viewer__timestamp", "modifiers": { + "dark": "pf-m-dark", "wrapText": "pf-m-wrap-text", "nowrap": "pf-m-nowrap", "lineNumbers": "pf-m-line-numbers", From 698523d326646408e1b497a29fc474e280505937 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Tue, 3 Dec 2024 12:50:57 -0500 Subject: [PATCH 2/3] fix: Updated CSS. --- packages/module/src/LogViewer/css/log-viewer.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/module/src/LogViewer/css/log-viewer.css b/packages/module/src/LogViewer/css/log-viewer.css index 6563afe..cc32b88 100644 --- a/packages/module/src/LogViewer/css/log-viewer.css +++ b/packages/module/src/LogViewer/css/log-viewer.css @@ -45,19 +45,23 @@ --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--spacer: 0; --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-t--global--spacer--sm); --pf-v6-c-log-viewer--m-dark__main--BorderWidth: 0; + --pf-v6-c-log-viewer--m-dark__main--BackgroundColor: var(--pf-t--global--background--color--inverse--default); + --pf-v6-c-log-viewer--m-dark__text--Color: var(--pf-t--global--text--color--inverse); + --pf-v6-c-log-viewer--m-dark__index--Color: var(--pf-t--global--text--color--inverse); display: flex; flex-direction: column; height: var(--pf-v6-c-log-viewer--Height); max-height: var(--pf-v6-c-log-viewer--MaxHeight); } + .pf-v6-c-log-viewer.pf-m-dark { --pf-v6-c-log-viewer__main--BorderWidth: var(--pf-v6-c-log-viewer--m-dark__main--BorderWidth); } html:not(.pf-v6-theme-dark) .pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main { - --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-t--global--background--color--inverse--default); + --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-v6-c-log-viewer--m-dark__main--BackgroundColor); --pf-v6-c-log-viewer__main--BorderColor: var(--pf-t--global--border--color--default); - --pf-v6-c-log-viewer__text--Color: var(--pf-t--global--text--color--inverse); - --pf-v6-c-log-viewer__index--Color: var(--pf-t--global--text--color--inverse); + --pf-v6-c-log-viewer__text--Color: var(--pf-v6-c-log-viewer--m-dark__text--Color); + --pf-v6-c-log-viewer__index--Color: var( --pf-v6-c-log-viewer--m-dark__index--Color); --pf-v6-c-log-viewer--m-line-numbers__list--before--BackgroundColor: var(--pf-t--global--border--color--default); } .pf-v6-c-log-viewer.pf-m-wrap-text { From 22385dc6d4704de7c4b0b98fa057f3c06daac517 Mon Sep 17 00:00:00 2001 From: Donald Labaj Date: Wed, 4 Dec 2024 15:28:42 -0500 Subject: [PATCH 3/3] fix: Updated with review comments. --- packages/module/src/LogViewer/css/log-viewer.css | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/module/src/LogViewer/css/log-viewer.css b/packages/module/src/LogViewer/css/log-viewer.css index cc32b88..0eeec4a 100644 --- a/packages/module/src/LogViewer/css/log-viewer.css +++ b/packages/module/src/LogViewer/css/log-viewer.css @@ -54,16 +54,13 @@ max-height: var(--pf-v6-c-log-viewer--MaxHeight); } -.pf-v6-c-log-viewer.pf-m-dark { +html:not(.pf-v6-theme-dark) .pf-v6-c-log-viewer.pf-m-dark { --pf-v6-c-log-viewer__main--BorderWidth: var(--pf-v6-c-log-viewer--m-dark__main--BorderWidth); + --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-v6-c-log-viewer--m-dark__main--BackgroundColor); + --pf-v6-c-log-viewer__text--Color: var(--pf-v6-c-log-viewer--m-dark__text--Color); + --pf-v6-c-log-viewer__index--Color: var( --pf-v6-c-log-viewer--m-dark__index--Color); } -html:not(.pf-v6-theme-dark) .pf-v6-c-log-viewer.pf-m-dark .pf-v6-c-log-viewer__main { - --pf-v6-c-log-viewer__main--BackgroundColor: var(--pf-v6-c-log-viewer--m-dark__main--BackgroundColor); - --pf-v6-c-log-viewer__main--BorderColor: var(--pf-t--global--border--color--default); - --pf-v6-c-log-viewer__text--Color: var(--pf-v6-c-log-viewer--m-dark__text--Color); - --pf-v6-c-log-viewer__index--Color: var( --pf-v6-c-log-viewer--m-dark__index--Color); - --pf-v6-c-log-viewer--m-line-numbers__list--before--BackgroundColor: var(--pf-t--global--border--color--default); -} + .pf-v6-c-log-viewer.pf-m-wrap-text { word-break: break-all; }