profile: design tweaks

pkg/interface/src/views/apps/profile/components/Profile.tsx

@@ -1,16 +1,10 @@
 import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import {
-  Center,
-  Box,
-  Row,
-  BaseImage,
-  Text
-} from "@tlon/indigo-react";
+import { Center, Box, Row, BaseImage, Text } from '@tlon/indigo-react';
 
-import RichText from '~/views/components/RichText'
-import useLocalState from "~/logic/state/local";
+import RichText from '~/views/components/RichText';
+import useLocalState from '~/logic/state/local';
 import { Sigil } from '~/logic/lib/sigil';
 import { ViewProfile } from './ViewProfile';
 import { EditProfile } from './EditProfile';
@@ -31,78 +25,106 @@ export function Profile(props: any): ReactElement {
   const nacked = nackedContacts.has(ship);
 
   useEffect(() => {
-    if(hasLoaded && !contact && !nacked) {
+    if (hasLoaded && !contact && !nacked) {
       props.api.contacts.retrieve(ship);
     }
   }, [hasLoaded, contact]);
 
   const hexColor = contact?.color ? `#${uxToHex(contact.color)}` : '#000000';
-  const cover = (contact?.cover)
-    ? <BaseImage src={contact.cover} width='100%' height='100%' style={{ objectFit: 'cover' }} />
-    : <Box display="block" width='100%' height='100%' backgroundColor='washedGray' />;
+  const cover = contact?.cover ? (
+    <BaseImage
+      src={contact.cover}
+      width='100%'
+      height='100%'
+      style={{ objectFit: 'cover' }}
+    />
+  ) : (
+    <Box
+      display='block'
+      width='100%'
+      height='100%'
+      backgroundColor='washedGray'
+    />
+  );
 
-  const image = (!hideAvatars && contact?.avatar)
-    ? <BaseImage src={contact.avatar} width='100%' height='100%' style={{ objectFit: 'cover' }} />
-    : <Sigil padding={24} ship={ship} size={128} color={hexColor} />;
+  const image =
+    !hideAvatars && contact?.avatar ? (
+      <BaseImage
+        src={contact.avatar}
+        width='100%'
+        height='100%'
+        style={{ objectFit: 'cover' }}
+      />
+    ) : (
+      <Sigil padding={24} ship={ship} size={128} color={hexColor} />
+    );
 
   const anchorRef = useRef<HTMLElement | null>(null);
 
   useTutorialModal('profile', ship === `~${window.ship}`, anchorRef.current);
 
   return (
-    <Center
-      p={[0,4]}
-      height="100%"
-      width="100%"
-    >
-
-      <Box
-        ref={anchorRef}
-        maxWidth="600px"
-        width="100%"
-      >
-        <Row alignItems="center" justifyContent="space-between">
-          <Row>
-          {ship === `~${window.ship}` ? (
-            <>
-            <Text
+    <Center p={[0, 4]} height='100%' width='100%'>
+      <Box ref={anchorRef} maxWidth='600px' width='100%'>
+        <Box border='1px solid' borderColor='lightGray' borderRadius='2'>
+          <Row alignItems='center' justifyContent='space-between' px='3'>
+            <Row>
+              {ship === `~${window.ship}` ? (
+                <>
+                  <Text
+                    py='2'
+                    cursor='pointer'
+                    fontWeight='500'
+                    onClick={() => {
+                      history.push(`/~profile/${ship}/edit`);
+                    }}
+                  >
+                    Edit {isPublic ? 'Public' : 'Private'} Profile
+                  </Text>
+                  <SetStatusBarModal
+                    isControl
+                    py='2'
+                    ml='3'
+                    api={props.api}
+                    ship={`~${window.ship}`}
+                    contact={contact}
+                  />
+                </>
+              ) : null}
+            </Row>
+            <RichText
+              mb='0'
               py='2'
-              cursor='pointer'
-              onClick={() => {
- history.push(`/~profile/${ship}/edit`);
-}}
+              disableRemoteContent
+              maxWidth='18rem'
+              overflowX='hidden'
+              textOverflow='ellipsis'
+              whiteSpace='nowrap'
+              overflow='hidden'
+              display='inline-block'
+              verticalAlign='middle'
+              color='gray'
             >
-              Edit Profile
-            </Text>
-              <SetStatusBarModal
-                py='2'
-                ml='3'
-                api={props.api}
-                ship={`~${window.ship}`}
-                contact={contact}
-              />
-              </>
-          ) : null}
+              {contact?.status ?? ''}
+            </RichText>
           </Row>
-          <RichText mb='0' py='2' disableRemoteContent maxWidth='18rem' overflowX='hidden' textOverflow="ellipsis"
-            whiteSpace="nowrap"
-            overflow="hidden" display="inline-block" verticalAlign="middle">{contact?.status ?? ""}</RichText>
-        </Row>
-        <Row  width="100%" height="300px">
-          {cover}
-        </Row>
-        <Row
-          pb={2}
-          alignItems="center"
-          width="100%"
-        >
-          <Center width="100%" marginTop="-48px">
-            <Box height='128px' width='128px' borderRadius="2" overflow="hidden">
+          <Row width='100%' height='300px'>
+            {cover}
+          </Row>
+        </Box>
+        <Row pb={2} alignItems='center' width='100%'>
+          <Center width='100%' marginTop='-64px'>
+            <Box
+              height='128px'
+              width='128px'
+              borderRadius='2'
+              overflow='hidden'
+            >
               {image}
             </Box>
           </Center>
         </Row>
-        { isEdit ? (
+        {isEdit ? (
           <EditProfile
             ship={ship}
             contact={contact}
@@ -122,7 +144,7 @@ export function Profile(props: any): ReactElement {
             groups={props.groups}
             associations={props.associations}
           />
-        ) }
+        )}
       </Box>
     </Center>
   );

pkg/interface/src/views/components/SetStatusBarModal.js

@@ -1,31 +1,18 @@
-import React, {
-  useState,
-  useEffect
-} from 'react';
+import React, { useState, useEffect } from 'react';
 
-import {
-  Row,
-  Box,
-  Text
-} from '@tlon/indigo-react';
+import { Row, Box, Text } from '@tlon/indigo-react';
 
 import { SetStatus } from '~/views/apps/profile/components/SetStatus';
 
-
 export const SetStatusBarModal = (props) => {
-  const {
-    ship,
-    contact,
-    api,
-    ...rest
-  } = props;
+  const { ship, contact, api, isControl, ...rest } = props;
   const [modalShown, setModalShown] = useState(false);
 
   const handleKeyDown = (event) => {
     if (event.key === 'Escape') {
       setModalShown(false);
     }
-  }
+  };
 
   useEffect(() => {
     window.addEventListener('keydown', handleKeyDown);
@@ -40,28 +27,28 @@ export const SetStatusBarModal = (props) => {
       {modalShown && (
         <Box
           backgroundColor='scales.black30'
-          left="0px"
-          top="0px"
-          width="100%"
-          height="100%"
+          left='0px'
+          top='0px'
+          width='100%'
+          height='100%'
           zIndex={4}
-          position="fixed"
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
+          position='fixed'
+          display='flex'
+          justifyContent='center'
+          alignItems='center'
           onClick={() => setModalShown(false)}
         >
           <Box
-            maxWidth="500px"
-            width="100%"
-            bg="white"
+            maxWidth='500px'
+            width='100%'
+            bg='white'
             borderRadius={2}
             border={[0, 1]}
-            borderColor={["washedGray", "washedGray"]}
-            onClick={e => e.stopPropagation()}
-            display="flex"
-            alignItems="stretch"
-            flexDirection="column"
+            borderColor={['washedGray', 'washedGray']}
+            onClick={(e) => e.stopPropagation()}
+            display='flex'
+            alignItems='stretch'
+            flexDirection='column'
           >
             <Box m={3}>
               <SetStatus
@@ -70,23 +57,23 @@ export const SetStatusBarModal = (props) => {
                 api={api}
                 callback={() => {
                   setModalShown(false);
-                }} />
+                }}
+              />
             </Box>
           </Box>
         </Box>
       )}
-      <Row
-        {...rest}
-        flexShrink={0}
-        onClick={() => setModalShown(true)}>
-        <Text color='black'
+      <Row {...rest} flexShrink={0} onClick={() => setModalShown(true)}>
+        <Text
+          color='black'
           cursor='pointer'
+          fontWeight={isControl ? '500' : '400'}
           flexShrink={0}
-          fontSize={1}>
+          fontSize={1}
+        >
           Set Status
         </Text>
       </Row>
     </>
   );
-}
-
+};