security camera icon added, I also did a restyling of the modal for the security camera: now it is centerd, and it occupies basically the entire scream, but leaving a fair margin on the for directions. Much better now, I think, but let me know in case.

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

@@ -213,7 +213,7 @@ class NewDevice extends Component {
       key: "securityCamera",
       text: "Security Camera",
       value: "securityCamera",
-      image: { avatar: true, src: "/img/plusMinus.svg" },
+      image: { avatar: true, src: "/img/security-icon.png" },
       }
     ];
     const sensorOptions = [

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

@@ -2,24 +2,35 @@ import React from "react";
 import Modal from "react-modal";
 import { Button } from "semantic-ui-react";
 
-const ModalStyle = {
+const ReactModalPortal = {
-  content: {
+    opacity: 0
-    top: "20%",
-    left: "45%",
-    right: "auto",
-    bottom: "auto",
-    marginRight: "-40%",
-    width: "80%",
-    transform: "translate(-40%, -10%)",
-  },
 };
 
+const ReactModal__Overlay = {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    transition: 'opacity 200ms ease-in-out'
+};
+
+const modal = {
+    background: 'grey',
+    color: 'white',
+    maxWidth: '2rem',
+    outline: 'none',
+    padding: '2rem',
+    textAlign: 'center'
+};
+
+
+
+
 const VideocamModal = (props) => (
   <Modal
     isOpen={!!props.selectedVideo}
     contentLabel="Live Cam"
     onRequestClose={props.closeModal}
-    style={ModalStyle}
+    style={ReactModalPortal,ReactModal__Overlay, modal}
   >
     {props.selectedVideo && (
       <video autoPlay loop muted width="100%" height="auto">