✨ Added channel message input

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;
+}

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 (
     <div className="channel_page__container">
       <div className="channel_page__header">
@@ -81,6 +92,11 @@ export default function ChannelPage() {
             );
           })}
         </div>
+        <input
+          className="channel_page__message_input"
+          type="text"
+          onKeyDown={handleMessageInput}
+        />
       </div>
     </div>
   );

src/renderer/styles/global.css

@@ -7,6 +7,7 @@ body {
   font-weight: 400;
   font-style: normal;
   overflow: hidden;
+  color-scheme: dark;
 }
 
 a,