style(web): bootstrap 5.3.0 dark mode

release-argus · Feb 18, 2024 · c7d210b · c7d210b
1 parent 28b3986
commit c7d210b
Show file tree

Hide file tree

Showing 25 changed files with 136 additions and 492 deletions.
diff --git a/web/ui/react-app/src/App.tsx b/web/ui/react-app/src/App.tsx
@@ -6,9 +6,7 @@ import {
   Routes,
 } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactElement, useMemo } from "react";
-import { Theme, themeLocalStorageKey } from "theme";
-import { ThemeContext, themeName, themeSetting } from "contexts/theme";
+import { ReactElement } from "react";
 
 import { Container } from "react-bootstrap";
 import Header from "components/header";
@@ -17,8 +15,6 @@ import { NotificationProvider } from "contexts/notification";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { WebSocketProvider } from "contexts/websocket";
 import { getBasename } from "utils";
-import useLocalStorage from "hooks/local-storage";
-import { useMedia } from "hooks/media";
 
 const App = (): ReactElement => {
   // This dynamically/generically determines the pathPrefix by stripping the first known
@@ -35,52 +31,24 @@ const App = (): ReactElement => {
     },
   });
 
-  const [userTheme, setUserTheme] = useLocalStorage<themeSetting>(
-    themeLocalStorageKey,
-    "auto"
-  );
-  const browserHasThemes = useMedia("(prefers-color-scheme)");
-  const browserWantsDarkTheme = useMedia("(prefers-color-scheme: dark)");
-
-  let theme: themeName;
-  if (userTheme !== "auto") theme = userTheme;
-  else
-    theme = browserHasThemes
-      ? browserWantsDarkTheme
-        ? "theme-dark"
-        : "theme-light"
-      : "theme-light";
-
-  const themeContextValue = useMemo(
-    () => ({
-      theme: theme,
-      themePreference: userTheme,
-      setTheme: (t: themeSetting) => setUserTheme(t),
-    }),
-    [theme, userTheme, setUserTheme]
-  );
-
   return (
     <QueryClientProvider client={queryClient}>
       <Router basename={basename}>
-        <ThemeContext.Provider value={themeContextValue}>
-          <Theme />
-          <Header />
-          <WebSocketProvider>
-            <NotificationProvider />
-            <ModalProvider>
-              <Container fluid style={{ padding: "1.25rem" }}>
-                <Routes>
-                  <Route path="/approvals" element={<ApprovalsPage />} />
-                  <Route path="/status" element={<StatusPage />} />
-                  <Route path="/flags" element={<FlagsPage />} />
-                  <Route path="/config" element={<ConfigPage />} />
-                  <Route path="/" element={<Navigate to="/approvals" />} />
-                </Routes>
-              </Container>
-            </ModalProvider>
-          </WebSocketProvider>
-        </ThemeContext.Provider>
+        <Header />
+        <WebSocketProvider>
+          <NotificationProvider />
+          <ModalProvider>
+            <Container fluid style={{ padding: "1.25rem" }}>
+              <Routes>
+                <Route path="/approvals" element={<ApprovalsPage />} />
+                <Route path="/status" element={<StatusPage />} />
+                <Route path="/flags" element={<FlagsPage />} />
+                <Route path="/config" element={<ConfigPage />} />
+                <Route path="/" element={<Navigate to="/approvals" />} />
+              </Routes>
+            </Container>
+          </ModalProvider>
+        </WebSocketProvider>
       </Router>
       <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>

diff --git a/web/ui/react-app/src/components/approvals/service-info.tsx b/web/ui/react-app/src/components/approvals/service-info.tsx
@@ -130,14 +130,14 @@ export const ServiceInfo: FC<Props> = ({
       style={{
         padding: "0px",
       }}
-      className={serviceWarning ? "alert-warning rounded-bottom" : "default"}
+      className={serviceWarning ? "service-warning rounded-bottom" : "default"}
     >
       <ListGroup className="list-group-flush">
         {updateAvailable && !updateSkipped ? (
           <>
             <ListGroup.Item
               key="update-available"
-              className={"service-item update-options alert-warning"}
+              className={"service-item update-options service-warning"}
               variant="secondary"
             >
               {updateApproved && (service.webhook || service.command)
@@ -146,7 +146,7 @@ export const ServiceInfo: FC<Props> = ({
             </ListGroup.Item>
             <ListGroup.Item
               key="update-buttons"
-              className={"service-item update-options alert-warning"}
+              className={"service-item update-options service-warning"}
               variant="secondary"
               style={{ paddingTop: "0.25rem" }}
             >
@@ -237,14 +237,14 @@ export const ServiceInfo: FC<Props> = ({
       <Card.Footer
         className={
           serviceWarning || !service?.status?.last_queried
-            ? "alert-warning rounded-bottom"
+            ? "service-warning rounded-bottom"
             : ""
         }
       >
         <small
           className={
             "text-muted same-color" +
-            (serviceWarning ? " alert-warning rounded-bottom" : "")
+            (serviceWarning ? " service-warning rounded-bottom" : "")
           }
         >
           {service?.status?.last_queried ? (

diff --git a/web/ui/react-app/src/components/generic/boolean-with-default.tsx b/web/ui/react-app/src/components/generic/boolean-with-default.tsx
@@ -108,7 +108,7 @@ const BooleanWithDefault: FC<Props> = ({
                       style={{
                         height: "1rem",
                       }}
-                      className={`icon-${option.class}`}
+                      className={`text-${option.class}`}
                     />
                   </Button>
                 ))}
@@ -129,7 +129,7 @@ const BooleanWithDefault: FC<Props> = ({
                   style={{
                     height: "1rem",
                   }}
-                  className={`icon-${optionsDefault.class}`}
+                  className={`text-${optionsDefault.class}`}
                 />
               </Button>
             </>

diff --git a/web/ui/react-app/src/components/generic/form-label.tsx b/web/ui/react-app/src/components/generic/form-label.tsx
@@ -32,7 +32,7 @@ const FormLabel: FC<FormLabelProps> = ({
     }
   >
     {text}
-    {required && <span className="icon-danger">*</span>}
+    {required && <span className="text-danger">*</span>}
     {tooltip && <HelpTooltip text={tooltip} />}
   </Form.Label>
 );

diff --git a/web/ui/react-app/src/components/modals/action-release/command.tsx b/web/ui/react-app/src/components/modals/action-release/command.tsx
@@ -64,7 +64,7 @@ export const Command: FC<Props> = ({
                   height: "2rem",
                 }}
                 className={
-                  command.failed === true ? "icon-danger" : "icon-success"
+                  command.failed === true ? "text-danger" : "text-success"
                 }
               />
             </Container>

diff --git a/web/ui/react-app/src/components/modals/action-release/item.tsx b/web/ui/react-app/src/components/modals/action-release/item.tsx
@@ -138,7 +138,7 @@ export const Item: FC<Props> = ({
                 style={{
                   height: "2rem",
                 }}
-                className={failed === true ? "icon-danger" : "icon-success"}
+                className={failed === true ? "text-danger" : "text-success"}
               />
             </Container>
           </OverlayTrigger>

diff --git a/web/ui/react-app/src/components/modals/action-release/webhook.tsx b/web/ui/react-app/src/components/modals/action-release/webhook.tsx
@@ -64,7 +64,7 @@ export const WebHook: FC<Props> = ({
                   height: "2rem",
                 }}
                 className={
-                  webhook.failed === true ? "icon-danger" : "icon-success"
+                  webhook.failed === true ? "text-danger" : "text-success"
                 }
               />
             </Container>

diff --git a/web/ui/react-app/src/components/notification/index.tsx b/web/ui/react-app/src/components/notification/index.tsx
@@ -42,15 +42,14 @@ const Notification: FC<NotificationType> = ({
   return (
     <Toast
       id={`${id}`}
-      className={`m-1 text-white alert-${type} `}
+      className={`m-1 alert-${type}`}
       bg={type}
       key={`notification-${id}`}
       onClose={() => removeNotification(id)}
     >
       <Toast.Header
-        className={`alert-${type} text-white`}
+        className={`alert-${type}`}
         style={{ padding: "0.5em" }}
-        closeVariant="white"
         closeButton={false}
       >
         <FontAwesomeIcon

diff --git a/web/ui/react-app/src/contexts/theme.tsx b/web/ui/react-app/src/contexts/theme.tsx