diff --git a/src/renderer/pages/Guild/Channel/Channel.css b/src/renderer/pages/Guild/Channel/Channel.css index 202af83..af85535 100644 --- a/src/renderer/pages/Guild/Channel/Channel.css +++ b/src/renderer/pages/Guild/Channel/Channel.css @@ -21,7 +21,7 @@ flex-direction: column-reverse; overflow-y: auto; width: 100%; - height: calc(100% - 40px); + height: calc(100% - 100px); gap: 8px; padding: var(--channel-page-messages-padding); } @@ -84,3 +84,16 @@ .channel_page__message_timestamp { color: gray; } + +.channel_page__message_input { + width: calc(100% - 40px - 16px); + height: 30px; + padding: 8px; + margin: 7px 20px; + font-size: medium; + filter: drop-shadow(0px 3px 1px #00000020); + background: var(--background); + color: white; + border: none; + border: var(--border) var(--border-size) solid; +} diff --git a/src/renderer/pages/Guild/Channel/index.tsx b/src/renderer/pages/Guild/Channel/index.tsx index d860ebb..5b3a761 100644 --- a/src/renderer/pages/Guild/Channel/index.tsx +++ b/src/renderer/pages/Guild/Channel/index.tsx @@ -35,6 +35,17 @@ export default function ChannelPage() { if (channelId.length === 0 || channel === null) return null; + const handleMessageInput = (e: any) => { + if (e.key !== 'Enter') return; + const { value } = e.target; + + if (value === '') return; + + channel?.createMessage({ + content: value, + }); + }; + return (