From afe291c54c3bb2e350d0b8ee292a1317f0121147 Mon Sep 17 00:00:00 2001
From: sara-pervana <saramakishti@gmail.com>
Date: Mon, 29 Jan 2024 20:53:16 +0100
Subject: [PATCH] added dark mode switch for icon buttons

---
 .../src/components/consume_action/index.tsx   |  2 +-
 .../src/components/entity_actions/index.tsx   |  2 +-
 .../src/components/sequence_diagram/index.tsx | 19 ++++++++++++-------
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/pkgs/ui/src/components/consume_action/index.tsx b/pkgs/ui/src/components/consume_action/index.tsx
index 096ddaf..f5587df 100644
--- a/pkgs/ui/src/components/consume_action/index.tsx
+++ b/pkgs/ui/src/components/consume_action/index.tsx
@@ -54,7 +54,7 @@ const ConsumeAction = ({
 
   return (
     <>
-      <Button disabled={loading} onClick={handleConsume} variant="outlined">
+      <Button disabled={loading} onClick={handleConsume} variant="contained">
         {loading ? <CircularProgress size={24} /> : `Consume`}
       </Button>
       {error && (
diff --git a/pkgs/ui/src/components/entity_actions/index.tsx b/pkgs/ui/src/components/entity_actions/index.tsx
index c7bfeb7..55a903d 100644
--- a/pkgs/ui/src/components/entity_actions/index.tsx
+++ b/pkgs/ui/src/components/entity_actions/index.tsx
@@ -205,7 +205,7 @@ const EntityActions = ({ endpointData, rowData }: Props) => {
         </DialogContent>
         <DialogActions>
           <Button onClick={closeDeleteConfirmation}>Cancel</Button>
-          <Button variant="outlined" onClick={onDeleteEntity}>
+          <Button variant="contained" onClick={onDeleteEntity}>
             {loadingDelete ? <CircularProgress size={24} /> : `Confirm`}
           </Button>
         </DialogActions>
diff --git a/pkgs/ui/src/components/sequence_diagram/index.tsx b/pkgs/ui/src/components/sequence_diagram/index.tsx
index 4c5754b..989e5af 100644
--- a/pkgs/ui/src/components/sequence_diagram/index.tsx
+++ b/pkgs/ui/src/components/sequence_diagram/index.tsx
@@ -15,6 +15,7 @@ import {
   IconButton,
   List,
   TextField,
+  useMediaQuery,
 } from "@mui/material";
 //Icons
 import RefreshIcon from "@mui/icons-material/Refresh";
@@ -54,6 +55,10 @@ const SequenceDiagram = () => {
   const allEventMessages = extractAllEventMessages(eventMessagesData?.data);
   const dataDependency = JSON.stringify(hasData ? eventMessagesData?.data : "");
 
+  const userPrefersDarkmode = useMediaQuery("(prefers-color-scheme: dark)");
+
+  const iconButtonColor = userPrefersDarkmode ? "default" : "primary";
+
   useEffect(() => {
     const currentMermaidRef = mermaidRef?.current;
 
@@ -192,37 +197,37 @@ const SequenceDiagram = () => {
           <>
             <div className="flex justify-end">
               <Tooltip placement="top" title="Filter Messages">
-                <IconButton color="primary" onClick={toggleFilters}>
+                <IconButton color={iconButtonColor} onClick={toggleFilters}>
                   <FilterAltIcon />
                 </IconButton>
               </Tooltip>
               <Tooltip placement="top" title="Refresh Diagram">
-                <IconButton color="primary" onClick={onRefresh}>
+                <IconButton color={iconButtonColor} onClick={onRefresh}>
                   <RefreshIcon />
                 </IconButton>
               </Tooltip>
               <Tooltip title="Zoom In" placement="top">
-                <IconButton color="primary" onClick={zoomIn}>
+                <IconButton color={iconButtonColor} onClick={zoomIn}>
                   <ZoomInIcon />
                 </IconButton>
               </Tooltip>
               <Tooltip title="Zoom Out" placement="top">
-                <IconButton color="primary" onClick={zoomOut}>
+                <IconButton color={iconButtonColor} onClick={zoomOut}>
                   <ZoomOutIcon />
                 </IconButton>
               </Tooltip>
               <Tooltip title="Reset" placement="top">
-                <IconButton color="primary" onClick={resetZoom}>
+                <IconButton color={iconButtonColor} onClick={resetZoom}>
                   <ResetIcon />
                 </IconButton>
               </Tooltip>
               <Tooltip title="View in Fullscreen" placement="top">
-                <IconButton color="primary" onClick={viewInFullScreen}>
+                <IconButton color={iconButtonColor} onClick={viewInFullScreen}>
                   <FullscreenIcon />
                 </IconButton>
               </Tooltip>
               <Tooltip title="Download as PNG" placement="top">
-                <IconButton color="primary" onClick={downloadAsPng}>
+                <IconButton color={iconButtonColor} onClick={downloadAsPng}>
                   <DownloadIcon />
                 </IconButton>
               </Tooltip>
-- 
2.51.0