🌙 add dark theme toggle and context provider (#748)

add dark theme toggle and context provider
cyclops-ui · Feb 25, 2025 · 82fa566 · 82fa566
2 parents 96452dd + 545b593
commit 82fa566
Show file tree

Hide file tree

Showing 40 changed files with 544 additions and 310 deletions.
diff --git a/cyclops-ui/src/App.tsx b/cyclops-ui/src/App.tsx
@@ -2,11 +2,16 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import routes from "./routes";
 import Page404 from "./components/pages/Page404";
 import AppLayout from "./components/layouts/AppLayout";
+import { ThemeProvider } from "./components/theme/ThemeContext";
 
 export default function App() {
   const router = createBrowserRouter([
     {
-      element: <AppLayout />,
+      element: (
+        <ThemeProvider>
+          <AppLayout />
+        </ThemeProvider>
+      ),
       errorElement: <Page404 />,
       children: routes,
     },

diff --git a/cyclops-ui/src/components/form/TemplateFormFields.tsx b/cyclops-ui/src/components/form/TemplateFormFields.tsx
@@ -11,11 +11,11 @@ import {
   getValueFromNestedObject,
 } from "./fields/boolean/Boolean";
 import { Alert, Row } from "antd";
-import { WarningTwoTone } from "@ant-design/icons";
 import Link from "antd/lib/typography/Link";
 import { SuggestionInputField } from "./fields/string/SuggestionInput";
 import "./custom.css";
 import { TemplateFormFieldsContextProvider } from "./TemplateFormFieldsContext";
+import { WarningIcon } from "../status/icons";
 
 interface Props {
   themePalette?: "dark" | "light";
@@ -235,8 +235,7 @@ const NoFieldsAlert = () => {
     <Alert
       message={
         <div>
-          <WarningTwoTone
-            twoToneColor="#f3801a"
+          <WarningIcon
             style={{
               paddingRight: "5px",
               fontSize: "24px",

diff --git a/cyclops-ui/src/components/form/fields/array/ArrayField.tsx b/cyclops-ui/src/components/form/fields/array/ArrayField.tsx
@@ -92,11 +92,12 @@ export const ArrayField = ({
             {(arrFields, { add, remove }) => (
               <div
                 style={{
-                  border: "solid 1px #d3d3d3",
+                  border: "solid 1px",
+                  borderColor: themePalette === "dark" ? "#444" : "#d3d3d3",
                   borderRadius: "7px",
                   padding: "12px",
                   width: "100%",
-                  backgroundColor: themePalette === "dark" ? "#444" : "#fafafa",
+                  backgroundColor: themePalette === "dark" ? "#333" : "#fafafa",
                 }}
               >
                 {arrFields.map((arrField, index) => (

diff --git a/cyclops-ui/src/components/form/fields/array/custom.css b/cyclops-ui/src/components/form/fields/array/custom.css
diff --git a/cyclops-ui/src/components/form/fields/map/MapField.tsx b/cyclops-ui/src/components/form/fields/map/MapField.tsx
@@ -43,11 +43,12 @@ export const MapField = ({
         {(fields, { add, remove }) => (
           <div
             style={{
-              border: "solid 1px #d3d3d3",
+              border: "solid 1px",
+              borderColor: themePalette === "dark" ? "#444" : "#d3d3d3",
               borderRadius: "7px",
               padding: "12px",
               width: "100%",
-              backgroundColor: themePalette === "dark" ? "#444" : "#fafafa",
+              backgroundColor: themePalette === "dark" ? "#333" : "#fafafa",
             }}
           >
             {fields.map((arrField, index) => (

diff --git a/cyclops-ui/src/components/form/fields/object/custom.css b/cyclops-ui/src/components/form/fields/object/custom.css
@@ -1,3 +1,5 @@
 .nested-fields.dark .ant-collapse-content-box {
-  background-color: #404040;
+  background-color: #222;
+  border-color: #333;
+  border-left-color: #a35702;
 }
diff --git a/cyclops-ui/src/components/k8s-resources/ConfigMap.tsx b/cyclops-ui/src/components/k8s-resources/ConfigMap.tsx
@@ -3,13 +3,16 @@ import React, { useCallback, useEffect, useState } from "react";
 import ReactAce from "react-ace";
 import { mapResponseError } from "../../utils/api/errors";
 import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
+import { useTheme } from "../theme/ThemeContext";
 
 interface Props {
   name: string;
   namespace: string;
 }
 
 const ConfigMap = ({ name, namespace }: Props) => {
+  const { mode } = useTheme();
+
   const { fetchResource } = useResourceListActions();
 
   const [loading, setLoading] = useState(true);
@@ -75,6 +78,7 @@ const ConfigMap = ({ name, namespace }: Props) => {
           width="100%"
           mode={configMapDataExtension(key)}
           height={calculateEditorHeight(lines)}
+          theme={mode === "light" ? "github" : "twilight"}
         />
       );
     } else {

diff --git a/cyclops-ui/src/components/k8s-resources/NetworkPolicy.tsx b/cyclops-ui/src/components/k8s-resources/NetworkPolicy.tsx
@@ -4,6 +4,7 @@ import { mapResponseError } from "../../utils/api/errors";
 import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
 import ReactAce from "react-ace";
 import YAML from "yaml";
+import { useTheme } from "../theme/ThemeContext";
 
 interface Props {
   namespace: string;
@@ -17,6 +18,8 @@ interface NetworkPolicyData {
 }
 
 const NetworkPolicy = ({ namespace, name }: Props) => {
+  const { mode } = useTheme();
+
   const [loading, setLoading] = useState(true);
   const { fetchResource } = useResourceListActions();
 
@@ -103,6 +106,7 @@ const NetworkPolicy = ({ namespace, name }: Props) => {
           ),
         }}
         mode={"sass"}
+        theme={mode === "light" ? "github" : "twilight"}
         value={stringifyRulesToYaml(networkPolicy.ingress)}
         readOnly={true}
       />
@@ -121,6 +125,7 @@ const NetworkPolicy = ({ namespace, name }: Props) => {
           ),
         }}
         mode={"sass"}
+        theme={mode === "light" ? "github" : "twilight"}
         value={stringifyRulesToYaml(networkPolicy.egress)}
         readOnly={true}
       />

diff --git a/cyclops-ui/src/components/k8s-resources/ResourceList/ResourceList.tsx b/cyclops-ui/src/components/k8s-resources/ResourceList/ResourceList.tsx
@@ -30,15 +30,13 @@ import ClusterRole from "../ClusterRole";
 import ConfigMap from "../ConfigMap";
 import PersistentVolumeClaim from "../PersistentVolumeClaim";
 import Secret from "../Secret";
+import NetworkPolicy from "../NetworkPolicy";
+
 import {
   CaretRightOutlined,
-  CheckCircleTwoTone,
-  ClockCircleTwoTone,
-  CloseSquareTwoTone,
   CopyOutlined,
   FileTextOutlined,
   FilterOutlined,
-  WarningTwoTone,
 } from "@ant-design/icons";
 import { canRestart, RestartButton } from "../common/RestartButton";
 import { gvkString } from "../../../utils/k8s/gvk";
@@ -47,7 +45,13 @@ import { mapResponseError } from "../../../utils/api/errors";
 import { CheckboxChangeEvent } from "antd/es/checkbox";
 import { Workload } from "../../../utils/k8s/workload";
 import { useResourceListActions } from "./ResourceListActionsContext";
-import NetworkPolicy from "../NetworkPolicy";
+import { useTheme } from "../../theme/ThemeContext";
+import {
+  SuccessIcon,
+  PendingIcon,
+  ErrorIcon,
+  WarningIcon,
+} from "../../status/icons";
 
 interface Props {
   loadResources: boolean;
@@ -63,13 +67,14 @@ const ResourceList = ({
   onResourceDelete,
 }: Props) => {
   const {
-    themePalette,
     streamingDisabled,
     fetchResourceManifest,
     restartResource,
     deleteResource,
   } = useResourceListActions();
 
+  const { mode } = useTheme();
+
   const [error, setError] = useState({
     message: "",
     description: "",
@@ -234,13 +239,13 @@ const ResourceList = ({
       activeCollapses.get(fieldName) &&
       activeCollapses.get(fieldName) === true
     ) {
-      if (themePalette === "dark") {
-        return "#222";
+      if (mode === "dark") {
+        return "#282828";
       }
       return "#EFEFEF";
     } else {
-      if (themePalette === "dark") {
-        return "#333";
+      if (mode === "dark") {
+        return "#1a1a1a";
       }
       return "#FAFAFA";
     }
@@ -356,8 +361,7 @@ const ResourceList = ({
           title={"The resource is not a part of the Module and can be deleted"}
           trigger="click"
         >
-          <WarningTwoTone
-            twoToneColor="#F3801A"
+          <WarningIcon
             style={{ right: "0px", fontSize: "30px", paddingRight: "5px" }}
           />
         </Tooltip>
@@ -397,46 +401,42 @@ const ResourceList = ({
       let statusIcon = <></>;
       if (status === "progressing") {
         statusIcon = (
-          <ClockCircleTwoTone
+          <PendingIcon
             style={{
               paddingLeft: "5px",
               fontSize: "20px",
               verticalAlign: "middle",
             }}
-            twoToneColor={"#ffcc00"}
           />
         );
       }
       if (status === "healthy") {
         statusIcon = (
-          <CheckCircleTwoTone
+          <SuccessIcon
             style={{
               paddingLeft: "5px",
               fontSize: "20px",
               verticalAlign: "middle",
             }}
-            twoToneColor={"#52c41a"}
           />
         );
       }
       if (status === "unhealthy") {
         statusIcon = (
-          <CloseSquareTwoTone
+          <ErrorIcon
             style={{
               paddingLeft: "5px",
               fontSize: "20px",
               verticalAlign: "middle",
             }}
-            twoToneColor={"red"}
           />
         );
       }
 
       let deletedIcon = <></>;
       if (resource.deleted) {
         deletedIcon = (
-          <WarningTwoTone
-            twoToneColor="#F3801A"
+          <WarningIcon
             style={{
               paddingLeft: "5px",
               fontSize: "20px",
@@ -536,11 +536,14 @@ const ResourceList = ({
           backgroundColor: getCollapseColor(collapseKey),
           marginBottom: "12px",
           borderRadius: "10px",
-          border: "1px solid #E3E3E3",
-          borderLeft:
-            "solid " +
-            getStatusColor(resourceStatus, resource.deleted) +
-            " 4px",
+          borderStyle: "solid",
+          borderTopColor: mode === "light" ? "#E3E3E3" : "#444",
+          borderRightColor: mode === "light" ? "#E3E3E3" : "#444",
+          borderBottomColor: mode === "light" ? "#E3E3E3" : "#444",
+          borderLeftStyle: "solid",
+          borderLeftColor: getStatusColor(resourceStatus, resource.deleted),
+          borderWidth: "1px",
+          borderLeftWidth: "4px",
         }}
       >
         <Row>
@@ -553,7 +556,7 @@ const ResourceList = ({
                   paddingRight: "10px",
                   marginTop: "0px",
                   marginBottom: "10px",
-                  color: themePalette === "dark" ? "#fff" : "#000",
+                  color: mode === "dark" ? "#fff" : "#000",
                 }}
               >
                 {resource.name}
@@ -570,7 +573,7 @@ const ResourceList = ({
             style={{
               marginTop: "0px",
               marginBottom: "10px",
-              color: themePalette === "dark" ? "#fff" : "#000",
+              color: mode === "dark" ? "#fff" : "#000",
             }}
           >
             {resource.namespace}
@@ -681,6 +684,7 @@ const ResourceList = ({
           <ReactAce
             style={{ width: "100%" }}
             mode={"sass"}
+            theme={mode === "light" ? "github" : "twilight"}
             value={manifestModal.manifest}
             readOnly={true}
           />
@@ -732,7 +736,7 @@ const ResourceList = ({
       >
         <p>
           In order to confirm deleting this resource, type:{" "}
-          <code>{deleteResourceRef.kind + " " + deleteResourceRef.name}</code>
+          <pre>{deleteResourceRef.kind + " " + deleteResourceRef.name}</pre>
         </p>
         <Input
           placeholder={deleteResourceRef.kind + " " + deleteResourceRef.name}

diff --git a/cyclops-ui/src/components/k8s-resources/ResourceList/ResourceListActionsContext.tsx b/cyclops-ui/src/components/k8s-resources/ResourceList/ResourceListActionsContext.tsx
@@ -1,7 +1,6 @@
 import React, { createContext, ReactNode, useContext } from "react";
 
 interface ResourceListActionsContextType {
-  themePalette?: "dark" | "light";
   streamingDisabled: boolean;
   fetchResource: (
     group: string,
@@ -61,7 +60,6 @@ const ResourceListActionsContext = createContext<
 >(undefined);
 
 interface ResourceListActionsProviderProps {
-  themePalette?: "dark" | "light";
   streamingDisabled: boolean;
   fetchResource: (
     group: string,
@@ -120,7 +118,6 @@ interface ResourceListActionsProviderProps {
 export const ResourceListActionsProvider: React.FC<
   ResourceListActionsProviderProps
 > = ({
-  themePalette,
   streamingDisabled,
   fetchResource,
   fetchResourceManifest,
@@ -135,7 +132,6 @@ export const ResourceListActionsProvider: React.FC<
   return (
     <ResourceListActionsContext.Provider
       value={{
-        themePalette,
         streamingDisabled,
         fetchResource,
         fetchResourceManifest,

diff --git a/cyclops-ui/src/components/k8s-resources/Service.tsx b/cyclops-ui/src/components/k8s-resources/Service.tsx
@@ -15,6 +15,7 @@ import {
 import { mapResponseError } from "../../utils/api/errors";
 import { ApiOutlined, CopyOutlined, EllipsisOutlined } from "@ant-design/icons";
 import { useResourceListActions } from "./ResourceList/ResourceListActionsContext";
+import { useTheme } from "../theme/ThemeContext";
 
 interface Props {
   name: string;
@@ -40,6 +41,8 @@ interface service {
 }
 
 const Service = ({ name, namespace }: Props) => {
+  const { mode } = useTheme();
+
   const { fetchResource } = useResourceListActions();
 
   const [loading, setLoading] = useState(true);
@@ -204,7 +207,9 @@ const Service = ({ name, namespace }: Props) => {
 
   const portForwardCommand = (
     <div>
-      <span style={{ color: "navy" }}>kubectl </span>
+      <span style={{ color: mode === "light" ? "navy" : "lightblue" }}>
+        kubectl{" "}
+      </span>
       <span>port-forward -n </span>
       <span style={{ color: "#CC6903" }}>{namespace} </span>
       <span style={{ color: "#CC6903" }}>svc/{name} </span>
@@ -306,7 +311,7 @@ const Service = ({ name, namespace }: Props) => {
         </div>
         <pre
           style={{
-            background: "#f5f5f5",
+            background: mode === "light" ? "#f5f5f5" : "#383838",
             padding: "10px",
             borderRadius: "5px",
             whiteSpace: "pre-wrap",