links: simplify comment-item component

pkg/interface/src/views/apps/links/components/lib/comment-item.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { Sigil } from '../../../../../logic/lib/sigil';
 import { cite } from '../../../../../logic/lib/util';
 import moment from 'moment';
+import { Box, Text, Row } from '@tlon/indigo-react';
 
 export class CommentItem extends Component {
   constructor(props) {
@@ -33,36 +34,30 @@ export class CommentItem extends Component {
   render() {
     const props = this.props;
 
-    const member = props.member || false;
-
-    const pending = props.pending ? 'o-60' : '';
-
     const img = (props.avatar)
       ? <img src={props.avatar} height={36} width={36} className="dib" />
       : <Sigil
         ship={'~' + props.ship}
         size={36}
         color={'#' + props.color}
-        classes={(member ? 'mix-blend-diff' : '')}
+        classes={(props.member ? 'mix-blend-diff' : '')}
         />;
 
     return (
-      <div className={'w-100 pv3 ' + pending}>
-        <div className="flex bg-white bg-gray0-d">
+      <Box width="100%" py={3} opacity={props.pending ? '0.6' : '1'}>
+        <Row backgroundColor='white'>
           {img}
-          <p className="gray2 f9 flex items-center ml2">
-            <span className={'black white-d ' + props.nameClass}
-            title={props.ship}
-            >
+          <Row fontSize={0} alignItems="center" ml={2}>
+            <Text mono={!props.hasNickname} title={props.ship}>
               {props.nickname ? props.nickname : cite(props.ship)}
-            </span>
-            <span className="ml2">
+            </Text>
+            <Text gray ml={2}>
               {this.state.timeSinceComment}
-            </span>
-          </p>
-        </div>
-        <p className="inter f8 pv3 white-d">{props.content}</p>
-      </div>
+            </Text>
+          </Row>
+        </Row>
+        <Text display="block" py={3} fontSize={1}>{props.content}</Text>
+      </Box>
     );
   }
 }

pkg/interface/src/views/apps/links/components/lib/comments.js

@@ -51,8 +51,6 @@ export class Comments extends Component {
 
       const { nickname, color, member, avatar } = getContactDetails(contacts[ship]);
 
-      const nameClass = nickname ? 'inter' : 'mono';
-
       return(
         <CommentItem
           key={time}
@@ -60,10 +58,10 @@ export class Comments extends Component {
           time={time}
           content={udon}
           nickname={nickname}
-          nameClass={nameClass}
+          hasNickname={Boolean(nickname)}
           color={color}
           avatar={avatar}
-          member={member}
+          member={member || false}
         />
       );
     });