btc: connection status styling

pkg/btc-wallet/src/js/components/lib/body.js

@@ -43,7 +43,7 @@ export default class Body extends Component {
              flexDirection='column'
              width='400px'
             >
-              <Header settings={true}/>
+              <Header settings={true} state={this.props.state}/>
               <Settings state={this.props.state}
                 api={this.props.api}
                 network={this.props.network}
@@ -56,7 +56,7 @@ export default class Body extends Component {
              flexDirection='column'
              width='400px'
             >
-              <Header settings={false}/>
+              <Header settings={false} state={this.props.state}/>
               { (!this.props.warning) ? null : <Warning api={this.props.api}/>}
               <Balance api={this.props.api} state={this.props.state} network={this.props.network}/>
               <Transactions state={this.props.state} network={this.props.network}/>

pkg/btc-wallet/src/js/components/lib/header.js

@@ -17,6 +17,23 @@ export default class Header extends Component {
     let icon      = this.props.settings ? "X" : "Adjust";
     let iconColor = this.props.settings ? "black" : "orange";
     let iconLink  = this.props.settings ? "/~btc" : "/~btc/settings";
+
+    let connection = null;
+    let badge = null;
+    if (!(this.props.state.provider && this.props.state.provider.connected)) {
+      connection =
+        <Text fontSize={1} color="red" fontWeight="bold" mr={3}>
+          Provider Offline
+        </Text>
+
+      if (!this.props.settings) {
+        badge = <Box borderRadius="50%" width="8px" height="8px" backgroundColor="red" position="absolute" top="0px" right="0px"></Box>
+
+      }
+    }
+
+
+
     return (
       <Row
         height={8}
@@ -40,16 +57,21 @@ export default class Header extends Component {
             Bitcoin
           </Text>
         </Row>
-        <Link to={iconLink}>
-          <Box backgroundColor="white"
-            borderRadius={4}
-            width={5}
-            height={5}
-            p={2}
-          >
-            <Icon icon={icon} color={iconColor} />
-          </Box>
-        </Link>
+        <Row alignItems="center">
+          {connection}
+          <Link to={iconLink}>
+            <Box backgroundColor="white"
+              borderRadius={4}
+              width={5}
+              height={5}
+              p={2}
+              position="relative"
+            >
+              {badge}
+              <Icon icon={icon} color={iconColor} />
+            </Box>
+          </Link>
+        </Row>
       </Row>
     );
   }

pkg/btc-wallet/src/js/components/lib/settings.js

@@ -26,11 +26,17 @@ export default class Settings extends Component {
   }
 
   render() {
-    let conn = 'Not Connected'
+    let connColor = "red";
+    let connBackground = "veryLightRed";
+    let conn = 'Offline'
     let host = '';
     if (this.props.state.provider){
       if (this.props.state.provider.connected) conn = 'Connected';
       if (this.props.state.provider.host) host = this.props.state.provider.host;
+      if (this.props.state.provider.connected && this.props.state.provider.host) {
+        connColor = "orange";
+        connBackground = "lightOrange";
+      }
     }
 
     return (
@@ -85,14 +91,14 @@ export default class Settings extends Component {
           py={5}
           px="36px"
           borderRadius="12px"
-          backgroundColor="lightOrange"
+          backgroundColor={connBackground}
           alignItems="center"
           justifyContent="space-between"
         >
-          <Text fontSize={1} color="orange" mono>
+          <Text fontSize={1} color={connColor} mono>
             ~{host}
           </Text>
-          <Text fontSize={0} color="orange">
+          <Text fontSize={0} color={connColor}>
             {conn}
           </Text>
         </Col>