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 { 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,26 +81,33 @@ const Device = ({ device, messages, onMessagesClosed }) => {
 
       {messages ? (
         <Layer position="right" full="vertical" modal={false}>
-          <Box direction="row">
+          <Box
-            <Button icon={<Close />} onClick={() => onMessagesClosed()} />
+            background={{ color: "light-1", opacity: "strong" }}
+            fill="vertical"
+            align="start"
+            width={size}
+          >
+            <Box direction="row" justify="end" fill="horizontal">
             <Button
-              icon={<Trash />}
+                icon={<Trash />}
-              onClick={() => {
+                onClick={() => {
-                client.writeFragment({
+                  client.writeFragment({
-                  id: client.cache.config.dataIdFromObject(device),
+                    id: client.cache.config.dataIdFromObject(device),
-                  fragment: MSGS_FRAGMENT,
+                    fragment: MSGS_FRAGMENT,
-                  data: {
+                    data: {
-                    __typename: "Device",
+                      __typename: "Device",
-                    messages: [],
+                      messages: [],
-                  },
+                    },
-                });
+                  });
-              }}
+                }}
-            />
+              />
-          </Box>
+              <Button icon={<Close />} onClick={() => onMessagesClosed()} />
-          <Box width="medium" pad="small">
+            </Box>
-            {device.messages.map((msg) => (
+            <Box pad="medium">
-              <Text color={msgToColor(msg)}>{msg}</Text>
+              {device.messages.map((msg) => (
-            ))}
+                <Text color={msgToColor(msg)}>{msg}</Text>
+              ))}
+            </Box>
           </Box>
         </Layer>
       ) : null}

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>