Skip to content

Commit b4fff86

Browse files
koechkevinkoechkevin
authored
Merge pull request #1323 from CodeForAfrica/trustlab_fixes
Trustlab: Improve spotlight spacing and background color for spotlight section.
2 parents 3c3507d + b52f026 commit b4fff86

File tree

10 files changed

+76
-98
lines changed

10 files changed

+76
-98
lines changed

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

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -66,31 +66,33 @@ function HelplineCard({ title, icon: media, description, link }) {
6666
/>
6767
</CardContent>
6868
<CardActions sx={{ p: 0 }}>
69-
<Button
70-
variant="contained"
71-
color="primary"
72-
size="small"
73-
component={link?.href ? Link : "button"}
74-
href={link?.href}
75-
sx={{
76-
mt: 2,
77-
alignSelf: "start",
78-
backgroundColor: "#FFDE59",
79-
color: "black",
80-
height: 32,
81-
border: "2px solid black",
82-
fontSize: 16,
83-
fontWeight: 600,
84-
textTransform: "none",
85-
whiteSpace: "nowrap",
86-
"&:hover": {
69+
{link?.label ? (
70+
<Button
71+
variant="contained"
72+
color="primary"
73+
size="small"
74+
component={link?.href ? Link : "button"}
75+
href={link?.href}
76+
sx={{
77+
mt: 2,
78+
alignSelf: "start",
8779
backgroundColor: "#FFDE59",
80+
color: "black",
81+
height: 32,
8882
border: "2px solid black",
89-
},
90-
}}
91-
>
92-
{link?.label}
93-
</Button>
83+
fontSize: 16,
84+
fontWeight: 600,
85+
textTransform: "none",
86+
whiteSpace: "nowrap",
87+
"&:hover": {
88+
backgroundColor: "#FFDE59",
89+
border: "2px solid black",
90+
},
91+
}}
92+
>
93+
{link?.label}
94+
</Button>
95+
) : null}
9496
</CardActions>
9597
</Card>
9698
);

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,7 @@ exports[`<HelplineCard /> renders unchanged 1`] = `
3838
</div>
3939
<div
4040
class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
41-
>
42-
<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-9imgqu-MuiButtonBase-root-MuiButton-root"
44-
tabindex="0"
45-
type="button"
46-
/>
47-
</div>
41+
/>
4842
</div>
4943
</div>
5044
`;

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

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -70,13 +70,7 @@ exports[`<Helplines /> renders unchanged 1`] = `
7070
</div>
7171
<div
7272
class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
73-
>
74-
<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-9imgqu-MuiButtonBase-root-MuiButton-root"
76-
tabindex="0"
77-
type="button"
78-
/>
79-
</div>
73+
/>
8074
</div>
8175
</div>
8276
<div
@@ -130,13 +124,7 @@ exports[`<Helplines /> renders unchanged 1`] = `
130124
</div>
131125
<div
132126
class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
133-
>
134-
<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-9imgqu-MuiButtonBase-root-MuiButton-root"
136-
tabindex="0"
137-
type="button"
138-
/>
139-
</div>
127+
/>
140128
</div>
141129
</div>
142130
<div
@@ -190,13 +178,7 @@ exports[`<Helplines /> renders unchanged 1`] = `
190178
</div>
191179
<div
192180
class="MuiCardActions-root MuiCardActions-spacing css-jbneu4-MuiCardActions-root"
193-
>
194-
<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-9imgqu-MuiButtonBase-root-MuiButton-root"
196-
tabindex="0"
197-
type="button"
198-
/>
199-
</div>
181+
/>
200182
</div>
201183
</div>
202184
</div>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,14 @@ function NavBar({ logo, menus, searchButtonLabel, socialLinks }) {
6060
slotProps: {
6161
typography: {
6262
sx: {
63-
color: "common.white",
63+
color: "#CCCED9",
64+
fontWeight: 400,
6465
"&:hover": {
6566
color: "common.white",
6667
},
6768
"&.active": {
6869
color: "common.white",
70+
fontWeight: 600,
6971
},
7072
},
7173
},

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Resources = forwardRef(function Resources(props, ref) {
1111
<Box ref={ref} sx={{ background: "#CDCDCD" }}>
1212
<Section sx={{ py: 4, px: { xs: 2.5, md: 0 } }}>
1313
{title && (
14-
<Typography variant="display4" sx={{ mb: 2 }}>
14+
<Typography variant="display4" sx={{ mb: 4 }}>
1515
{title}
1616
</Typography>
1717
)}
@@ -43,7 +43,7 @@ const Resources = forwardRef(function Resources(props, ref) {
4343
display: "flex",
4444
alignItems: "center",
4545
justifyContent: "center",
46-
mb: 2,
46+
mb: 6,
4747
}}
4848
>
4949
<Figure
@@ -52,8 +52,8 @@ const Resources = forwardRef(function Resources(props, ref) {
5252
src: resource.icon.src,
5353
}}
5454
sx={{
55-
height: { xs: "211px", md: "253px" },
56-
width: { xs: "184px", md: "221px" },
55+
height: `${resource.icon?.height}px`,
56+
width: `${resource.icon?.width}px`,
5757
}}
5858
/>
5959
</Box>

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`<Resources /> renders unchanged 1`] = `
99
class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12fal7i-MuiContainer-root"
1010
>
1111
<h2
12-
class="MuiTypography-root MuiTypography-display4 css-y858bl-MuiTypography-root"
12+
class="MuiTypography-root MuiTypography-display4 css-so3kj6-MuiTypography-root"
1313
>
1414
Helplines
1515
</h2>
@@ -23,10 +23,10 @@ exports[`<Resources /> renders unchanged 1`] = `
2323
class="MuiBox-root css-g6p57z"
2424
>
2525
<div
26-
class="MuiBox-root css-15qltjq"
26+
class="MuiBox-root css-1a2u13b"
2727
>
2828
<figure
29-
class="MuiBox-root css-lg2nrx"
29+
class="MuiBox-root css-j02abo"
3030
>
3131
<img
3232
alt="Resource Image"
@@ -72,10 +72,10 @@ exports[`<Resources /> renders unchanged 1`] = `
7272
class="MuiBox-root css-g6p57z"
7373
>
7474
<div
75-
class="MuiBox-root css-15qltjq"
75+
class="MuiBox-root css-1a2u13b"
7676
>
7777
<figure
78-
class="MuiBox-root css-lg2nrx"
78+
class="MuiBox-root css-j02abo"
7979
>
8080
<img
8181
alt="Resource Image"
@@ -121,10 +121,10 @@ exports[`<Resources /> renders unchanged 1`] = `
121121
class="MuiBox-root css-g6p57z"
122122
>
123123
<div
124-
class="MuiBox-root css-15qltjq"
124+
class="MuiBox-root css-1a2u13b"
125125
>
126126
<figure
127-
class="MuiBox-root css-lg2nrx"
127+
class="MuiBox-root css-j02abo"
128128
>
129129
<img
130130
alt="Resource Image"
@@ -170,10 +170,10 @@ exports[`<Resources /> renders unchanged 1`] = `
170170
class="MuiBox-root css-g6p57z"
171171
>
172172
<div
173-
class="MuiBox-root css-15qltjq"
173+
class="MuiBox-root css-1a2u13b"
174174
>
175175
<figure
176-
class="MuiBox-root css-lg2nrx"
176+
class="MuiBox-root css-j02abo"
177177
>
178178
<img
179179
alt="Resource Image"

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ const Spotlight = React.forwardRef(function Spotlight(
4444
};
4545

4646
return (
47-
<Box ref={ref} sx={{ background: "#7C7C7C" }}>
47+
<Box ref={ref} sx={{ background: "#EFEFEF" }}>
4848
<Section sx={{ py: 7.5, px: { xs: 2.5, md: 0 } }}>
49-
<Typography variant="display4" sx={{ mb: 2 }}>
49+
<Typography variant="display4" sx={{ mb: 4 }}>
5050
{title}
5151
</Typography>
5252
<Box

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
exports[`<Spotlight /> renders unchanged 1`] = `
44
<div>
55
<div
6-
class="MuiBox-root css-1lf2zuz"
6+
class="MuiBox-root css-1bagecu"
77
>
88
<div
99
class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-snjxl5-MuiContainer-root"
1010
>
1111
<h2
12-
class="MuiTypography-root MuiTypography-display4 css-y858bl-MuiTypography-root"
12+
class="MuiTypography-root MuiTypography-display4 css-so3kj6-MuiTypography-root"
1313
/>
1414
<div
1515
class="MuiBox-root css-6jninf"

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

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function SpotlightCard(props) {
77
<Card
88
sx={{
99
width: "100%",
10-
height: 220,
10+
height: 200,
1111
maxWidth: { xs: "100%", sm: 370 },
1212
minWidth: 300,
1313
borderRadius: "10px",
@@ -27,32 +27,35 @@ function SpotlightCard(props) {
2727
sx={{
2828
width: "100%",
2929
height: "100%",
30+
maxHeight: 200,
31+
maxWidth: 350,
3032
objectFit: "cover",
3133
borderRadius: "10px",
3234
display: "block",
33-
filter: "grayscale(100%)",
3435
}}
3536
/>
36-
<Button
37-
component={buttonLink?.href ? Link : undefined}
38-
sx={{
39-
backgroundColor: "#FFDE59",
40-
py: 0.75,
41-
px: 2,
42-
color: "#000",
43-
border: "2px solid #000",
44-
position: "absolute",
45-
bottom: 16,
46-
right: 16,
47-
minWidth: "106px",
48-
textDecoration: "none",
49-
textTransform: "none",
50-
fontWeight: 700,
51-
}}
52-
href={buttonLink?.href}
53-
>
54-
{buttonLink?.label}
55-
</Button>
37+
{buttonLink?.label ? (
38+
<Button
39+
component={buttonLink?.href ? Link : undefined}
40+
sx={{
41+
backgroundColor: "#FFDE59",
42+
py: 0.75,
43+
px: 2,
44+
color: "#000",
45+
border: "2px solid #000",
46+
position: "absolute",
47+
bottom: 16,
48+
right: 16,
49+
minWidth: "106px",
50+
textDecoration: "none",
51+
textTransform: "none",
52+
fontWeight: 700,
53+
}}
54+
href={buttonLink?.href}
55+
>
56+
{buttonLink?.label}
57+
</Button>
58+
) : null}
5659
</Card>
5760
);
5861
}

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,12 @@
33
exports[`<SpotlightCard /> renders unchanged 1`] = `
44
<div>
55
<div
6-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-cgfa9l-MuiPaper-root-MuiCard-root"
6+
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-1kt8wsp-MuiPaper-root-MuiCard-root"
77
style="--Paper-shadow: none;"
88
>
99
<img
1010
alt="TrustLab Incubator Programme"
11-
class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-1tht44p-MuiCardMedia-root"
12-
/>
13-
<button
14-
class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-s8c4m4-MuiButtonBase-root-MuiButton-root"
15-
tabindex="0"
16-
type="button"
11+
class="MuiCardMedia-root MuiCardMedia-media MuiCardMedia-img css-7t1f4i-MuiCardMedia-root"
1712
/>
1813
</div>
1914
</div>

0 commit comments

Comments
 (0)