fix: button display and revert button component changes

This commit is contained in:
José Oliveira 2021-10-18 15:48:17 +01:00
parent 550bc2b7a4
commit 8e83d184ba
2 changed files with 25 additions and 18 deletions

View file

@ -32,8 +32,8 @@ const styles = {
const useStyles = makeStyles(styles) const useStyles = makeStyles(styles)
const FeatureButton = memo( const FeatureButton = memo(
({ className, Icon, InverseIcon, children, active, ...props }) => { ({ className, Icon, InverseIcon, children, ...props }) => {
const classes = useStyles({ active }) const classes = useStyles()
const classNames = { const classNames = {
[classes.featureButton]: true, [classes.featureButton]: true,

View file

@ -123,8 +123,7 @@ const EditableCard = ({
[classes.label1Rejected]: state === OVERRIDE_REJECTED, [classes.label1Rejected]: state === OVERRIDE_REJECTED,
[classes.label1Accepted]: state === OVERRIDE_AUTHORIZED [classes.label1Accepted]: state === OVERRIDE_AUTHORIZED
} }
const isNotAuthorized =
state === OVERRIDE_REJECTED || state === OVERRIDE_PENDING
const authorized = const authorized =
state === OVERRIDE_PENDING state === OVERRIDE_PENDING
? { label: 'Pending', type: 'neutral' } ? { label: 'Pending', type: 'neutral' }
@ -208,20 +207,28 @@ const EditableCard = ({
Cancel Cancel
</ActionButton> </ActionButton>
</div> </div>
<ActionButton {authorized.label !== 'Accepted' && (
color="secondary" <div className={classes.button}>
Icon={isNotAuthorized ? AuthorizeIcon : CancelIcon} <ActionButton
InverseIcon={ color="secondary"
isNotAuthorized Icon={AuthorizeIcon}
? AuthorizeReversedIcon InverseIcon={AuthorizeReversedIcon}
: CancelReversedIcon type="submit"
} onClick={() => authorize()}>
type="submit" {'Authorize'}
onClick={ </ActionButton>
isNotAuthorized ? () => authorize() : () => reject() </div>
}> )}
{isNotAuthorized ? 'Authorize' : 'Reject'} {authorized.label !== 'Rejected' && (
</ActionButton> <ActionButton
color="secondary"
Icon={CancelIcon}
InverseIcon={CancelReversedIcon}
type="submit"
onClick={() => reject()}>
{'Reject'}
</ActionButton>
)}
{error && ( {error && (
<ErrorMessage>Failed to save changes</ErrorMessage> <ErrorMessage>Failed to save changes</ErrorMessage>
)} )}