Skip to content

Commit 34967e7

Browse files
adriandelisleadriandelisle
authored
71 added diversity and inclusion section to about page (#96)
1 parent b5a6722 commit 34967e7

File tree

9 files changed

+115
-12
lines changed

9 files changed

+115
-12
lines changed

‎components/site-header/compact.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { bool, func, string, oneOf } from 'prop-types'
55
import ReactDOM from 'react-dom'
66
import styled, { css } from 'styled-components'
77

8-
import { usePrevious, useIsCompactScreen } from 'helpers/hooks'
8+
import { usePrevious, useIsMaxScreenSize } from 'helpers/hooks'
9+
import { COMPACT_SIZE } from 'styles/constants'
910

1011
import { COLOR_VARIATIONS } from './constants'
1112
import HamburgerMenu from './hamburger-menu'
@@ -106,7 +107,7 @@ NavOverlay.propTypes = {
106107

107108
const Compact = ({ variation }) => {
108109
const [isOpen, setIsOpen] = useState(false)
109-
const isCompactScreen = useIsCompactScreen()
110+
const isCompactScreen = useIsMaxScreenSize(COMPACT_SIZE)
110111
const OpenButtonRef = React.createRef()
111112
const CloseButtonRef = React.createRef()
112113
const prevIsOpen = usePrevious(isOpen)

‎helpers/hooks/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export { default as usePrevious } from './use-previous'
2-
export { default as useIsCompactScreen } from './use-is-compact-screen'
2+
export { default as useIsMaxScreenSize } from './use-is-max-screen-size'

helpers/hooks/use-is-compact-screen.js renamed to helpers/hooks/use-is-max-screen-size.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import { useEffect, useState } from 'react'
22

3-
import { COMPACT_SIZE } from 'styles/constants'
4-
53
// setup listener for screen size changes
6-
const useIsCompactScreen = () => {
4+
const useIsMaxScreenSize = (screenSize) => {
75
const [isCompactScreen, setIsCompactScreen] = useState(false)
86
useEffect(() => {
9-
const mediaWatcher = window.matchMedia(`(max-width: ${COMPACT_SIZE})`)
7+
const mediaWatcher = window.matchMedia(`(max-width: ${screenSize})`)
108
setIsCompactScreen(mediaWatcher.matches)
119

1210
const handleSizeChange = (e) => {
@@ -31,4 +29,4 @@ const useIsCompactScreen = () => {
3129
return isCompactScreen
3230
}
3331

34-
export default useIsCompactScreen
32+
export default useIsMaxScreenSize

‎pages/about.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { CompanyLogo, Heading, Text, Footer, SiteHeader } from 'components'
2-
import { ExecutiveTeamSection, LogoSection } from 'sections'
2+
import {
3+
DiversityAndInclusionSection,
4+
ExecutiveTeamSection,
5+
LogoSection,
6+
} from 'sections'
37
import styles from 'styles/about.module.css'
48

59
const { small: SMALL_LOGO } = CompanyLogo.SIZE
@@ -22,6 +26,7 @@ const About = () => (
2226
</Text>
2327
</div>
2428
</div>
29+
<DiversityAndInclusionSection />
2530
<ExecutiveTeamSection />
2631
<LogoSection
2732
title="Our Software Engineers"

‎public/sharon-mccutcheon-multi-coloured-hand-paint-tall.jpeg‎

57.8 KB
Loading

‎public/sharon-mccutcheon-multi-coloured-hand-paint-wide.jpeg‎

128 KB
Loading

‎sections/diversity-and-inclusion-section/index.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import React from 'react'
2+
3+
import { rem } from 'polished'
4+
import styled from 'styled-components'
5+
6+
import { Heading, Text } from 'components'
7+
import { useIsMaxScreenSize } from 'helpers/hooks'
8+
import { DESKTOP_SIZE } from 'styles/constants'
9+
10+
const IMAGE_BREAKPOINT = '839px'
11+
12+
const { h2 } = Heading.VARIANT
13+
14+
const Container = styled.div`
15+
display: flex;
16+
flex-direction: row;
17+
height: 534px;
18+
@media only screen and (max-width: ${IMAGE_BREAKPOINT}) {
19+
flex-direction: column-reverse;
20+
height: auto;
21+
}
22+
`
23+
24+
const ImageContainer = styled.div`
25+
flex-grow: 1;
26+
flex-shrink: 0;
27+
@media only screen and (max-width: ${IMAGE_BREAKPOINT}) {
28+
width: 100%;
29+
}
30+
`
31+
32+
const Image = styled.img`
33+
max-width: 100%;
34+
@media only screen and (max-width: ${IMAGE_BREAKPOINT}) {
35+
width: 100%;
36+
}
37+
`
38+
39+
const TextContainer = styled.div`
40+
display: flex;
41+
flex-direction: column;
42+
flex-grow: 1;
43+
flex-shrink: 1;
44+
padding: ${rem('101px')} ${rem('80px')} ${rem('101px')} ${rem('70px')};
45+
background: linear-gradient(61.68deg, #ff68ba 2.29%, #edc281 100.63%);
46+
47+
@media only screen and (max-width: ${DESKTOP_SIZE}) {
48+
align-items: center;
49+
padding: ${rem('48px')} ${rem('24px')};
50+
}
51+
52+
@media only screen and (max-width: ${IMAGE_BREAKPOINT}) {
53+
align-items: center;
54+
padding: ${rem('84px')} ${rem('36px')};
55+
width: 100%;
56+
}
57+
`
58+
59+
const StyledHeading = styled(Heading)``
60+
61+
const DiversityAndInclusionSection = () => {
62+
const isCompactScreen = useIsMaxScreenSize(IMAGE_BREAKPOINT)
63+
64+
return (
65+
<section>
66+
<Container>
67+
<ImageContainer>
68+
<Image
69+
src={
70+
isCompactScreen
71+
? '/sharon-mccutcheon-multi-coloured-hand-paint-wide.jpeg'
72+
: '/sharon-mccutcheon-multi-coloured-hand-paint-tall.jpeg'
73+
}
74+
alt="Hand with multi-colored paint on it."
75+
/>
76+
</ImageContainer>
77+
<TextContainer>
78+
<StyledHeading variant={h2}>Diversity & Inclusion</StyledHeading>
79+
<Text>
80+
It’s incredibly important to everyone at Commit that the community
81+
is an inclusive and equitable workplace. We are remote-first,
82+
meaning that we don’t have an office and many of the engineers work
83+
on an asynchronous time schedule, which facilitates parents or
84+
people who need to tackle various priorities in life.
85+
</Text>
86+
<Text>
87+
While we are small, and at the very beginning of this journey to
88+
have a diverse workforce that is truly representative of our
89+
society, we aim to break the mold for tech companies and shed
90+
typical stereotypes and biases.
91+
</Text>
92+
</TextContainer>
93+
</Container>
94+
</section>
95+
)
96+
}
97+
98+
export default DiversityAndInclusionSection

‎sections/executive-team-section/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import styled from 'styled-components'
55

66
import { Heading } from 'components'
77
import { FlexSectionContents } from 'components/layout'
8-
import { useIsCompactScreen } from 'helpers/hooks'
8+
import { useIsMaxScreenSize } from 'helpers/hooks'
99
import ChevronSvg from 'public/chevron.svg'
10-
import { DESKTOP_SIZE, MOBILE_SIZE } from 'styles/constants'
10+
import { DESKTOP_SIZE, MOBILE_SIZE, COMPACT_SIZE } from 'styles/constants'
1111

1212
import ExecutiveAvatar from './executive-avatar'
1313

@@ -119,7 +119,7 @@ const people = [
119119
]
120120

121121
const ExecutiveTeamSection = () => {
122-
const isCompactScreen = useIsCompactScreen()
122+
const isCompactScreen = useIsMaxScreenSize(COMPACT_SIZE)
123123
const [showAllPeople, setShowAllPeople] = useState(false)
124124

125125
const peopleToShow =

‎sections/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
export { default as DiversityAndInclusionSection } from './diversity-and-inclusion-section'
12
export { default as ExecutiveTeamSection } from './executive-team-section'
23
export { default as LogoSection } from './logo-section'

0 commit comments

Comments
 (0)