Added icons and formatted with prettier

web/components/action-buttons/ActionButton.tsx

@@ -8,7 +8,9 @@ interface Props {
   action: ExternalAction;
 }
 
-export default function ActionButton({action: { url, title, description, icon, openExternally }}: Props) {
+export default function ActionButton({
+  action: { url, title, description, icon, openExternally },
+}: Props) {
   const [showModal, setShowModal] = useState(false);
 
   const buttonClicked = () => {
@@ -21,11 +23,7 @@ export default function ActionButton({action: { url, title, description, icon, o
 
   return (
     <>
-      <Button
-        type="primary"
-        className={`${s.button}`}
-        onClick={buttonClicked}
-      >
+      <Button type="primary" className={`${s.button}`} onClick={buttonClicked}>
         <img src={icon} className={`${s.icon}`} alt={description} />
         {title}
       </Button>

web/components/chat/ChatTextField/ChatTextField.module.scss

@@ -22,11 +22,16 @@
 
 .emojiButton {
   border: none;
-  margin-right: 5px;
+  background: none;
+  cursor: pointer;
+  padding: 0 1rem;
   position: absolute;
   right: 0px;
   top: 50%;
   transform: translateY(-50%);
+  svg {
+    fill: var(--color-owncast-gray-300);
+  }
 }
 
 .submitButtonWrapper {

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -1,4 +1,4 @@
-import { SmileOutlined } from '@ant-design/icons';
+import { SendOutlined, SmileOutlined } from '@ant-design/icons';
 import { Button, Popover } from 'antd';
 import React, { useState } from 'react';
 import { useRecoilValue } from 'recoil';
@@ -103,8 +103,6 @@ export default function ChatTextField(props: Props) {
   const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
   const [editor] = useState(() => withImages(withReact(createEditor())));
 
-  const size = 'small';
-
   const sendMessage = () => {
     if (!websocketService) {
       console.log('websocketService is not defined');
@@ -157,19 +155,18 @@ export default function ChatTextField(props: Props) {
             style={{ width: '100%' }}
           />
         </Slate>
-        <Button
+        <button
+          type="button"
           className={s.emojiButton}
-          type="default"
-          ghost
-          title="Emoji"
+          title="Emoji picker button"
           onClick={() => setShowEmojis(!showEmojis)}
         >
           <SmileOutlined />
-        </Button>
+        </button>
       </div>
       <div className={s.submitButtonWrapper}>
-        <Button size={size} type="primary" onClick={sendMessage}>
-          Submit
+        <Button size="middle" type="primary" icon={<SendOutlined />} onClick={sendMessage}>
+          Send
         </Button>
       </div>
       <Popover