diff --git a/app/mobile/src/session/contact/Contact.jsx b/app/mobile/src/session/contact/Contact.jsx index cf15c99e..1460c5d4 100644 --- a/app/mobile/src/session/contact/Contact.jsx +++ b/app/mobile/src/session/contact/Contact.jsx @@ -14,6 +14,13 @@ export function Contact({ contact, closeContact }) { return ( + { state.tabbed && ( + + + + + + )} { `${state.handle}@${state.node}` } diff --git a/app/mobile/src/session/contact/Contact.styled.js b/app/mobile/src/session/contact/Contact.styled.js index 7fd03f14..463af786 100644 --- a/app/mobile/src/session/contact/Contact.styled.js +++ b/app/mobile/src/session/contact/Contact.styled.js @@ -11,6 +11,12 @@ export const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, + close: { + width: '100%', + display: 'flex', + alignItems: 'flex-end', + paddingRight: 32, + }, header: { paddingBottom: 32, paddingTop: 16, diff --git a/app/mobile/src/session/contact/useContact.hook.js b/app/mobile/src/session/contact/useContact.hook.js index 6e1584c3..7e8316a2 100644 --- a/app/mobile/src/session/contact/useContact.hook.js +++ b/app/mobile/src/session/contact/useContact.hook.js @@ -1,10 +1,13 @@ import { useState, useEffect, useRef, useContext } from 'react'; import { useNavigate } from 'react-router-dom'; import { CardContext } from 'context/CardContext'; +import { useWindowDimensions } from 'react-native' +import config from 'constants/Config'; export function useContact(contact) { const [state, setState] = useState({ + tabbed: null, name: null, handle: null, node: null, @@ -14,12 +17,22 @@ export function useContact(contact) { status: null, }); + const dimensions = useWindowDimensions(); const card = useContext(CardContext); const updateState = (value) => { setState((s) => ({ ...s, ...value })); } + useEffect(() => { + if (dimensions.width > config.tabbedWidth) { + updateState({ tabbed: false }); + } + else { + updateState({ tabbed: true }); + } + }, [dimensions]); + useEffect(() => { let stateSet = false; if (contact?.card) {