chore: adjust dark theme css

cryostatio · Aug 22, 2024 · 9a82b36 · 9a82b36
1 parent 7671e1d
commit 9a82b36
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 35 deletions.
diff --git a/src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx b/src/app/Dashboard/AutomatedAnalysis/ClickableAutomatedAnalysisLabel.tsx
@@ -102,6 +102,7 @@ export const ClickableAutomatedAnalysisLabel: React.FC<ClickableAutomatedAnalysi
         </div>
       }
       appendTo={portalRoot}
+      className={`${clickableAutomatedAnalysisKey}-popover`}
     >
       <Label
         aria-label={result.name}

diff --git a/src/app/DateTimePicker/TimePicker.tsx b/src/app/DateTimePicker/TimePicker.tsx
@@ -74,7 +74,7 @@ export const TimePicker: React.FC<TimePickerProps> = ({
 
   return (
     <>
-      <Panel>
+      <Panel className="datetime-picker">
         <PanelMain>
           <PanelMainBody>
             <Level hasGutter>

diff --git a/src/app/TargetView/TargetContextSelector.tsx b/src/app/TargetView/TargetContextSelector.tsx
@@ -119,22 +119,20 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
     return () => window.clearInterval(id);
   }, [context.settings, refreshTargetList]);
 
-  const noOptions = React.useMemo(() => targets.length === 0, [targets]);
-
   const selectOptions = React.useMemo(() => {
-    if (noOptions) {
+    const matchExp = new RegExp(_.escapeRegExp(searchTerm), 'i');
+    const filteredTargets = targets.filter((t) =>
+      [t.alias, t.connectUrl, getAnnotation(t.annotations.cryostat, 'REALM') ?? ''].some((v) => matchExp.test(v)),
+    );
+
+    if (filteredTargets.length === 0) {
       return [
         <DropdownItem itemId={undefined} key={'no-target-found'} isDisabled>
           No target found
         </DropdownItem>,
       ];
     }
 
-    const matchExp = new RegExp(_.escapeRegExp(searchTerm), 'i');
-    const filteredTargets = targets.filter((t) =>
-      [t.alias, t.connectUrl, getAnnotation(t.annotations.cryostat, 'REALM') ?? ''].some((v) => matchExp.test(v)),
-    );
-
     const groupNames = new Set<string>();
     filteredTargets.forEach((t) => groupNames.add(getAnnotation(t.annotations.cryostat, 'REALM') || 'Others'));
 
@@ -175,7 +173,7 @@ export const TargetContextSelector: React.FC<TargetContextSelectorProps> = ({ cl
         : [];
 
     return favGroup.concat(options);
-  }, [targets, noOptions, favorites, searchTerm]);
+  }, [targets, favorites, searchTerm]);
 
   const onFavoriteClick = React.useCallback(
     (_, item: Target, actionId: string) => {

diff --git a/src/app/app.css b/src/app/app.css
@@ -39,7 +39,7 @@ body,
   color: var(--cryostat-white);
 }
 
-.pf-v5-c-page__sidebar.pf-v5-m-collapsed {
+.pf-v5-c-page__sidebar.pf-m-collapsed {
   overflow: hidden !important;
 }
 
@@ -132,19 +132,19 @@ body,
   max-height: 26.75rem;
 }
 
-.automated-analysis-datalist-innerscroll .pf-v5-m-grey {
+.automated-analysis-datalist-innerscroll .pf-m-grey {
   color: var(--pf-v5-global--Color--100);
 }
 
-.automated-analysis-datalist-innerscroll .pf-v5-m-green {
+.automated-analysis-datalist-innerscroll .pf-m-green {
   color: var(--pf-v5-global--success-color--100);
 }
 
-.automated-analysis-datalist-innerscroll .pf-v5-m-orange {
+.automated-analysis-datalist-innerscroll .pf-m-orange {
   color: var(--pf-v5-global--warning-color--100);
 }
 
-.automated-analysis-datalist-innerscroll .pf-v5-m-red {
+.automated-analysis-datalist-innerscroll .pf-m-red {
   color: var(--pf-v5-global--danger-color--100);
 }
 
@@ -178,9 +178,16 @@ body,
   width: 4.5em;
 }
 
+.clickable-automated-analysis-label-popover .pf-v5-c-popover__title {
+  justify-content: center;
+}
+
+.clickable-automated-analysis-label-popover .pf-v5-c-popover__title-text {
+  margin-left: 48px; /* Close button size */
+}
+
 .clickable-automated-analysis-label-popover-header {
   text-align: center;
-  margin-left: 16.6%;
 }
 
 .clickable-automated-analysis-label-popover-body {
@@ -192,23 +199,23 @@ body,
   margin-bottom: 0.5rem;
 }
 
-.clickable-automated-analysis-label-popover-body-score.pf-v5-m-danger {
+.clickable-automated-analysis-label-popover-body-score.pf-m-danger {
   color: var(--pf-v5-c-popover--m-danger__title-text--Color);
 }
 
-.clickable-automated-analysis-label-popover-body-score.pf-v5-m-warning {
+.clickable-automated-analysis-label-popover-body-score.pf-m-warning {
   color: var(--pf-v5-c-popover--m-warning__title-text--Color);
 }
 
-.clickable-automated-analysis-label-popover-body-score.pf-v5-m-success {
+.clickable-automated-analysis-label-popover-body-score.pf-m-success {
   color: var(--pf-v5-c-popover--m-success__title-text--Color);
 }
 
-.clickable-automated-analysis-label-popover-body-score.pf-v5-m-default {
+.clickable-automated-analysis-label-popover-body-score.pf-m-default {
   color: var(--pf-v5-global--Color--100);
 }
 
-.clickable-automated-analysis-label-popover-body-score.pf-v5-m-info {
+.clickable-automated-analysis-label-popover-body-score.pf-m-info {
   color: var(--pf-v5-c-popover--m-info__title-text--Color);
 }
 
@@ -224,10 +231,6 @@ body,
   --pf-v5-c-label__content--before--BorderWidth: 2.5px;
 }
 
-:where(.pf-v5-theme-dark) .recording-filter__toolbar-filter .pf-v5-c-label {
-  --pf-v5-c-label--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-}
-
 .automated-analysis-score-filter-slider .pf-v5-c-slider__step-label {
   font-size: 0.85em;
 }
@@ -282,14 +285,8 @@ body,
   border-radius: 0.5em;
 }
 
-.automated-analysis-grid-item .automated-analysis-topic-label-groups.pf-v5-c-label-group {
-  width: 100%;
-  height: 100%;
-  background-color: var(--pf-v5-global--BackgroundColor--light-300);
-}
-
-:is(.pf-v5-theme-dark) .automated-analysis-grid-item .automated-analysis-topic-label-groups.pf-v5-c-label-group {
-  background-color: var(--pf-v5-global--BackgroundColor--light-300);
+:where(.pf-v5-theme-dark) .automated-analysis-grid-item .pf-v5-c-label-group.pf-m-vertical.pf-v5-c-label-group {
+  background-color: var(--pf-v5-global--palette--black-600);
 }
 
 .automated-analysis-grid-item .pf-v5-c-label-group__main {
@@ -372,7 +369,7 @@ body,
   overflow: auto;
 }
 
-.pf-v5-c-card.pf-v5-m-rounded.dashboard-card {
+.pf-v5-c-card.pf-m-rounded.dashboard-card {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
@@ -403,6 +400,10 @@ body,
   width: 0.8em;
 }
 
+:where(.pf-v5-theme-dark) .datetime-picker .pf-v5-c-panel__main {
+  background-color: var(--pf-v5-global--palette--black-700);
+}
+
 .datetime-picker__meridiem-tile {
   font-size: 1.5em;
   font-weight: 600;
@@ -614,7 +615,7 @@ svg.topology__node-decorator-icon.progress {
   height: 100%
 }
 
-.pf-v5-c-drawer__panel.pf-v5-m-resizable.layout-template-picker-drawer__panel {
+.pf-v5-c-drawer__panel.pf-m-resizable.layout-template-picker-drawer__panel {
   transition-duration: 0s;
   transition-property: none;
 }