Add active styling to chapter link

packages/website/ts/@next/components/chapter_link.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { NavLink as ReactRouterLink } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const ChapterLink = styled(ReactRouterLink).attrs({
+    activeStyle: { opacity: 1 },
+})`
+    font-size: 1.222222222rem;
+    display: block;
+    opacity: 0.5;
+    margin-bottom: 1.666666667rem;
+
+    &:hover {
+        opacity: 1;
+    }
+`;

packages/website/ts/@next/pages/about/jobs.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { ChapterLink } from 'ts/@next/components/chapter_link';
 import { Column, Section, Wrap } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
@@ -117,20 +118,4 @@ const BenefitsList = styled.ul`
     li {
         margin-bottom: 1em;
     }
-`;
+`;
-
-// Lets refactor these chapter links into button perhaps as a <Link type={xxx} />
-const ChapterLink = styled(ReactRouterLink)`
-    font-size: 1.222222222rem;
-    display: block;
-    opacity: 0.8;
-    margin-bottom: 1.666666667rem;
-
-    &:first-child {
-        opacity: 1;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-`;

packages/website/ts/@next/pages/about/mission.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { ChapterLink } from 'ts/@next/components/chapter_link';
 import { Image } from 'ts/@next/components/image';
 import { Column, Section, Wrap } from 'ts/@next/components/layout';
 import { Link } from 'ts/@next/components/link';
@@ -74,19 +75,4 @@ export const NextAboutMission = () => (
       </Wrap>
     </Section>
   </SiteWrap>
-);
+);
-
-const ChapterLink = styled(ReactRouterLink)`
-    font-size: 1.222222222rem;
-    display: block;
-    opacity: 0.8;
-    margin-bottom: 1.666666667rem;
-
-    &:first-child {
-        opacity: 1;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-`;

packages/website/ts/@next/pages/about/press.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { ChapterLink } from 'ts/@next/components/chapter_link';
 import { Column, Section, Wrap } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
@@ -64,18 +65,3 @@ export const NextAboutPress = () => (
     </Section>
   </SiteWrap>
 );
-
-const ChapterLink = styled(ReactRouterLink)`
-    font-size: 1.222222222rem;
-    display: block;
-    opacity: 0.8;
-    margin-bottom: 1.666666667rem;
-
-    &:first-child {
-        opacity: 1;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-`;

packages/website/ts/@next/pages/about/team.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
+import { ChapterLink } from 'ts/@next/components/chapter_link';
 import { Column, Section, Wrap } from 'ts/@next/components/layout';
 import { SiteWrap } from 'ts/@next/components/siteWrap';
 import { Heading, Paragraph } from 'ts/@next/components/text';
@@ -196,21 +197,6 @@ export const NextAboutTeam = () => (
   </SiteWrap>
 );
 
-const ChapterLink = styled(ReactRouterLink)`
-    font-size: 1.222222222rem;
-    display: block;
-    opacity: 0.8;
-    margin-bottom: 1.666666667rem;
-
-    &:first-child {
-        opacity: 1;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-`;
-
 const StyledMember = styled.div`
     width: calc(25% - 10px);
     margin-bottom: 10px;