Cleanup + refactoring (#29)

* address warnings

* reorganize images & imports, fix carousel behavior, add titles, fix browser errors

* attempt to fix mobile issue

* attempt 2

* attempt to fix nav

src/components/Callout/index.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { H2, GREEN } from '../../styles/styles';
 import { Container, LargeButton, LeftSprinkle, RightSprinkle } from './styled';
 import Button from '../Button';
-import LeftCollage from '../../images/about-collage.png';
-import RightCollage from '../../images/kicks.png';
+import LeftCollage from '../../images/page-sprinkles/about-collage.png';
+import RightCollage from '../../images/page-sprinkles/kicks.png';
 
 const CallOut = ({ label, header }) => (
   <Container>

src/components/ExploreCarousel/index.js

@@ -1,5 +1,5 @@
-import React from "react";
-import { H3, H2, StyledLink } from "../../styles/styles";
+import React from 'react';
+import { H3, H2, StyledLink } from '../../styles/styles';
 import {
   FlexContainer,
   responsiveWatch,
@@ -12,25 +12,27 @@ import {
   StyledImage,
   StyledArticleImage,
   ItemContainer,
-} from "./styled";
-import Carousel from "react-multi-carousel";
-import ExploreGallery from "../ExploreGallery";
-import "react-multi-carousel/lib/styles.css";
+} from './styled';
+import Carousel from 'react-multi-carousel';
+import ExploreGallery from '../ExploreGallery';
+import 'react-multi-carousel/lib/styles.css';
 
 const ExploreCarousel = ({ section, id }) => {
   const {
     data: { title, works },
     uid: sectionuid,
   } = section;
 
+  const CustomLeftArrow = ({ onClick }) => <LeftIcon onClick={onClick} />;
+  const CustomRightArrow = ({ onClick }) => <RightIcon onClick={onClick} />;
+
   const SingleCarousel = () => (
     <Carousel
       responsive={responsiveWatch}
-      customRightArrow={<RightIcon />}
-      customLeftArrow={<LeftIcon />}
+      customRightArrow={<CustomRightArrow />}
+      customLeftArrow={<CustomLeftArrow />}
       infinite={true}
-      autoPlay={false}
-    >
+      shouldResetAutoplay={false}>
       {works.map((work) => {
         const {
           work: {
@@ -41,9 +43,9 @@ const ExploreCarousel = ({ section, id }) => {
           },
         } = work;
         return (
-          <ItemContainer id={id}>
+          <ItemContainer key={uid}>
             <StyledLink to={`../works/${uid}`}>
-              <Work key={uid}>
+              <Work>
                 <StyledImage alt={title.text} src={thumbnail.url} />
                 <H3>{title.text}</H3>
                 <StyledP>{previewText.text}</StyledP>
@@ -58,11 +60,10 @@ const ExploreCarousel = ({ section, id }) => {
   const StackedCarousel = () => (
     <Carousel
       responsive={responsiveRead}
-      customRightArrow={<RightIcon />}
-      customLeftArrow={<LeftIcon />}
+      customRightArrow={<CustomRightArrow />}
+      customLeftArrow={<CustomLeftArrow />}
       infinite={true}
-      autoPlay={false}
-    >
+      shouldResetAutoplay={false}>
       {works.map((work, idx) => {
         const {
           work: {
@@ -87,7 +88,7 @@ const ExploreCarousel = ({ section, id }) => {
             },
           } = works[idx - 1];
           return (
-            <ItemContainer>
+            <ItemContainer key={uid}>
               <StyledLink to={`../works/${uidTop}`}>
                 <Work key={uidTop}>
                   <FlexRow>
@@ -126,9 +127,9 @@ const ExploreCarousel = ({ section, id }) => {
     <FlexContainer id={id}>
       <div>
         <H2 bold>{title.text}</H2>
-        {sectionuid === "read" ? (
+        {sectionuid === 'read' ? (
           <StackedCarousel />
-        ) : sectionuid === "watch" ? (
+        ) : sectionuid === 'watch' ? (
           <SingleCarousel />
         ) : (
           <ExploreGallery works={works} />

src/components/ExploreGallery/index.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from "react";
-import Gallery from "react-grid-gallery";
-import { ViewContainer, StyledH3 } from "./styled";
-import { navigate } from "gatsby";
+import React, { useState, useEffect } from 'react';
+import Gallery from 'react-grid-gallery';
+import { ViewContainer, StyledH3 } from './styled';
+import { navigate } from 'gatsby';
 
 const ExploreGallery = ({ works }) => {
   const [imageList, setImageList] = useState([]);
@@ -12,8 +12,7 @@ const ExploreGallery = ({ works }) => {
       const {
         work: {
           document: {
-            uid,
-            data: { images, title },
+            data: { images },
           },
         },
       } = work;
@@ -34,16 +33,16 @@ const ExploreGallery = ({ works }) => {
 
     const shuffledImages = galleryImages.sort((a, b) => 0.5 - Math.random()); //shuffle images
     setImageList(shuffledImages);
-  }, []);
+  }, [works]);
 
   function imageStyle() {
     return {
-      height: "100%",
+      height: '100%',
     };
   }
 
   function redirectGallery(index) {
-    return navigate("/works/" + imageList[index].uid);
+    return navigate('/works/' + imageList[index].uid);
   }
 
   return (

src/components/FeaturedContent/index.js

@@ -11,8 +11,8 @@ import {
   TopLeftCollage,
 } from './styled';
 import Button from '../Button';
-import Collage1 from '../../images/explore-collage-1.png';
-import Collage2 from '../../images/explore-collage-2.png';
+import Collage1 from '../../images/page-sprinkles/explore-collage-1.png';
+import Collage2 from '../../images/page-sprinkles/explore-collage-2.png';
 
 const FeaturedContent = () => {
   const query = useStaticQuery(graphql`

src/components/Footer/index.js

@@ -11,7 +11,7 @@ import {
   HeartIcon,
 } from './styled';
 import { A } from '../../styles/styles';
-import ScoutLogo from '../../images/scout-logo.svg';
+import ScoutLogo from '../../images/logos/scout-logo.svg';
 import Button from '../Button';
 import SocialLinks from './SocialLinks';
 

src/components/Hero/images.js

@@ -1,21 +1,21 @@
-import Camera from '../../images/camera.png';
-import Couch from '../../images/couch.png';
-import Desk from '../../images/desk.png';
-import FlowerPot from '../../images/flower-pot.png';
-import Kicks from '../../images/kicks.png';
-import PaintTube from '../../images/paint-tube.png';
-import Phone from '../../images/phone.png';
-import RecordPlayer from '../../images/record-player.png';
-import SprinkleArrow from '../../images/sprinkle-arrow.png';
-import SprinkleBurst from '../../images/sprinkle-burst.png';
-import SprinkleCircle from '../../images/sprinkle-circle.png';
-import SprinkleGrid from '../../images/sprinkle-grid.png';
-import SprinkleSlashes from '../../images/sprinkle-slashes.png';
-import SprinkleSparkle from '../../images/sprinkle-sparkle.png';
-import SprinkleSpring from '../../images/sprinkle-spring.png';
-import Stereo from '../../images/stereo.png';
-import Sticker from '../../images/sticker.png';
-import Stickers from '../../images/stickers.png';
+import Camera from '../../images/hero/camera.png';
+import Couch from '../../images/hero/couch.png';
+import Desk from '../../images/hero/desk.png';
+import FlowerPot from '../../images/hero/flower-pot.png';
+import Kicks from '../../images/hero/kicks.png';
+import PaintTube from '../../images/hero/paint-tube.png';
+import Phone from '../../images/hero/phone.png';
+import RecordPlayer from '../../images/hero/record-player.png';
+import SprinkleArrow from '../../images/hero/sprinkle-arrow.png';
+import SprinkleBurst from '../../images/hero/sprinkle-burst.png';
+import SprinkleCircle from '../../images/hero/sprinkle-circle.png';
+import SprinkleGrid from '../../images/hero/sprinkle-grid.png';
+import SprinkleSlashes from '../../images/hero/sprinkle-slashes.png';
+import SprinkleSparkle from '../../images/hero/sprinkle-sparkle.png';
+import SprinkleSpring from '../../images/hero/sprinkle-spring.png';
+import Stereo from '../../images/hero/stereo.png';
+import Sticker from '../../images/hero/sticker.png';
+import Stickers from '../../images/hero/stickers.png';
 
 const images = [
   {

src/components/Hero/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Container, Frame, MobileFrame, Image, LogoImage } from './styled';
 import images from './images';
-import Logo from '../../images/logo.svg';
+import Logo from '../../images/logos/logo-white.svg';
 
 const Hero = () => {
   return (

src/components/Nav/index.js

@@ -9,7 +9,7 @@ import {
 } from './styled';
 import Button from '../Button';
 import { Menu } from 'react-feather';
-import Logo from '../../images/logo-white.svg';
+import Logo from '../../images/logos/logo-white.svg';
 import MobileMenu from '../MobileMenu';
 
 const Nav = () => {

src/components/Nav/styled.js

@@ -10,6 +10,10 @@ export const StyledNav = styled.nav`
 export const Container = styled(MarginContainer)`
   display: flex;
   align-items: baseline;
+  justify-content: space-between;
+  ${min.desktop} {
+    justify-content: flex-start;
+  }
 `;
 
 export const Links = styled.div`
@@ -32,10 +36,7 @@ export const SubmitContainer = styled.div`
 `;
 
 export const Hamburger = styled.button`
-  flex: 2;
   align-self: center;
-  display: flex;
-  justify-content: end;
   border: 0;
   background-color: transparent;
   color: ${CREAM};

src/components/ProjectPreview/index.js

@@ -9,9 +9,9 @@ import {
 import { H1, P, YELLOW } from '../../styles/styles';
 import Button from '../Button';
 import ProjectCarousel from '../ProjectCarousel';
-import Collage1 from '../../images/project-collage-1.png';
-import Collage2 from '../../images/project-collage-2.png';
-import Collage3 from '../../images/project-collage-3.png';
+import Collage1 from '../../images/page-sprinkles/project-collage-1.png';
+import Collage2 from '../../images/page-sprinkles/project-collage-2.png';
+import Collage3 from '../../images/page-sprinkles/project-collage-3.png';
 
 const sprinkles = [Collage1, Collage2, Collage3];
 

src/components/SingleWorks/index.js

@@ -16,8 +16,8 @@ import {
   OverflowContainer,
 } from './styled';
 import Button from '../Button';
-import SingleWorksTopCollage from '../../images/single-works-collage.png';
-import SingleWorksBottomCollage from '../../images/single-works-bottom-collage.png';
+import SingleWorksTopCollage from '../../images/page-sprinkles/single-works-collage.png';
+import SingleWorksBottomCollage from '../../images/page-sprinkles/single-works-bottom-collage.png';
 
 const SingleWorks = () => {
   const query = useStaticQuery(graphql`
@@ -85,6 +85,9 @@ const SingleWorks = () => {
     },
   } = query;
 
+  const CustomLeftArrow = ({ onClick }) => <LeftIcon onClick={onClick} />;
+  const CustomRightArrow = ({ onClick }) => <RightIcon onClick={onClick} />;
+
   return (
     <OverflowContainer>
       <Container>
@@ -96,8 +99,8 @@ const SingleWorks = () => {
           responsive={responsive}
           infinite
           shouldResetAutoplay={false}
-          customLeftArrow={<LeftIcon />}
-          customRightArrow={<RightIcon />}>
+          customLeftArrow={<CustomLeftArrow />}
+          customRightArrow={<CustomRightArrow />}>
           {works.map((work) => {
             const {
               uid,
@@ -109,7 +112,7 @@ const SingleWorks = () => {
               },
             } = work.work;
             return (
-              <Slide>
+              <Slide key={uid}>
                 <Link to={`/works/${uid}`}>
                   <Thumbnail src={url} alt={alt} />
                 </Link>

src/components/SingleWorks/styled.js

@@ -5,6 +5,7 @@ import { ArrowLeft, ArrowRight } from 'react-feather';
 
 export const OverflowContainer = styled.div`
   overflow-x: clip;
+  width: 100%;
 `;
 
 export const Container = styled(MarginContainer)`

src/components/Video/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { BLUE, MarginContainer, P, H2, H3 } from '../../styles/styles';
+import { BLUE, MarginContainer, P, H2, H3, CREAM } from '../../styles/styles';
 import { min } from '../../styles/breakpoints';
 
 export const Container = styled(MarginContainer)`
@@ -64,4 +64,7 @@ export const StyledP = styled(P)`
   display: inline-block;
   width: 100%;
   margin-block: 0;
+  a {
+    color: ${CREAM};
+  }
 `;

src/pages/404.js

@@ -1,53 +1,19 @@
 import * as React from 'react';
-import { Link } from 'gatsby';
 import Layout from '../components/Layout';
+import Button from '../components/Button';
+import { H1, MarginContainer, P, YELLOW } from '../styles/styles';
 
-// styles
-const pageStyles = {
-  color: '#232129',
-  padding: '96px',
-  fontFamily: '-apple-system, Roboto, sans-serif, serif',
-};
-const headingStyles = {
-  marginTop: 0,
-  marginBottom: 64,
-  maxWidth: 320,
-};
-
-const paragraphStyles = {
-  marginBottom: 48,
-};
-const codeStyles = {
-  color: '#8A6534',
-  padding: 4,
-  backgroundColor: '#FFF4DB',
-  fontSize: '1.25rem',
-  borderRadius: 4,
-};
-
-// markup
 const NotFoundPage = () => {
   return (
     <Layout>
       <title>Not found</title>
-      <h1 style={headingStyles}>Page not found</h1>
-      <p style={paragraphStyles}>
-        Sorry{' '}
-        <span role="img" aria-label="Pensive emoji">
-          😔
-        </span>{' '}
-        we couldn’t find what you were looking for.
-        <br />
-        {process.env.NODE_ENV === 'development' ? (
-          <>
-            <br />
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
-            <br />
-          </>
-        ) : null}
-        <br />
-        <Link to="/">Go home</Link>.
-      </p>
+      <MarginContainer>
+        <H1>Page not found</H1>
+        <P>Sorry, we couldn't find what you were looking for.</P>
+        <Button to="/" color={YELLOW}>
+          Go home
+        </Button>
+      </MarginContainer>
     </Layout>
   );
 };