Errors component

app/src/ui/lib/errors.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import * as classNames from 'classnames'
+
+interface IErrorsProps {
+  readonly className?: string
+
+  readonly children?: ReadonlyArray<JSX.Element>
+}
+
+/** An Errors element with app-standard styles. */
+export class Errors extends React.Component<IErrorsProps, void> {
+  public render() {
+    const className = classNames('errors-component', this.props.className)
+    return (
+      <div className={className}>
+        {this.props.children}
+      </div>
+    )
+  }
+}

app/styles/_ui.scss

@@ -1,6 +1,5 @@
 @import "ui/app";
 @import "ui/app-menu";
-@import "ui/forms";
 @import "ui/scroll";
 @import "ui/window/title-bar";
 @import "ui/file-list";
@@ -33,3 +32,4 @@
 @import "ui/row";
 @import "ui/text-area";
 @import "ui/checkbox";
+@import "ui/errors";

app/styles/ui/_errors.scss

@@ -1,4 +1,4 @@
-.form-errors {
+.errors-component {
   background: var(--form-error-background);
   border: 1px solid var(--form-error-border-color);
   border-radius: var(--border-radius);