250 Leadership section: adjust padding on desktop and change wording (#258)

chrisnottca · web-flow · commit 4a6768f3353d · 2021-04-13T17:00:10.000-07:00
Adjust top and bottom padding on desktop
Change "Executive" to "Leadership"
diff --git a/sections/executive-team-section/executive-avatar.js b/sections/executive-team-section/executive-avatar.js
@@ -7,6 +7,8 @@ import styled from 'styled-components'
 import { MediaContainer, StaticImage } from 'components'
 import { TABLET_LARGE_SIZE, TABLET_SMALL_SIZE } from 'styles/constants'
 
+const CONTAINER_MARGIN_BOTTOM_TABLET_LARGE = 84
+
 const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -27,7 +29,7 @@ const Container = styled.div`
   @media only screen and (min-width: ${TABLET_LARGE_SIZE}) {
     max-width: 20%;
     flex: 0 0 20%;
-    margin-bottom: ${rem('84px')};
+    margin-bottom: ${rem(CONTAINER_MARGIN_BOTTOM_TABLET_LARGE)};
   }
 `
 
@@ -85,4 +87,5 @@ ExecutiveAvatar.propTypes = {
   src: string.isRequired,
 }
 
+export { CONTAINER_MARGIN_BOTTOM_TABLET_LARGE }
 export default ExecutiveAvatar
diff --git a/sections/executive-team-section/index.js b/sections/executive-team-section/index.js
@@ -8,16 +8,18 @@ import { useIsMaxScreenSize } from 'helpers/hooks'
 import { TABLET_LARGE_SIZE, TABLET_SMALL_SIZE } from 'styles/constants'
 
 import ChevronSvg from '../../static/icons/chevron.svg'
-import ExecutiveAvatar from './executive-avatar'
+import ExecutiveAvatar, {
+  CONTAINER_MARGIN_BOTTOM_TABLET_LARGE,
+} from './executive-avatar'
 import { people } from './people'
 
 const { h2 } = Heading.VARIANT
 
 const StyledSection = styled.section`
-  padding: ${rem('100px')} 0;
+  padding: ${rem(140)} 0 ${rem(140 - CONTAINER_MARGIN_BOTTOM_TABLET_LARGE)};
 
   @media only screen and (max-width: ${TABLET_LARGE_SIZE}) {
-    padding: ${rem('124px')} 0;
+    padding: ${rem(124)} 0;
   }
 `
 
@@ -88,7 +90,7 @@ const ExecutiveTeamSection = () => {
 
   return (
     <StyledSection>
-      <StyledHeading variant={h2}>Our Executive Team</StyledHeading>
+      <StyledHeading variant={h2}>Our Leadership Team</StyledHeading>
       <AvatarList>
         {peopleToShow.map((person) => (
           <ExecutiveAvatar {...person} key={person.name} />

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,8 @@ import styled from 'styled-components'`
`7`	`7`	`import { MediaContainer, StaticImage } from 'components'`
`8`	`8`	`import { TABLET_LARGE_SIZE, TABLET_SMALL_SIZE } from 'styles/constants'`
`9`	`9`
	`10`	`+const CONTAINER_MARGIN_BOTTOM_TABLET_LARGE = 84`
	`11`	`+`
`10`	`12`	const Container = styled.div`
`11`	`13`	`display: flex;`
`12`	`14`	`flex-direction: column;`
@@ -27,7 +29,7 @@ const Container = styled.div`
`27`	`29`	`@media only screen and (min-width: ${TABLET_LARGE_SIZE}) {`
`28`	`30`	`max-width: 20%;`
`29`	`31`	`flex: 0 0 20%;`
`30`		`- margin-bottom: ${rem('84px')};`
	`32`	`+ margin-bottom: ${rem(CONTAINER_MARGIN_BOTTOM_TABLET_LARGE)};`
`31`	`33`	`}`
`32`	`34`	`
`33`	`35`
`@@ -85,4 +87,5 @@ ExecutiveAvatar.propTypes = {`
`85`	`87`	`src: string.isRequired,`
`86`	`88`	`}`
`87`	`89`
	`90`	`+export { CONTAINER_MARGIN_BOTTOM_TABLET_LARGE }`
`88`	`91`	`export default ExecutiveAvatar`