PSP-6945 : Access to PIMS Overview (Help File) - Header

source/frontend/src/components/common/VerticalBar.tsx

@@ -4,9 +4,9 @@ import styled from 'styled-components';
  * Styled VerticalBar component.
  */
 export const VerticalBar = styled.span`
-  border-left: 0.2rem solid white;
+  border-left: 1px solid white;
   font-size: 3.4rem;
-  margin: 0 1.5rem 0 2.5rem;
+  margin: 0 36px 0 36px;
   vertical-align: top;
 `;
 

source/frontend/src/components/layout/Header/Header.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Nav from 'react-bootstrap/Nav';
 import Navbar from 'react-bootstrap/Navbar';
 import { FaBomb } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
 
 import { BCGovLogo } from '@/components/common/BCGovLogo';
 import { VerticalBar } from '@/components/common/VerticalBar';
@@ -47,7 +48,9 @@ export const Header = () => {
           <BCGovLogo />
         </a>
         <VerticalBar />
-        <Logo height={50} />
+        <Link to="/mapview">
+          <Logo height={50} />
+        </Link>
       </Navbar.Brand>
       <Nav className="title mr-auto">
         <Nav.Item>
@@ -56,6 +59,9 @@ export const Header = () => {
         </Nav.Item>
       </Nav>
       <HelpContainer />
+      <div>
+        <VerticalBar />
+      </div>
       {keycloak.obj.authenticated && <UserProfile />}
       <Nav className="other">
         {errors && errors.length ? (

source/frontend/src/components/layout/Header/UserProfile.tsx

@@ -43,6 +43,7 @@ const LogoutText = styled.p`
 const ProfileAvatar = styled(Image)`
   height: 3rem;
   width: 3rem;
+  margin-right: 10px;
 `;
 
 /** the styling for the logout icon in the logout footer */

source/frontend/src/components/layout/Header/__snapshots__/EmptyHeader.test.tsx.snap

@@ -2,9 +2,9 @@
 
 exports[`Empty Header renders 1`] = `
 .c1 {
-  border-left: 0.2rem solid white;
+  border-left: 1px solid white;
   font-size: 3.4rem;
-  margin: 0 1.5rem 0 2.5rem;
+  margin: 0 36px 0 36px;
   vertical-align: top;
 }
 

source/frontend/src/components/layout/Header/__snapshots__/Header.test.tsx.snap

@@ -15,9 +15,9 @@ exports[`App Header renders correctly 1`] = `
 
 <div />
   .c1 {
-  border-left: 0.2rem solid white;
+  border-left: 1px solid white;
   font-size: 3.4rem;
-  margin: 0 1.5rem 0 2.5rem;
+  margin: 0 36px 0 36px;
   vertical-align: top;
 }
 
@@ -128,12 +128,16 @@ exports[`App Header renders correctly 1`] = `
       <span
         class="c1"
       />
-      <img
-        alt="PIMS logo"
-        class="pims-logo"
-        height="50"
-        src="/tenants/MOTI/PIMS-logo.png"
-      />
+      <a
+        href="/mapview"
+      >
+        <img
+          alt="PIMS logo"
+          class="pims-logo"
+          height="50"
+          src="/tenants/MOTI/PIMS-logo.png"
+        />
+      </a>
     </span>
     <div
       class="title mr-auto navbar-nav"
@@ -153,6 +157,11 @@ exports[`App Header renders correctly 1`] = `
         </h1>
       </div>
     </div>
+    <div>
+      <span
+        class="c1"
+      />
+    </div>
     <div
       class="other navbar-nav"
     />

source/frontend/src/features/help/components/HelpModal.tsx

@@ -3,11 +3,12 @@ import Container from 'react-bootstrap/Container';
 import Modal from 'react-bootstrap/Modal';
 import ModalDialog from 'react-bootstrap/ModalDialog';
 import Draggable from 'react-draggable';
+import { FaQuestionCircle } from 'react-icons/fa';
 import styled from 'styled-components';
 
 import variables from '@/assets/scss/_variables.module.scss';
 import { Button } from '@/components/common/buttons/Button';
-import TooltipIcon from '@/components/common/TooltipIcon';
+import { H3 } from '@/components/common/styles';
 import { useAppSelector } from '@/store/hooks';
 import { useTenants } from '@/store/slices/tenants';
 
@@ -21,6 +22,8 @@ interface IModalProps {
   handleSubmit: () => void;
   /** External state var to track whether or not this modal is being shown. */
   show: boolean;
+  /** Link to PIMS training material shared folder. */
+  pimsTrainingUrl: string;
 }
 
 /**
@@ -37,6 +40,7 @@ const HelpModal: FunctionComponent<React.PropsWithChildren<IModalProps>> = ({
   handleCancel,
   handleSubmit,
   show,
+  pimsTrainingUrl,
 }) => {
   const tenantsState = useAppSelector(state => state.tenants);
   const { getSettings } = useTenants();
@@ -57,31 +61,43 @@ const HelpModal: FunctionComponent<React.PropsWithChildren<IModalProps>> = ({
       <ModalStyled dialogAs={DraggableModalDialog} show={show} onHide={handleCancel}>
         <ModalHeader closeButton>
           <DraggableTitle>
-            Help Desk&nbsp;
-            <StyledTooltip toolTipId="help-toolTip" toolTip="Click and drag to move this popup" />
+            <FaQuestionCircle size={24} />
+            <DraggableTitleText>Help Desk</DraggableTitleText>
           </DraggableTitle>
         </ModalHeader>
-
         <Modal.Body>
+          <H3Styled>Get started with PIMS</H3Styled>
+          <p>
+            This overview has useful tools that will support you to start using the application. You
+            can also watch the video demos.
+          </p>
+          <LinkStyled target="_blank" href={pimsTrainingUrl}>
+            PIMS Resources
+          </LinkStyled>
+          <hr />
           <HelpModalContentContainer setMailto={setMailto} />
+          <StyledConfirmationText>
+            Do you want to proceed and send the email?
+          </StyledConfirmationText>
+          <hr />
         </Modal.Body>
 
         <Modal.Footer>
+          <StyledButton variant="secondary" onClick={handleCancel}>
+            No
+          </StyledButton>
           {config?.settings?.helpDeskEmail ? (
-            <Button
+            <StyledButton
               href={`mailto:${config?.settings?.helpDeskEmail}?subject=${mailto?.subject}&body=${mailto?.body}`}
               onClick={() => {
                 handleSubmit();
               }}
             >
-              Submit
-            </Button>
+              Yes
+            </StyledButton>
           ) : (
-            <Button disabled>Submit</Button>
+            <StyledButton disabled>Yes</StyledButton>
           )}
-          <Button variant="secondary" onClick={handleCancel}>
-            Cancel
-          </Button>
         </Modal.Footer>
       </ModalStyled>
     </Container>
@@ -111,23 +127,48 @@ const ModalStyled = styled(Modal)`
   .modal-body {
     max-height: calc(100vh - 20rem);
     overflow-y: auto;
+    padding: 0px 16px;
+  }
+  .modal-footer {
+    border: none;
+    padding-right: 16px;
   }
 `;
 
 const DraggableTitle = styled(Modal.Title)`
+  margin-left: 10px;
   width: 100%;
   cursor: pointer;
   color: white;
 `;
 
+const DraggableTitleText = styled.div`
+  display: inline-block;
+  margin-left: 10px;
+`;
+
+const StyledConfirmationText = styled.p`
+  margin-top: 24px;
+`;
+
+const StyledButton = styled(Button)`
+  width: 95px;
+  margin-right: 24px;
+`;
+
+const LinkStyled = styled.a`
+  margin-bottom: 16px;
+`;
+
+const H3Styled = styled(H3)`
+  border: none;
+  margin-bottom: 16px;
+  margin-top: 24px;
+`;
+
 const ModalHeader = styled(Modal.Header)`
   background-color: ${variables.primaryColor};
   padding: 0.5rem;
 `;
 
-const StyledTooltip = styled(TooltipIcon)`
-  margin-left: 0.5rem;
-  margin-bottom: 0.5rem;
-`;
-
 export default HelpModal;