From 1dd70844b0629b0c17ba158bfb8407b50059d536 Mon Sep 17 00:00:00 2001
From: shewood <shewood01@gmail.com>
Date: Wed, 19 Oct 2022 10:28:01 -0400
Subject: [PATCH] button to own component

---
 components/BackToButton.js | 26 ++++++++++++++++++++++++++
 components/MostReqTasks.js |  2 +-
 components/PageLink.js     | 19 ++++++++++---------
 locales/fr.js              |  2 +-
 pages/profile.js           |  1 +
 pages/security.js          |  1 +
 6 files changed, 40 insertions(+), 11 deletions(-)
 create mode 100644 components/BackToButton.js

diff --git a/components/BackToButton.js b/components/BackToButton.js
new file mode 100644
index 000000000..2d124f7fe
--- /dev/null
+++ b/components/BackToButton.js
@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+
+export default function BackToButton(props) {
+  return (
+    <>
+      <div className=" ">
+        <Link href={props.buttonHref}>
+          <a
+            id={props.buttonId}
+            className="inline-block my-4 py-2.5 px-3.5 font-display text-xl rounded bg-gray-30a text-deep-blue-60b hover:bg-gray-50a hover:cursor-pointer focus:ring focus:ring-offset-4 ring-deep-blue-60f"
+          >
+            {props.buttonLinkText}
+          </a>
+        </Link>
+      </div>
+    </>
+  )
+}
+
+BackToButton.propTypes = {
+  // Props for the Button
+  ButtonHref: PropTypes.string,
+  buttonId: PropTypes.string,
+  buttonLinkText: PropTypes.string,
+}
diff --git a/components/MostReqTasks.js b/components/MostReqTasks.js
index deaf48240..edc854dc1 100644
--- a/components/MostReqTasks.js
+++ b/components/MostReqTasks.js
@@ -16,7 +16,7 @@ export default function MostReqTasks(props) {
               className="font-display font-bold justify-center py-4 md:py-6 pl-2"
             >
               <Link href={task.link} passHref>
-                <a className="flex items-center underline text-white hover:text-brighter-blue-light">
+                <a className="flex items-center underline text-white hover:text-gray-50">
                   <FontAwesomeIcon
                     icon={task.icon}
                     className="pr-4 text-2xl w-8"
diff --git a/components/PageLink.js b/components/PageLink.js
index 197b1bc48..20ff61d3a 100644
--- a/components/PageLink.js
+++ b/components/PageLink.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import Link from 'next/link'
+import BackToButton from './BackToButton'
 
 export default function PageLink(props) {
   const linkText = undefined
@@ -19,6 +20,7 @@ export default function PageLink(props) {
           <Link href={props.href}>
             <a
               id={`link-for-${linkID}`}
+              data-cy={props.dataCy}
               className="text-blue-default hover:text-blue-hover visited:text-purple-medium underline"
             >
               {props.linkText}
@@ -27,14 +29,11 @@ export default function PageLink(props) {
           <span className=" text-gray-darker">.</span>
         </div>
 
-        <Link href={props.buttonHref}>
-          <a
-            id={props.buttonId}
-            className="inline-block my-4 py-2.5 px-3.5 font-display text-xl rounded bg-gray-30a text-deep-blue-60b hover:bg-gray-50a hover:cursor-pointer focus:ring focus:ring-offset-4 ring-deep-blue-60f"
-          >
-            {props.buttonLinkText}
-          </a>
-        </Link>
+        <BackToButton
+          buttonHref={props.buttonHref}
+          buttonId={props.buttonId}
+          buttonLinkText={props.buttonLinkText}
+        />
       </div>
     </>
   )
@@ -48,8 +47,10 @@ PageLink.propTypes = {
   href: PropTypes.string,
   id: PropTypes.string,
   linkID: PropTypes.string,
+  dataCy: PropTypes.string,
+
   // Props for the Button
-  ButtonHref: PropTypes.string,
+  buttonHref: PropTypes.string,
   buttonId: PropTypes.string,
   buttonLinkText: PropTypes.string,
 }
diff --git a/locales/fr.js b/locales/fr.js
index 838829244..48da08970 100644
--- a/locales/fr.js
+++ b/locales/fr.js
@@ -22,7 +22,7 @@ export default {
   securityLinkText: 'paramètres de sécurité',
   accessYourSecurityText: 'Accéder à vos ',
   pageLinkProfile: 'Vous recherchez les paramètres de votre profil?',
-  profileLinkText: 'profile',
+  profileLinkText: 'profil',
   accessYourProfileText: 'Accéder à votre ',
   backToDashboard: 'Retour à mon tableau de bord',
 
diff --git a/pages/profile.js b/pages/profile.js
index f28339aea..9d9cb80fa 100644
--- a/pages/profile.js
+++ b/pages/profile.js
@@ -51,6 +51,7 @@ export default function Home(props) {
         linkText={t.securityLinkText}
         href="/security"
         linkID="link-id"
+        dataCy="access-security-page-link"
         buttonHref={t.url_dashboard}
         buttonId="back-to-dashboard-button"
         buttonLinkText={t.backToDashboard}
diff --git a/pages/security.js b/pages/security.js
index acdd1afc6..e48c0c1ee 100644
--- a/pages/security.js
+++ b/pages/security.js
@@ -17,6 +17,7 @@ export default function Home(props) {
         linkText={t.profileLinkText}
         href="/profile"
         linkID="link-id"
+        dataCy="access-profile-page-link"
         buttonHref={t.url_dashboard}
         buttonId="back-to-dashboard-button"
         buttonLinkText={t.backToDashboard}