Hide build date from Percy

Hide the app's build date from Percy (since it will change all the time)
and make the build date retrieval consistent with MoS.

web/gui-v2/src/pages/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/react';
 import { DateTime } from 'luxon';
-import { graphql } from 'gatsby';
+import { graphql, useStaticQuery } from 'gatsby';
 
 import { AppWrapper, InfoCard, breakpoints } from '@eto/eto-ui-components';
 
@@ -27,8 +27,14 @@ const styles = {
   `,
 };
 
-const IndexPage = ({ data }) => {
-  const formattedDate = DateTime.fromISO(data.site.buildTime).toLocaleString(DateTime.DATE_FULL);
+const IndexPage = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        buildTime(formatString: "MMMM DD, YYYY")
+      }
+    }
+  `);
 
   return (
     <AppWrapper>
@@ -45,7 +51,7 @@ const IndexPage = ({ data }) => {
         title="ETO Private-sector AI-Related Activity Tracker"
       >
         <div css={styles.lastUpdated}>
-          Site last updated {formattedDate}
+          Site last updated <span className="no-percy">{data.site.buildTime}</span>
         </div>
       </InfoCard>
       <ListView css={styles.listView} />
@@ -55,12 +61,4 @@ const IndexPage = ({ data }) => {
 
 export default IndexPage;
 
-export const query = graphql`
-  query {
-    site {
-      buildTime
-    }
-  }
-`;
-
 export const Head = () => <title>PARAT &ndash; Emerging Technology Observatory</title>;

web/gui-v2/src/styles/app.css

@@ -5,3 +5,9 @@
   font-family: GTZirkonLight;
   scroll-behavior: smooth;
 }
+
+@media only percy {
+  .no-percy {
+      visibility: hidden;
+  }
+}