Reworked mobile UI for some components

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

@@ -7,48 +7,62 @@
   overflow-x: hidden;
   div[role=textbox] {
     font-size: 0.9rem;
+    border-radius: .2rem;
     padding: .6rem;
     padding-right: calc(0.6rem + 44px);
-    border-radius: .35rem;
     background-color: var(--color-owncast-gray-700);
+    box-shadow: 0;
+    transition: box-shadow 50ms ease-in-out;
+    &:focus {
+      box-shadow: inset 0px 0px 0x 1px var(--color-owncast-purple-700);
+      outline: 1px solid var(--color-owncast-gray-500) !important;
+    }
     & > p {
       margin: 0px;
     }
   }
+
+  .inputWrapper {
+    display: flex;
+    position: relative;
+    margin-right: .3rem;
+    border-radius: .2rem;
+    & > div {
+      transition: box-shadow .2s ease-in-out;
+    }
+  }
+
+  .emojiButton {
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 0 1rem;
+    position: absolute;
+    right: 0px;
+    top: 50%;
+    transform: translateY(-50%);
+    svg {
+      fill: var(--color-owncast-gray-300);
+    }
+  }
+
+  .submitButtonWrapper {
+    display: flex;
+    padding: 6px 0;
+    justify-content: flex-end;
+  }
 }
 
-.inputWrapper {
-  display: flex;
-  position: relative;
-  border-radius: var(--theme-rounded-corners);
-  outline: 1px solid var(--color-owncast-gray-500);
-  &:hover {
-    box-shadow: 0 0 1px 1px var(--color-owncast-gray-300);
-  }
-  & > div {
-    transition: box-shadow .2s ease-in-out;
-    &:focus {
-      // box-shadow: 0 0 1px 1px var(--color-owncast-gray-300);
+
+
+.mobile {
+  &.root {
+    display: flex;
+    .inputWrapper {
+      flex: 1;
+    }
+    .submitButtonWrapper {
+      padding: 0px;
     }
   }
 }
-
-.emojiButton {
-  border: none;
-  background: none;
-  cursor: pointer;
-  padding: 0 1rem;
-  position: absolute;
-  right: 0px;
-  top: 50%;
-  transform: translateY(-50%);
-  svg {
-    fill: var(--color-owncast-gray-300);
-  }
-}
-
-.submitButtonWrapper {
-  display: flex;
-  padding: 6px 0;
-  justify-content: flex-end;
-}

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -4,9 +4,10 @@ import React, { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Transforms, createEditor, BaseEditor, Text } from 'slate';
 import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
+import cn from 'classnames';
 import EmojiPicker from './EmojiPicker';
 import WebsocketService from '../../../services/websocket-service';
-import { websocketServiceAtom } from '../../stores/ClientConfigStore';
+import { isMobileAtom, websocketServiceAtom } from '../../stores/ClientConfigStore';
 import { MessageType } from '../../../interfaces/socket-events';
 import s from './ChatTextField.module.scss';
 
@@ -101,6 +102,7 @@ export default function ChatTextField(props: Props) {
   // const { value: originalValue } = props;
   const [showEmojis, setShowEmojis] = useState(false);
   const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
+  const isMobile = useRecoilValue<boolean>(isMobileAtom);
   const [editor] = useState(() => withImages(withReact(createEditor())));
 
   const sendMessage = () => {
@@ -120,7 +122,7 @@ export default function ChatTextField(props: Props) {
 
   const handleChange = () => {};
 
-  const handleEmojiSelect = e => {
+  const handleEmojiSelect = (e: any) => {
     ReactEditor.focus(editor);
 
     if (e.url) {
@@ -134,7 +136,7 @@ export default function ChatTextField(props: Props) {
     }
   };
 
-  const onKeyDown = e => {
+  const onKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
       e.preventDefault();
       sendMessage();
@@ -142,7 +144,11 @@ export default function ChatTextField(props: Props) {
   };
 
   return (
-    <div className={s.root}>
+    <div
+      className={cn(s.root, {
+        [s.mobile]: isMobile,
+      })}
+    >
       <div className={s.inputWrapper}>
         <Slate
           editor={editor}
@@ -167,9 +173,13 @@ export default function ChatTextField(props: Props) {
         </button>
       </div>
       <div className={s.submitButtonWrapper}>
-        <Button size="middle" type="primary" icon={<SendOutlined />} onClick={sendMessage}>
-          Send
-        </Button>
+        {isMobile ? (
+          <Button size="large" type="ghost" icon={<SendOutlined />} onClick={sendMessage} />
+        ) : (
+          <Button type="primary" icon={<SendOutlined />} onClick={sendMessage}>
+            Send
+          </Button>
+        )}
       </div>
       <Popover
         content={<EmojiPicker onEmojiSelect={handleEmojiSelect} />}