set styles for messages
Change-Id: I8b86255a55a745a305f953f77122a98970de0958
diff --git a/client/src/pages/messenger.jsx b/client/src/pages/messenger.jsx
index 3833956..48edb5d 100644
--- a/client/src/pages/messenger.jsx
+++ b/client/src/pages/messenger.jsx
@@ -11,6 +11,7 @@
import AddContactPage from './addContactPage.jsx';
import LoadingPage from '../components/loading';
import { useParams } from 'react-router';
+import { Stack } from '@mui/material';
const Messenger = (props) => {
const [conversations, setConversations] = useState(undefined)
@@ -57,15 +58,30 @@
console.log("Messenger render")
return (
- <div className="app" >
- <Header />
- <NewContactForm onChange={setSearchQuery} />
- {conversations ?
- <ConversationList search={searchResult} conversations={conversations} accountId={accountId} /> :
- <div className="rooms-list"><LoadingPage /></div>}
- {conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />}
- {contactId && <AddContactPage accountId={accountId} contactId={contactId} />}
- </div>
+ <Stack
+ direction="row"
+ height="100vh"
+ width="100vw"
+ >
+ <Stack
+ flexGrow={0}
+ flexShrink={0}
+ overflow="auto"
+ >
+ <Header />
+ <NewContactForm onChange={setSearchQuery} />
+ {contactId && <AddContactPage accountId={accountId} contactId={contactId} />}
+ {conversations ?
+ <ConversationList search={searchResult} conversations={conversations} accountId={accountId} /> :
+ <div className="rooms-list"><LoadingPage /></div>
+ }
+ </Stack>
+ <Stack
+ flexGrow={1}
+ >
+ {conversationId && <ConversationView accountId={accountId} conversationId={conversationId} />}
+ </Stack>
+ </Stack>
)
}