Button comp

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,
+}

components/MostReqTasks.js

@@ -17,7 +17,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={
                       icon[task.icon]

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,
 }

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',
 

pages/profile.js

@@ -33,6 +33,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}

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}