Skip to content

Commit

Permalink
Merge pull request #724 from CodeForAfrica/bugfix/tool-page-update
Browse files Browse the repository at this point in the history 
Update tools Page
  • Loading branch information
@koechkevin
koechkevin authored Jun 20, 2024
2 parents b3a4da8 + ada33de commit d4b1a6d
Show file tree
Hide file tree
Showing 10 changed files with 121 additions and 65 deletions.
2 changes: 1 addition & 1 deletion apps/charterafrica/src/components/Tool/Contributors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Contributors = React.forwardRef(function Contributors(props, ref) {
return (
<Box ref={ref} sx={sx}>
<Box sx={{ p: 2 }}>
<RichTypography color="neutral.dark" variant="h4Small">
<RichTypography color="neutral.dark" variant="p3SemiBold">
{title}
</RichTypography>
<AvatarGroup sx={{ justifyContent: { xs: "center", sm: "right" } }}>
Expand Down
12 changes: 8 additions & 4 deletions apps/charterafrica/src/components/Tool/DescriptionAndShare.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import ShareThisPage from "@/charterafrica/components/ShareThisPage";

const DescriptionAndShare = React.forwardRef(
function DescriptionAndShare(props, ref) {
const { sx, description, lastActive } = props;
const { sx, description, lastActive, activeText } = props;
return (
<Box sx={sx} ref={ref}>
<RichTypography
Expand All @@ -21,10 +21,14 @@ const DescriptionAndShare = React.forwardRef(
<RichTypography
textAlign="left"
color="neutral.dark"
sx={{ mt: 3.75 }}
variant="p1"
sx={{
mt: 3.75,
textTransform: "none",
textAlign: { xs: "center", sm: "left" },
}}
variant="captionCap"
>
{lastActive}
{activeText} {lastActive}
</RichTypography>
<Box
display="flex"
Expand Down
9 changes: 2 additions & 7 deletions apps/charterafrica/src/components/Tool/Metrics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import CommitIcon from "@/charterafrica/assets/icons/Type=commit, Size=24, Color
import ForksIcon from "@/charterafrica/assets/icons/Type=forks, Size=24, Color=CurrentColor.svg";
import StarsIcon from "@/charterafrica/assets/icons/Type=stars, Size=24, Color=CurrentColor.svg";
import ViewsIcon from "@/charterafrica/assets/icons/Type=views, Size=24, Color=CurrentColor.svg";
import formatDateTime from "@/charterafrica/utils/formatDate";

const Metrics = React.forwardRef(function Metrics(props, ref) {
const {
Expand All @@ -23,7 +22,7 @@ const Metrics = React.forwardRef(function Metrics(props, ref) {
} = props;
return (
<Box display="flex" sx={sx} ref={ref} flexWrap="wrap" alignItems="center">
<Box display="flex" alignItems="center" sx={{ mb: 2, ml: 2 }}>
<Box display="flex" alignItems="center" sx={{ mb: 2, mr: 2 }}>
<SvgIcon
inheritViewBox
component={ViewsIcon}
Expand Down Expand Up @@ -56,11 +55,7 @@ const Metrics = React.forwardRef(function Metrics(props, ref) {
/>
<Box sx={{ ml: 1 }}>
<RichTypography color="neutral.dark">
{lastCommit.committedDate
? formatDateTime(lastCommit.committedDate, {
includeTime: false,
})
: "-"}
{lastCommit.committedDate || "-"}
</RichTypography>
<RichTypography color="neutral.dark">{commitText}</RichTypography>
</Box>
Expand Down
82 changes: 59 additions & 23 deletions apps/charterafrica/src/components/Tool/OrgThemeAndOperatingCountries.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,34 +13,70 @@ const OrgThemeAndOperatingCountries = React.forwardRef(
}
return (
<Box sx={sx} ref={ref}>
<Figure
ImageProps={{
alt: organisation.name,
src: organisation.avatarUrl,
<Box
display="flex"
sx={{
justifyContent: {
xs: "center",
sm: "left",
display: "flex",
},
}}
>
<Figure
ImageProps={{
alt: organisation.name,
src: organisation.avatarUrl,
}}
sx={{
height: 50,
width: 150,
}}
/>
</Box>
<Box
display="flex"
sx={{
height: 50,
width: "auto",
justifyContent: {
xs: "center",
sm: "left",
display: "flex",
},
}}
/>
<Link
href={organisation?.link?.href || "#"}
textAlign="left"
color="neutral.dark"
sx={{ textDecoration: "none" }}
variant="h3Small"
>
{organisation.name}
</Link>
{theme ? (
<Button
variant="contained"
component="div"
sx={{ backgroundColor: "success.main", color: "neutral.dark" }}
<Link
href={organisation?.link?.href || "#"}
textAlign="left"
color="neutral.dark"
sx={{ textDecoration: "none", fontWeight: 400 }}
variant="h4"
>
{theme}
</Button>
) : null}
{organisation.name}
</Link>
</Box>
<Box
sx={{
justifyContent: {
xs: "center",
sm: "left",
display: "flex",
},
}}
>
{theme ? (
<Button
variant="contained"
component="div"
sx={{
backgroundColor: "success.main",
color: "neutral.dark",
mt: 3.75,
}}
>
{theme}
</Button>
) : null}
</Box>
<RichTypography color="neutral.dark" variant="p3" sx={{ mt: 3.75 }}>
{countries}
</RichTypography>
Expand Down
2 changes: 1 addition & 1 deletion apps/charterafrica/src/components/Tool/Partners.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Partners = React.forwardRef(function Partners(props, ref) {
return (
<Box sx={sx} ref={ref}>
<Box sx={{ p: 2 }}>
<RichTypography color="neutral.dark" variant="h4Small">
<RichTypography color="neutral.dark" variant="p3SemiBold">
{title}
</RichTypography>
<Box
Expand Down
2 changes: 1 addition & 1 deletion apps/charterafrica/src/components/Tool/TechSkills.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const TechSkills = React.forwardRef(function TechSkills(props, ref) {
}
return (
<Box sx={sx} ref={ref}>
<RichTypography variant="p3" color="neutral.dark">
<RichTypography variant="p3SemiBold" color="neutral.dark">
{title}
</RichTypography>
<br />
Expand Down
34 changes: 22 additions & 12 deletions apps/charterafrica/src/components/Tool/Tool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import React from "react";

import ExternalLink from "@/charterafrica/assets/icons/Type=external-link, Size=24, Color=CurrentColor.svg";
import GithubIcon from "@/charterafrica/assets/icons/Type=github, Size=24, Color=CurrentColor.svg";
import LineClampedRichTypography from "@/charterafrica/components/LineClampedRichTypography";
import Contributors from "@/charterafrica/components/Tool/Contributors";
import DescriptionAndShare from "@/charterafrica/components/Tool/DescriptionAndShare";
import Metrics from "@/charterafrica/components/Tool/Metrics";
Expand All @@ -22,7 +23,7 @@ const Tool = React.forwardRef(function Tool(props, ref) {
theme,
operatingCountries,
description,
lastCommit,
lastActive,
goToRepo,
techSkills,
contributors,
Expand All @@ -35,12 +36,14 @@ const Tool = React.forwardRef(function Tool(props, ref) {
toolsTitle,
externalLink,
classification,
activeText,
collectionText,
} = props;
return (
<Box bgcolor="common.white" ref={ref}>
<Section sx={{ pb: { xs: 10 } }}>
<Grid sx={{ py: { sm: 10 } }} container ref={ref}>
<Grid container item sm={6} sx={{ pr: { sm: 6.25 } }}>
<Grid container item sm={7} sx={{ pr: { sm: 6.25 } }}>
<Grid item>
<CardMedia
component="img"
Expand All @@ -52,17 +55,20 @@ const Tool = React.forwardRef(function Tool(props, ref) {
}}
/>
</Grid>
<Grid xs={12} item>
<Grid sx={{ px: { xs: 2, sm: 0 } }} xs={12} item>
<Box
sx={{ width: "100%", mt: 3.75 }}
display="flex"
justifyContent="space-between"
alignItems="center"
flex={1}
>
<RichTypography color="neutral.dark" variant="h2SemiBold">
<LineClampedRichTypography
color="neutral.dark"
variant="h2SemiBold"
>
{name}
</RichTypography>
</LineClampedRichTypography>
{externalLink?.href ? (
<Link href={externalLink.href}>
<SvgIcon
Expand All @@ -79,7 +85,7 @@ const Tool = React.forwardRef(function Tool(props, ref) {
) : null}
</Box>
</Grid>
<Grid item>
<Grid sx={{ px: { xs: 2, sm: 0 } }} item>
<OrgThemeAndOperatingCountries
sx={{ mt: 3.75, textAlign: "left" }}
organisation={organisation}
Expand All @@ -92,24 +98,28 @@ const Tool = React.forwardRef(function Tool(props, ref) {
/>
<DescriptionAndShare
description={description}
lastActive={lastCommit?.committedDate}
lastActive={lastActive}
activeText={activeText}
sx={{ mb: 6.75 }}
/>
</Grid>
</Grid>
<Grid
item
xs={12}
sm={6}
sm={5}
sx={() => ({
borderLeft: `1px solid rgba(0, 0, 0, 0.1)`,
textAlign: { sm: "right", xs: "center" },
pl: { sm: 6.25 },
px: { sm: 6.25, xs: 2 },
})}
>
<Box
ref={ref}
sx={{ width: { xs: "100%", sm: "fit-content" }, ml: "auto" }}
sx={{
width: { xs: "100%", sm: "fit-content" },
ml: "auto",
}}
>
<Button
component={goToRepo?.href ? Link : undefined}
Expand Down Expand Up @@ -142,8 +152,8 @@ const Tool = React.forwardRef(function Tool(props, ref) {
sx={{ mt: 3.75 }}
/>
<Box sx={{ mt: 3.75 }}>
<RichTypography variant="p3" color="neutral.dark">
Collection
<RichTypography variant="p3SemiBold" color="neutral.dark">
{collectionText}
</RichTypography>
<RichTypography sx={{ mt: 1 }} variant="p3">
{classification}
Expand Down
28 changes: 14 additions & 14 deletions apps/charterafrica/src/components/Tool/Tool.snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ exports[`<Tool /> renders unchanged 1`] = `
class="MuiGrid-root MuiGrid-container css-xgaee2-MuiGrid-root"
>
<div
class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-sm-6 css-1gxhccb-MuiGrid-root"
class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-sm-7 css-kt7nt3-MuiGrid-root"
>
<div
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
Expand All @@ -24,26 +24,26 @@ exports[`<Tool /> renders unchanged 1`] = `
/>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-rwq5je-MuiGrid-root"
>
<div
class="MuiBox-root css-kpcj8u"
>
<div
class="MuiTypography-root MuiTypography-h2SemiBold css-lknjzb-MuiTypography-root"
class="MuiTypography-root MuiTypography-h2SemiBold css-gegt74-MuiTypography-root"
>
Tool Name
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
class="MuiGrid-root MuiGrid-item css-2yidix-MuiGrid-root"
>
<div
class="MuiBox-root css-1bzzis0"
>
<div
class="MuiBox-root css-33u6ly"
class="MuiBox-root css-c7rfuk"
>
<div
aria-hidden="true"
Expand Down Expand Up @@ -123,6 +123,12 @@ exports[`<Tool /> renders unchanged 1`] = `
>
Lorem ipsum dolor sit amet consectetur adipiscing elit gravida, urna enim nulla iaculis taciti semper parturient laoreet luctus, orci ac ornare senectus posuere nam libero. Imperdiet turpis tortor nu. Lorem ipsum dolor sit amet consectetur adipiscing elit gravida, urna enim nulla iaculis taciti semper parturient laoreet luctus, orci ac ornare senectus posuere nam libero. Imperdiet turpis tortor nu.
</div>
<div
class="MuiTypography-root MuiTypography-captionCap css-hr3rav-MuiTypography-root"
>
6 Months ago
</div>
<div
class="MuiBox-root css-oqyb22"
>
Expand Down Expand Up @@ -180,7 +186,7 @@ exports[`<Tool /> renders unchanged 1`] = `
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 css-17qpvru-MuiGrid-root"
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-5 css-8zm4nk-MuiGrid-root"
>
<div
class="MuiBox-root css-11uk14q"
Expand All @@ -203,21 +209,15 @@ exports[`<Tool /> renders unchanged 1`] = `
</div>
<div
class="MuiBox-root css-46b038"
>
<div
class="MuiTypography-root MuiTypography-p3 css-1lspiuz-MuiTypography-root"
>
Collection
</div>
</div>
/>
<div
class="MuiBox-root css-46b038"
>
<div
class="MuiBox-root css-19midj6"
>
<div
class="MuiTypography-root MuiTypography-h4Small css-4noust-MuiTypography-root"
class="MuiTypography-root MuiTypography-p3SemiBold css-3w2o4y-MuiTypography-root"
>
Contributors
</div>
Expand Down
Loading

0 comments on commit d4b1a6d

Please sign in to comment.