Skip to content

Commit 60b80f5

Browse files
simonkagwisimonkagwi
authored
Improve the readability of homepage content sections. (#363)
* Improve the readability of homepage content sections - 3-column layout. * Different background colors for sections.
1 parent dbdbd00 commit 60b80f5

File tree

2 files changed

+81
-78
lines changed

2 files changed

+81
-78
lines changed

‎frontend/src/Components/HomePage/HomePage.js‎

Lines changed: 64 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -126,79 +126,75 @@ function HomePage() {
126126
</S.AboutContent>
127127
</S.About>
128128

129-
<S.SubContent>
130-
<S.DeptCTA>
131-
<S.SubHeading>View Stop + Search Data by Department</S.SubHeading>
132-
<P size={SIZES[1]}>Choose a police or sheriff’s department to see:</P>
133-
<P size={SIZES[1]}>- Stops and search rates over time</P>
134-
<P size={SIZES[1]}>- Stops and searches broken down by race / ethnicity</P>
135-
<P size={SIZES[1]}>
136-
- Use of force during stops and how frequently contraband was found
137-
</P>
138-
<S.SearchWrapper>
139-
<DepartmentSearch
140-
showIndexList
141-
navigateOnSelect
142-
placeholder="Search for a police or sheriff's department..."
143-
/>
144-
</S.SearchWrapper>
145-
<S.ViewAllDepts onClick={() => history.push(AGENCY_LIST_SLUG)}>
146-
View all departments
147-
<S.ViewAllIcon
148-
icon={ICONS.arrowRight}
149-
fill={theme.colors.primaryDark}
129+
<S.DeptCTA>
130+
<S.SubHeading>View Data by Department</S.SubHeading>
131+
<P size={SIZES[1]}>Choose a police or sheriff’s department to see:</P>
132+
<P size={SIZES[1]}>- Stops and search rates over time</P>
133+
<P size={SIZES[1]}>- Stops and searches broken down by race / ethnicity</P>
134+
<P size={SIZES[1]}>- Use of force during stops and how frequently contraband was found</P>
135+
<S.SearchWrapper>
136+
<DepartmentSearch
137+
showIndexList
138+
navigateOnSelect
139+
placeholder="Search for a police or sheriff's department..."
140+
/>
141+
</S.SearchWrapper>
142+
<S.ViewAllDepts onClick={() => history.push(AGENCY_LIST_SLUG)}>
143+
View all departments
144+
<S.ViewAllIcon
145+
icon={ICONS.arrowRight}
146+
fill={theme.colors.primaryDark}
147+
height={25}
148+
width={25}
149+
/>
150+
</S.ViewAllDepts>
151+
<S.ButtonWrapper>
152+
<FjButton
153+
variant="positive"
154+
border={`2px solid ${theme.colors.primary}`}
155+
{...ChartHeaderStyles.ButtonInlines}
156+
onClick={() => history.push(`${STATEWIDE_DATA}`)}
157+
>
158+
<ChartHeaderStyles.Icon
159+
icon={ICONS.info}
150160
height={25}
151161
width={25}
162+
fill={theme.colors.white}
152163
/>
153-
</S.ViewAllDepts>
154-
<S.ButtonWrapper>
155-
<FjButton
156-
variant="positive"
157-
border={`2px solid ${theme.colors.primary}`}
158-
{...ChartHeaderStyles.ButtonInlines}
159-
onClick={() => history.push(`${STATEWIDE_DATA}`)}
160-
>
161-
<ChartHeaderStyles.Icon
162-
icon={ICONS.info}
163-
height={25}
164-
width={25}
164+
View all statewide data
165+
</FjButton>
166+
</S.ButtonWrapper>
167+
</S.DeptCTA>
168+
<S.StopCTA>
169+
<S.SubHeading>Find a Stop</S.SubHeading>
170+
<P size={SIZES[1]}>
171+
Have you or someone you know been subjected to an unfair stop or search?
172+
</P>
173+
<P size={SIZES[1]}>
174+
Enter the stop information to view all data associated with that particular officer.
175+
</P>
176+
<S.ButtonWrapper>
177+
<FjButton
178+
onClick={() => history.push(FIND_A_STOP_SLUG)}
179+
variant="positive"
180+
bg={theme.colors.secondary}
181+
width="100%"
182+
py="2"
183+
fontSize="3"
184+
fontWeight="bold"
185+
>
186+
<S.ButtonInner>
187+
FIND A STOP
188+
<S.ButtonIcon
189+
icon={ICONS.arrowRight}
165190
fill={theme.colors.white}
191+
width={32}
192+
height={32}
166193
/>
167-
View all statewide data
168-
</FjButton>
169-
</S.ButtonWrapper>
170-
</S.DeptCTA>
171-
<S.StopCTA>
172-
<S.SubHeading>Find a Stop</S.SubHeading>
173-
<P size={SIZES[1]}>
174-
Have you or someone you know been subjected to an unfair stop or search?
175-
</P>
176-
<P size={SIZES[1]}>
177-
Enter the stop information to view all data associated with that particular officer.
178-
</P>
179-
<S.ButtonWrapper>
180-
<FjButton
181-
onClick={() => history.push(FIND_A_STOP_SLUG)}
182-
variant="positive"
183-
bg={theme.colors.secondary}
184-
width="100%"
185-
py="2"
186-
fontSize="3"
187-
fontWeight="bold"
188-
>
189-
<S.ButtonInner>
190-
FIND A STOP
191-
<S.ButtonIcon
192-
icon={ICONS.arrowRight}
193-
fill={theme.colors.white}
194-
width={32}
195-
height={32}
196-
/>
197-
</S.ButtonInner>
198-
</FjButton>
199-
</S.ButtonWrapper>
200-
</S.StopCTA>
201-
</S.SubContent>
194+
</S.ButtonInner>
195+
</FjButton>
196+
</S.ButtonWrapper>
197+
</S.StopCTA>
202198
</S.MainContent>
203199
</S.HomePage>
204200
);

‎frontend/src/Components/HomePage/HomePage.styled.js‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const MainContent = styled.div`
3737
flex: 1;
3838
display: flex;
3939
flex-direction: row;
40+
column-gap: 2em;
4041
4142
@media (${smallerThanTabletLandscape}) {
4243
flex-direction: column;
@@ -45,11 +46,11 @@ export const MainContent = styled.div`
4546
`;
4647

4748
export const About = styled.aside`
48-
width: 381px;
49-
margin-right: 3em;
50-
49+
flex: 1;
50+
margin-bottom: 2em;
5151
@media (${smallerThanTabletLandscape}) {
52-
margin: 0;
52+
margin-bottom: 0;
53+
margin-left: -4px;
5354
width: 100%;
5455
}
5556
`;
@@ -64,8 +65,9 @@ export const AboutImage = styled.img`
6465
export const AboutContent = styled.div`
6566
min-height: 400px;
6667
background: ${(p) => p.theme.colors.greyLight};
67-
box-shadow: 0px 0px 1px rgba(48, 49, 51, 0.05), 0px 2px 4px rgba(48, 49, 51, 0.1);
68+
box-shadow: 0px 2px 4px ${(p) => p.theme.colors.purple};
6869
padding: 2.5em 2em 2em 2em;
70+
margin-left: 4px;
6971
`;
7072

7173
export const AboutHeading = styled(H2)`
@@ -137,22 +139,27 @@ export const ViewAllIcon = styled(FJIcon)`
137139
`;
138140

139141
export const DeptCTA = styled.div`
142+
flex: 1;
143+
margin: 2em 0;
144+
padding: 1em 2em 0.5em;
145+
background: ${(props) => props.theme.colors.greySemi};
140146
@media (${smallerThanTabletLandscape}) {
141-
width: 90%;
142147
margin: 2em auto;
143148
}
144149
`;
145150

146151
export const StopCTA = styled.div`
147-
margin-top: 2em;
152+
flex: 1;
153+
margin: 2em 0;
154+
padding: 1em 2em 0.5em;
155+
background: ${(props) => props.theme.colors.grey};
148156
@media (${smallerThanTabletLandscape}) {
149-
width: 90%;
150-
margin: 2em auto;
157+
margin: 0 auto 2em;
151158
}
152159
`;
153160

154161
export const ButtonWrapper = styled.div`
155-
width: 360px;
162+
max-width: 360px;
156163
margin: 2em 0;
157164
@media (${smallerThanTabletLandscape}) {
158165
width: 90%;

0 commit comments

Comments
 (0)