Added Dark / Light Mode Status icons (#1946)

- Added new light mode icon & display correct state in Dark Mode activator icon - Updated mds library Signed-off-by: Benjamin Perez <[email protected]>
minio · Jan 17, 2024 · 1fb15e7 · 1fb15e7
1 parent fbef9f1
commit 1fb15e7
Show file tree

Hide file tree

Showing 3 changed files with 297 additions and 94 deletions.
diff --git a/web-app/package.json b/web-app/package.json
@@ -11,7 +11,7 @@
     "local-storage-fallback": "^4.1.1",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
-    "mds": "https://github.com/minio/mds.git#v0.13.0",
+    "mds": "https://github.com/minio/mds.git#v0.15.0",
     "react": "^18.1.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^18.1.0",

diff --git a/web-app/src/screens/Console/Common/DarkModeActivator.tsx b/web-app/src/screens/Console/Common/DarkModeActivator.tsx
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
-import { Button, DarkModeIcon } from "mds";
+import { Button, DarkModeIcon, LightModeIcon } from "mds";
 import { useSelector } from "react-redux";
 import { AppState, useAppDispatch } from "../../../store";
 import { storeDarkMode } from "../../../utils/stylesUtils";
@@ -38,7 +38,7 @@ const DarkModeActivator = () => {
     <TooltipWrapper tooltip={`${darkMode ? "Light" : "Dark"} Mode`}>
       <Button
         id={"dark-mode-activator"}
-        icon={<DarkModeIcon />}
+        icon={darkMode ? <LightModeIcon /> : <DarkModeIcon />}
         onClick={darkModeActivator}
       />
     </TooltipWrapper>