Added all-around margins for both error and warning notifications

cfpb · Oct 30, 2024 · ffe3a6b · ffe3a6b
1 parent f9cb7dc
commit ffe3a6b
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/src/components/Trends/TrendsPanel/TrendsPanel.scss b/src/components/Trends/TrendsPanel/TrendsPanel.scss
@@ -29,7 +29,7 @@
     width: 100%;
 
     .m-notification {
-      margin: 10px;
+      margin-bottom: 10px;
     }
   }
   &.external-tooltip {

diff --git a/src/components/Warnings/Error.js b/src/components/Warnings/Error.js
@@ -1,10 +1,11 @@
 import getIcon from '../iconMap';
 import PropTypes from 'prop-types';
+import './Error.scss';
 
 export const ErrorBlock = ({ text }) => (
   <div
     role="alert"
-    className="m-notification m-notification--visible m-notification--error"
+    className="error m-notification m-notification--visible m-notification--error"
   >
     {getIcon('error-round')}
     <div className="m-notification__content">

diff --git a/src/components/Warnings/Error.scss b/src/components/Warnings/Error.scss
@@ -0,0 +1,5 @@
+.error {
+    &.m-notification {
+        margin: 10px;
+    }
+}
diff --git a/src/components/Warnings/Warning.scss b/src/components/Warnings/Warning.scss
@@ -1,4 +1,8 @@
 .warning {
+  &.m-notification {
+    margin: 10px;
+  }
+
   .close {
     position: absolute;
     right: 0;