theme - statusbar, icons

packages/web/src/widgets/LoadingInfo.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const Container = styled.div`
   display: flex;
@@ -25,12 +26,13 @@ const LoadingInfoWrapper = styled.div`
   justify-content: space-around;
 `;
 const LoadingInfoBox = styled.div`
-  background-color: #ccc;
+  background-color: ${(props) => props.theme.main_background2};
   padding: 10px;
   border: 1px solid gray;
 `;
 
 export default function LoadingInfo({ message, wrapper = false }) {
+  const theme = useTheme();
   const core = (
     <Container>
       <Spinner>
@@ -42,7 +44,7 @@ export default function LoadingInfo({ message, wrapper = false }) {
   if (wrapper) {
     return (
       <LoadingInfoWrapper>
-        <LoadingInfoBox>{core}</LoadingInfoBox>
+        <LoadingInfoBox theme={theme}>{core}</LoadingInfoBox>
       </LoadingInfoWrapper>
     );
   } else {

packages/web/src/widgets/StatusBar.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 import { useCurrentDatabase } from '../utility/globalState';
 import { useDatabaseStatus } from '../utility/metadataLoaders';
 
 const Container = styled.div`
   display: flex;
-  color: white;
+  color: ${(props) => props.theme.statusbar_font1};
   align-items: stretch;
 `;
 
@@ -17,12 +18,25 @@ const Item = styled.div`
   //   flex-grow: 0;
 `;
 
+const ErrorWrapper = styled.span`
+  color: ${(props) =>
+    // @ts-ignore
+    props.theme.statusbar_font_red[5]};
+`;
+
+const InfoWrapper = styled.span`
+  color: ${(props) =>
+    // @ts-ignore
+    props.theme.statusbar_font_green[5]};
+`;
+
 export default function StatusBar() {
   const { name, connection } = useCurrentDatabase() || {};
   const status = useDatabaseStatus(connection ? { conid: connection._id, database: name } : {});
   const { displayName, server, user, engine } = connection || {};
+  const theme = useTheme();
   return (
-    <Container>
+    <Container theme={theme}>
       {name && (
         <Item>
           <FontIcon icon="icon database" /> {name}
@@ -49,12 +63,18 @@ export default function StatusBar() {
           )}
           {status.name == 'ok' && (
             <>
-              <FontIcon icon="img statusbar-ok" /> Connected
+              <InfoWrapper theme={theme}>
+                <FontIcon icon="icon ok" />
+              </InfoWrapper>{' '}
+              Connected
             </>
           )}
           {status.name == 'error' && (
             <>
-              <FontIcon icon="img red-error" /> Error
+              <ErrorWrapper theme={theme}>
+                <FontIcon icon="icon error" />
+              </ErrorWrapper>{' '}
+              Error
             </>
           )}
         </Item>