Merge pull request 'added dark mode switch for icon buttons' (#77) from dark-mode-buttons into main

Reviewed-on: #77

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 && (

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>

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>