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
>
);
-}
-
+};