statusBar: rewrite in indigo, lineHeight tweaks

pkg/interface/src/views/components/ReconnectButton.js

@@ -14,7 +14,8 @@ const ReconnectButton = ({ connection, subscription }) => {
         display='inline-block'
         color='red'
         border={1}
-        lineHeight='min'
+        verticalAlign="middle"
+        lineHeight='0'
         borderRadius={2}
         style={{ cursor: 'pointer' }}
         onClick={reconnect}>
@@ -29,7 +30,8 @@ const ReconnectButton = ({ connection, subscription }) => {
           ml={4}
           px={2}
           py={1}
-          lineHeight="min"
+          lineHeight="0"
+          verticalAlign="middle"
           display='inline-block'
           color='yellow'
           border={1}

pkg/interface/src/views/components/StatusBar.js

@@ -1,15 +1,12 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import { Box, Text, Icon } from '@tlon/indigo-react';
+import { Row, Box, Text, Icon } from '@tlon/indigo-react';
 import ReconnectButton from './ReconnectButton';
 
 const StatusBar = (props) => {
   const location = useLocation();
   const atHome = Boolean(location.pathname === '/');
 
-  const display = (!window.location.href.includes('popout/'))
-      ? 'db' : 'dn';
-
   const invites = (props.invites && props.invites['/contacts'])
     ? props.invites['/contacts']
     : {};
@@ -28,28 +25,32 @@ const StatusBar = (props) => {
   );
 
   return (
-    <div
-      className={
-        'bg-white bg-gray0-d w-100 justify-between relative tc pt3 ' + display
-      }
-      style={{ height: 45 }}>
-      <div className='absolute left-0 pl4' style={{ top: 10 }}>
+    <Row
+    height="45px"
+    backgroundColor="white"
+    width="100%"
+    justifyContent="space-between"
+    pt="10px"
+    display={(window.location.href.includes('popout/') ? 'none' : 'flex')}>
+      <Box pl={3} display="inline-block">
         {atHome ? null : (
           <Box
             style={{ cursor: 'pointer' }}
             display='inline-block'
             borderRadius={2}
+            verticalAlign="middle"
+            lineHeight="0"
             color='washedGray'
             border={1}
-            py={1}
+            py="6px"
             px={2}
             mr={2}
             onClick={() => props.history.push('/')}>
             <img
               className='invert-d'
               src='/~landscape/img/icon-home.png'
-              height='12'
-              width='12'
+              height='11'
+              width='11'
             />
           </Box>
         )}
@@ -58,8 +59,9 @@ const StatusBar = (props) => {
           borderRadius={2}
           color='washedGray'
           display='inline-block'
+          verticalAlign='middle'
+          lineHeight="0"
           style={{ cursor: 'pointer' }}
-          lineHeight='min'
           py={1}
           px={2}
           onClick={() => props.api.local.setOmnibox()}>
@@ -77,14 +79,15 @@ const StatusBar = (props) => {
           connection={props.connection}
           subscription={props.subscription}
         />
-      </div>
-      <div className='fl absolute relative right-0 pr4' style={{ top: 10 }}>
+      </Box>
+      <Box position="relative" pr={3} display="inline-block">
         <Box
           style={{ cursor: 'pointer' }}
           display='inline-block'
           borderRadius={2}
           color='washedGray'
-          lineHeight='min'
+          verticalAlign="middle"
+          lineHeight='0'
           border={1}
           px={2}
           py={1}
@@ -92,14 +95,14 @@ const StatusBar = (props) => {
           <img
             className='invert-d v-mid mr1'
             src='/~landscape/img/groups.png'
-            height='16'
-            width='16'
+            height='15'
+            width='15'
           />
           {Notification}
           <Text ml={1}>Groups</Text>
         </Box>
-      </div>
-    </div>
+      </Box>
+    </Row>
   );
 };