Update Tool page fix fonts

CodeForAfrica · Jun 19, 2024 · cd0af96 · cd0af96
1 parent cf59a81
commit cd0af96
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 34 deletions.
diff --git a/apps/charterafrica/src/components/Tool/DescriptionAndShare.js b/apps/charterafrica/src/components/Tool/DescriptionAndShare.js
@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import React from "react";
 
 import ShareThisPage from "@/charterafrica/components/ShareThisPage";
+import formatDateTime from "@/charterafrica/utils/formatDate";
 
 const DescriptionAndShare = React.forwardRef(
   function DescriptionAndShare(props, ref) {
@@ -21,10 +22,12 @@ const DescriptionAndShare = React.forwardRef(
         <RichTypography
           textAlign="left"
           color="neutral.dark"
-          sx={{ mt: 3.75 }}
+          sx={{ mt: 3.75, textAlign: { xs: "center", sm: "left" } }}
           variant="p1"
         >
-          {lastActive}
+          {formatDateTime(lastActive, {
+            includeTime: true,
+          })}
         </RichTypography>
         <Box
           display="flex"

diff --git a/apps/charterafrica/src/components/Tool/Metrics.js b/apps/charterafrica/src/components/Tool/Metrics.js
@@ -23,7 +23,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}

diff --git a/apps/charterafrica/src/components/Tool/OrgThemeAndOperatingCountries.js b/apps/charterafrica/src/components/Tool/OrgThemeAndOperatingCountries.js
@@ -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>

diff --git a/apps/charterafrica/src/components/Tool/Tool.js b/apps/charterafrica/src/components/Tool/Tool.js
@@ -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";
@@ -40,7 +41,7 @@ const Tool = React.forwardRef(function Tool(props, ref) {
     <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"
@@ -52,17 +53,21 @@ 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
+                  lineClamp={1}
+                  color="neutral.dark"
+                  variant="h2SemiBold"
+                >
                   {name}
-                </RichTypography>
+                </LineClampedRichTypography>
                 {externalLink?.href ? (
                   <Link href={externalLink.href}>
                     <SvgIcon
@@ -79,7 +84,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}
@@ -100,16 +105,19 @@ const Tool = React.forwardRef(function Tool(props, ref) {
           <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}