PSP-8591 : UI UX Clean Up - Left Side Menu

source/frontend/src/assets/scss/_variables.module.scss

@@ -13,6 +13,7 @@
 
   // Colors
   pimsGreen80: $pims-green-80;
+  pimsWhite: $pims-white;
   warningBackgroundColor: $warning-background-color;
   numberBackgroundColor: $number-background-color;
   dangerBackgroundColor: $danger-background-color;
@@ -22,6 +23,7 @@
   linkColor: $link-color;
   linkHoverColor: $link-hover-color;
   activeActionColor: $active-action-color;
+  hoverActionColor: $hover-action-color;
   headerTextColor: $header-text-color;
   headerBorderColor: $header-border-color;
 

source/frontend/src/assets/scss/colors.scss

@@ -4,6 +4,7 @@ $pims-blue-20: #d9eaf7;
 $pims-blue-80: #1a5496;
 
 $pims-blue-50: #428bca;
+$pims-blue-30: #8ec6ff;
 
 $pims-yellow-10: #fef1d8;
 $pims-yellow-30: #fcba19;
@@ -20,7 +21,9 @@ $pims-grey-80: #606060;
 $pims-green-20: #dff0d8;
 $pims-green-80: #2e8540;
 
+
 $active-action-color: $pims-blue-50;
+$hover-action-color: $pims-blue-30;
 $border-outline-color: $pims-grey-80;
 $warning-background-color: $pims-yellow-10;
 $number-background-color: $pims-yellow-30;

source/frontend/src/components/layout/SideNavBar/NavIcon.tsx

@@ -22,6 +22,7 @@ interface INavIconProps {
  */
 export const NavIcon = ({ icon, text, showText, onClick, roles, claims }: INavIconProps) => {
   const { hasRole, hasClaim } = useKeycloakWrapper();
+
   const displayIcon =
     find(roles, (role: Roles) => hasRole(role)) || find(claims, (claim: Claims) => hasClaim(claim));
 
@@ -42,19 +43,32 @@ export const NavIcon = ({ icon, text, showText, onClick, roles, claims }: INavIc
 
 const StyledNav = styled(Nav.Item)`
   width: 100%;
+  margin-bottom: 2rem;
+  fill: ${({ theme }) => theme.css.pimsWhite};
+
+  svg {
+    min-width: max-content;
+  }
+
+  &:hover {
+    label {
+      color: ${({ theme }) => theme.css.hoverActionColor};
+    }
+
+    svg {
+      fill: ${({ theme }) => theme.css.hoverActionColor};
+    }
+  }
 `;
 
 const StyledLink = styled(Nav.Link)`
   display: flex;
   flex-direction: row;
   align-items: center;
-  svg {
-    min-width: max-content;
-  }
 `;
 
 const StyledLabel = styled.label`
-  margin-left: 0.4rem;
+  margin-left: 1rem;
   margin-bottom: 0;
   font-size: 1.2rem;
   color: white;

source/frontend/src/components/layout/SideNavBar/SideNavbar.tsx

@@ -1,14 +1,16 @@
 import clsx from 'classnames';
 import { useContext, useState } from 'react';
-import { FaBriefcase } from 'react-icons/fa';
-import { MdContactMail, MdFence, MdHome } from 'react-icons/md';
-import { TbArrowBounce } from 'react-icons/tb';
 import { useHistory } from 'react-router-dom';
 
-import AdminPanelSettings from '@/assets/images/admin-panel-settings.svg?react';
-import RealEstateAgent from '@/assets/images/real-estate-agent.svg?react';
-import Source from '@/assets/images/source.svg?react';
-import ConsolidateSubdivideIcon from '@/assets/images/subdivisionconsolidation.svg?react';
+import AcquisitionFileIcon from '@/assets/images/acquisition-icon.svg?react';
+import AdminIcon from '@/assets/images/admin-icon.svg?react';
+import ContactIcon from '@/assets/images/contact-icon.svg?react';
+import DispositionIcon from '@/assets/images/disposition-icon.svg?react';
+import HomeIcon from '@/assets/images/home-icon.svg?react';
+import LeaseIcon from '@/assets/images/lease-icon.svg?react';
+import ProjectsIcon from '@/assets/images/projects-icon.svg?react';
+import ResearchIcon from '@/assets/images/research-icon.svg?react';
+import SubdivisionIcon from '@/assets/images/subdivision-icon.svg?react';
 import { ExpandCollapseButton } from '@/components/common/buttons/ExpandCollapseButton';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
 import { NavIcon } from '@/components/layout';
@@ -30,58 +32,60 @@ export const SideNavBar = () => {
     <Styled.ZIndexWrapper>
       <Styled.SideNavBar className={clsx({ expanded: expanded })}>
         <NavIcon
-          onClick={() => history.push('/mapview')}
-          icon={<MdHome size={24} />}
+          onClick={() => {
+            history.push('/mapview');
+          }}
+          icon={<HomeIcon />}
           text="Home"
           showText={expanded}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.PROJECT)}
-          icon={<FaBriefcase size={24} />}
+          icon={<ProjectsIcon />}
           text="Project"
           showText={expanded}
           claims={[Claims.PROJECT_VIEW]}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.RESEARCH)}
-          icon={<Source />}
+          icon={<ResearchIcon />}
           text="Research"
           showText={expanded}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.ACQUISITION)}
-          icon={<RealEstateAgent />}
+          icon={<AcquisitionFileIcon />}
           text="Acquisition"
           showText={expanded}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.LEASE)}
-          icon={<MdFence size={24} />}
+          icon={<LeaseIcon />}
           text="Leases & Licences"
           showText={expanded}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.DISPOSITION)}
-          icon={<TbArrowBounce size={24} color="white" fillOpacity={0} />}
+          icon={<DispositionIcon />}
           text="Disposition"
           showText={expanded}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.SUBDCONS)}
-          icon={<ConsolidateSubdivideIcon className="mr-1" />}
+          icon={<SubdivisionIcon />}
           text="Subdivision & Consolidation"
           showText={expanded}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.CONTACT)}
-          icon={<MdContactMail size={24} />}
+          icon={<ContactIcon />}
           text="Contacts"
           showText={expanded}
           claims={[Claims.CONTACT_VIEW]}
         />
         <NavIcon
           onClick={() => setTrayPage(SidebarContextType.ADMIN)}
-          icon={<AdminPanelSettings />}
+          icon={<AdminIcon />}
           text="Admin Tools"
           showText={expanded}
           roles={[Roles.SYSTEM_ADMINISTRATOR]}