WIP

src/components/chat/Message.tsx

@@ -19,9 +19,13 @@ export const Message = ({
 }: MessageProps): JSX.Element => {
   return (
     <div
-      className={`flex space-x-2 ${!isSender && 'ml-auto flex-row-reverse'}`}
+      className={`flex space-x-2 ${
+        !isSender ? 'ml-auto flex-row-reverse' : ''
+      }`}
     >
-      <div className={`shadow-md rounded-full mt-auto ${!isSender && 'ml-2'}`}>
+      <div
+        className={`shadow-md rounded-full mt-auto ${!isSender ? 'ml-2' : ''}`}
+      >
         <Avatar
           size={30}
           name={senderName ?? 'UNK'}
@@ -37,11 +41,11 @@ export const Message = ({
               : 'bg-primary text-blue-50 rounded-bl-lg'
           } ${ack ? 'animate-none' : 'animate-pulse'}`}
         >
-          <div className="min-w-4 leading-5">{message}</div>
+          <div className="leading-5 min-w-4">{message}</div>
         </div>
         <div className="text-xs text-gray-600">{senderName}</div>
       </div>
-      <div className="mt-auto mb-4 text-xs font-medium text-secondary mr-3 dark:text-gray-200">
+      <div className="mt-auto mb-4 mr-3 text-xs font-medium text-secondary dark:text-gray-200">
         {rxTime.toLocaleTimeString(undefined, {
           hour: '2-digit',
           minute: '2-digit',

src/components/chat/MessageBar.tsx

@@ -2,59 +2,57 @@ import React from 'react';
 
 import { useTranslation } from 'react-i18next';
 
+import { useAppSelector } from '@app/hooks/redux';
+import { Button } from '@components/generic/Button';
+import { Input } from '@components/generic/Input';
+import { connection } from '@core/connection';
 import {
   EmojiHappyIcon,
   PaperAirplaneIcon,
   PaperClipIcon,
 } from '@heroicons/react/outline';
 
-import { connection } from '../../core/connection';
-import { useAppSelector } from '../../hooks/redux';
-import { IconButton } from '../generic/IconButton';
-
 export const MessageBar = (): JSX.Element => {
   const ready = useAppSelector((state) => state.meshtastic.ready);
   const [currentMessage, setCurrentMessage] = React.useState('');
-  const sendMessage = () => {
+  const sendMessage = (): void => {
     if (ready) {
-      connection.sendText(currentMessage, undefined, true);
+      void connection.sendText(currentMessage, undefined, true);
       setCurrentMessage('');
     }
   };
   const { t } = useTranslation();
   return (
-    <div className="flex p-4 bg-gray-50 dark:bg-transparent space-x-2 text-gray-500 dark:text-gray-400">
-      <div className="flex">
-        <IconButton>
-          <EmojiHappyIcon className="w-6 h-6" />
-        </IconButton>
-
-        <IconButton>
-          <PaperClipIcon className="w-6 h-6" />
-        </IconButton>
-      </div>
-      <form
-        className="flex w-full space-x-2"
-        onSubmit={(e) => {
-          e.preventDefault();
-          sendMessage();
-        }}
-      >
-        <input
-          type="text"
-          minLength={2}
-          placeholder={`${t('placeholder.message')}...`}
-          disabled={!ready}
-          value={currentMessage}
-          onChange={(e) => {
-            setCurrentMessage(e.target.value);
+    <div className="flex w-full p-4 mx-auto space-x-2 text-gray-500 bg-gray-50 dark:bg-transparent dark:text-gray-400">
+      <div className="flex w-full max-w-4xl">
+        <div className="flex">
+          <Button icon={<EmojiHappyIcon className="w-5 h-5" />} circle />
+          <Button icon={<PaperClipIcon className="w-5 h-5" />} circle />
+        </div>
+        <form
+          className="flex w-full space-x-2"
+          onSubmit={(e): void => {
+            e.preventDefault();
+            sendMessage();
           }}
-          className="focus:outline-none h-10 w-full resize-none rounded-full border border-gray-300 dark:bg-gray-900 px-4"
-        />
-        <IconButton type="submit">
-          <PaperAirplaneIcon className="w-6 h-6 rotate-90" />
-        </IconButton>
-      </form>
+        >
+          <Input
+            type="text"
+            minLength={2}
+            placeholder={`${t('placeholder.message')}...`}
+            disabled={!ready}
+            value={currentMessage}
+            onChange={(e): void => {
+              setCurrentMessage(e.target.value);
+            }}
+          />
+          <Button
+            icon={<PaperAirplaneIcon className="w-5 h-5" />}
+            type="submit"
+            circle
+          />
+        </form>
+      </div>
     </div>
   );
 };