Merge pull request #3188 from plotly/upgrade-css

Add small changes to devtools style

Author: marthacryan

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

@@ -10,7 +10,6 @@
     color: #b9c2ce;
     font-size: 20px;
     cursor: pointer;
-    margin-right: 10px;
 }
 
 .dash-fe-error__icon-x:hover {
@@ -125,12 +124,16 @@
 }
 
 .dash-be-error__str {
-    background-color: #fdf3f4;
+    background-color: #F5F6FA;
     min-width: 386px;
-    max-width: 650px;
+    width: 100%;
     overflow: auto;
-    display: inline-block;
-    white-space: pre-wrap;
+    line-height: 17px;
+    margin-bottom: 8px;
+}
+
+.dash-backend-error {
+    padding: 8px;
 }
 
 .dash-error-menu {

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

@@ -17,6 +17,16 @@
     transform: rotate(-180deg);
 }
 
+.dash-debug-menu__outer button {
+    height: auto;
+    padding: unset;
+    line-height: normal;
+    text-transform: none;
+    font-size: 14px;
+    border-radius: 0px;
+    letter-spacing: normal;
+}
+
 .dash-debug-menu__popup {
     display: flex;
     flex-direction: column;
@@ -135,7 +145,7 @@
     display: flex;
     flex-direction: column;
     background-color: white;
-    border-radius: 3px;
+    border-radius: 6px;
     border: 1px solid #0018661a;
     padding: 11px;
     box-shadow: 0px 0px 14px 5px #00000012;

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

@@ -10,6 +10,8 @@
     cursor: pointer;
     display: flex;
     font-family: Verdana, sans-serif !important;
+    font-weight: 500;
+    line-height: normal;
 }
 
 .dash-debug-menu__upgrade-tooltip:after {
@@ -23,15 +25,21 @@
     border-color: white transparent transparent transparent;
 }
 
-.dash-debug-menu__upgrade-button {
+.dash-debug-menu__outer button.dash-debug-menu__upgrade-button {
     background-color: #a159ff0d;
     border: 1px solid #864ad433;
     color: #7f4bc4;
     margin-left: 10px;
     font-family: Verdana, sans-serif !important;
     cursor: pointer;
+    height: 20px;
+    padding: 0px 8px;
+    border-radius: 3px;
+    font-weight: 500;
 }
 
 .dash-debug-menu__upgrade-button:hover {
     background-color: #864ad433;
+    border-color: #864ad433;
+    color: #7f4bc4;
 }