updated UI

Author: bdada23

sample/src/App.js

@@ -6,7 +6,7 @@ import ImplementationFrame from './parts/ImplementationFrame';
 function App() {
   const [darkMode, setDarkMode] = useState(false);
   const [debugMode, setDebugMode] = useState(false);
-  const [upperBar, setUpperBar] = useState(true);
+  const [upperBar, setUpperBar] = useState(false);
   const [help, setHelp] = useState(false);
   const [collapseMode, setCollapseMode] = useState(true);
   const [inverseMarkers, setInverseMarkers] = useState(false);

sample/src/parts/ImplementationFrame.js

@@ -122,11 +122,15 @@ function ImplementationFrame({
         <IframePanel/>
         <AnotherIframePanel /> */}
 
+        <ComplexPanel />
+    <IframePanel />
+    <AnotherIframePanel />
+
         {/* <MupPanel placement="bottom" id="randomText44" title="Lorem Ipsum Panel" icon={<FormatIndentIncrease />}>
           <Typography color="textPrimary">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</Typography>
         </MupPanel> */}
 
-        {/* <MupPanel id="chromecastPanel" title="Cast Icon" icon={<CastConnectedIcon />}>
+        <MupPanel id="chromecastPanel" title="Cast Icon" icon={<CastConnectedIcon />}>
           <Box display="flex" flexDirection="column" style={{ gap: '8px'}}>
             <Skeleton variant="rect" animation="wave" height={10} />
             <Skeleton variant="rect" animation="wave" height={20}  />
@@ -149,7 +153,7 @@ function ImplementationFrame({
 
         <MupPanel id="tralalaPanel" title="Sub Demo Panel TextMock" iconInHeader={false} hint="No icon big guy..." icon={<AmpStories />}>
           <Skeleton variant="rect" width={'100%'} height={300} />
-        </MupPanel> */}
+        </MupPanel>
 
         <MuiStatusBar/>
 

sample/src/parts/ToggleTheme.js

@@ -101,11 +101,12 @@ const ToggleTheme = ({
       tooltip={`Toggle the ${toggle.title} flag: ${toggle.status ? 'off' : 'on'}`}
       onClick={() => toggle.statusToggle()}
       elements={[
-    {
-      icon: toggle.status ? <CheckBoxOutlinedIcon /> : <CheckBoxOutlineBlankOutlinedIcon />,
-      text: toggle.title
-    }
-  ]} />)}</>;
+        {
+          icon: toggle.status ? <CheckBoxOutlinedIcon /> : <CheckBoxOutlineBlankOutlinedIcon />,
+          text: toggle.title
+        }
+      ]}
+    />)}</>;
 };
 
 export default ToggleTheme;

src/MupStatus/index.js

@@ -29,7 +29,7 @@ const MupStatus = ({
   tooltip,
   elements
 }) => {
-  const { status, settings, handleSetVisible, handleStatusAnnouncement, handleStatusDestroy } = useContext(DataProvider)
+  const { status, settings, handleSetVisible, handleStatusAnnouncement } = useContext(DataProvider)
   const [statusObject, setStatusObject] = useState(null)
   const [anchorEl, setAnchorEl] = useState(null)
   const theme = useTheme()
@@ -46,16 +46,6 @@ const MupStatus = ({
     handleStatusAnnouncement({ id, elements, side, tooltip })
   }, [side, tooltip, elements, handleStatusAnnouncement])
 
-  // const callbackHandleStatusDestroy = useCallback((id) => {
-  //   handleStatusDestroy({ id })
-  // },[])
-
-  // useEffect(() => {
-  //   return () => {
-  //     callbackHandleStatusDestroy(id)
-  //   }
-  // }, [id, callbackHandleStatusDestroy])
-
   useEffect(() => {
     if (id && statusObject === null && !status.some(item => item.uniqueId === id)) {
       callbackHandleStatusAnnouncement(id)