finally fixed the css problem with the videocamera modal, now styling the simulation panel. There is a very weird bug with the slider on the left side of the header controller which is somehow visible when the modal is open, I will keep it for the end

smart-hut/src/components/HeaderController.js

@@ -69,6 +69,10 @@ export class MyHeader extends React.Component {
   render() {
     return (
       <div>
+        <SimulationPanel 
+          simulationPanel={this.state.simulationPanel}
+          closeSimulationPanel={this.closeSimulationPanel}
+        />
         <Responsive minWidth={768}>
           <Grid columns="equal" divided inverted padded>
             <Grid.Row color="black" textAlign="center">
@@ -83,10 +87,6 @@ export class MyHeader extends React.Component {
                 <div onClick={this.openSimulationPanel}>
                   <Button > Similuation Panel </Button>
                 </div>
-                <SimulationPanel 
-                  simulationPanel={this.state.simulationPanel}
-                  closeSimulationPanel={this.closeSimulationPanel}
-                />
               </Grid.Row>
               </Grid.Column>
               <Grid.Column>
@@ -143,22 +143,15 @@ export class MyHeader extends React.Component {
                 <Divider />
                 <Grid.Row>
                   <Button onClick={this.logout}>Logout</Button>
-                  <Segment
+                </Grid.Row>  
-                    compact
-                    style={{
-                      margin: "auto",
-                      marginTop: "1em",
-                      textAlign: "center",
-                    }}
-                  >
                 <Divider />
+                <Grid.Row>
                   <Checkbox
                     label={<label>Share cameras</label>}
                     checked={this.props.cameraEnabled}
                     toggle
                     onChange={(e, val) => this.setCameraEnabled(val.checked)}
                   />
-                </Segment>
                 </Grid.Row>
               </Grid.Column>
             </Grid.Row>

smart-hut/src/components/SimulationPanel.js

@@ -1,41 +1,97 @@
 import React from "react";
 import Modal from "react-modal";
-import { Button } from "semantic-ui-react";
+import {
+    Grid,
+    Divider,
+    Button,
+    Label,
+    Responsive,
+    Checkbox,
+    Image, 
+  } from "semantic-ui-react";
 
-const ReactModalPortal = {
+// const ReactModalPortal = {
-  opacity: 0
+//   opacity: 0
-};
+// };
 
-const ReactModal__Overlay = {
+// const ReactModal__Overlay = {
-  alignItems: 'center',
+//   background: 'black',
-  display: 'flex',
+//   alignItems: 'center',
-  justifyContent: 'center',
+//   display: 'flex',
-  transition: 'opacity 200ms ease-in-out'
+//   justifyContent: 'center',
-};
+//   transition: 'opacity 200ms ease-in-out'
+// };
 
 
-const modal = {
+// const modal = {
-  background: 'grey',
+//   background: 'grey',
-  color: 'white',
+//   color: 'white',
-  maxWidth: '2rem',
+//   maxWidth: '2rem',
-  outline: 'none',
+//   outline: 'none',
-  padding: '2rem',
+//   padding: '2rem',
-  textAlign: 'center'
+//   textAlign: 'center'
-};
+// };
 
 const SimulationPanel = (props) => (
   <Modal
     isOpen={!!props.simulationPanel}
     contentLabel="Simulation Panel"
     onRequestClose={props.closeSimulationPanel}
-    style={ReactModalPortal,ReactModal__Overlay, modal}
+    // style={ReactModalPortal,ReactModal__Overlay, modal}
+    style={{
+        overlay: {
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0,0,0,0.5)'
+        },
+        content: {
+          position: 'absolute',
+          top: '40px',
+          left: '40px',
+          right: '40px',
+          bottom: '40px',
+          border: '1px solid #ccc',
+          background: '#fff',
+          overflow: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          borderRadius: '4px',
+          outline: 'none',
+          padding: '20px',
+          backgroundColor: 'black'
+        }
+      }}
   >
-    {props.simulationPanel && (
+    {props.simulationPanel}
-     <p> hey man </p>
+    <Responsive minWidth={768}>
-    )}
+        <Grid columns={3} divided inverted padded>
-    <Button fluid primary onClick={props.closeSimulationPanel}>
+        <Grid.Row>
-     Exit
+        <Grid.Column>
-    </Button>
+            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
+        </Grid.Column>
+        <Grid.Column>
+            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
+        </Grid.Column>
+        <Grid.Column>
+            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
+        </Grid.Column>
+        </Grid.Row>
+
+        <Grid.Row>
+        <Grid.Column>
+            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
+        </Grid.Column>
+        <Grid.Column>
+            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
+        </Grid.Column>
+        <Grid.Column>
+            <Image src='https://react.semantic-ui.com/images/wireframe/media-paragraph.png' />
+        </Grid.Column>
+        </Grid.Row>
+    </Grid>
+    </Responsive>
   </Modal>
 );
 

smart-hut/src/components/dashboard/devices/VideocamModal.js

@@ -1,37 +1,42 @@
 import React from "react";
 import Modal from "react-modal";
-import { Button } from "semantic-ui-react";
-
-const modal = {
-  opacity: 0,
-  alignItems: "center",
-  display: "flex",
-  justifyContent: "center",
-  transition: "opacity 200ms ease-in-out",
-  background: "grey",
-  color: "white",
-  maxWidth: "2rem",
-  outline: "none",
-  padding: "2rem",
-  textAlign: "center",
-  maxHeight: "50vh",
-};
 
 const VideocamModal = (props) => (
   <Modal
     isOpen={!!props.selectedVideo}
     contentLabel="Live Cam"
     onRequestClose={props.closeModal}
-    style={modal}
+    style={{
+      overlay: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)'
+      },
+      content: {
+        position: 'absolute',
+        top: '40px',
+        left: '40px',
+        right: '40px',
+        bottom: '40px',
+        border: '1px solid #ccc',
+        background: '#fff',
+        overflow: 'auto',
+        WebkitOverflowScrolling: 'touch',
+        borderRadius: '4px',
+        outline: 'none',
+        padding: '20px',
+        backgroundColor: 'black'
+      }
+    }}
   >
     {props.selectedVideo && (
       <video autoPlay loop muted width="100%" height="90%">
         <source src={props.url} type="video/mp4" />
       </video>
     )}
-    <Button fluid primary onClick={props.closeModal}>
-      Close
-    </Button>
   </Modal>
 );