From 2a52f6fa2b49ef08faeea4b74befeaf836ad6d30 Mon Sep 17 00:00:00 2001
From: Nolshine <mtr131@gmail.com>
Date: Tue, 21 Sep 2021 07:07:47 +0100
Subject: [PATCH] implement visibility icon toggling

---
 src/ui/React/Overview.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/ui/React/Overview.tsx b/src/ui/React/Overview.tsx
index 911e7197f..c35c86618 100644
--- a/src/ui/React/Overview.tsx
+++ b/src/ui/React/Overview.tsx
@@ -5,6 +5,7 @@ import Box from "@mui/material/Box";
 import Collapse from "@mui/material/Collapse";
 import Fab from "@mui/material/Fab";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import VisibilityIcon from "@mui/icons-material/Visibility";
 import { use } from "../Context";
 import { Page } from "../Router";
 
@@ -24,13 +25,19 @@ export function Overview({ children }: IProps): React.ReactElement {
   const router = use.Router();
   if (router.page() === Page.BitVerse || router.page() === Page.HackingMission || router.page() === Page.Loading)
     return <></>;
+  let icon;
+  if (open){
+    icon = <VisibilityOffIcon color="primary" />;
+  } else {
+    icon = <VisibilityIcon color="primary" />;
+  }
   return (
     <div style={{ position: "fixed", top: 0, right: 0, zIndex: 1500 }}>
       <Box display="flex" justifyContent="flex-end" flexDirection={"column"}>
         <Collapse in={open}>{children}</Collapse>
         <Box display="flex" justifyContent="flex-end">
           <Fab classes={{ root: classes.nobackground }} onClick={() => setOpen((old) => !old)}>
-            <VisibilityOffIcon color="primary" />
+            {icon}
           </Fab>
         </Box>
       </Box>