Switch to a light theme (#917)

stackrox · Jul 21, 2023 · 99b483a · 99b483a
1 parent 01b35d4
commit 99b483a
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 81 deletions.
diff --git a/ui/public/index.html b/ui/public/index.html
@@ -25,7 +25,7 @@
     -->
     <title>StackRox Infra</title>
   </head>
-  <body class="flex font-sans h-full overflow-hidden text-base-600 text-base font-600 theme-dark">
+  <body class="flex font-sans h-full overflow-hidden text-base-600 text-base font-600 theme-light">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root" class="w-full"></div>
     <!--

diff --git a/ui/src/app.tw.css b/ui/src/app.tw.css
@@ -1,5 +1,4 @@
 @import '~@stackrox/tailwind-config/light.theme.css';
-@import '~@stackrox/tailwind-config/dark.theme.css';
 
 @tailwind base;
 @tailwind components;

diff --git a/ui/src/components/forms/NumberFormField.tsx b/ui/src/components/forms/NumberFormField.tsx
@@ -59,11 +59,6 @@ export default function NumberFormField({
         max={max}
         isDisabled={disabled}
         validated={meta.error ? ValidatedOptions.error : ValidatedOptions.default}
-        // Tailwind removal - These classes are to make the form field work with
-        // dark mode and can be removed with pattern fly light mode.
-        className={`bg-base-100 border-2 rounded p-2 my-2 border-base-300 font-600 text-base-600 leading-normal min-h-8 ${
-          disabled ? 'bg-base-200' : 'hover:border-base-400'
-        }`}
       />
     </FormGroup>
   );

diff --git a/ui/src/components/forms/TextFormField.tsx b/ui/src/components/forms/TextFormField.tsx
@@ -62,11 +62,6 @@ export default function TextFormField({
         isDisabled={disabled}
         aria-describedby={`${id}-helper`}
         validated={meta.error ? ValidatedOptions.error : ValidatedOptions.default}
-        // Tailwind removal - These classes are to make the form field work with
-        // dark mode and can be removed with pattern fly light mode.
-        className={`bg-base-100 border-2 rounded p-2 my-2 border-base-300 font-600 text-base-600 leading-normal min-h-8 ${
-          disabled ? 'bg-base-200' : 'hover:border-base-400'
-        }`}
       />
     </FormGroup>
   );

diff --git a/ui/src/containers/App.tsx b/ui/src/containers/App.tsx
@@ -2,7 +2,6 @@ import React, { ReactElement } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 import UserAuthProvider from 'containers/UserAuthProvider';
-import { ThemeProvider } from 'containers/ThemeProvider';
 import AppHeader from 'containers/AppHeader';
 import HomePage from 'containers/HomePage';
 import DownloadsPage from 'containers/DownloadsPage';
@@ -25,14 +24,12 @@ function AppRoutes(): ReactElement {
 export default function App(): ReactElement {
   return (
     <Router>
-      <ThemeProvider>
-        <UserAuthProvider>
-          <div className="flex flex-col h-full bg-base-0">
-            <AppHeader />
-            <AppRoutes />
-          </div>
-        </UserAuthProvider>
-      </ThemeProvider>
+      <UserAuthProvider>
+        <div className="flex flex-col h-full bg-base-0">
+          <AppHeader />
+          <AppRoutes />
+        </div>
+      </UserAuthProvider>
     </Router>
   );
 }
diff --git a/ui/src/containers/ThemeProvider.tsx b/ui/src/containers/ThemeProvider.tsx
diff --git a/ui/src/infra.css b/ui/src/infra.css
@@ -1,10 +1,6 @@
 /* Begin changes required for PF components to work with TW dark mode */
 /* Tailwind removal */
 
-.pf-c-popover__body {
-  color: #292d38 !important;
-}
-
 .pf-c-form__helper-text {
   color: #c9190b !important;
 }
@@ -13,27 +9,6 @@
   color: #c9190b !important;
 }
 
-/* Makes NumberInput OK with Tailwind */
-
-.pf-c-number-input > .pf-c-input-group > .pf-c-button,
-.pf-c-number-input > .pf-c-input-group > .pf-c-form-control {
-  color: #d6dae6 !important;
-}
-
-.pf-c-number-input > .pf-c-input-group > .pf-c-button,
-.pf-c-number-input > .pf-c-input-group > .pf-c-form-control {
-  background-color: #323643 !important;
-  border: 0;
-}
-
-.pf-c-number-input > .pf-c-input-group > .pf-c-button.pf-m-control::after {
-  border-radius: 4px !important;
-}
-
-.pf-c-number-input > .pf-c-input-group > .pf-c-button::after {
-  border-color: #4c4f57;
-}
-
 /* End changes required for PF components to work with TW dark mode */
 
 .pf-c-form__group-label {