Merge pull request #35 from bcgov/responsiveness-tweaks

Responsiveness Form changes
bcgov · Aug 20, 2024 · 3bdefcd · 3bdefcd
2 parents 3536bc4 + d6d8585
commit 3bdefcd
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/submit-web/src/components/Shared/controlled/ControlledTextField.tsx b/submit-web/src/components/Shared/controlled/ControlledTextField.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { TextField, TextFieldProps } from "@mui/material";
 import { Controller, useFormContext } from "react-hook-form";
+import { BCDesignTokens } from "epic.theme";
 
 type IFormInputProps = {
   name: string;
@@ -44,6 +45,9 @@ const ControlledTextField: FC<IFormInputProps> = ({
             field.onChange(e.target.value);
           }}
           error={!!errors[name]}
+          FormHelperTextProps={{
+            sx: { color: BCDesignTokens.typographyColorDanger },
+          }}
           helperText={String(errors[name]?.message ?? "")}
           {...otherProps}
         />

diff --git a/submit-web/src/components/Shared/layout/Header/AppBarActions.tsx b/submit-web/src/components/Shared/layout/Header/AppBarActions.tsx
@@ -12,10 +12,12 @@ import { theme } from "@/styles/theme";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { useState } from "react";
 import { OidcConfig } from "@/utils/config";
+import { useNavigate } from "@tanstack/react-router";
 import { BCDesignTokens } from "epic.theme";
 
 export default function AppBarActions() {
   const auth = useAuth();
+  const navigate = useNavigate();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {
@@ -60,7 +62,13 @@ export default function AppBarActions() {
               horizontal: "right",
             }}
           >
-            <MenuItem onClick={handleClose}>My Profile</MenuItem>
+            <MenuItem
+              onClick={() => {
+                navigate({ to: "/profile" });
+              }}
+            >
+              My Profile
+            </MenuItem>
             <MenuItem
               onClick={() => {
                 auth.signoutRedirect();

diff --git a/submit-web/src/routes/_authenticated/registration/add-projects.tsx b/submit-web/src/routes/_authenticated/registration/add-projects.tsx
@@ -24,7 +24,7 @@ import { useEffect } from "react";
 import { Else, If, Then } from "react-if";
 
 export const Route = createFileRoute(
-  "/_authenticated/registration/add-projects",
+  "/_authenticated/registration/add-projects"
 )({
   component: AddProjects,
 });
@@ -87,7 +87,7 @@ function AddProjects() {
 
         <Grid item xs={12} mt={"20px"}>
           <Typography variant="body1">
-            We found the following projects associated with CGI Mines Inc.
+            We found the following project(s) associated with CGI Mines Inc.
           </Typography>
         </Grid>
         <Grid item xs={12} mt={"20px"}>
@@ -111,7 +111,7 @@ function AddProjects() {
             {isAddingProjectsPending ? (
               <CircularProgress />
             ) : (
-              "Confirm Projects"
+              "Confirm Project(s)"
             )}
           </Button>
           <Caption2>

diff --git a/submit-web/src/routes/_authenticated/registration/create-account.tsx b/submit-web/src/routes/_authenticated/registration/create-account.tsx
@@ -23,17 +23,20 @@ const queryParamSchema = yup.object().shape({
 type QueryParamsSchema = yup.InferType<typeof queryParamSchema>;
 
 export const Route = createFileRoute(
-  "/_authenticated/registration/create-account",
+  "/_authenticated/registration/create-account"
 )({
   component: CreateAccount,
 });
 
 const createAccountSchema = yup.object().shape({
-  givenName: yup.string().required("Name is required"),
-  surname: yup.string().required("Surname is required"),
-  position: yup.string().required("Position is required"),
-  phone: yup.string().required("Phone number is required"),
-  email: yup.string().email("Invalid email").required("Email is required"),
+  givenName: yup.string().required("Please enter your given name."),
+  surname: yup.string().required("Please enter your surname."),
+  position: yup.string().required("Please enter your position."),
+  phone: yup.string().required("Please enter your phone number."),
+  email: yup
+    .string()
+    .email("Invalid email")
+    .required("Please enter your email."),
 });
 
 type CreateAccountForm = yup.InferType<typeof createAccountSchema>;
@@ -86,8 +89,8 @@ function CreateAccount() {
         <Grid item xs={12}>
           <Typography variant="body1">
             Welcome to EPIC.submit and thank you for taking a few minutes to set
-            up the BC Hydro account. First of all, please create your Account as
-            an Adminstrator of EPIC.submit for CGI Mines Inc.
+            up the CGI Mines Inc account. First of all, please create your
+            Account as an Adminstrator of EPIC.submit for CGI Mines Inc.
             <br />
             <br />
             Account Administrators have access to all the projects associated
@@ -99,7 +102,8 @@ function CreateAccount() {
 
         <Grid
           item
-          xs={3}
+          xs={12}
+          md={4}
           justifyContent="center"
           alignItems="flex-start"
           marginTop="0.75rem"