From 6a0d0970d6b8b1b16ba4ed1960e0f9c7b55f33c8 Mon Sep 17 00:00:00 2001
From: t1enne <nasir.taov@gmail.com>
Date: Sun, 22 May 2022 14:27:06 +0200
Subject: [PATCH] Added icons and formatted with prettier

---
 web/components/action-buttons/ActionButton.tsx  | 10 ++++------
 .../ChatTextField/ChatTextField.module.scss     |  7 ++++++-
 .../chat/ChatTextField/ChatTextField.tsx        | 17 +++++++----------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/web/components/action-buttons/ActionButton.tsx b/web/components/action-buttons/ActionButton.tsx
index 15535dbd5..336fe68cd 100644
--- a/web/components/action-buttons/ActionButton.tsx
+++ b/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>
diff --git a/web/components/chat/ChatTextField/ChatTextField.module.scss b/web/components/chat/ChatTextField/ChatTextField.module.scss
index 9cfea5c49..07dfb07db 100644
--- a/web/components/chat/ChatTextField/ChatTextField.module.scss
+++ b/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 {
diff --git a/web/components/chat/ChatTextField/ChatTextField.tsx b/web/components/chat/ChatTextField/ChatTextField.tsx
index 75b5c2aaf..38859339e 100644
--- a/web/components/chat/ChatTextField/ChatTextField.tsx
+++ b/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