Bug 1547182 - Added borders for error / warning messages r=jdescottes

Added borders for error / warning messages. Reduced line height in message body. Added more space between device list / message and refresh device button

Differential Revision: https://phabricator.services.mozilla.com/D29652

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/src/base.css

@@ -29,9 +29,11 @@
   /* Colors from Photon */
   --success-background: #30e60b;
   --warning-background: #fffbd6; /* from the Web Console */
+  --warning-border: rgba(164, 127, 0, 0.27); /* yellow-70(#a47f00) at 27% */
   --warning-icon: var(--yellow-65); /* from the Web Console */
   --warning-text: var(--yellow-80); /* from the Web Console */
   --error-background: #fdf2f5; /* from the Web Console */
+  --error-border: rgba(90, 0, 2, 0.16); /*  red-80(#5a0002) at 16% */
   --error-icon: var(--red-60); /* from the Web Console */
   --error-text: var(--red-70); /* from the Web Console */
   --highlight-50: #0a84ff;

devtools/client/aboutdebugging-new/src/components/shared/Message.css

@@ -3,20 +3,23 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .message--level-error {
-  --message-color: var(--error-text);
   --message-background-color: var(--error-background);
+  --message-border-color: var(--error-border);
+  --message-color: var(--error-text);
   --message-icon-color: var(--error-icon);
 }
 
 .message--level-info {
-  --message-color: var(--grey-90);
   --message-background-color: var(--grey-20);
+  --message-border-color: transparent;
+  --message-color: var(--grey-90);
   --message-icon-color: var(--grey-90);
 }
 
 .message--level-warning {
-  --message-color: var(--warning-text);
   --message-background-color: var(--warning-background);
+  --message-border-color: var(--warning-border);
+  --message-color: var(--warning-text);
   --message-icon-color: var(--warning-icon);
 }
 
@@ -31,6 +34,7 @@
  */
 .message {
   background-color: var(--message-background-color);
+  border: 1px solid var(--message-border-color);
   border-radius: var(--base-unit);
   color: var(--message-color);
   display: grid;
@@ -50,9 +54,11 @@
 }
 
 .message__body {
+  align-self: center;
   font-size: var(--message-font-size);
   font-weight: 400;
   grid-area: body;
+  line-height: 1.6;
 }
 
 .message__button {

devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css

@@ -48,6 +48,6 @@
 }
 
 .sidebar-item--breathe {
-  margin-block-start: calc(2 * var(--base-unit));
+  margin-block-start: calc(6 * var(--base-unit));
   margin-block-end: calc(2 * var(--base-unit));
 }