chat: resize sigils to 32px, container to 60px
fixes urbit/landscape#588
@@ -11,7 +11,8 @@ import {
Text,
BaseImage,
ColProps,
- Icon
+ Icon,
+ Center
} from '@tlon/indigo-react';
import RichText from './RichText';
import { ProfileStatus } from './ProfileStatus';
@@ -44,16 +45,19 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
onDismiss,
...rest
} = props;
- const hideAvatars = useSettingsState(state => state.calm.hideAvatars);
- const hideNicknames = useSettingsState(state => state.calm.hideNicknames);
+ const hideAvatars = useSettingsState((state) => state.calm.hideAvatars);
+ const hideNicknames = useSettingsState((state) => state.calm.hideNicknames);
const popoverRef = useRef<typeof Col>(null);
- const onDocumentClick = useCallback((event) => {
+ const onDocumentClick = useCallback(
+ (event) => {
if (!popoverRef.current || popoverRef?.current?.contains(event.target)) {
return;
}
onDismiss();
- }, [onDismiss, popoverRef]);
+ },
+ [onDismiss, popoverRef]
+ );
useEffect(() => {
document.addEventListener('mousedown', onDocumentClick);
@@ -62,7 +66,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
return () => {
document.removeEventListener('mousedown', onDocumentClick);
document.removeEventListener('touchstart', onDocumentClick);
- }
+ };
}, [onDocumentClick]);
let top, bottom;
@@ -82,16 +86,20 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
const img =
contact?.avatar && !hideAvatars ? (
<BaseImage
- referrerPolicy="no-referrer"
+ referrerPolicy='no-referrer'
display='inline-block'
style={{ objectFit: 'cover' }}
src={contact.avatar}
- height={72}
- width={72}
+ height={60}
+ width={60}
borderRadius={2}
/>
) : (
- <Sigil ship={ship} size={72} color={color} />
+ <Box size={60} backgroundColor={color}>
+ <Center height={60}>
+ <Sigil ship={ship} size={32} color={color} />
+ </Center>
+ </Box>
);
const showNickname = useShowNickname(contact, hideNicknames);
@@ -126,7 +134,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
</Row>
<Box
alignSelf='center'
- height='72px'
+ height='60px'
cursor='pointer'
onClick={() => history.push(`/~profile/~${ship}`)}
overflow='hidden'
@@ -156,11 +164,7 @@ const ProfileOverlay = (props: ProfileOverlayProps) => {
</Text>
</Row>
{isOwn ? (
- <ProfileStatus
- api={props.api}
- ship={`~${ship}`}
- contact={contact}
- />
+ <ProfileStatus api={props.api} ship={`~${ship}`} contact={contact} />
) : (
<RichText
display='inline-block'
