fixes + UX

packages/web/src/widgets/DatabaseWidget.js

@@ -131,7 +131,7 @@ function SqlObjectListWrapper() {
     return (
       <>
         <WidgetTitle>Tables, views, functions</WidgetTitle>
-        <ErrorInfo message="Database not selected" />
+        <ErrorInfo message="Database not selected" icon="fas fa-exclamation-circle blue" />
       </>
     );
   }

packages/web/src/widgets/ErrorInfo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 
 const Container = styled.div`
   display: flex;
@@ -11,14 +12,13 @@ const Container = styled.div`
 const Icon = styled.div`
   font-size: 20pt;
   margin: 10px;
-  color: red;
 `;
 
-export default function ErrorInfo({ message }) {
+export default function ErrorInfo({ message, icon = 'fas fa-times-circle red' }) {
   return (
     <Container>
       <Icon>
-        <i className="fas fa-times-circle" />
+        <FontIcon icon={icon} />
       </Icon>
       {message}
     </Container>

packages/web/src/widgets/StatusBar.js

@@ -42,7 +42,7 @@ export default function StatusBar() {
         </Item>
       )}
 
-      {status && (
+      {connection && status && (
         <Item>
           {status.name == 'pending' && (
             <>
@@ -61,6 +61,13 @@ export default function StatusBar() {
           )}
         </Item>
       )}
+      {!connection && (
+        <Item>
+          <>
+            <FontIcon icon="fas fa-plug gray" /> Not connected
+          </>
+        </Item>
+      )}
     </Container>
   );
 }