interface: indigo-react tabbar

pkg/interface/src/views/components/chat-link-tabbar.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import { Box } from '@tlon/indigo-react';
+
 export const TabBar = (props) => {
   const {
     location,
     settings,
-    popoutHref
   } = props;
-  let setColor = '', popout = '';
+  let setColor = '';
 
   if (location.pathname.includes('/settings')) {
     setColor = 'black white-d';
@@ -15,28 +16,15 @@ export const TabBar = (props) => {
     setColor = 'gray3';
   }
 
-  const hidePopoutIcon = (popout)
-    ? 'dn-m dn-l dn-xl' : 'dib-m dib-l dib-xl';
-
   return (
-    <div className="dib flex-shrink-0 flex-grow-1">
-      <div className={'dib pt2 f9 pl6 pr6 lh-solid'}>
+    <Box display='inline-block' flexShrink='0' flexGrow='1'>
+      <Box display='inline-block' pt='9px' fontSize='0' pl='16px' pr='6'>
         <Link
           className={'no-underline ' + setColor}
           to={settings}>
           Settings
         </Link>
-      </div>
-      <a href={popoutHref} rel="noopener noreferrer"
-         target="_blank"
-         className="dib fr pr1"
-         style={{ paddingTop: '8px' }}>
-        <img
-          className={'flex-shrink-0 pr3 dn ' + hidePopoutIcon}
-          src="/~chat/img/popout.png"
-          height="16"
-          width="16" />
-      </a>
-    </div>
+      </Box>
+    </Box>
   );
 };