Draw improvements, disabled user zooming

src/pages/Messages.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 
+import { MapIcon, UsersIcon } from '@heroicons/react/outline';
+
 import { Message } from '../components/chat/Message';
 import { MessageBar } from '../components/chat/MessageBar';
+import { Button } from '../components/generic/Button';
 import { useAppSelector } from '../hooks/redux';
 
 export const Messages = (): JSX.Element => {
@@ -10,6 +13,17 @@ 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="my-auto text-sm"># default</div>
+        <div className="flex">
+          <Button>
+            <MapIcon className="w-6 h-6" />
+          </Button>
+          <Button>
+            <UsersIcon className="w-6 h-6" />
+          </Button>
+        </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">
         {messages.map((message, index) => (
           <Message
@@ -29,3 +43,6 @@ export const Messages = (): JSX.Element => {
     </div>
   );
 };
+<Button>
+  <UsersIcon className="w-6 h-6" />
+</Button>;