WIP

src/pages/Messages.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
+import { Message } from '@components/chat/Message';
+import { MessageBar } from '@components/chat/MessageBar';
+import { Button } from '@components/generic/Button';
 import { HashtagIcon, MapIcon, UsersIcon } from '@heroicons/react/outline';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
-import { Message } from '../components/chat/Message';
-import { MessageBar } from '../components/chat/MessageBar';
-import { IconButton } from '../components/generic/IconButton';
 import { useAppSelector } from '../hooks/redux';
 
 export const Messages = (): JSX.Element => {
@@ -13,7 +13,7 @@ export const Messages = (): JSX.Element => {
   const nodes = useAppSelector((state) => state.meshtastic.nodes);
   const channels = useAppSelector((state) => state.meshtastic.channels);
 
-  const channelName = () => {
+  const channelName = (): string => {
     const name =
       channels.find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)
         ?.settings?.name ?? 'Unknown';
@@ -23,21 +23,18 @@ export const Messages = (): JSX.Element => {
 
   return (
     <div className="flex flex-col w-full">
-      <div className="flex justify-between w-full border-b dark:border-gray-600 dark:text-gray-300 px-2">
+      <div className="flex justify-between w-full px-2 border-b dark:border-gray-600 dark:text-gray-300">
         <div className="flex my-auto text-sm">
-          <HashtagIcon className="h-4 w-4 my-auto" />
+          <HashtagIcon className="w-4 h-4 my-auto" />
           {channelName()}
         </div>
         <div className="flex">
-          <IconButton>
-            <MapIcon className="w-6 h-6" />
-          </IconButton>
-          <IconButton>
-            <UsersIcon className="w-6 h-6" />
-          </IconButton>
+          <Button icon={<MapIcon className="w-5 h-5" />} circle />
+
+          <Button icon={<UsersIcon className="w-5 h-5" />} circle />
         </div>
       </div>
-      <div className="flex flex-col p-6 sm:py-8 sm:px-10 border-b dark:border-gray-600 bg-white dark:bg-secondaryDark flex-grow overflow-y-auto space-y-2">
+      <div className="flex flex-col flex-grow p-6 space-y-2 overflow-y-auto bg-white border-b md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
         {messages.map((message, index) => (
           <Message
             key={index}
@@ -56,6 +53,3 @@ export const Messages = (): JSX.Element => {
     </div>
   );
 };
-<IconButton>
-  <UsersIcon className="w-6 h-6" />
-</IconButton>;