From b9ee1831daeaa6707f4aaa4fce385729a0fe3460 Mon Sep 17 00:00:00 2001
From: Kevin Koech <koechkevin92@gmail.com>
Date: Wed, 19 Jun 2024 17:19:24 +0300
Subject: [PATCH] Update labels

---
 .../src/components/Tool/Contributors.js           |  2 +-
 .../src/components/Tool/DescriptionAndShare.js    | 15 ++++++++-------
 apps/charterafrica/src/components/Tool/Metrics.js |  7 +------
 .../charterafrica/src/components/Tool/Partners.js |  2 +-
 .../src/components/Tool/TechSkills.js             |  2 +-
 apps/charterafrica/src/components/Tool/Tool.js    | 11 +++++++----
 .../src/lib/data/common/processPageTools.js       | 12 ++++++++++--
 .../src/utils/translationConstants.js             |  3 +++
 8 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/apps/charterafrica/src/components/Tool/Contributors.js b/apps/charterafrica/src/components/Tool/Contributors.js
index 48f43ac9a..e88001762 100644
--- a/apps/charterafrica/src/components/Tool/Contributors.js
+++ b/apps/charterafrica/src/components/Tool/Contributors.js
@@ -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" } }}>
diff --git a/apps/charterafrica/src/components/Tool/DescriptionAndShare.js b/apps/charterafrica/src/components/Tool/DescriptionAndShare.js
index f03496a6d..cd49706b6 100644
--- a/apps/charterafrica/src/components/Tool/DescriptionAndShare.js
+++ b/apps/charterafrica/src/components/Tool/DescriptionAndShare.js
@@ -4,11 +4,10 @@ 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) {
-    const { sx, description, lastActive } = props;
+    const { sx, description, lastActive, activeText } = props;
     return (
       <Box sx={sx} ref={ref}>
         <RichTypography
@@ -22,12 +21,14 @@ const DescriptionAndShare = React.forwardRef(
         <RichTypography
           textAlign="left"
           color="neutral.dark"
-          sx={{ mt: 3.75, textAlign: { xs: "center", sm: "left" } }}
-          variant="p1"
+          sx={{
+            mt: 3.75,
+            textTransform: "none",
+            textAlign: { xs: "center", sm: "left" },
+          }}
+          variant="captionCap"
         >
-          {formatDateTime(lastActive, {
-            includeTime: true,
-          })}
+          {activeText} {lastActive}
         </RichTypography>
         <Box
           display="flex"
diff --git a/apps/charterafrica/src/components/Tool/Metrics.js b/apps/charterafrica/src/components/Tool/Metrics.js
index 97d831e1a..135117c6f 100644
--- a/apps/charterafrica/src/components/Tool/Metrics.js
+++ b/apps/charterafrica/src/components/Tool/Metrics.js
@@ -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 {
@@ -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>
diff --git a/apps/charterafrica/src/components/Tool/Partners.js b/apps/charterafrica/src/components/Tool/Partners.js
index 78addc654..40942eaec 100644
--- a/apps/charterafrica/src/components/Tool/Partners.js
+++ b/apps/charterafrica/src/components/Tool/Partners.js
@@ -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
diff --git a/apps/charterafrica/src/components/Tool/TechSkills.js b/apps/charterafrica/src/components/Tool/TechSkills.js
index 3cc76d662..89f27a500 100644
--- a/apps/charterafrica/src/components/Tool/TechSkills.js
+++ b/apps/charterafrica/src/components/Tool/TechSkills.js
@@ -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 />
diff --git a/apps/charterafrica/src/components/Tool/Tool.js b/apps/charterafrica/src/components/Tool/Tool.js
index ff0480a89..0095d51cb 100644
--- a/apps/charterafrica/src/components/Tool/Tool.js
+++ b/apps/charterafrica/src/components/Tool/Tool.js
@@ -23,7 +23,7 @@ const Tool = React.forwardRef(function Tool(props, ref) {
     theme,
     operatingCountries,
     description,
-    lastCommit,
+    lastActive,
     goToRepo,
     techSkills,
     contributors,
@@ -36,6 +36,8 @@ const Tool = React.forwardRef(function Tool(props, ref) {
     toolsTitle,
     externalLink,
     classification,
+    activeText,
+    collectionText,
   } = props;
   return (
     <Box bgcolor="common.white" ref={ref}>
@@ -97,7 +99,8 @@ const Tool = React.forwardRef(function Tool(props, ref) {
               />
               <DescriptionAndShare
                 description={description}
-                lastActive={lastCommit?.committedDate}
+                lastActive={lastActive}
+                activeText={activeText}
                 sx={{ mb: 6.75 }}
               />
             </Grid>
@@ -150,8 +153,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}
diff --git a/apps/charterafrica/src/lib/data/common/processPageTools.js b/apps/charterafrica/src/lib/data/common/processPageTools.js
index c665ef92f..f4653f4c0 100644
--- a/apps/charterafrica/src/lib/data/common/processPageTools.js
+++ b/apps/charterafrica/src/lib/data/common/processPageTools.js
@@ -91,8 +91,8 @@ async function processPageSingleTool(page, api, context) {
         toolsTitle: filterLabels.tools,
         donorsTitle: filterLabels.donors,
         contributorsTitle: filterLabels.contributors,
-        lastActive: tool.lastActive
-          ? formatDateTime(tool.lastActive, {})
+        lastActive: tool.lastCommit?.committedDate
+          ? formatDateTime(tool.lastCommit.committedDate, { locale })
           : null,
         organisationName: tool.organisation?.name ?? null,
         twitter: tool.organisation?.twitter ?? null,
@@ -108,10 +108,18 @@ async function processPageSingleTool(page, api, context) {
         commitText: filterLabels.lastCommit,
         forksText: filterLabels.forks,
         starsText: filterLabels.stars,
+        collectionText: filterLabels.collection,
+        activeText: filterLabels.activeText,
         collection: tool.classification,
         externalLink: {
           href: tool.docLink ?? null,
         },
+        lastCommit: {
+          ...tool.lastCommit,
+          committedDate: tool.lastCommit?.committedDate
+            ? formatDateTime(tool.lastCommit.committedDate, { locale })
+            : null,
+        },
       },
     ],
   };
diff --git a/apps/charterafrica/src/utils/translationConstants.js b/apps/charterafrica/src/utils/translationConstants.js
index f4e5b7b4a..d1f8f7000 100644
--- a/apps/charterafrica/src/utils/translationConstants.js
+++ b/apps/charterafrica/src/utils/translationConstants.js
@@ -1,5 +1,6 @@
 const labelsPerLocale = {
   en: {
+    activeText: "Last Active",
     topic: "Topic A-Z",
     "-topic": "Topic Z-A",
     views: "Views Ascending",
@@ -34,6 +35,7 @@ const labelsPerLocale = {
     classification: "Classification",
   },
   fr: {
+    activeText: "Dernier actif",
     topic: "Sujet A-Z",
     "-topic": "Sujet Z-A",
     views: "Vues ascendantes",
@@ -68,6 +70,7 @@ const labelsPerLocale = {
     classification: "Classification",
   },
   pt: {
+    activeText: "ativo pela última vez",
     topic: "Tópico A-Z",
     "-topic": "Tópico Z-A",
     views: "Visualizações ascendentes",