ScrollDialog error handling

src/containers/dialogs/ScrollDialog/index.tsx

@@ -12,6 +12,7 @@ interface IProps {
   width?: number;
   onOverlayClick?: MouseEventHandler<HTMLDivElement>;
   onRefCapture?: (ref: any) => void;
+  error?: string;
 
   top_sticky?: ReactChild;
   top_sticky_offset?: number;
@@ -24,7 +25,7 @@ const ScrollDialog: FC<IProps> = ({
   width = 800,
   top_sticky,
   top_sticky_offset,
-
+  error,
   onOverlayClick,
   onRefCapture
 }) => {
@@ -94,6 +95,8 @@ const ScrollDialog: FC<IProps> = ({
         {!!buttons && (
           <div className={styles.bottom}>
             <div className={styles.wrap} style={{ flexBasis: width }}>
+              <div className={classNames(styles.error, { active: error })}>{error}</div>
+
               <div className={styles.pan}>{buttons}</div>
             </div>
           </div>
@@ -102,7 +105,7 @@ const ScrollDialog: FC<IProps> = ({
         <div
           className={styles.scroll_wrap}
           style={{ flexBasis: width + 40 }}
-          // style={{ flexBasis: width }}
+        // style={{ flexBasis: width }}
         >
           <Scroll
             className="dialog_scroll"

src/containers/dialogs/ScrollDialog/styles.scss

@@ -54,7 +54,10 @@
   height: 10px;
   top: 0;
 
-  &:global(.has_buttons) { height: 60px; top: 15px;}
+  &:global(.has_buttons) {
+    height: 60px;
+    top: 15px;
+  }
 
   .wrap {
     display: flex;
@@ -75,6 +78,7 @@
 .wrap {
   flex: 0 1 800px;
   height: 100%;
+  position: relative;
 }
 
 .scroll_wrap {
@@ -126,3 +130,27 @@
     bottom: -$gap;
   }
 }
+
+.error {
+  background: linear-gradient(transparentize($red, 1), $red);
+  position: absolute;
+  width: 100%;
+  height: auto;
+  bottom: 100%;
+  left: 0;
+  padding: $gap * 2 $gap;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_14_regular;
+  border-radius: 0 0 $radius $radius;
+  pointer-events: none;
+  touch-action: none;
+  opacity: 0;
+  transition: opacity 0.25s;
+
+  &:global(.active) {
+    opacity: 1;
+  }
+}