14244 GEL updates and rework

components/account/personaldetails.js

@@ -246,6 +246,7 @@ let PersonalDetails = (props) => {
 
     return (
         <>
+            <div className="govuk-form-group">
                 {props.accountUpdatedComplete == false ? (
                     props.personalDetailsComplete == false ? (
                         <form onSubmit={handleSubmit(onHandleSubmit)}>
@@ -286,7 +287,9 @@ let PersonalDetails = (props) => {
                                     type="text"
                                     className="govuk-input govuk-input--width-20"
                                     validate={[required]}
-                                label={t("account:account-first-name-label")}
+                                    label={t(
+                                        "account:account-first-name-label"
+                                    )}
                                     errorMsg={t("account:is-required-label")}
                                 />
                                 <Field
@@ -306,7 +309,9 @@ let PersonalDetails = (props) => {
                                     type="email"
                                     className="govuk-input govuk-input--width-20"
                                     validate={[required, email]}
-                                label={t("account:account-email-address-label")}
+                                    label={t(
+                                        "account:account-email-address-label"
+                                    )}
                                     disabled
                                 />
                                 <Field
@@ -324,14 +329,18 @@ let PersonalDetails = (props) => {
                                     component={RenderTextfield}
                                     type="text"
                                     className="govuk-input govuk-input--width-20"
-                                label={t("account:account-company-group-label")}
+                                    label={t(
+                                        "account:account-company-group-label"
+                                    )}
                                     errorMsg={t("account:is-required-label")}
                                 />
                             </fieldset>
                             <fieldset className="govuk-fieldset">
                                 <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                                     <h2 className="govuk-fieldset__heading">
-                                    {t("account:account-your-address-label")}
+                                        {t(
+                                            "account:account-your-address-label"
+                                        )}
                                     </h2>
                                 </legend>
 
@@ -399,7 +408,8 @@ let PersonalDetails = (props) => {
                                 <Link
                                     href={
                                         "/myportal?q=" +
-                                    props.props.accountDetails.loggedinUserId
+                                        props.props.accountDetails
+                                            .loggedinUserId
                                     }
                                     className="govuk-link"
                                 >
@@ -423,6 +433,7 @@ let PersonalDetails = (props) => {
                 ) : (
                     <PersonalDetailsComplete props={props} />
                 )}
+            </div>
         </>
     );
 };

components/account/registerform.js

@@ -137,6 +137,8 @@ const RegisterForm = (props) => {
             {props.accountCreatedComplete != true ? (
                 props.registerFormComplete == false ? (
                     <form onSubmit={handleSubmit(onHandleSubmit)}>
+                        <div className="card" id="personalDetailsCard">
+                            <div className="card-body">
                                 <fieldset className="govuk-fieldset">
                                     <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
                                         <h2 className="govuk-fieldset__heading">
@@ -281,6 +283,8 @@ const RegisterForm = (props) => {
                                         {t("common:continue-button")}
                                     </button>
                                 </div>
+                            </div>
+                        </div>
                     </form>
                 ) : (
                     <RegisterFormCheck

components/header.js

@@ -53,6 +53,9 @@ const Header = (props) => {
         "/myportal/advancedsearch",
         "/myportal/advancedsearchresults",
         "/myportal/case/[ticketnumber]",
+        "/account/personaldetails",
+        "/register",
+        "/myportal/searchresults",
     ];
 
     const hasContactLink = [

components/myportal/servicebanner.js

@@ -73,7 +73,7 @@ const ServiceBanner = (props) => {
                 <div className="serviceBanner_userDetails_name">
                     <Link
                         href="/account/personaldetails"
-                        className="govuk-button-secondary govuk-link"
+                        className="govuk-button-secondary govuk-link--no-underline"
                     >
                         {props.accountDetails.accountDetails.firstname}{" "}
                         {props.accountDetails.accountDetails.lastname}

locales/en/account.json

@@ -1,6 +1,6 @@
 {
     "register-new-account-heading": "Create a new account",
-    "register-new-account-status-created-label": "Your account has  created",
+    "register-new-account-status-created-label": "Your account has been created",
     "register-new-account-status-not-created-label": "Your account has not been created",
     "register-new-account-checking-label": "Checking for account...",
     "help-heading": "Help",

pages/account/personaldetails.js

@@ -6,6 +6,7 @@ import Banner from "../../components/banner";
 import CookieBanner from "../../components/cookieBanner";
 import Breadcrumbs from "../../components/breadcrumbs";
 import Footer from "../../components/footer";
+import ServiceBanner from "../../components/myportal/servicebanner";
 
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
@@ -64,6 +65,8 @@ const Home = (props) => {
                     <div className="govuk-grid-column-full">
                         <div className="govuk-width-container">
                             <Breadcrumbs slug={appealtypes} props={props} />
+                            <ServiceBanner props={props} />
+
                             <main
                                 className="govuk-main-wrapper--auto-spacing"
                                 id="main-content"
@@ -71,7 +74,17 @@ const Home = (props) => {
                             >
                                 <div className="govuk-grid-row">
                                     <div className="govuk-grid-column-two-thirds">
-                                        <h1>{t("account:account-title")}</h1>
+                                        <div className="govuk-form-group">
+                                            <div
+                                                className="card"
+                                                id="personalDetailsCard"
+                                            >
+                                                <div className="card-body">
+                                                    <h1>
+                                                        {t(
+                                                            "account:account-title"
+                                                        )}
+                                                    </h1>{" "}
                                                     <PersonalDetails
                                                         props={props}
                                                         accountUpdatedComplete={
@@ -89,6 +102,9 @@ const Home = (props) => {
                                                     />
                                                 </div>
                                             </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </main>
                         </div>
                     </div>

pages/account/register.js

@@ -6,7 +6,7 @@ import Banner from "../../components/banner";
 import CookieBanner from "../../components/cookieBanner";
 import Breadcrumbs from "../../components/breadcrumbs";
 import Footer from "../../components/footer";
-
+import ServiceBanner from "../../components/servicebanner";
 import { useSelector, shallowEqual, connect } from "react-redux";
 import { wrapper } from "../../store/store";
 
@@ -47,6 +47,7 @@ const Home = (props) => {
                     <div className="govuk-grid-column-full">
                         <div className="govuk-width-container">
                             <Breadcrumbs slug={appealtypes} />
+                            <ServiceBanner props={props} noSignin={true} />
                             <main
                                 className="govuk-main-wrapper--auto-spacing"
                                 id="main-content"
@@ -107,7 +108,7 @@ const Home = (props) => {
                                     {registerFormComplete != true ||
                                     accountCreatedComplete != true ? (
                                         <div className="govuk-grid-column-one-third">
-                                            <h2 className="govuk-heading-m">
+                                            <h2 className="">
                                                 {t("account:help-heading")}
                                             </h2>
 

styles/sass/welshgov/_application.scss

@@ -102,6 +102,7 @@ body {
         &:hover {
             background-color: $blue;
             color: #eeeeee;
+            text-decoration: none;
         }
     }
 
@@ -533,7 +534,7 @@ a.longLinkBreak {
         label {
             margin-top: 0px;
             background-color: $lightgrey_semi;
-            padding: 20px 20px 20px 50px;
+            padding: 20px 20px 20px 20px;
 
             &:before {
                 top: 18px;
@@ -2957,3 +2958,9 @@ ul.subFieldList {
 
 
 }
+
+#personalDetailsCard {
+    .govuk-fieldset {
+        margin-bottom: 20px;
+    }
+}