Skip to content
This repository was archived by the owner on Apr 19, 2021. It is now read-only.

Commit 1f00f6d

Browse files
nisarhassan12nisarhassan12
authored
Website design refresh (#670)
1 parent 72423ad commit 1f00f6d

File tree

154 files changed

+3569
-2898
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

154 files changed

+3569
-2898
lines changed

‎src/components/ActionCard.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22

33
import styled from '@emotion/styled'
4-
import { colors, shadows } from '../styles/variables'
4+
import { colors, borders } from '../styles/variables'
55
import link from '../utils/link'
66

77
const StyledActionCard = styled.section`
@@ -11,7 +11,8 @@ const StyledActionCard = styled.section`
1111
padding: 5rem 3rem;
1212
text-align: center;
1313
background: ${colors.offWhite};
14-
box-shadow: ${shadows.light};
14+
border: ${borders.light2};
15+
border-radius: 3px;
1516
1617
h2 {
1718
font-size: 2.8rem;
@@ -21,8 +22,8 @@ const StyledActionCard = styled.section`
2122
margin: -3rem 0 4rem;
2223
}
2324
24-
.btn {
25-
margin-right: 2rem;
25+
.btn-wrapper {
26+
justify-content: center;
2627
}
2728
`
2829

‎src/components/Arrow.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React, { CSSProperties } from 'react'
2+
3+
import styled from '@emotion/styled'
4+
import { Global, css } from '@emotion/core'
5+
import { colors } from '../styles/variables'
6+
7+
const StyledArrow = styled.svg`
8+
display: inline-block;
9+
fill: ${colors.offWhite1};
10+
transition: all .2s;
11+
height: 4rem;
12+
`
13+
14+
interface ArrrowProps {
15+
styles?: CSSProperties
16+
}
17+
18+
const Arrow = ({ styles }: ArrrowProps) => (
19+
<StyledArrow
20+
xmlns="http://www.w3.org/2000/svg"
21+
viewBox="0 0 33.635 33.635"
22+
className="arrow"
23+
style={{...styles}}
24+
>
25+
<Global
26+
styles={css`
27+
a {
28+
&:hover,
29+
&:focus {
30+
.arrow {
31+
fill: ${colors.text};
32+
}
33+
}
34+
}
35+
`}
36+
/>
37+
<path
38+
d="M-1075.548-827.365a16.708 16.708 0 01-11.892-4.926 16.708 16.708 0 01-4.926-11.892 16.708 16.708 0 014.926-11.892 16.708 16.708 0 0111.892-4.925 16.708 16.708 0 0111.892 4.926 16.708 16.708 0 014.926 11.892 16.708 16.708 0 01-4.926 11.892 16.708 16.708 0 01-11.892 4.925zM-1079.73-853a1 1 0 00-.7.282.992.992 0 00-.3.7.994.994 0 00.282.712l6.881 7.1-6.881 7.084a.993.993 0 00-.283.711 1 1 0 00.3.7 1 1 0 00.7.284 1.007 1.007 0 00.717-.3l8.233-8.476-8.232-8.5a.992.992 0 00-.717-.297z"
39+
data-name="Ausschluss 26"
40+
transform="translate(1092.365 861)"
41+
></path>
42+
</StyledArrow>
43+
)
44+
45+
export default Arrow

‎src/components/ScrollToTopButton.tsx renamed to ‎src/components/BackToTopButton.tsx

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react'
22

33
import styled from '@emotion/styled'
4-
import { borders, colors, shadows } from '../styles/variables'
5-
6-
import IconArrow from '../resources/icon-arrow.svg'
4+
import { shadows, colors } from '../styles/variables'
5+
import Arrow from './Arrow'
76

87
const StyledScrollToTopButton = styled.a`
98
position: fixed;
@@ -12,23 +11,11 @@ const StyledScrollToTopButton = styled.a`
1211
display: flex;
1312
justify-content: center;
1413
align-items: center;
15-
height: 5.5rem;
16-
width: 5.5rem;
17-
background: ${colors.link};
18-
border: ${borders.light};
1914
box-shadow: ${shadows.light1};
2015
border-radius: 50%;
2116
z-index: 100;
2217
transition: transform .3s, opacity .2s, background-color .2s ease-in-out;
23-
24-
&:hover,
25-
&:focus {
26-
background: ${colors.lightBlue};
27-
}
28-
29-
img {
30-
height: 1.5rem;
31-
}
18+
background: ${colors.white};
3219
`
3320

3421

@@ -56,7 +43,7 @@ class ScrollToTopButton extends React.Component {
5643
className="back-to-top"
5744
style={ this.state.shouldBeRendered ? {opacity: 1, transform: 'scale(1)'} : {opacity: 0, transform: 'scale(0)'} }
5845
>
59-
<img alt="Up Arrow" src={IconArrow} />
46+
<Arrow styles={{ transform: 'rotate(-90deg)'}}/>
6047
</StyledScrollToTopButton>
6148
)
6249
}

‎src/components/Banner.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const StyledBanner = styled.header`
2626
.para {
2727
margin-top: 3rem;
2828
29-
@media(min-width: 960px) {
29+
@media(min-width: 961px) {
3030
max-width: 50rem;
3131
}
3232
}
@@ -70,7 +70,7 @@ interface BannerProps {
7070
}
7171

7272
const Banner: React.SFC<BannerProps> = ({subtitle, title, paragraph, linkPath, linkText, img, children}) => (
73-
<div className="row">
73+
<div className="row pattern">
7474
<StyledBanner role="banner" className="banner">
7575
<div className="banner__text">
7676
<h3 className="sub">{subtitle}</h3>

‎src/components/Details.tsx

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎src/components/DocSideBar.tsx

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/components/DropDown.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import ExternalLink from '../components/ExternalLink'
99
const StyledDropDown = styled.div`
1010
z-index: 900;
1111
12-
@media(min-width: ${sizes.breakpoints.lg}) {
12+
@media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
1313
position: relative;
1414
}
1515
@@ -38,7 +38,7 @@ const StyledDropDown = styled.div`
3838
height: 1rem;
3939
}
4040
41-
@media(min-width: ${sizes.breakpoints.lg}) {
41+
@media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
4242
display: none;
4343
}
4444
}
@@ -47,7 +47,7 @@ const StyledDropDown = styled.div`
4747
display: flex;
4848
flex-direction: column;
4949
50-
@media(min-width: ${sizes.breakpoints.lg}) {
50+
@media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
5151
position: absolute;
5252
top: 2.5rem;
5353
left: 7%;
@@ -72,7 +72,7 @@ const StyledDropDown = styled.div`
7272
}
7373
7474
li {
75-
@media(min-width: ${sizes.breakpoints.lg}) {
75+
@media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
7676
margin: 1rem 0 0;
7777
padding: 0 1.5rem;
7878
font-size: 90%;
@@ -90,7 +90,7 @@ const StyledDropDown = styled.div`
9090
.shown {
9191
opacity: 1;
9292
93-
@media(min-width: ${sizes.breakpoints.lg}) {
93+
@media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
9494
background: ${colors.white};
9595
transform: scale(1) translate(-50%, 0);
9696
}
@@ -103,7 +103,7 @@ const StyledDropDown = styled.div`
103103
display: none;
104104
}
105105
106-
@media(min-width: ${sizes.breakpoints.lg}) {
106+
@media(min-width: calc(${sizes.breakpoints.lg} + 1px)) {
107107
transform: scale(0) translate(-50%, -20rem);
108108
}
109109
}

‎src/components/ExternalLink.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import styled from '@emotion/styled'
44
import { colors, sizes } from '../styles/variables'
55

66
const StyledExternalLink = styled.a`
7-
8-
svg {
7+
.external {
98
height: 1.5rem;
109
transform: translate(.6rem, .3rem);
1110
transition: all .2s;
1211
opacity: 0;
12+
fill: ${colors.text};
1313
1414
@media(max-width: ${sizes.breakpoints.md}) {
1515
opacity: 1;
@@ -18,12 +18,11 @@ const StyledExternalLink = styled.a`
1818
1919
&:hover,
2020
&:active {
21-
svg {
21+
.external {
2222
opacity: 1;
2323
fill: ${colors.link};
2424
}
2525
}
26-
2726
`
2827

2928
interface ExternalLinkProps {
@@ -36,8 +35,7 @@ interface ExternalLinkProps {
3635

3736
const ExternalLink: React.SFC<ExternalLinkProps> = ({href, text, tabIndex, className, onBlur}) => (
3837
<StyledExternalLink href={href} target="_blank" tabIndex={tabIndex} className={className} rel="noopener" onBlur={onBlur}>
39-
{text} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1850 1850"><path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" transform="matrix(1,0,0,-1,30.372881,1426.9492)"/></svg>
40-
38+
{text} <svg className="external" xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1850 1850"><path d="M 1408,608 V 288 Q 1408,169 1323.5,84.5 1239,0 1120,0 H 288 Q 169,0 84.5,84.5 0,169 0,288 v 832 Q 0,1239 84.5,1323.5 169,1408 288,1408 h 704 q 14,0 23,-9 9,-9 9,-23 v -64 q 0,-14 -9,-23 -9,-9 -23,-9 H 288 q -66,0 -113,-47 -47,-47 -47,-113 V 288 q 0,-66 47,-113 47,-47 113,-47 h 832 q 66,0 113,47 47,47 47,113 v 320 q 0,14 9,23 9,9 23,9 h 64 q 14,0 23,-9 9,-9 9,-23 z m 384,864 V 960 q 0,-26 -19,-45 -19,-19 -45,-19 -26,0 -45,19 L 1507,1091 855,439 q -10,-10 -23,-10 -13,0 -23,10 L 695,553 q -10,10 -10,23 0,13 10,23 l 652,652 -176,176 q -19,19 -19,45 0,26 19,45 19,19 45,19 h 512 q 26,0 45,-19 19,-19 19,-45 z" transform="matrix(1,0,0,-1,30.372881,1426.9492)"/></svg>
4139
</StyledExternalLink>
4240
)
4341

0 commit comments

Comments
 (0)