Fix actions, docker in dark mode

kthcloud · Dec 20, 2023 · 3f336b2 · 3f336b2
1 parent 704e024
commit 3f336b2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/src/pages/edit/deployments/GHActions.jsx b/src/pages/edit/deployments/GHActions.jsx
@@ -14,6 +14,7 @@ import {
   TextareaAutosize,
   Tooltip,
   Typography,
+  useTheme,
 } from "@mui/material";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import Iconify from "src/components/Iconify";
@@ -26,6 +27,7 @@ const GHActions = ({ resource }) => {
   const [cliCommands, setCliCommands] = useState(null);
   const [secrets, setSecrets] = useState([]);
   const [showSecrets, setShowSecrets] = useState(false);
+  const theme = useTheme();
 
   const loadYaml = async () => {
     try {
@@ -98,7 +100,12 @@ const GHActions = ({ resource }) => {
         <CardContent>
           <TextareaAutosize
             value={cliCommands ? cliCommands : t("loading")}
-            style={{ width: "100%", border: 0 }}
+            style={{
+              width: "100%",
+              border: 0,
+              color: theme.palette.grey[900],
+              background: theme.palette.mode === "light" ? theme.palette.grey[0] : theme.palette.grey[100],
+            }}
           />
         </CardContent>
         <CardActions>
@@ -117,7 +124,12 @@ const GHActions = ({ resource }) => {
           <Stack spacing={1} useFlexGap alignItems={"flex-start"}>
             <TextareaAutosize
               value={actionsFile ? actionsFile : t("loading")}
-              style={{ width: "100%", border: 0 }}
+              style={{
+                width: "100%",
+                border: 0,
+                color: theme.palette.grey[800],
+                background: theme.palette.mode === "light" ? theme.palette.grey[0] : theme.palette.grey[100],
+              }}
             />
 
             <Stack

diff --git a/src/pages/edit/vms/PortManager.jsx b/src/pages/edit/vms/PortManager.jsx
@@ -21,6 +21,7 @@ import {
   CircularProgress,
   Tooltip,
   Stack,
+  useTheme,
 } from "@mui/material";
 import Iconify from "../../../components/Iconify";
 import { enqueueSnackbar } from "notistack";
@@ -34,6 +35,7 @@ import { useTranslation } from "react-i18next";
 export default function PortManager({ vm }) {
   const { t } = useTranslation();
 
+  const theme = useTheme();
   const [ports, setPorts] = useState([]);
 
   const [newPort, setNewPort] = useState("");
@@ -145,7 +147,7 @@ export default function PortManager({ vm }) {
                   style={{
                     fontFamily: "monospace",
                     cursor: "pointer",
-                    color: "#45515c",
+                    color: theme.palette.grey[700],
                   }}
                 >
                   vm.cloud.cbh.kth.se
@@ -155,7 +157,7 @@ export default function PortManager({ vm }) {
             <span
               style={{
                 fontFamily: "monospace",
-                color: "#45515c",
+                color: theme.palette.grey[700],
               }}
             >
               {t("external_port")}
@@ -169,7 +171,7 @@ export default function PortManager({ vm }) {
                       style={{
                         fontFamily: "monospace",
                         cursor: "pointer",
-                        color: "#45515c",
+                        color: theme.palette.grey[700],
                       }}
                     >
                       {publicIP}
@@ -179,7 +181,7 @@ export default function PortManager({ vm }) {
                 <span
                   style={{
                     fontFamily: "monospace",
-                    color: "#45515c",
+                    color: theme.palette.grey[700],
                   }}
                 >
                   {t("external_port")}