Updated css plotly#1403

Author: ann-marie-ward

dash-renderer/src/components/error/FrontEnd/FrontEndError.css

@@ -3,13 +3,17 @@
 }
 
 .dash-fe-error__icon-x {
-    width: 16px;
-    height: 16px;
-    background-color: red;
-    margin-left: 75px;
-    border-radius: 4px;
-    border: 1px solid;
+    position: absolute;
+    right: 0;
+    top: 0;
+    color: #ccc;
+    font-size: 20px;
+    cursor: pointer;
+}
 
+.dash-fe-error__icon-x:hover
+{
+ color:black;
 }
 
 

dash-renderer/src/components/error/FrontEnd/FrontEndErrorContainer.react.js

@@ -1,6 +1,5 @@
 import React, {Component} from 'react';
 import './FrontEndError.css';
-import OffIcon from '../icons/OffIcon.svg';
 import PropTypes from 'prop-types';
 import {FrontEndError} from './FrontEndError.react';
 
@@ -36,13 +35,11 @@ class FrontEndErrorContainer extends Component {
                         ){connected ? null : '\u00a0 🚫 Server Unavailable'}
                     </div>
                     <div
-                        className='dash-error-card__message'
-                        onClick={() => clickHandler()}
-                    >
-                        <OffIcon className='dash-fe-error__icon-x' />
+                        className='dash-fe-error__icon-x'
+                        onClick={() => clickHandler()}>
+                        x
                     </div>
                 </div>
-
                 <div className='dash-error-card__list'>{errorElements}</div>
             </div>
         );

dash-renderer/src/components/error/GlobalErrorOverlay.css

@@ -53,6 +53,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    position: relative;
 }
 .dash-error-card__message {
     font-size: 14px;