diff --git a/pkg/interface/src/views/apps/profile/components/Profile.tsx b/pkg/interface/src/views/apps/profile/components/Profile.tsx index c7ed938e0..7622a16f9 100644 --- a/pkg/interface/src/views/apps/profile/components/Profile.tsx +++ b/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) - ? - : ; + const cover = contact?.cover ? ( + + ) : ( + + ); - const image = (!hideAvatars && contact?.avatar) - ? - : ; + const image = + !hideAvatars && contact?.avatar ? ( + + ) : ( + + ); const anchorRef = useRef(null); useTutorialModal('profile', ship === `~${window.ship}`, anchorRef.current); return ( -
- - - - - {ship === `~${window.ship}` ? ( - <> - + + + + + {ship === `~${window.ship}` ? ( + <> + { + history.push(`/~profile/${ship}/edit`); + }} + > + Edit {isPublic ? 'Public' : 'Private'} Profile + + + + ) : null} + + { - 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 - - - - ) : null} + {contact?.status ?? ''} + - {contact?.status ?? ""} - - - {cover} - - -
- + + {cover} + + + +
+ {image}
- { isEdit ? ( + {isEdit ? ( - ) } + )}
); diff --git a/pkg/interface/src/views/components/SetStatusBarModal.js b/pkg/interface/src/views/components/SetStatusBarModal.js index 85f9769e7..8ef0f17f3 100644 --- a/pkg/interface/src/views/components/SetStatusBarModal.js +++ b/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 && ( setModalShown(false)} > e.stopPropagation()} - display="flex" - alignItems="stretch" - flexDirection="column" + borderColor={['washedGray', 'washedGray']} + onClick={(e) => e.stopPropagation()} + display='flex' + alignItems='stretch' + flexDirection='column' > { api={api} callback={() => { setModalShown(false); - }} /> + }} + /> )} - setModalShown(true)}> - setModalShown(true)}> + + fontSize={1} + > Set Status ); -} - +};