stackrox · pedrottimark · Dec 4, 2024 · Nov 26, 2024 · Nov 26, 2024 · Nov 26, 2024
@@ -17,7 +17,7 @@
     <title></title>
 </head>
 
-<body>
+<body class="theme-light">
     <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
     <!--

@@ -3,8 +3,6 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import upperFirst from 'lodash/upperFirst';
 
-import { useTheme } from 'Containers/ThemeProvider';
-
 const GroupedTab = ({ text, index, active, to }) => (
     <li
         className={`flex flex-grow items-center border-t border-base-400 ${
@@ -27,7 +25,6 @@ GroupedTab.propTypes = {
 };
 
 const GroupedTabs = ({ groups, tabs, activeTab }) => {
-    const { isDarkMode } = useTheme();
     const groupMapping = tabs.reduce((acc, curr) => {
         acc[curr.group] = [...(acc[curr.group] || []), curr];
         return acc;
@@ -41,10 +38,7 @@ const GroupedTabs = ({ groups, tabs, activeTab }) => {
             return (
                 <li
                     data-testid="grouped-tab"
-                    className={`
-                        ${!isDarkMode ? 'bg-primary-100' : 'bg-base-0'} ${
-                            idx !== 0 ? 'ml-4' : ''
-                        } flex flex-col relative justify-end`}
+                    className={`${idx !== 0 ? 'ml-4' : ''} flex flex-col relative justify-end`}
                     key={group}
                 >
                     {showGroupTab && (
@@ -74,9 +68,7 @@ const GroupedTabs = ({ groups, tabs, activeTab }) => {
         <div className="relative">
             <ul
                 data-testid="grouped-tabs"
-                className={` flex border-b border-base-400 px-4 text-sm ignore-react-onclickoutside ${
-                    !isDarkMode ? 'bg-primary-100' : 'bg-base-0'
-                }`}
+                className="flex border-b border-base-400 px-4 text-sm ignore-react-onclickoutside"
             >
                 {result}
             </ul>

@@ -1,17 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useTheme } from 'Containers/ThemeProvider';
 import SubHeader from 'Components/SubHeader';
 
 const PageHeader = ({ header, subHeader, classes, bgStyle, children }) => {
-    const { isDarkMode } = useTheme();
-
     return (
         <div
-            className={`flex h-18 px-4 w-full flex-shrink-0 z-10 border-b border-base-400 ${classes} ${
-                !isDarkMode ? 'bg-base-100' : 'bg-base-0'
-            }`}
+            className={`flex h-18 px-4 w-full flex-shrink-0 z-10 border-b border-base-400 ${classes} bg-base-100`}
             style={bgStyle}
             data-testid="page-header"
         >

@@ -13,7 +13,6 @@ const transition = {
 
 export type SidePanelAnimatedAreaProps = {
     children: ReactNode;
-    isDarkMode: boolean;
     isOpen: boolean;
 };
 
@@ -28,13 +27,7 @@ export type SidePanelAnimatedAreaProps = {
  * A semi-transparent gray background color covers the main panel (underlay style).
  * The side panel opens from right to left.
  */
-function SidePanelAnimatedArea({
-    children,
-    isDarkMode,
-    isOpen,
-}: SidePanelAnimatedAreaProps): ReactElement {
-    const bgClassName = isDarkMode ? 'bg-base-0' : 'bg-base-100';
-
+function SidePanelAnimatedArea({ children, isOpen }: SidePanelAnimatedAreaProps): ReactElement {
     return (
         <AnimatePresence initial={false}>
             {isOpen && (
@@ -43,7 +36,7 @@ function SidePanelAnimatedArea({
                     style={{ backgroundColor: 'rgba(3, 3, 3, 0.62)' }}
                 >
                     <motion.div
-                        className={`${bgClassName} border-base-400 border-l h-full rounded-tl-lg shadow-sidepanel w-full lg:w-9/10`}
+                        className="bg-base-100 border-base-400 border-l h-full rounded-tl-lg shadow-sidepanel w-full lg:w-9/10"
                         initial="closed"
                         animate="open"
                         exit="closed"

@@ -1,16 +1,12 @@
 import React, { ReactElement } from 'react';
 import { Tooltip } from '@patternfly/react-core';
 
-import { useTheme } from 'Containers/ThemeProvider';
 import helm from 'images/helm.svg';
 
 function HelmIndicator(): ReactElement {
-    const { isDarkMode } = useTheme();
-    const darkModeStyle = isDarkMode ? 'bg-base-800 rounded-full' : '';
-
     return (
         <Tooltip content="This cluster is managed by Helm.">
-            <span className={`w-5 h-5 inline-block ${darkModeStyle}`}>
+            <span className="w-5 h-5 inline-block">
                 <img className="w-5 h-5" src={helm} alt="Managed by Helm" />
             </span>
         </Tooltip>

@@ -1,16 +1,12 @@
 import React, { ReactElement } from 'react';
 import { Tooltip } from '@patternfly/react-core';
 
-import { useTheme } from 'Containers/ThemeProvider';
 import operatorLogo from 'images/operator-logo.png';
 
 function OperatorIndicator(): ReactElement {
-    const { isDarkMode } = useTheme();
-    const darkModeStyle = isDarkMode ? 'bg-base-800 rounded-full' : '';
-
     return (
         <Tooltip content="This cluster is managed by a Kubernetes Operator.">
-            <span className={`w-5 h-5 inline-block ${darkModeStyle}`}>
+            <span className="w-5 h-5 inline-block">
                 <img
                     className="w-5 h-5"
                     src={operatorLogo}

@@ -11,7 +11,6 @@ import PageHeader from 'Components/PageHeader';
 import BackdropExporting from 'Components/PatternFly/BackdropExporting';
 import { resourceTypes } from 'constants/entityTypes';
 import useCaseTypes from 'constants/useCaseTypes';
-import { useTheme } from 'Containers/ThemeProvider';
 import { useBooleanLocalStorage } from 'hooks/useLocalStorage';
 import usePermissions from 'hooks/usePermissions';
 import {
@@ -67,11 +66,6 @@ function ComplianceDashboardPage(): ReactElement {
 
     const [isExporting, setIsExporting] = useState(false);
 
-    const { isDarkMode } = useTheme();
-    const darkModeClasses = `${
-        isDarkMode ? 'text-base-600 hover:bg-primary-200' : 'text-base-100 hover:bg-primary-800'
-    }`;
-
     const { runs, error, restartPolling, inProgressScanDetected, isCurrentScanIncomplete } =
         useComplianceRunStatuses(queriesToRefetchOnPollingComplete);
 
@@ -123,7 +117,7 @@ function ComplianceDashboardPage(): ReactElement {
                         <ComplianceDashboardTile entityType="DEPLOYMENT" />
                         {hasWriteAccessForCompliance && (
                             <ScanButton
-                                className={`flex items-center justify-center border-2 btn btn-base h-10 lg:min-w-32 xl:min-w-43 ${darkModeClasses}`}
+                                className={`flex items-center justify-center border-2 btn btn-base h-10 lg:min-w-32 xl:min-w-43`}
                                 text="Scan environment"
                                 textClass="hidden lg:block"
                                 textCondensed="Scan all"

@@ -9,7 +9,6 @@ import configMgmtPaginationContext, {
     SIDEPANEL_PAGINATION_PARAMS,
 } from 'Containers/configMgmtPaginationContext';
 import searchContext from 'Containers/searchContext';
-import { useTheme } from 'Containers/ThemeProvider';
 import workflowStateContext from 'Containers/workflowStateContext';
 import useClickOutside from 'hooks/useClickOutside';
 import parseURL from 'utils/URLParser';
@@ -23,7 +22,6 @@ import Entity from '../Entity';
 const EntityPage = () => {
     const sidePanelRef = useRef(null);
     const [isExporting, setIsExporting] = useState(false);
-    const { isDarkMode } = useTheme();
     const location = useLocation();
     const history = useHistory();
     const match = useRouteMatch();
@@ -104,7 +102,7 @@ const EntityPage = () => {
                     </configMgmtPaginationContext.Provider>
                     <searchContext.Provider value={searchParams.sidePanel}>
                         <configMgmtPaginationContext.Provider value={SIDEPANEL_PAGINATION_PARAMS}>
-                            <SidePanelAnimatedArea isDarkMode={isDarkMode} isOpen={!!entityId1}>
+                            <SidePanelAnimatedArea isOpen={!!entityId1}>
                                 <div ref={sidePanelRef}>
                                     <SidePanel
                                         contextEntityId={pageEntityId}

@@ -16,7 +16,6 @@ import configMgmtPaginationContext, {
 } from 'Containers/configMgmtPaginationContext';
 import searchContext from 'Containers/searchContext';
 import { searchParams } from 'constants/searchParams';
-import { useTheme } from 'Containers/ThemeProvider';
 import workflowStateContext from 'Containers/workflowStateContext';
 import useClickOutside from 'hooks/useClickOutside';
 import entityLabels from 'messages/entity';
@@ -33,7 +32,6 @@ const ListPage = () => {
     const history = useHistory();
     const match = useRouteMatch();
     const [isExporting, setIsExporting] = useState(false);
-    const { isDarkMode } = useTheme();
 
     const workflowState = parseURL(location);
     const { useCase, search, sort, paging } = workflowState;
@@ -100,7 +98,7 @@ const ListPage = () => {
                 </configMgmtPaginationContext.Provider>
                 <searchContext.Provider value={searchParams.sidePanel}>
                     <configMgmtPaginationContext.Provider value={SIDEPANEL_PAGINATION_PARAMS}>
-                        <SidePanelAnimatedArea isDarkMode={isDarkMode} isOpen={!!entityId1}>
+                        <SidePanelAnimatedArea isOpen={!!entityId1}>
                             <div ref={sidePanelRef}>
                                 <SidePanel
                                     entityType1={pageEntityListType}

@@ -44,7 +44,6 @@ import {
     deprecatedPoliciesBasePath,
     policiesBasePath,
 } from 'routePaths';
-import { useTheme } from 'Containers/ThemeProvider';
 
 import PageNotFound from 'Components/PageNotFound';
 import PageTitle from 'Components/PageTitle';
@@ -242,16 +241,10 @@ function Body({ hasReadAccess, isFeatureFlagEnabled }: BodyProps): ReactElement
     const hasWriteAccessForInviting = hasReadWriteAccess('Access');
     const showInviteModal = useSelector(selectors.inviteSelector);
 
-    const { isDarkMode } = useTheme();
-
     const routePredicates = { hasReadAccess, isFeatureFlagEnabled };
 
     return (
-        <div
-            className={`flex flex-col h-full w-full relative overflow-auto ${
-                isDarkMode ? 'bg-base-0' : 'bg-base-100'
-            }`}
-        >
+        <div className="flex flex-col h-full w-full relative overflow-auto bg-base-100">
             <ErrorBoundary>
                 <Switch>
                     <Route path="/" exact render={() => <Redirect to={dashboardPath} />} />

@@ -1,3 +1,4 @@
+/*
 import React, { CSSProperties, ReactElement } from 'react';
 import { Moon, Sun } from 'react-feather';
 import { Button, Tooltip } from '@patternfly/react-core';
@@ -24,3 +25,4 @@ const ThemeToggleButton = (): ReactElement => {
 };
 
 export default ThemeToggleButton;
+*/
@@ -16,7 +16,6 @@ import { CodeEditor, Language } from '@patternfly/react-code-editor';
 
 import download from 'utils/download';
 import SelectSingle from 'Components/SelectSingle';
-import { useTheme } from 'Containers/ThemeProvider';
 import useFetchNetworkPolicies from 'hooks/useFetchNetworkPolicies';
 import { getAxiosErrorMessage } from 'utils/responseErrorUtils';
 import CodeEditorDarkModeControl from 'Components/PatternFly/CodeEditorDarkModeControl';
@@ -36,8 +35,7 @@ const allNetworkPoliciesId = 'All network policies';
 function NetworkPolicies({ entityName, policyIds }: NetworkPoliciesProps): React.ReactElement {
     const { networkPolicies, networkPolicyErrors, isLoading, error } =
         useFetchNetworkPolicies(policyIds);
-    const { isDarkMode } = useTheme();
-    const [customDarkMode, setCustomDarkMode] = React.useState(isDarkMode);
+    const [customDarkMode, setCustomDarkMode] = React.useState(false);
 
     const allNetworkPoliciesYAML = useMemo(
         () => ({

@@ -2,7 +2,6 @@ import React from 'react';
 import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor';
 import { DownloadIcon } from '@patternfly/react-icons';
 
-import { useTheme } from 'Containers/ThemeProvider';
 import useAnalytics, { DOWNLOAD_NETWORK_POLICIES } from 'hooks/useAnalytics';
 import useURLSearch from 'hooks/useURLSearch';
 import download from 'utils/download';
@@ -29,8 +28,7 @@ function NetworkPoliciesYAML({
     const { analyticsTrack } = useAnalytics();
     const { searchFilter } = useURLSearch();
 
-    const { isDarkMode } = useTheme();
-    const [customDarkMode, setCustomDarkMode] = React.useState(isDarkMode);
+    const [customDarkMode, setCustomDarkMode] = React.useState(false);
 
     function onToggleDarkMode() {
         setCustomDarkMode((prevValue) => !prevValue);

@@ -1,3 +1,4 @@
+/*
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useMediaQuery } from 'react-responsive';
@@ -85,3 +86,4 @@ ThemeProvider.propTypes = {
 };
 
 export { ThemeProvider, useTheme };
+*/
@@ -1,7 +1,6 @@
 import React, { ReactNode, useContext } from 'react';
 
 import { defaultCountKeyMap as countKeyMap } from 'constants/workflowPages.constants';
-import { useTheme } from 'Containers/ThemeProvider';
 import workflowStateContext from 'Containers/workflowStateContext';
 import {
     VulnerabilityManagementEntityType,
@@ -21,7 +20,6 @@ function RelatedEntitiesSideList({
     data,
     entityContext,
 }: RelatedEntitiesSideListProps): ReactNode {
-    const { isDarkMode } = useTheme();
     const workflowState = useContext(workflowStateContext);
     const { useCase } = workflowState;
     if (!useCase) {
@@ -61,11 +59,7 @@ function RelatedEntitiesSideList({
         return null;
     }
     return (
-        <div
-            className={`h-full relative border-base-100 border-l max-w-43 ${
-                !isDarkMode ? 'bg-primary-300' : 'bg-base-100'
-            }`}
-        >
+        <div className="h-full relative border-base-300 border-l max-w-43 bg-base-200">
             <div className="sticky top-0 py-4">
                 <h2 className="mb-3 p-2 rounded-l text-lg text-base-600 text-center font-700">
                     Related entities

@@ -1,6 +1,5 @@
 import React, { ReactElement } from 'react';
 
-import { useTheme } from 'Containers/ThemeProvider';
 import TileLink from 'Components/TileLink';
 import { VulnerabilityManagementEntityType } from 'utils/entityRelationships';
 
@@ -23,31 +22,16 @@ export type TileListProps = {
 };
 
 function TileList({ items, title }: TileListProps): ReactElement {
-    const { isDarkMode } = useTheme();
     return (
-        <div
-            className={`text-base-600 rounded border mx-2 my-3 ${
-                !isDarkMode
-                    ? 'bg-primary-200 border-primary-400'
-                    : 'bg-tertiary-200 border-tertiary-300'
-            }`}
-        >
-            <h3
-                className={`border-b text-base-600 text-center p-1 leading-normal font-700 ${
-                    !isDarkMode ? 'border-base-400' : 'border-tertiary-400'
-                }`}
-            >
+        <div className="text-base-600 rounded border mx-2 my-3 bg-primary-200 border-primary-400">
+            <h3 className="border-b text-base-600 text-center p-1 leading-normal font-700 border-base-400">
                 {title}
             </h3>
             <ul className="pb-2">
                 {items.map(({ count, entityType, url }) => (
                     <li className="p-2 pb-0" key={entityType}>
                         <TileLink
-                            colorClasses={` ${
-                                !isDarkMode
-                                    ? 'border-primary-400 hover:bg-primary-200 rounded'
-                                    : 'rounded bg-tertiary-200 border-tertiary-300 hover:bg-tertiary-100 hover:border-tertiary-400'
-                            }  `}
+                            colorClasses="border-primary-400 hover:bg-primary-200 rounded"
                             superText={count}
                             text={entityNounOrdinaryCase(count, entityType)}
                             url={url}

@@ -8,7 +8,6 @@ import { ExclamationTriangleIcon } from '@patternfly/react-icons';
 import Loader from 'Components/Loader';
 import PageNotFound from 'Components/PageNotFound';
 import EmptyStateTemplate from 'Components/EmptyStateTemplate/EmptyStateTemplate';
-import { useTheme } from 'Containers/ThemeProvider';
 import queryService from 'utils/queryService';
 
 import { LIST_PAGE_SIZE, defaultCountKeyMap } from 'constants/workflowPages.constants';
@@ -47,8 +46,6 @@ const WorkflowEntityPage = ({
     page,
     setRefreshTrigger,
 }) => {
-    const { isDarkMode } = useTheme();
-
     const enhancedQueryOptions =
         queryOptions && queryOptions.variables ? queryOptions : { variables: {} };
     let query = overviewQuery;
@@ -121,7 +118,7 @@ const WorkflowEntityPage = ({
             setRefreshTrigger={setRefreshTrigger}
         />
     ) : (
-        <div className={`flex w-full min-h-full ${isDarkMode ? 'bg-base-0' : 'bg-base-200'}`}>
+        <div className="flex w-full min-h-full bg-base-200">
             <div className="w-full min-h-full" id="capture-widgets">
                 <OverviewComponent
                     data={result}