chat: fix and standardize font size

pkg/interface/src/views/apps/chat/components/ChatMessage.tsx

@@ -1,7 +1,7 @@
 import React, { Component, PureComponent } from "react";
 import moment from "moment";
 import _ from "lodash";
-import { Box } from "@tlon/indigo-react";
+import { Box, Row, Text } from "@tlon/indigo-react";
 
 import { OverlaySigil } from './overlay-sigil';
 import { uxToHex, cite, writeText } from '~/logic/lib/util';
@@ -96,8 +96,8 @@ export default class ChatMessage extends Component<ChatMessageProps> {
     const dayBreak = nextMsg && new Date(msg.when).getDate() !== new Date(nextMsg.when).getDate();
 
     const containerClass = `${renderSigil
-      ? `f9 w-100 flex flex-wrap cf pr3 pt4 pl3 lh-copy`
-      : `f9 w-100 flex flex-wrap items-center cf pr3 hide-child`} ${isPending ? 'o-40' : ''} ${isLastMessage ? 'pb3' : ''} ${className}`
+      ? `cf pt2 pl3 lh-copy`
+      : `items-center cf hide-child`} ${isPending ? 'o-40' : ''} ${className}`
 
     const timestamp = moment.unix(msg.when / 1000).format(renderSigil ? 'hh:mm a' : 'hh:mm');
 
@@ -129,15 +129,25 @@ export default class ChatMessage extends Component<ChatMessageProps> {
     };
 
     return (
-      <div ref={this.divRef} className={containerClass} style={style} data-number={msg.number}>
+      <Box
+        width='100%'
+        display='flex'
+        flexWrap='wrap'
+        pr={3}
+        pb={isLastMessage ? 3 : 0}
+        ref={this.divRef}
+        className={containerClass}
+        style={style}
+        data-number={msg.number}
+      >
         {dayBreak && !isLastRead ? <DayBreak when={msg.when} /> : null}
         {renderSigil
           ? <MessageWithSigil {...messageProps} />
           : <MessageWithoutSigil {...messageProps} />}
-        <Box fontSize='0' position='relative' width='100%' overflow='visible' style={unreadContainerStyle}>{isLastRead
+        <Box fontSize={0} position='relative' width='100%' overflow='visible' style={unreadContainerStyle}>{isLastRead
           ? <UnreadMarker dayBreak={dayBreak} when={msg.when} ref={unreadMarkerRef} />
           : null}</Box>
-      </div>
+      </Box>
     );
   }
 }
@@ -210,25 +220,32 @@ export class MessageWithSigil extends PureComponent<MessageProps> {
           allStations={allStations}
           history={history}
           api={api}
-          className="fl pr3 v-top bg-white bg-gray0-d"
+          className="fl pr3 v-top bg-white bg-gray0-d pt1"
         />
-        <div className="fr f8 clamp-message white-d" style={{ flexGrow: 1, marginTop: -12 }}>
-          <div className="hide-child" style={{ paddingTop: '8px' }}>
-            <p className="v-mid f9 black white-d dib mr3 c-default">
-              <span
-                className={`mw5 db truncate pointer ${showNickname ? '' : 'mono'}`}
-                ref={e => nameSpan = e}
-                onClick={() => {
-                  writeText(msg.author);
-                  copyNotice(name);
-                }}
-                title={`~${msg.author}`}
-              >{name}</span>
-            </p>
-            <p className="v-mid mono f9 gray2 dib">{timestamp}</p>
-            <p className="v-mid mono f9 gray2 dib ml2 child dn-s">{datestamp}</p>
-          </div>
-          <MessageContent content={msg.letter} remoteContentPolicy={remoteContentPolicy} measure={measure} />
+        <div className="clamp-message" style={{ flexGrow: 1 }}>
+          <Box
+            className="hide-child"
+            pt={1}
+            pb={1}
+            display='flex'
+            alignItems='center'
+          >
+            <Text
+              fontSize={0}
+              mr={3}
+              mono={!showNickname}
+              className={`mw5 db truncate pointer`}
+              ref={e => nameSpan = e}
+              onClick={() => {
+                writeText(msg.author);
+                copyNotice(name);
+              }}
+              title={`~${msg.author}`}
+            >{name}</Text>
+            <Text gray mono className="v-mid">{timestamp}</Text>
+            <Text gray mono ml={2} className="v-mid child dn-s">{datestamp}</Text>
+          </Box>
+          <Box fontSize={1}><MessageContent content={msg.letter} remoteContentPolicy={remoteContentPolicy} measure={measure} /></Box>
         </div>
       </>
     );
@@ -238,9 +255,9 @@ export class MessageWithSigil extends PureComponent<MessageProps> {
 export const MessageWithoutSigil = ({ timestamp, msg, remoteContentPolicy, measure }) => (
   <>
     <p className="child pr1 mono f9 gray2 dib">{timestamp}</p>
-    <div className="fr f8 clamp-message white-d pr3 lh-copy" style={{ flexGrow: 1 }}>
+    <Box fontSize={1} className="clamp-message" style={{ flexGrow: 1 }}>
       <MessageContent content={msg.letter} remoteContentPolicy={remoteContentPolicy} measure={measure}/>
-    </div>
+    </Box>
   </>
 );
 
@@ -249,17 +266,19 @@ export const MessageContent = ({ content, remoteContentPolicy, measure }) => {
     return <CodeContent content={content} />;
   } else if ('url' in content) {
     return (
-      <RemoteContent
-        url={content.url}
-        remoteContentPolicy={remoteContentPolicy}
-        onLoad={measure}
-        imageProps={{style: {
+      <Text fontSize={1} lineHeight="tall">
+        <RemoteContent
+          url={content.url}
+          remoteContentPolicy={remoteContentPolicy}
+          onLoad={measure}
+          imageProps={{style: {
+              maxWidth: '18rem'
+          }}}
+          videoProps={{style: {
             maxWidth: '18rem'
-        }}}
-        videoProps={{style: {
-          maxWidth: '18rem'
-        }}}
-      />
+          }}}
+        />
+      </Text>
     );
   } else if ('me' in content) {
     return (

pkg/interface/src/views/apps/chat/components/ChatWindow.tsx

@@ -75,7 +75,6 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
     this.handleWindowFocus = this.handleWindowFocus.bind(this);
     this.stayLockedIfActive = this.stayLockedIfActive.bind(this);
     this.dismissIfLineVisible = this.dismissIfLineVisible.bind(this);
-    this.lastRead = this.lastRead.bind(this);
     
     this.virtualList = null;
     this.unreadMarkerRef = React.createRef();
@@ -125,7 +124,7 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
   }
 
   componentDidUpdate(prevProps: ChatWindowProps, prevState) {
-    const { isChatMissing, history, envelopes, mailboxSize, stationPendingMessages, unreadCount } = this.props;
+    const { isChatMissing, history, envelopes, mailboxSize, stationPendingMessages, unreadCount, station } = this.props;
 
     if (isChatMissing) {
       history.push("/~404");
@@ -151,6 +150,14 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
     if (!this.state.fetchPending && prevState.fetchPending) {
       this.virtualList?.calculateVisibleItems();
     }
+
+    if (station !== prevProps.station) {
+      this.virtualList?.resetScroll();
+      this.scrollToUnread();
+      this.setState({
+        lastRead: unreadCount ? mailboxSize - unreadCount : Infinity,
+      });
+    }
   }
 
   stayLockedIfActive() {
@@ -196,11 +203,6 @@ export default class ChatWindow extends Component<ChatWindowProps, ChatWindowSta
       });
   }
 
-  lastRead() {
-    const { mailboxSize, unreadCount } = this.props;
-    return mailboxSize - unreadCount;
-  }
-
   onScroll({ scrollTop, scrollHeight, windowHeight }) {
     if (!this.state.idle && scrollTop > IDLE_THRESHOLD) {
       this.setState({ idle: true });

pkg/interface/src/views/apps/chat/components/content/text.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import ReactMarkdown from 'react-markdown';
 import RemarkDisableTokenizers from 'remark-disable-tokenizers';
 import urbitOb from 'urbit-ob';
-import { Box } from '@tlon/indigo-react';
+import { Box, Text } from '@tlon/indigo-react';
 
 const DISABLED_BLOCK_TOKENS = [
   'indentedCode',
@@ -63,17 +63,19 @@ export default class TextContent extends Component {
       && (urbitOb.isValidPatp(group[2]) // valid patp?
       && (group[0] === content.text))) { // entire message is room name?
       return (
-        <Link
-          className="bb b--black b--white-d f8 mono lh-copy v-top"
-          to={'/~landscape/join/' + group.input}>
-          {content.text}
-        </Link>
+        <Text fontSize={1} lineHeight="tall">
+          <Link
+            className="bb b--black b--white-d mono"
+            to={'/~landscape/join/' + group.input}>
+            {content.text}
+          </Link>
+        </Text>
       );
     } else {
       return (
-        <Box fontSize='1' color='darkGray' style={{ overflowWrap: 'break-word' }}>
+        <Text fontSize={1} lineHeight="tall" style={{ overflowWrap: 'break-word' }}>
           <MessageMarkdown source={content.text} />
-        </Box>
+        </Text>
       );
     }
   }