diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index ae980526104ef78ea76e02bb91a7fb4be5625896..26825ca83da9501536f67238c6fb6ec62b89c2cb 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -8,7 +8,9 @@ import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { SingletonMessageRenderer, SMOOTH_SCROLL_ON_RECEIVE } from "../../../lib/renderer/Singleton"; import { connectState } from "../../../redux/connector"; import { WithDispatcher } from "../../../redux/reducers"; +import IconButton from "../../ui/IconButton"; import TextArea from "../../ui/TextArea"; +import { Send } from '@styled-icons/feather'; type Props = WithDispatcher & { channel: Channel; @@ -70,15 +72,20 @@ function MessageBox({ channel, draft, dispatcher }: Props) { } return ( - <TextArea - value={draft} - onKeyDown={e => { - if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) { - e.preventDefault(); - return send(); - } - }} - onChange={e => setMessage(e.currentTarget.value)} /> + <div style={{ display: 'flex' }}> + <TextArea + value={draft} + onKeyDown={e => { + if (!e.shiftKey && e.key === "Enter" && !isTouchscreenDevice) { + e.preventDefault(); + return send(); + } + }} + onChange={e => setMessage(e.currentTarget.value)} /> + <IconButton onClick={send}> + <Send size={20} /> + </IconButton> + </div> ) } diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index 5bd4a856f9ffb2893b08ed45472995ac445f3a56..ab74d14ba20a966f46de701b049348a4ab55be0a 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -29,7 +29,7 @@ export default function App() { return ( <OverlappingPanels width="100vw" - height="100%" + height="100vh" leftPanel={{ width: 292, component: <LeftSidebar /> }} rightPanel={{ width: 240, component: <RightSidebar /> }} docked={isTouchscreenDevice ? Docked.None : Docked.Left}>