Merge pull request #4644 from urbit/james/chat-unread

chat: new unread message style

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-import { Box, Text } from '@tlon/indigo-react';
+import { Box, Text, Center, Icon } from '@tlon/indigo-react';
 import VisibilitySensor from 'react-visibility-sensor';
 
 import Timestamp from '~/views/components/Timestamp';
@@ -8,51 +8,67 @@ import Timestamp from '~/views/components/Timestamp';
 export const UnreadNotice = (props) => {
   const { unreadCount, unreadMsg, dismissUnread, onClick } = props;
 
-  if (!unreadMsg || (unreadCount === 0)) {
+  if (!unreadMsg || unreadCount === 0) {
     return null;
   }
 
   const stamp = moment.unix(unreadMsg.post['time-sent'] / 1000);
 
-  let datestamp = moment.unix(unreadMsg.post['time-sent'] / 1000).format('YYYY.M.D');
-  const timestamp = moment.unix(unreadMsg.post['time-sent'] / 1000).format('HH:mm');
+  let datestamp = moment
+    .unix(unreadMsg.post['time-sent'] / 1000)
+    .format('YYYY.M.D');
+  const timestamp = moment
+    .unix(unreadMsg.post['time-sent'] / 1000)
+    .format('HH:mm');
 
   if (datestamp === moment().format('YYYY.M.D')) {
     datestamp = null;
   }
 
   return (
-    <Box style={{ left: '0px', top: '0px' }}
-      p='4'
+    <Box
+      style={{ left: '0px', top: '0px' }}
+      p='12px'
       width='100%'
       position='absolute'
       zIndex='1'
       className='unread-notice'
     >
+      <Center>
+        <Box backgroundColor='white' borderRadius='2'>
           <Box
-        backgroundColor='white'
+            backgroundColor='washedBlue'
             display='flex'
             alignItems='center'
             p='2'
             fontSize='0'
             justifyContent='space-between'
-        borderRadius='1'
+            borderRadius='3'
             border='1'
-        borderColor='blue'>
-        <Text flexShrink='1' textOverflow='ellipsis' whiteSpace='pre' overflow='hidden' display='flex' cursor='pointer' onClick={onClick}>
-          {unreadCount} new message{unreadCount > 1 ? 's' : ''} since{' '}
-          <Timestamp stamp={stamp} color='blue' date={true} fontSize={1} />
-        </Text>
+            borderColor='lightBlue'
+          >
             <Text
+              textOverflow='ellipsis'
+              whiteSpace='pre'
+              overflow='hidden'
+              display='flex'
+              cursor='pointer'
+              onClick={onClick}
+            >
+              {unreadCount} new message{unreadCount > 1 ? 's' : ''} since{' '}
+              <Timestamp stamp={stamp} color='black' date={true} fontSize={1} />
+            </Text>
+            <Icon
+              icon='X'
               ml='4'
-          color='blue'
+              color='black'
               cursor='pointer'
               textAlign='right'
-          flexShrink='0'
-          onClick={dismissUnread}>
-          Mark as Read
-        </Text>
+              onClick={dismissUnread}
+            />
           </Box>
         </Box>
+      </Center>
+    </Box>
   );
-}
+};

pkg/interface/src/views/components/Timestamp.tsx

@@ -11,20 +11,24 @@ export type TimestampProps = BoxProps & {
   stamp: MomentType;
   date?: boolean;
   time?: boolean;
-}
+};
 
 const Timestamp = (props: TimestampProps): ReactElement | null => {
   const { stamp, date, time, color, fontSize, ...rest } = {
-    time: true, color: 'gray', fontSize: 0, ...props
+    time: true,
+    color: 'gray',
+    fontSize: 0,
+    ...props
   };
   if (!stamp) return null;
-  const { hovering, bind } = date === true
-    ? { hovering: true, bind: {} }
-    : useHovering();
+  const { hovering, bind } =
+    date === true ? { hovering: true, bind: {} } : useHovering();
   let datestamp = stamp.format(DateFormat);
   if (stamp.format(DateFormat) === moment().format(DateFormat)) {
     datestamp = 'Today';
-  } else if (stamp.format(DateFormat) === moment().subtract(1, 'day').format(DateFormat)) {
+  } else if (
+    stamp.format(DateFormat) === moment().subtract(1, 'day').format(DateFormat)
+  ) {
     datestamp = 'Yesterday';
   }
   const timestamp = stamp.format(TimeFormat);
@@ -33,22 +37,28 @@ const Timestamp = (props: TimestampProps): ReactElement | null=> {
       {...bind}
       display='flex'
       flex='row'
-      flexWrap="nowrap"
+      flexWrap='nowrap'
       {...rest}
       title={stamp.format(DateFormat + ' ' + TimeFormat)}
     >
-      {time && <Text flexShrink={0} color={color} fontSize={fontSize}>{timestamp}</Text>}
-      {date !== false && <Text
+      {time && (
+        <Text flexShrink={0} color={color} fontSize={fontSize}>
+          {timestamp}
+        </Text>
+      )}
+      {date !== false && (
+        <Text
           flexShrink={0}
           color={color}
           fontSize={fontSize}
-        ml={time ? 2 : 0}
           display={time ? ['none', hovering ? 'block' : 'none'] : 'block'}
         >
+          {time ? '\u00A0' : ''}
           {datestamp}
-      </Text>}
+        </Text>
+      )}
     </Box>
-  )
-}
+  );
+};
 
 export default Timestamp;