HYP 167 Cert Issued Timestamp (#89)

* Added green text style for timestamp
* Added formatDate
* Bump ver
* Removed the small font condition for resize / small screens

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@digicatapult/sqnc-hyproof-client",
-    "version": "0.3.14",
+    "version": "0.3.15",
     "description": "User interface for HyProof",
     "homepage": "https://github.com/digicatapult/sqnc-hyproof-client",
     "main": "src/index.js",

src/pages/CertificateViewer.js

@@ -208,6 +208,7 @@ export default function CertificateViewer() {
                     energy={data?.energy_consumed_wh}
                     eco2={data?.embodied_co2}
                     posting={posting}
+                    timestamp={data?.updated_at}
                   />
                 </Grid.Panel>
               </Grid>

src/pages/components/CertificateViewDetails.js

@@ -4,6 +4,8 @@ import { Grid } from '@digicatapult/ui-component-library'
 
 import CertificateTimeInterval from './CertificateTimeInterval'
 
+import { formatDate } from '../../utils/helpers'
+
 import BgIconDateSVG from '../../assets/images/icon-date.svg'
 import BgIconTimeSVG from '../../assets/images/icon-time.svg'
 
@@ -23,10 +25,17 @@ export default function CertificateViewDetails({
   energy,
   eco2,
   posting,
+  timestamp,
 }) {
   return (
     <PaddedWrapperDiv>
       <ContainerFlexWrapDiv>
+        {hasEco2(eco2) && (
+          <FullWidthDiv>
+            <GreenText>Timestamp of Certificate Issuance</GreenText>
+            <GreenBoldText>{formatDate(timestamp)}</GreenBoldText>
+          </FullWidthDiv>
+        )}
         {hasDate(start) && hasDate(end) && (
           <FlexDiv>
             <Grid
@@ -141,6 +150,11 @@ const PaddedWrapperDiv = styled.div`
   text-align: left;
 `
 
+const FullWidthDiv = styled.div`
+  margin: 8px 8px 20px 8px;
+  width: 100%;
+`
+
 const ContainerFlexWrapDiv = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -276,9 +290,19 @@ const IconTime = styled.span`
   background: transparent url(${BgIconTimeSVG}) no-repeat;
 `
 
+const GreenText = styled.div`
+  color: #27847a;
+  font: normal 400 18.4px/0 Roboto;
+`
+
+const GreenBoldText = styled.div`
+  color: #27847a;
+  font: normal 700 18.4px/0 Roboto;
+  margin: 26px 0 8px 0;
+`
+
 const Text = styled.div`
   display: flex;
-  width: 100%;
   height: 26px;
   min-width: 90px;
   font: 500 18px/26px Roboto;