Improved message display

src/App.js

@@ -44,6 +44,9 @@ const theme = deepMerge(grommet, {
       vertical: "xsmall",
     },
   },
+  layer: {
+    background: "#00000000",
+  },
 });
 
 function App() {

src/components/indi/device.js

@@ -1,9 +1,17 @@
-import React, { useState, useEffect, Fragment } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { useMutation, useApolloClient } from "@apollo/react-hooks";
 import { msgToColor } from "../../utils/indi";
 import Property from "./property";
 import gql from "graphql-tag";
-import { Box, Button, Tabs, Tab, Text, Layer } from "grommet";
+import {
+  Box,
+  Button,
+  Tabs,
+  Tab,
+  Text,
+  Layer,
+  ResponsiveContext,
+} from "grommet";
 import { Close, Trash } from "grommet-icons";
 
 const CONNECT_DEVICE = gql`
@@ -28,6 +36,7 @@ const Device = ({ device, messages, onMessagesClosed }) => {
   const [groups, setGroups] = useState([]);
   const [selectedTabs, setSelectedTabs] = useState({});
   const [currentTab, setCurrentTab] = useState(0);
+  const size = useContext(ResponsiveContext);
 
   useEffect(() => {
     const groups = new Set();
@@ -36,7 +45,7 @@ const Device = ({ device, messages, onMessagesClosed }) => {
     });
     setGroups(Array.from(groups));
     setCurrentTab(selectedTabs[device.id] || 0);
-  }, [device]);
+  }, [device, selectedTabs]);
 
   return (
     <Box>
@@ -72,8 +81,13 @@ const Device = ({ device, messages, onMessagesClosed }) => {
 
       {messages ? (
         <Layer position="right" full="vertical" modal={false}>
-          <Box direction="row">
-            <Button icon={<Close />} onClick={() => onMessagesClosed()} />
+          <Box
+            background={{ color: "light-1", opacity: "strong" }}
+            fill="vertical"
+            align="start"
+            width={size}
+          >
+            <Box direction="row" justify="end" fill="horizontal">
             <Button
                 icon={<Trash />}
                 onClick={() => {
@@ -87,12 +101,14 @@ const Device = ({ device, messages, onMessagesClosed }) => {
                   });
                 }}
               />
+              <Button icon={<Close />} onClick={() => onMessagesClosed()} />
             </Box>
-          <Box width="medium" pad="small">
+            <Box pad="medium">
               {device.messages.map((msg) => (
                 <Text color={msgToColor(msg)}>{msg}</Text>
               ))}
             </Box>
+          </Box>
         </Layer>
       ) : null}
     </Box>

src/components/indi/text.js

@@ -33,7 +33,6 @@ const TextValue = ({ vector, value }) => {
                 name: value.name,
                 value: newval,
               };
-              console.log(input);
               sendOneText({ variables: { input } });
             }}
           ></Button>