channels in flex container

components/slack/slack-events.js

@@ -1,7 +1,8 @@
 import { sample, take } from 'lodash'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { Slide } from 'react-reveal'
 import useWebSocket from 'react-use-websocket'
-import { Box, Grid, Text } from 'theme-ui'
+import { Box, Text } from 'theme-ui'
 
 const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', '#8067c3']
 
@@ -33,7 +34,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
     'wss://joebunyan.haas.hackclub.com/stream',
     STATIC_OPTIONS
   )
-  
+
   useEffect(() => {
     try {
       async function resolveEvent() {
@@ -52,7 +53,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
           .catch(err => console.error(err))
 
         if (whitelistedChannels.has(name)) {
-          // this check should happen before the web req, to save on net resources
+          //this check should happen before the web req, to save on net resources
           setEvents(prev => [
             {
               type: lastJsonMessage.type,
@@ -77,27 +78,30 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
   })
 
   return (
-    <Grid
+    <Box
+      as="ol"
       sx={{
+        height: '100%',
         minHeight: '4em',
         maxHeight: [128, 256],
         overflow: 'hidden',
         listStyle: 'none',
         lineHeight: 'heading',
         pl: 0,
-        color: textColor || 'red',
+        color: textColor || 'black',
         fontSize: 2,
         overflowY: 'hidden',
         position: 'relative',
         ':after': {
           content: '""',
           position: 'absolute',
+          bottom: 0,
           left: 0,
           right: 0,
           display: 'block',
           height: '2em',
           backgroundImage: theme =>
-            `linear-gradient(to left,rgba(255,255,255,0), ${
+            `linear-gradient(rgba(255,255,255,0), ${
               color || theme.colors.white
             })`
         },
@@ -108,20 +112,18 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
       aria-hidden="true"
       {...props}
     >
-      <Box sx={{ padding: 8 }}/>
       {take(events, 7).map(({ type, channel, color }) => (
+        <Slide top duration={256} key={type + channel + color}>
           <>
             {type === 'message' && (
-              <Text sx={{ marginX: "5px" }}>
-                <Channel channel={channel} color={color} />
-              </Text>
+              <>
+                Message in <Channel channel={channel} color={color} />
+              </>
             )}
           </>
+        </Slide>
       ))}
-      <Channel channel="#lounge" color="red"/>
-      <Channel channel="#lounge" color="red"/>
-      <Channel channel="#lounge" color="red"/>
-    </Grid>
+    </Box>
   )
 }