Skip to content

Commit 3c3507d

Browse files
koechkevinkoechkevin
authored
Merge pull request #1321 from CodeForAfrica/fix/partners_list_image
Fix: Hero, Partners List and Helplines spacing
2 parents 120ee66 + 285ded8 commit 3c3507d

File tree

9 files changed

+20
-17
lines changed

9 files changed

+20
-17
lines changed

‎apps/trustlab/src/components/CourseList/CourseCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const CourseCard = React.forwardRef(function CourseCard(props, ref) {
3434
borderRadius: "10px",
3535
pb: "0 !important",
3636
backgroundSize: "contain",
37-
backgroundPosition: "center",
37+
backgroundPosition: "left",
3838
backgroundRepeat: "no-repeat",
3939
...image?.sx,
4040
},

‎apps/trustlab/src/components/CourseList/Courselist.snap.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ exports[`<CourseList /> renders unchanged 1`] = `
3535
>
3636
<div
3737
alt="Course 1 Image"
38-
class="MuiCardMedia-root css-19d6qks-MuiCardMedia-root"
38+
class="MuiCardMedia-root css-1qi5ydg-MuiCardMedia-root"
3939
role="img"
4040
style="background-image: url(/images/course1.jpg);"
4141
title="Course 1 Title"
@@ -70,7 +70,7 @@ exports[`<CourseList /> renders unchanged 1`] = `
7070
>
7171
<div
7272
alt="Course 2 Image"
73-
class="MuiCardMedia-root css-19d6qks-MuiCardMedia-root"
73+
class="MuiCardMedia-root css-1qi5ydg-MuiCardMedia-root"
7474
role="img"
7575
style="background-image: url(/images/course2.jpg);"
7676
title="Course 2 Title"
@@ -105,7 +105,7 @@ exports[`<CourseList /> renders unchanged 1`] = `
105105
>
106106
<div
107107
alt="Course 3 Image"
108-
class="MuiCardMedia-root css-19d6qks-MuiCardMedia-root"
108+
class="MuiCardMedia-root css-1qi5ydg-MuiCardMedia-root"
109109
role="img"
110110
style="background-image: url(/images/course3.jpg);"
111111
title="Course 3 Title"

‎apps/trustlab/src/components/HelplineCard/HelplineCard.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ function HelplineCard({ title, icon: media, description, link }) {
8282
fontSize: 16,
8383
fontWeight: 600,
8484
textTransform: "none",
85+
whiteSpace: "nowrap",
8586
"&:hover": {
8687
backgroundColor: "#FFDE59",
8788
border: "2px solid black",

‎apps/trustlab/src/components/HelplineCard/HelplineCard.snap.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ exports[`<HelplineCard /> renders unchanged 1`] = `
4040
class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
4141
>
4242
<button
43-
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-1xmfh2b-MuiButtonBase-root-MuiButton-root"
43+
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-9imgqu-MuiButtonBase-root-MuiButton-root"
4444
tabindex="0"
4545
type="button"
4646
/>

‎apps/trustlab/src/components/Helplines/Helplines.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const Helplines = forwardRef(function Helplines({ title, briefs = [] }, ref) {
1717
container
1818
sx={{ ml: -2 }}
1919
spacing={{
20-
xs: 2,
20+
xs: 6,
2121
md: 10,
2222
}}
2323
>

‎apps/trustlab/src/components/Helplines/Helplines.snap.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ exports[`<Helplines /> renders unchanged 1`] = `
1717
Rapid Response
1818
</h2>
1919
<div
20-
class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row MuiGrid2-spacing-xs-2 MuiGrid2-spacing-md-10 css-ukfad2-MuiGrid2-root"
20+
class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row MuiGrid2-spacing-xs-6 MuiGrid2-spacing-md-10 css-4raq6m-MuiGrid2-root"
2121
>
2222
<div
2323
class="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 MuiGrid2-grid-sm-4 css-8o12w-MuiGrid2-root"
@@ -72,7 +72,7 @@ exports[`<Helplines /> renders unchanged 1`] = `
7272
class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
7373
>
7474
<button
75-
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-1xmfh2b-MuiButtonBase-root-MuiButton-root"
75+
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-9imgqu-MuiButtonBase-root-MuiButton-root"
7676
tabindex="0"
7777
type="button"
7878
/>
@@ -132,7 +132,7 @@ exports[`<Helplines /> renders unchanged 1`] = `
132132
class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
133133
>
134134
<button
135-
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-1xmfh2b-MuiButtonBase-root-MuiButton-root"
135+
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-9imgqu-MuiButtonBase-root-MuiButton-root"
136136
tabindex="0"
137137
type="button"
138138
/>
@@ -192,7 +192,7 @@ exports[`<Helplines /> renders unchanged 1`] = `
192192
class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
193193
>
194194
<button
195-
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-1xmfh2b-MuiButtonBase-root-MuiButton-root"
195+
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-colorPrimary css-9imgqu-MuiButtonBase-root-MuiButton-root"
196196
tabindex="0"
197197
type="button"
198198
/>

‎apps/trustlab/src/components/Hero/Hero.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const Hero = forwardRef(function Hero({ slides }, ref) {
6666
sx={{
6767
position: "relative",
6868
width: "100%",
69-
height: { xs: "808px", sm: "1074px", md: "562px" },
69+
height: { xs: "808px", sm: "600px" },
7070
overflow: "hidden",
7171
display: "flex",
7272
}}
@@ -96,8 +96,8 @@ const Hero = forwardRef(function Hero({ slides }, ref) {
9696
>
9797
<Box
9898
sx={{
99-
pt: 6,
100-
px: { xs: 2.5, sm: 0 },
99+
pt: { xs: 6, sm: 0, md: 6 },
100+
px: { xs: 2.5, md: 0 },
101101
margin: "0 auto",
102102
maxWidth: theme.contentWidths.values,
103103
}}
@@ -108,7 +108,7 @@ const Hero = forwardRef(function Hero({ slides }, ref) {
108108
columnSpacing={2}
109109
alignItems="center"
110110
>
111-
<Grid size={{ xs: 12, md: 6 }} order={isReversed ? 2 : 1}>
111+
<Grid size={{ xs: 12, sm: 6 }} order={isReversed ? 2 : 1}>
112112
<LexicalRichText
113113
elements={slide.title}
114114
TypographyProps={{
@@ -165,7 +165,7 @@ const Hero = forwardRef(function Hero({ slides }, ref) {
165165
)}
166166
</Grid>
167167
<Grid
168-
size={{ xs: 12, md: 6 }}
168+
size={{ xs: 12, sm: 6 }}
169169
sx={{
170170
display: "flex",
171171
justifyContent: {
@@ -187,6 +187,7 @@ const Hero = forwardRef(function Hero({ slides }, ref) {
187187
sx={{
188188
height: { xs: "402px", sm: "600px", md: "416px" },
189189
width: { xs: "100%", md: "321.6px" },
190+
maxWidth: { xs: "100%", sm: "365px" },
190191
}}
191192
/>
192193
</Grid>
@@ -227,7 +228,7 @@ const Hero = forwardRef(function Hero({ slides }, ref) {
227228
<Box
228229
sx={{
229230
position: "absolute",
230-
bottom: { xs: 46, md: 62 },
231+
bottom: 32,
231232
left: "50%",
232233
transform: "translateX(-50%)",
233234
px: { xs: 2.5, sm: 0 },

‎apps/trustlab/src/components/PartnersList/PartnersList.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ const PartnersList = React.forwardRef(function PartnersList(props, ref) {
5454
src: partner.logo.url,
5555
}}
5656
sx={{
57+
filter: "grayscale(100%)",
5758
height: partner.logo.height || "auto",
5859
width: "280px",
5960
m: 0,

‎apps/trustlab/src/components/PartnersList/PartnersList.snap.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`<PartnersList /> renders unchanged 1`] = `
1818
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1mylpxi-MuiGrid-root"
1919
>
2020
<figure
21-
class="MuiBox-root css-l1g8ux"
21+
class="MuiBox-root css-ojmbah"
2222
>
2323
<img
2424
alt="Partner Logo"

0 commit comments

Comments
 (0)