Apply more style updates

Author: marthacryan

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

@@ -77,11 +77,12 @@
     margin: 0px;
     margin-left: 5px;
     padding: 0px;
-    font-size: 14px;
+    font-size: 12.6px;
     display: inline-block;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    line-height: 20px;
 }
 .dash-fe-error__timestamp {
     margin-right: 20px;
@@ -187,15 +188,15 @@
     width: 422px;
 }
 .dash-error-card--container {
-    padding: 20px;
+    padding: 16px;
     width: 600px;
     max-width: 800px;
     max-height: calc(100vh - 125px);
-    margin-bottom: 7px;
+    margin-bottom: 4px;
     background-color: white;
     overflow: auto;
-    z-index: 1100; /* above the plotly.js toolbar and Bootstrap components */
-    box-shadow: 0 0 15px 6px #0000000d;
+    border-radius: 6px;
+    box-shadow: 0px 0.7px 1.4px 0px rgba(0, 0, 0, 0.07), 0px 1.9px 4px 0px rgba(0, 0, 0, 0.05), 0px 4.5px 10px 0px rgba(0, 0, 0, 0.05);
 }
 
 .dash-error-card__topbar {
@@ -207,6 +208,8 @@
     font-size: 14px;
     align-items: center;
     position: relative;
+    padding-bottom: 14px;
+    font-weight: 700;
 }
 .dash-error-card__message {
     font-size: 14px;
@@ -232,7 +235,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px;
+    padding: 8px;
     cursor: pointer;
 }
 

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

@@ -31,7 +31,6 @@ class FrontEndError extends Component {
                 onClick={() => this.setState({collapsed: !collapsed})}
             >
                 <span className='dash-fe-error-top__group'>
-                    ⛑️
                     <span className='dash-fe-error__title'>
                         {e.error.message || 'Error'}
                     </span>

dash/dash-renderer/src/components/error/menu/DebugMenu.css

@@ -25,8 +25,8 @@
     transition: 0.3s;
     box-sizing: border-box;
     position: fixed;
-    bottom: 27px;
-    right: 27px;
+    bottom: 8px;
+    right: 8px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -35,8 +35,8 @@
     border-radius: 5px;
     padding: 5px;
     background-color: #f5f6fa;
-    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25),
-        0px 1px 3px rgba(162, 177, 198, 0.32);
+    box-shadow: 0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.04), 0px 2.3px 2px 0px rgba(0, 0, 0, 0.03);
+    border: 1px solid var(--Stroke-Weak, rgba(0, 24, 102, 0.10));
 }
 .dash-debug-menu__outer--closed {
     height: 60px;
@@ -61,7 +61,6 @@
 }
 
 .dash-debug-menu__status {
-    margin: 3px;
     display: flex;
     align-items: center;
 }