From 094ede67d8f76782c7514bd26954990b96a4791b Mon Sep 17 00:00:00 2001
From: James Acklin <james.acklin@gmail.com>
Date: Sat, 20 Feb 2021 18:27:18 -0500
Subject: [PATCH] interface: fixes miniprofile layout, restores actions

Fixes urbit/landscape#461
---
 .../apps/chat/components/ChatMessage.tsx      | 12 +--
 .../src/views/components/ProfileOverlay.tsx   | 93 ++++++++++++-------
 .../src/views/components/ProfileStatus.js     | 29 +++---
 3 files changed, 82 insertions(+), 52 deletions(-)

diff --git a/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx b/pkg/interface/src/views/apps/chat/components/ChatMessage.tsx
index dd1cfea7f5..c2e93529ce 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 ? (
       <BaseImage
         display='inline-block'
         src={contact.avatar}
@@ -307,6 +306,7 @@ export const MessageAuthor = ({
       >
         {showOverlay && (
           <OverlaySigil
+            cursor='auto'
             ship={msg.author}
             contact={contact}
             color={`#${uxToHex(contact?.color ?? '0x0')}`}
@@ -335,7 +335,7 @@ export const MessageAuthor = ({
             flexShrink={0}
             mono={nameMono}
             fontWeight={nameMono ? '400' : '500'}
-            className={'pointer'}
+            cursor='pointer'
             onClick={() => {
               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<ProfileOverlayProps, Record<string, never>> {
+class ProfileOverlay extends PureComponent<
+  ProfileOverlayProps,
+  Record<string, never>
+> {
   public popoverRef: React.Ref<typeof Col>;
 
   constructor(props) {
@@ -92,76 +94,101 @@ class ProfileOverlay extends PureComponent<ProfileOverlayProps, Record<string, n
 
     const isOwn = window.ship === ship;
 
-    const img = contact?.avatar && !hideAvatars
-      ? <BaseImage display='inline-block' src={contact.avatar} height={72} width={72} className="brt2" />
-      : <Sigil
-        ship={ship}
-        size={72}
-        color={color}
-        classes="brt2"
-        svgClass="brt2"
-        />;
+    const img =
+      contact?.avatar && !hideAvatars ? (
+        <BaseImage
+          display='inline-block'
+          src={contact.avatar}
+          height={72}
+          width={72}
+          borderRadius={2}
+        />
+      ) : (
+        <Sigil ship={ship} size={72} color={color} />
+      );
     const showNickname = useShowNickname(contact, hideNicknames);
 
     return (
       <Col
         ref={this.popoverRef}
-        backgroundColor="white"
-        color="washedGray"
+        backgroundColor='white'
+        color='washedGray'
         border={1}
         borderRadius={2}
-        borderColor="lightGray"
-        boxShadow="0px 0px 0px 3px"
+        borderColor='lightGray'
+        boxShadow='0px 0px 0px 3px'
         position='absolute'
         zIndex='3'
         fontSize='0'
-        height="250px"
-        width="250px"
+        height='250px'
+        width='250px'
         padding={3}
-        justifyContent="space-between"
+        justifyContent='center'
         style={containerStyle}
         {...rest}
       >
-        <Row color='black' width='100%' height="3rem">
-          {(!isOwn) && (
-          <Icon icon="Chat" size={16} onClick={() => history.push(`/~landscape/dm/${ship}`)} />
+        <Row color='black' padding={3} position='absolute' top={0} left={0}>
+          {!isOwn && (
+            <Icon
+              icon='Chat'
+              size={16}
+              cursor='pointer'
+              onClick={() => history.push(`/~landscape/dm/${ship}`)}
+            />
           )}
         </Row>
         <Box
-          alignSelf="center"
-          height="72px"
+          alignSelf='center'
+          height='72px'
+          cursor='pointer'
           onClick={() => history.push(`/~profile/~${ship}`)}
+          overflow='hidden'
+          borderRadius={2}
         >
           {img}
         </Box>
-        <Col alignItems="end" justifyContent="flex-end" overflow="hidden" minWidth='0'>
-          <Row width="100%" >
+        <Col
+          position='absolute'
+          overflow='hidden'
+          minWidth='0'
+          width='100%'
+          padding={3}
+          bottom={0}
+          left={0}
+        >
+          <Row width='100%'>
             <Text
               fontWeight='600'
               mono={!showNickname}
               textOverflow='ellipsis'
               overflow='hidden'
               whiteSpace='pre'
-              lineHeight="tall"
+              marginBottom='0'
             >
               {showNickname ? contact?.nickname : cite(ship)}
             </Text>
           </Row>
-          { isOwn ? (
+          {isOwn ? (
             <ProfileStatus
               api={this.props.api}
               ship={`~${ship}`}
               contact={contact}
             />
           ) : (
-              <RichText display='inline-block' width='100%' minWidth='0' textOverflow='ellipsis'
-                overflow='hidden'
-                whiteSpace='pre'
-                lineHeight="tall" disableRemoteContent gray>
+            <RichText
+              display='inline-block'
+              width='100%'
+              minWidth='0'
+              textOverflow='ellipsis'
+              overflow='hidden'
+              whiteSpace='pre'
+              marginBottom='0'
+              disableRemoteContent
+              gray
+            >
               {contact?.status ? contact.status : ''}
             </RichText>
-          )
-          }
+          )}
         </Col>
       </Col>
     );
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 (
     <>
-      <Row width="100%" mt={3} mr={3} display="block">
+      <Row width='100%' mt={1}>
         <Input
           onChange={onStatusChange}
           value={_status}
-          autocomplete="off"
-          width="100%"
-          placeholder="Set Status"
+          autocomplete='off'
+          width='100%'
+          placeholder='Set Status'
           onKeyPress={(evt) => {
             if (evt.key === 'Enter') {
               editStatus();
@@ -60,7 +55,15 @@ export const ProfileStatus = (props) => {
           }}
         />
       </Row>
-      <Text display={notice !== ' ' ? 'block' : 'none'} mt={1} ml={1} whiteSpace="pre" gray>{notice}</Text>
+      <Text
+        display={notice !== ' ' ? 'block' : 'none'}
+        mt={1}
+        ml={1}
+        whiteSpace='pre'
+        gray
+      >
+        {notice}
+      </Text>
     </>
   );
 };