chat: indigo-react unread notice

pkg/interface/src/views/apps/chat/components/lib/unread-notice.js

@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React from 'react';
 import moment from 'moment';
+import { Box, Text } from '@tlon/indigo-react';
 
 export const UnreadNotice = (props) => {
   const { unreadCount, unreadMsg, dismissUnread, onClick } = props;
@@ -16,26 +17,41 @@ export const UnreadNotice = (props) => {
   }
 
   return (
-    <div style={{ left: '0px' }}
+    <Box style={{ left: '0px' }}
-         className="pa4 w-100 absolute z-1 unread-notice">
+      p='4'
-      <div className={
+      width='100%'
-        "ba b--green2 green2 bg-white bg-gray0-d flex items-center " +
+      position='absolute'
-        "pa2 f9 justify-between br1"
+      zIndex='1'
-      }>
+      className='unread-notice'
-        <p className="lh-copy db pointer" onClick={onClick}>
+    >
+      <Box
+        backgroundColor='white'
+        display='flex'
+        alignItems='center'
+        p='2'
+        fontSize='0'
+        justifyContent='space-between'
+        borderRadius='1'
+        border='1'
+        borderColor='blue'>
+        <Text flexShrink='0' display='block' cursor='pointer' onClick={onClick}>
           {unreadCount} new messages since{' '}
           {datestamp && (
             <>
-              <span className="green3">~{datestamp}</span> at{' '}
+              <Text color='blue'>~{datestamp}</Text> at{' '}
             </>
           )}
-          <span className="green3">{timestamp}</span>
+          <Text color='blue'>{timestamp}</Text>
-        </p>
+        </Text>
-        <div onClick={dismissUnread}
+        <Text
-             className="ml4 inter b--green2 pointer tr lh-copy">
+          ml='4'
+          color='blue'
+          cursor='pointer'
+          textAlign='right'
+          onClick={dismissUnread}>
           Mark as Read
-        </div>
+        </Text>
-      </div>
+      </Box>
-    </div>
+    </Box>
   );
 }