PSP-9710, PSP-9313: UI/UX Cleanup - Make icons consistent across PIMS

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

@@ -42,7 +42,7 @@ export const Section: React.FC<
           <Row className="no-gutters">
             <Col>{header}</Col>
             {isCollapsable && (
-              <Col xs="auto" className="pl-8 d-flex align-items-end">
+              <Col xs="auto" className="pl-2 d-flex align-items-end">
                 {isCollapsed && (
                   <ArrowDropDownIcon
                     title={`expand-${title ?? 'section'}`}

source/frontend/src/components/common/Section/SectionStyles.tsx

@@ -75,8 +75,8 @@ export const StyledSummarySection = styled.div`
 
 export const StyledEditWrapper = styled.div`
   color: ${props => props.theme.css.primary};
-
   text-align: right;
+  overflow: hidden;
 `;
 
 export const StyledSubtleText = styled.p`

source/frontend/src/components/common/EditButton.tsx → source/frontend/src/components/common/buttons/EditButton.tsx

@@ -1,28 +1,33 @@
-import { Button } from 'react-bootstrap';
 import { FaEdit } from 'react-icons/fa';
+import { CSSProperties } from 'styled-components';
+
+import { StyledIconButton } from './IconButton';
 
 interface IEditButtonProps {
   onClick: () => void;
   title?: string;
   icon?: React.ReactNode;
   dataTestId?: string | null;
+  style?: CSSProperties | null;
 }
 
 export const EditButton: React.FunctionComponent<React.PropsWithChildren<IEditButtonProps>> = ({
   onClick,
   title,
   icon,
   dataTestId,
+  style,
 }) => {
   return (
-    <Button
-      variant="link"
+    <StyledIconButton
+      variant="primary"
       title={title ?? 'edit'}
       onClick={onClick}
       data-testid={dataTestId ?? 'edit-button'}
+      style={style}
     >
-      {icon ?? <FaEdit size={'2rem'} />}
-    </Button>
+      {icon ?? <FaEdit size={22} />}
+    </StyledIconButton>
   );
 };
 

source/frontend/src/components/common/buttons/EditPropertiesButton.tsx

@@ -7,8 +7,8 @@ export const EditPropertiesIcon: React.FC = () => {
 };
 
 const EditMapMarkerButton = styled(EditMapMarkerIcon)`
-  fill: ${props => props.theme.css.iconBlueAction};
+  fill: ${props => props.theme.bcTokens.surfaceColorPrimaryButtonDefault};
   &:hover {
-    fill: ${props => props.theme.css.iconBlueHover};
+    fill: ${props => props.theme.bcTokens.surfaceColorPrimaryButtonHover};
   }
 `;

source/frontend/src/components/common/buttons/RemoveButton.tsx

@@ -1,14 +1,19 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+import { ButtonProps } from 'react-bootstrap';
+import { FaTrash } from 'react-icons/fa';
 import { MdClose } from 'react-icons/md';
 import styled, { css } from 'styled-components';
 
 import { StyledIconButton } from './IconButton';
 import { LinkButton } from './LinkButton';
 
-interface IRemoveButtonProps {
+interface IRemoveButtonProps extends ButtonProps {
   label?: string;
+  title?: string;
   dataTestId?: string | null;
   fontSize?: string;
+  icon?: React.ReactNode;
+  style?: CSSProperties | null;
   onRemove: () => void;
 }
 
@@ -26,6 +31,22 @@ export const RemoveButton: React.FunctionComponent<React.PropsWithChildren<IRemo
   );
 };
 
+export const RemoveIconButton: React.FunctionComponent<
+  React.PropsWithChildren<IRemoveButtonProps>
+> = ({ onRemove, title, icon, dataTestId, style }) => {
+  return (
+    <StyledRemoveIconButton
+      variant="primary"
+      title={title ?? 'edit'}
+      onClick={onRemove}
+      data-testid={dataTestId ?? 'remove-button'}
+      style={style}
+    >
+      {icon ?? <FaTrash size={22} />}
+    </StyledRemoveIconButton>
+  );
+};
+
 // Support font-size override for remove buttons
 export const StyledRemoveLinkButton = styled(LinkButton)<{ $fontSize?: string }>`
   &&.btn {
@@ -60,20 +81,19 @@ export const StyledRemoveIconButton = styled(StyledIconButton)`
   &&.btn {
     &.btn-primary {
       svg {
-        color: ${({ theme }) => theme.bcTokens.iconsColorDisabled};
+        color: #aaaaaa !important;
       }
       text-decoration: none;
       line-height: unset;
       .text {
         display: none;
       }
-      &:hover,
-      &:active,
-      &:focus {
-        color: #d8292f;
+      svg:hover,
+      svg:active,
+      svg:focus {
+        color: #d8292f !important;
         text-decoration: none;
         opacity: unset;
-        display: flex;
         flex-direction: row;
         .text {
           display: inline;

source/frontend/src/components/common/buttons/ViewButton.tsx

@@ -0,0 +1,33 @@
+import { ButtonProps } from 'react-bootstrap/Button';
+import { FaEye } from 'react-icons/fa';
+import { CSSProperties } from 'styled-components';
+
+import { StyledIconButton } from './IconButton';
+
+interface IViewButtonProps extends ButtonProps {
+  onClick: () => void;
+  title?: string;
+  icon?: React.ReactNode;
+  dataTestId?: string | null;
+  style?: CSSProperties | null;
+}
+
+export const ViewButton: React.FunctionComponent<React.PropsWithChildren<IViewButtonProps>> = ({
+  onClick,
+  title,
+  icon,
+  dataTestId,
+  style,
+}) => (
+  <StyledIconButton
+    variant="primary"
+    title={title ?? 'edit'}
+    onClick={onClick}
+    data-testid={dataTestId ?? 'view-button'}
+    style={style}
+  >
+    {icon ?? <FaEye size={22} />}
+  </StyledIconButton>
+);
+
+export default ViewButton;

source/frontend/src/components/common/form/NotesModal.tsx

@@ -1,7 +1,7 @@
 import { Formik } from 'formik';
 import { ReactNode } from 'react';
 import React from 'react';
-import { FaRegFileAlt } from 'react-icons/fa';
+import { FaEye } from 'react-icons/fa';
 import * as Yup from 'yup';
 
 import { StyledIconButton } from '@/components/common/buttons';
@@ -70,7 +70,7 @@ export const NotesModal = <T,>({
         setDisplayModal(true);
       }}
     >
-      <FaRegFileAlt />
+      <FaEye size={22} />
     </StyledIconButton>
   );
 };

source/frontend/src/components/common/form/ToggleSaveInput/ToggleSaveInputView.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { Button, Form, Spinner } from 'react-bootstrap';
 import { FaCheck } from 'react-icons/fa';
 import NumberFormat from 'react-number-format';
+import styled from 'styled-components';
 
 import { formatMoney } from '@/utils';
 
-import EditButton from '../../EditButton';
+import EditButton from '../../buttons/EditButton';
 
 /**
  * Non formik form that allows a user to toggle between a value and an input and save the input.
@@ -65,9 +66,20 @@ export const ToggleSaveInputView: React.FC<IToggleSaveInputViewProps> = ({
   } else {
     return (
       <>
-        {asCurrency ? formatMoney(Number(value)) : value}
-        <EditButton onClick={() => setIsEditing(true)} />
+        <StyledCompensationContainer>
+          {asCurrency ? formatMoney(Number(value)) : value}
+          <EditButton onClick={() => setIsEditing(true)} />
+        </StyledCompensationContainer>
       </>
     );
   }
 };
+
+export const StyledCompensationContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  align-items: center;
+`;