Small flow cleanup

components/cutoff-image/index.js

@@ -1,6 +1,4 @@
 // @flow
-import * as React from "react";
-
 import { StyledCutoffImage } from "@components/cutoff-image/styled";
 
 const CutoffImage = StyledCutoffImage;

components/footer/index.js

@@ -1,18 +1,16 @@
-import React from "react";
+// @flow
+import * as React from "react";
 import Link from "next/link";
 import { navigation, NavItems } from "@components/header";
 import { StyledFooter } from "@components/footer/styled";
 
-const Footer = props => (
+const Footer = () => (
   <StyledFooter>
     <StyledFooter.Wrapper>
       <StyledFooter.Section>
         <Link href="https://numfocus.org/">
           <a target="_blank">
-            <img
-              src="/static/sponsor-numfocus.png"
-              alt="NumFocus"
-            />
+            <img src="/static/sponsor-numfocus.png" alt="NumFocus" />
           </a>
         </Link>
       </StyledFooter.Section>

components/footer/styled/index.js

@@ -1,3 +1,4 @@
+// @flow
 import styled, { css } from "styled-components";
 import { sif, defaultWrapper } from "@common/styled";
 

components/hero/pattern.js

@@ -1,10 +1,11 @@
-import React from 'react';
-import styled from 'styled-components';
+// @flow
+import * as React from "react";
+import styled from "styled-components";
 
 const StyledSVG = styled.svg`
   display: block;
 `;
-export default ({ width, ...rest }) => (
+export default () => (
   <StyledSVG width="1422px" height="542px" viewBox="0 0 1422 542">
     <defs>
       <linearGradient

components/hero/styled/index.js

@@ -1,3 +1,4 @@
+// @flow
 import styled, { css } from "styled-components";
 import { spacing } from "@common/constants";
 import { colors } from "@common/colors";
@@ -67,7 +68,7 @@ const StyledHero = styled.div`
   position: relative;
   a{
     &:link,
-    &:visited, 
+    &:visited,
     &:active,
     &:hover{
       color: white;

components/navigation/navigation-left.js

@@ -1,5 +1,7 @@
-import React from "react";
+// @flow
+import * as React from "react";
 import Link from "next/link";
+// $FlowFixMe
 import styles from "./navigation.scss";
 
 export default () => (

components/navigation/navigation-right.js

@@ -1,5 +1,5 @@
 // @flow
-import React from "react";
+import * as React from "react";
 import Link from "next/link";
 
 export default () => (

components/navigation/social-buttons.js

@@ -1,5 +1,5 @@
 // @flow
-import React from "react";
+import * as React from "react";
 
 export const SlackButton = () => (
   <a

components/typography/index.js

@@ -1,3 +1,4 @@
+// @flow
 import { StyledType as Type, BashPre } from "@components/typography/styled";
 
 export { Type, BashPre };

components/typography/styled/index.js

@@ -1,3 +1,4 @@
+// @flow
 import styled, { css } from "styled-components";
 import { fonts } from "@common/constants";
 import { colors } from "@common/colors";

components/video/index.js

@@ -1,9 +1,15 @@
+// @flow
+import * as React from "react";
 import styled, { css } from "styled-components";
 import { handheld, desktop } from "@common/mixins";
-const Video = ({ mp4, webm, poster }) => (
-  <video poster={poster} preload="auto" autoPlay muted loop="loop">
-    {mp4 ? <source src={mp4} type="video/mp4" /> : null}
-    {webm ? <source src={webm} type="video/webm" /> : null}
+
+type VideoProps = { mp4?: string, webm?: string, poster?: string };
+
+const Video = (props: VideoProps) => (
+  <video poster={props.poster} preload="auto" autoPlay muted loop="loop">
+    {props.mp4 ? <source src={props.mp4} type="video/mp4" /> : null}
+    {props.webm ? <source src={props.webm} type="video/webm" /> : null}
   </video>
 );
-export { Video, StyledVideoPlaceholder };
+
+export { Video };

pages/about.js

@@ -12,8 +12,7 @@ import {
   StyledPersonTitle,
   StyledPersonSocial,
   StyledPersonSocialItem,
-  StyledGridWrapper,
-  StyledGrid
+  StyledGridWrapper
 } from "@components/layout/styled";
 import { ContentSection } from "@components/content-section";
 import { PageHeader } from "@components/page-header";

pages/atom.js

@@ -2,24 +2,13 @@
 import * as React from "react";
 import { colors } from "@common/colors";
 import Layout from "@components/layout";
+import { Video } from "@components/video";
 import { Hero } from "@components/hero";
 import { Type, BashPre } from "@components/typography";
 import { ContentSection, ContentSections } from "@components/content-section";
 import { Button, Buttons } from "@components/button";
 import { CutoffImage } from "@components/cutoff-image";
 
-type VideoProps =
-  | { mp4: string, webm: string, poster: string }
-  | { mp4: string, poster: string }
-  | { webm: string, poster: string };
-
-const Video = (props: VideoProps) => (
-  <video poster={props.poster} preload="auto" autoPlay muted loop="loop">
-    {props.mp4 ? <source src={props.mp4} type="video/mp4" /> : null}
-    {props.webm ? <source src={props.webm} type="video/webm" /> : null}
-  </video>
-);
-
 const InspectCode = () => (
   <ContentSection center>
     <ContentSection.Pane visual>