we're takin' shape!

components/slack/arrows.js

@@ -1,21 +1,58 @@
 import { VisibilityContext } from 'react-horizontal-scrolling-menu'
 import { useContext } from 'react'
+import Icon from '@hackclub/icons'
+import { Link } from 'theme-ui'
 
 export function LeftArrow() {
   const { scrollPrev } = useContext(VisibilityContext)
-  return <button onClick={() => scrollPrev()}>Left</button>
+  return (
+    <Link
+      onClick={() => scrollPrev()}
+      sx={{
+        borderRadius: 100,
+        boxShadow: 'none',
+        backgroundColor: 'black',
+        padding: '8px',
+        cursor: 'pointer',
+        placeItems: 'center',
+        display: 'flex',
+        mr: 2
+      }}
+    >
+      <Icon glyph="view-back" size={32} color="white" />
+    </Link>
+  )
 }
 
 export function RightArrow() {
   const { scrollNext } = useContext(VisibilityContext)
-  return <button onClick={() => scrollNext()}>Right</button>
+  return (
+    <Link
+      onClick={() => scrollNext()}
+      sx={{
+        borderRadius: 100,
+        boxShadow: 'none',
+        backgroundColor: 'black',
+        padding: '8px',
+        cursor: 'pointer',
+        placeItems: 'center',
+        display: 'flex'
+      }}
+    >
+      <Icon glyph="view-forward" size={32} color="white" />
+    </Link>
+  )
 }
 
 export default function Arrows() {
   return (
     <div
       style={{
-        display: 'flex'
+        display: 'flex',
+        marginTop: 32,
+        marginBottom: 32,
+        position: 'relative',
+        left: 'calc(26vw + 63rem)'
       }}
     >
       <div style={{ display: 'flex' }}>

components/slack/preventScroll.js

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useState } from 'react'
+
+const preventDefault = ev => {
+  if (ev.preventDefault) {
+    ev.preventDefault()
+  }
+  ev.returnValue = false
+}
+
+const enableBodyScroll = () => {
+  document && document.removeEventListener('wheel', preventDefault, false)
+}
+const disableBodyScroll = () => {
+  document &&
+    document.addEventListener('wheel', preventDefault, {
+      passive: false
+    })
+}
+
+export default function usePreventScroll() {
+  const [hidden, setHidden] = useState(false)
+
+  useEffect(() => {
+    hidden ? disableBodyScroll() : enableBodyScroll()
+
+    return enableBodyScroll
+  }, [hidden])
+
+  const disableScroll = useCallback(() => setHidden(true), [])
+  const enableScroll = useCallback(() => setHidden(false), [])
+  return { disableScroll, enableScroll }
+}

components/slack/project.js

@@ -22,7 +22,6 @@ export default function Project({ title, description, color, img, itemId }) {
         height: '100%',
         transition: '700ms cubic-bezier(0.075, 0.02, 0.165, 1)',
         transformOrigin: 'center',
-        opacity: isVisible ? 1 : 0.25,
         mx: 16,
         ml: `${itemId === 0 ? '26vw' : '0'}`
       }}

pages/slack.js

@@ -16,9 +16,11 @@ 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 (
     <>
@@ -80,8 +82,10 @@ const SlackPage = () => {
       <Box
         sx={{
           backgroundColor: '#F9FAFC',
-          paddingY: '1rem'
+          paddingT: '1rem'
         }}
+        onMouseEnter={disableScroll}
+        onMouseLeave={enableScroll}
       >
         <ScrollMenu Footer={Arrows} onWheel={onWheel}>
           {projects.map(project => (