aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-12-10 22:19:52 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-10 22:20:09 +0800
commitcc1b71651dec21205f44f27ac59840edb3e616ad (patch)
tree4015ff489b2e2e30be50a6bf1205e83360916f91
parent5e1892f3834133ea87bf284ad1c491eb5a65901f (diff)
downloaddexon-sol-tools-cc1b71651dec21205f44f27ac59840edb3e616ad.tar
dexon-sol-tools-cc1b71651dec21205f44f27ac59840edb3e616ad.tar.gz
dexon-sol-tools-cc1b71651dec21205f44f27ac59840edb3e616ad.tar.bz2
dexon-sol-tools-cc1b71651dec21205f44f27ac59840edb3e616ad.tar.lz
dexon-sol-tools-cc1b71651dec21205f44f27ac59840edb3e616ad.tar.xz
dexon-sol-tools-cc1b71651dec21205f44f27ac59840edb3e616ad.tar.zst
dexon-sol-tools-cc1b71651dec21205f44f27ac59840edb3e616ad.zip
Add active styling to chapter link
-rw-r--r--packages/website/ts/@next/components/chapter_link.tsx16
-rw-r--r--packages/website/ts/@next/pages/about/jobs.tsx19
-rw-r--r--packages/website/ts/@next/pages/about/mission.tsx18
-rw-r--r--packages/website/ts/@next/pages/about/press.tsx16
-rw-r--r--packages/website/ts/@next/pages/about/team.tsx16
5 files changed, 22 insertions, 63 deletions
diff --git a/packages/website/ts/@next/components/chapter_link.tsx b/packages/website/ts/@next/components/chapter_link.tsx
new file mode 100644
index 000000000..786c76bec
--- /dev/null
+++ b/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;
+ }
+`;
diff --git a/packages/website/ts/@next/pages/about/jobs.tsx b/packages/website/ts/@next/pages/about/jobs.tsx
index 4f85b9945..111c89eae 100644
--- a/packages/website/ts/@next/pages/about/jobs.tsx
+++ b/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;
- }
-`;
+`; \ No newline at end of file
diff --git a/packages/website/ts/@next/pages/about/mission.tsx b/packages/website/ts/@next/pages/about/mission.tsx
index 782f1e1b5..eb7566f40 100644
--- a/packages/website/ts/@next/pages/about/mission.tsx
+++ b/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;
- }
-`;
+); \ No newline at end of file
diff --git a/packages/website/ts/@next/pages/about/press.tsx b/packages/website/ts/@next/pages/about/press.tsx
index 3a500ff39..db2a631e7 100644
--- a/packages/website/ts/@next/pages/about/press.tsx
+++ b/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;
- }
-`;
diff --git a/packages/website/ts/@next/pages/about/team.tsx b/packages/website/ts/@next/pages/about/team.tsx
index 1c7ff319b..74659237e 100644
--- a/packages/website/ts/@next/pages/about/team.tsx
+++ b/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;