- Changed modal styling

src/components/CloudConnectionsView/CloudConnectionsView.js

@@ -138,22 +138,40 @@ class CloudConnectionsView extends Component {
     let title = "Edit Connection"
 
     let modalStyle = {
+      overlay : {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor:"rgba(164, 170, 181, 0.69)"
+      },
       content: {
         padding: "0px",
+        border: "none",
         borderRadius: "4px",
         bottom: "auto",
         width: "576px",
         height: "auto",
         left: "50%",
-        top: "70px",
+        top: "120px",
         marginLeft: "-288px"
       }
     }
 
     let validationModalStyle = {
+      overlay : {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor:"rgba(164, 170, 181, 0.69)"
+        },
       content: {
         padding: "0px",
         borderRadius: "4px",
+        border: "none",
         bottom: "auto",
         width: "370px",
         height: "250px",

src/components/CloudItem/CloudItem.js

@@ -135,14 +135,23 @@ class CloudItem extends Component {
     }
 
     let modalStyle = {
+      overlay : {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor:"rgba(164, 170, 181, 0.69)"
+        },
       content: {
         padding: "0px",
         borderRadius: "4px",
+        border: "none",
         bottom: "auto",
         width: "576px",
         height: "auto",
         left: "50%",
-        top: "70px",
+        top: "120px",
         marginLeft: "-288px"
       }
     }

src/components/ConfirmationDialog/ConfirmationDialog.js

@@ -52,10 +52,19 @@ class ConfirmationDialog extends Component {
 
   render() {
     let modalStyle = {
+      overlay : {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor:"rgba(164, 170, 181, 0.69)"
+        },
       content: {
         padding: "16px",
         borderRadius: "4px",
         bottom: "auto",
+        border: "none",
         width: "250px",
         height: "auto",
         left: "50%",

src/components/EndpointList/EndpointList.js

@@ -133,14 +133,23 @@ class EndpointList extends Reflux.Component {
 
   render() {
     let modalStyle = {
+      overlay : {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor:"rgba(164, 170, 181, 0.69)"
+        },
       content: {
         padding: "0px",
         borderRadius: "4px",
+        border: "none",
         bottom: "auto",
         width: "576px",
         height: "auto",
         left: "50%",
-        top: "70px",
+        top: "120px",
         marginLeft: "-288px"
       }
     }

src/components/MigrationWizard/MigrationWizard.scss

@@ -27,7 +27,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   .stepTitle {
     font-weight: $weight-light;
     font-size: 32px;
-    color: #0056B8;
+    color: $blue;
     text-align: center;
     background-color: #FFF;
     width: $wizard-content-width;