adding more projects + working on live slack counter

components/slack/slack-events.js

@@ -119,29 +119,26 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
 
   return (
     <Flex
-      as="ol"
       sx={{
-        height: '100%',
         minHeight: '4em',
         maxHeight: [128, 256],
         overflow: 'hidden',
         listStyle: 'none',
         lineHeight: 'heading',
         pl: 0,
-        color: textColor || 'black',
+        color: textColor || 'red',
         fontSize: 2,
         overflowY: 'hidden',
         position: 'relative',
         ':after': {
           content: '""',
           position: 'absolute',
-          bottom: 0,
           left: 0,
           right: 0,
           display: 'block',
           height: '2em',
           backgroundImage: theme =>
-            `linear-gradient(rgba(255,255,255,0), ${
+            `linear-gradient(to left,rgba(255,255,255,0), ${
               color || theme.colors.white
             })`
         },
@@ -162,15 +159,7 @@ const SlackEvents = ({ sx, color, textColor, ...props }) => {
             )}
           </>
       ))}
-      <Text sx={{ marginX: "5px" }}>
-        <Channel channel="#lounge" color="red" />
-      </Text>
-      <Text sx={{ marginX: "5px" }}>
-        <Channel channel="#scrapbook" color="blue" />
-      </Text>
-      <Text sx={{ marginX: "5px" }}>
-        <Channel channel="#code" color="green" />
-      </Text>
+      <Channel channel="#lounge" color="red"/>
     </Flex>
   )
 }

pages/api/join.js

@@ -36,6 +36,7 @@ export default async function handler(req, res) {
         error: '*PUT that request away!* (Method not allowed, use POST)'
       })
     case 'POST':
+      console.log("POST request received. WOO!")
       break
     default:
       return res.status(405).json({ error: 'Method not allowed, use POST' })
@@ -93,6 +94,7 @@ export default async function handler(req, res) {
       res.json({ status: 'success', message: 'You’ve been invited to Slack!' })
     )
     .catch(error => {
+      console.error(error)
       res.status(500).json({ error })
     })
 }

pages/slack.js

@@ -62,14 +62,18 @@ const SlackPage = () => {
           },
           onUpdate: function() {
             const progress = this.progress();
-            if (progress < 0.25) {
+            if (progress < 1/6) {
               setColors(['red', '#F58695']);
-            } else if (progress < 0.5) {
+            } else if (progress < 2/6) {
               setColors(['orange', '#F2A510']);
-            } else if (progress < 0.75) {
+            } else if (progress < 3/6) {
               setColors(['yellow', '#FAE078']);
-            } else {
+            } else if (progress < 4/6) {
               setColors(['green', '#51F5C5']);
+            } else if (progress < 5/6) {
+              setColors(['blue', 'cyan']);
+            } else {
+              setColors(['purple', '#b46ed5']);
             }
           }
         }
@@ -252,13 +256,12 @@ const SlackPage = () => {
             as="h2"
             variant="subheadline"
             sx={{
-              mt: 0,
-              mb: 0,
               textTransform: 'uppercase',
-              letterSpacing: 'headline'
+              letterSpacing: 'headline',
+              width: '400px',
             }}
           >
-            Live from our&nbsp;Slack
+            Live from our&nbsp;Slack...
           </Heading>
           <SlackEvents />
         </Flex>
@@ -270,7 +273,7 @@ const SlackPage = () => {
       <Grid
         sx={{
           backgroundImage: t => t.util.gx(color[0], color[1]),
-          width: '400%',
+          width: '600%',
           height: '100vh',
           justifyItems: 'center',
           alignItems: 'center',
@@ -332,6 +335,30 @@ const SlackPage = () => {
             </Text>
           </Box>
         </Project>
+        <Project>
+          <Box>
+            <Text as="h1" variant="title" sx={{ width: 'copyUltra' }}>
+              BCI
+            </Text>
+            <Text as="p" variant="subtitle" sx={{ width: 'copyPlus' }}>
+              Nest&apos;s team organizes in #nest Velit voluptate deserunt consequat. Velit
+              voluptate deserunt consequat.Velit voluptate
+              deserunt consequat.
+            </Text>
+          </Box>
+        </Project>
+        <Project>
+          <Box>
+            <Text as="h1" variant="title" sx={{ width: 'copyUltra' }}>
+              Purple Bubble
+            </Text>
+            <Text as="p" variant="subtitle" sx={{ width: 'copyPlus' }}>
+              Nest&apos;s team organizes in #nest Velit voluptate deserunt consequat. Velit
+              voluptate deserunt consequat.Velit voluptate
+              deserunt consequat.
+            </Text>
+          </Box>
+        </Project>
       </Grid>
       </Box>
       <Container sx={{ py: [4, 5] }}>