Skip to content

Commit

Permalink
Merge pull request #4541 from stairaku/PSP-9710
Browse files Browse the repository at this point in the history
PSP-9710, PSP-9313: UI/UX Cleanup - Make icons consistent across PIMS
  • Loading branch information
stairaku authored Dec 23, 2024
2 parents 6b2b7f3 + e552cf1 commit 8aa0ab6
Show file tree
Hide file tree
Showing 107 changed files with 2,294 additions and 1,186 deletions.
29 changes: 0 additions & 29 deletions source/frontend/src/components/common/EditButton.tsx

This file was deleted.

2 changes: 1 addition & 1 deletion source/frontend/src/components/common/Section/Section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'}`}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down
30 changes: 30 additions & 0 deletions source/frontend/src/components/common/buttons/EditButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { FaEdit } from 'react-icons/fa';
import { CSSProperties } from 'styled-components';

import { StyledIconButton } from './IconButton';

interface IEditButtonProps {
onClick: () => void;
title?: string;
icon?: React.ReactNode;
'data-testId'?: string;
style?: CSSProperties | null;
}

export const EditButton: React.FunctionComponent<
React.PropsWithChildren<IEditButtonProps>
> = props => {
return (
<StyledIconButton
variant="primary"
title={props.title ?? 'edit'}
onClick={props.onClick}
data-testid={props['data-testId'] ?? 'edit-button'}
style={props.style}
>
{props.icon ?? <FaEdit size={22} />}
</StyledIconButton>
);
};

export default EditButton;
Original file line number Diff line number Diff line change
Expand Up @@ -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};
}
`;
53 changes: 35 additions & 18 deletions source/frontend/src/components/common/buttons/RemoveButton.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,49 @@
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;
dataTestId?: string | null;
title?: string;
'data-testId'?: string;
fontSize?: string;
icon?: React.ReactNode;
style?: CSSProperties | null;
onRemove: () => void;
}

export const RemoveButton: React.FunctionComponent<React.PropsWithChildren<IRemoveButtonProps>> = ({
label,
dataTestId,
fontSize,
onRemove,
}) => {
export const RemoveButton: React.FunctionComponent<
React.PropsWithChildren<IRemoveButtonProps>
> = props => {
return (
<StyledRemoveLinkButton $fontSize={fontSize} onClick={onRemove}>
<MdClose data-testid={dataTestId ?? 'remove-button'} size="2rem" title="remove" />{' '}
<span className="text">{label ?? 'Remove'}</span>
<StyledRemoveLinkButton $fontSize={props.fontSize} onClick={props.onRemove}>
<MdClose data-testid={props['data-testId'] ?? 'remove-button'} size="2rem" title="remove" />{' '}
<span className="text">{props.label ?? 'Remove'}</span>
</StyledRemoveLinkButton>
);
};

export const RemoveIconButton: React.FunctionComponent<
React.PropsWithChildren<IRemoveButtonProps>
> = props => {
return (
<StyledRemoveIconButton
variant="primary"
title={props.title ?? 'remove'}
onClick={props.onRemove}
data-testid={props['data-testId'] ?? 'remove-button'}
style={props.style}
>
{props.icon ?? <FaTrash size={22} />}
</StyledRemoveIconButton>
);
};

// Support font-size override for remove buttons
export const StyledRemoveLinkButton = styled(LinkButton)<{ $fontSize?: string }>`
&&.btn {
Expand Down Expand Up @@ -60,20 +78,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;
Expand Down
29 changes: 29 additions & 0 deletions source/frontend/src/components/common/buttons/ViewButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
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;
'data-testId'?: string;
style?: CSSProperties | null;
}

export const ViewButton: React.FunctionComponent<
React.PropsWithChildren<IViewButtonProps>
> = props => (
<StyledIconButton
variant="primary"
title={props.title ?? 'view'}
onClick={props.onClick}
data-testid={props['data-testId'] ?? 'view-button'}
style={props.style}
>
{props.icon ?? <FaEye size={22} />}
</StyledIconButton>
);

export default ViewButton;
4 changes: 2 additions & 2 deletions source/frontend/src/components/common/form/NotesModal.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -70,7 +70,7 @@ export const NotesModal = <T,>({
setDisplayModal(true);
}}
>
<FaRegFileAlt />
<FaEye size={22} />
</StyledIconButton>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -65,9 +66,20 @@ export const ToggleSaveInputView: React.FC<IToggleSaveInputViewProps> = ({
} else {
return (
<>
{asCurrency ? formatMoney(Number(value)) : value}
<EditButton onClick={() => setIsEditing(true)} />
<StyledToggleContainer>
{asCurrency ? formatMoney(Number(value)) : value}
<EditButton onClick={() => setIsEditing(true)} />
</StyledToggleContainer>
</>
);
}
};

export const StyledToggleContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
margin-bottom: 0.5rem;
align-items: center;
`;
Loading

0 comments on commit 8aa0ab6

Please sign in to comment.