Add error bar

Summary: Red error bar at bottom when something goes wrong.

Reviewed By: danielbuechele

Differential Revision: D15536042

fbshipit-source-id: 6a20e22489f9346864b78f9102a0917f94c1c74f

src/plugins/databases/index.js

@@ -16,6 +16,7 @@ import {
   Button,
   ButtonGroup,
   Input,
+  colors,
   getStringFromErrorLike,
 } from 'flipper';
 import {Component} from 'react';
@@ -38,6 +39,12 @@ const BoldSpan = styled('span')({
   fontWeight: 'bold',
   textTransform: 'uppercase',
 });
+const ErrorBar = styled('div')({
+  backgroundColor: colors.cherry,
+  color: colors.white,
+  lineHeight: '26px',
+  textAlign: 'center',
+});
 
 type DatabasesPluginState = {|
   selectedDatabase: number,
@@ -758,7 +765,9 @@ export default class DatabasesPlugin extends FlipperPlugin<
             ) : null}
           </FlexRow>
         </Toolbar>
-        {this.state.error && getStringFromErrorLike(this.state.error)}
+        {this.state.error && (
+          <ErrorBar>{getStringFromErrorLike(this.state.error)}</ErrorBar>
+        )}
       </FlexColumn>
     );
   }