system that makes a bit more sense

Author: tobyab

components/slack/arrows.js

@@ -17,7 +17,7 @@ export function LeftArrow() {
         placeItems: 'center',
         display: 'flex',
         mr: 2,
-        ml: 'calc(50vw - 35rem)'
+        ml: 'calc(50vw - 36rem)'
       }}
     >
       <Icon glyph="view-back" size={32} color="white" />

components/slack/project.js

@@ -1,18 +1,16 @@
-import { Box, Image, Text } from 'theme-ui'
+import { Box, Grid, Image, Text } from 'theme-ui'
 import { VisibilityContext } from 'react-horizontal-scrolling-menu'
 import { useContext } from 'react'
 
 export default function Project({ title, description, color, img, itemId }) {
   const visible = useContext(VisibilityContext)
   const isVisible = visible.isItemVisible(itemId)
 
-  console.log(itemId)
-
   return (
-    <Box
+    <Grid
       sx={{
-        display: 'grid',
         borderRadius: 12,
+        gridTemplateColumns: 'auto ',
         my: '2rem',
         backgroundImage: t =>
           `linear-gradient(to bottom, ${color[0]}, ${color[1]})`,
@@ -23,17 +21,19 @@ export default function Project({ title, description, color, img, itemId }) {
         transition: '700ms cubic-bezier(0.075, 0.02, 0.165, 1)',
         transformOrigin: 'center',
         mx: 16,
-        ml: `${itemId === 0 && 'calc(50vw - 35rem)'}`
+        ml: `${itemId === 0 && 'calc(50vw - 36rem)'}`
       }}
       itemId={itemId}
     >
       <Box
         sx={{
           paddingX: '16px',
-          marginTop: ['6.25rem', '12.5rem'],
           display: 'flex',
           flexDirection: 'column',
-          alignItems: 'center'
+          placeItems: 'center',
+          height: ['12.5rem', '20rem'],
+          placeSelf: 'center',
+          placeContent: 'end',
         }}
       >
         <Text
@@ -60,9 +60,9 @@ export default function Project({ title, description, color, img, itemId }) {
         sx={{
           visibility: ['hidden', 'visible'],
           height: '100%',
-          objectFit: 'cover'
+          objectFit: 'cover',
         }}
       />
-    </Box>
+    </Grid>
   )
 }

pages/slack.js

@@ -1,7 +1,7 @@
 import Meta from '@hackclub/meta'
 import Head from 'next/head'
 import { Box, Container, Heading, Text } from 'theme-ui'
-import { useRef } from 'react'
+import { useRef, useState, useEffect, useCallback } from 'react'
 import { ScrollMenu } from 'react-horizontal-scrolling-menu'
 import 'react-horizontal-scrolling-menu/dist/styles.css'
 
@@ -16,11 +16,9 @@ import Header from '../components/slack/header'
 import Project from '../components/slack/project'
 import Quote from '../components/slack/quote'
 import Arrows from '../components/slack/arrows'
-import usePreventScroll from '../components/slack/preventScroll'
 
 const SlackPage = () => {
   const nameInputRef = useRef(null)
-  const { disableScroll, enableScroll } = usePreventScroll()
 
   return (
     <>
@@ -84,11 +82,13 @@ const SlackPage = () => {
           backgroundColor: '#F9FAFC',
           paddingT: '1rem'
         }}
-        onMouseEnter={disableScroll}
-        onMouseLeave={enableScroll}
       >
         <Box>
-          <ScrollMenu Footer={Arrows} onWheel={onWheel}>
+          <ScrollMenu
+            Footer={Arrows}
+            onWheel={onWheel}
+            style={{ scrollbar: 'hidden' }}
+          >
             {projects.map(project => (
               <Project
                 title={project.title}