diff --git a/src/components/Inbox/MessagesFallback.module.scss b/src/components/Inbox/MessagesFallback.module.scss new file mode 100644 index 00000000..19753554 --- /dev/null +++ b/src/components/Inbox/MessagesFallback.module.scss @@ -0,0 +1,26 @@ +.MessagesFallback { + display: flex; + align-items: center; + justify-content: center; + min-height: 100%; + + $width: 10.5em; + + .text { + font-weight: 500; + font-size: 18px; + line-height: 24px; + width: $width; + } + + .button { + background: #141414; + border-radius: 12px; + width: 100%; + max-width: $width; + text-align: center; + color: #fff; + height: 48px; + text-transform: none; + } +} diff --git a/src/components/Inbox/MessagesFallback.tsx b/src/components/Inbox/MessagesFallback.tsx new file mode 100644 index 00000000..e077f645 --- /dev/null +++ b/src/components/Inbox/MessagesFallback.tsx @@ -0,0 +1,25 @@ +import { Show } from 'solid-js' +import styles from './MessagesFallback.module.scss' + +type MessagesFallback = { + message: string + onClick?: () => void + actionText?: string +} + +const MessagesFallback = (props: MessagesFallback) => { + return ( +
+
+

{props.message}

+ + + +
+
+ ) +} + +export default MessagesFallback diff --git a/src/components/Views/Inbox.tsx b/src/components/Views/Inbox.tsx index 9e96d100..ec87fe6e 100644 --- a/src/components/Views/Inbox.tsx +++ b/src/components/Views/Inbox.tsx @@ -16,6 +16,7 @@ import '../../styles/Inbox.scss' import { useInbox } from '../../context/inbox' import DialogHeader from '../Inbox/DialogHeader' import { apiClient } from '../../utils/apiClient' +import MessagesFallback from '../Inbox/MessagesFallback' const userSearch = (array: Author[], keyword: string) => { const searchTerm = keyword.toLowerCase() @@ -88,11 +89,11 @@ export const InboxView = () => { setPostMessageText(event.target.value) } createEffect(() => { + if (!textareaParent) return textareaParent.dataset.replicatedValue = postMessageText() }) - const handleOpenInviteModal = (event: Event) => { - event.preventDefault() + const handleOpenInviteModal = () => { showModal('inviteToChat') } @@ -120,9 +121,9 @@ export const InboxView = () => {
@@ -173,40 +174,47 @@ export const InboxView = () => {
- + + } + > - +
+
+ + {(message) => ( + + )} + -
-
- - {(message) => ( - - )} - - - {/*
*/} - {/* */} - {/*
*/} -
-
- -
-
-
-