diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx index d56c284258..c9e37b9603 100644 --- a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx +++ b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx @@ -226,6 +226,7 @@ export const MessageAuthor = ({ api, associations, groups, + history, scrollWindow, ...rest }) => { @@ -237,10 +238,7 @@ export const MessageAuthor = ({ const contact = `~${msg.author}` in contacts ? contacts[`~${msg.author}`] : false; const showNickname = useShowNickname(contact); - const { hideAvatars } = - useLocalState(({ hideAvatars }) => - ({ hideAvatars }) - ); + const { hideAvatars } = useLocalState(({ hideAvatars }) => ({ hideAvatars })); const shipName = showNickname ? contact.nickname : cite(msg.author); const copyNotice = 'Copied'; const color = contact @@ -276,7 +274,8 @@ export const MessageAuthor = ({ return () => clearTimeout(timer); }, [shipName, displayName]); - const img = contact?.avatar && !hideAvatars ? ( + const img = + contact?.avatar && !hideAvatars ? ( {showOverlay && ( { writeText(`~${msg.author}`); showCopyNotice(); diff --git a/pkg/interface/src/views/components/ProfileOverlay.tsx b/pkg/interface/src/views/components/ProfileOverlay.tsx index 0b3167b8e7..fbdf242823 100644 --- a/pkg/interface/src/views/components/ProfileOverlay.tsx +++ b/pkg/interface/src/views/components/ProfileOverlay.tsx @@ -1,5 +1,4 @@ import React, { PureComponent } from 'react'; - import { Contact, Group } from '@urbit/api'; import { cite, useShowNickname } from '~/logic/lib/util'; import { Sigil } from '~/logic/lib/sigil'; @@ -34,7 +33,10 @@ type ProfileOverlayProps = ColProps & { api: any; }; -class ProfileOverlay extends PureComponent> { +class ProfileOverlay extends PureComponent< + ProfileOverlayProps, + Record +> { public popoverRef: React.Ref; constructor(props) { @@ -92,76 +94,101 @@ class ProfileOverlay extends PureComponent - : ; + const img = + contact?.avatar && !hideAvatars ? ( + + ) : ( + + ); const showNickname = useShowNickname(contact, hideNicknames); return ( - - {(!isOwn) && ( - history.push(`/~landscape/dm/${ship}`)} /> + + {!isOwn && ( + history.push(`/~landscape/dm/${ship}`)} + /> )} history.push(`/~profile/~${ship}`)} + overflow='hidden' + borderRadius={2} > {img} - - + + {showNickname ? contact?.nickname : cite(ship)} - { isOwn ? ( + {isOwn ? ( ) : ( - + {contact?.status ? contact.status : ''} - ) - } + )} ); diff --git a/pkg/interface/src/views/components/ProfileStatus.js b/pkg/interface/src/views/components/ProfileStatus.js index 007b2539b5..d0f617fecf 100644 --- a/pkg/interface/src/views/components/ProfileStatus.js +++ b/pkg/interface/src/views/components/ProfileStatus.js @@ -1,16 +1,11 @@ -import React, { - useState, - useCallback, - useEffect -} from 'react'; +import React, { useState, useCallback, useEffect } from 'react'; import { Row, Button, StatelessTextInput as Input, Text -} from "@tlon/indigo-react"; - +} from '@tlon/indigo-react'; export const ProfileStatus = (props) => { const { contact, ship, api, callback } = props; @@ -29,7 +24,7 @@ export const ProfileStatus = (props) => { }, [contact]); const editStatus = () => { - api.contacts.edit(ship, {status: _status}); + api.contacts.edit(ship, { status: _status }); setNotice('Success!'); setTimeout(() => { @@ -43,13 +38,13 @@ export const ProfileStatus = (props) => { return ( <> - + { if (evt.key === 'Enter') { editStatus(); @@ -60,7 +55,15 @@ export const ProfileStatus = (props) => { }} /> - {notice} + + {notice} + ); };