diff --git a/app/components/Button.js b/app/components/Button.js index 67ba45f55..c29b8ae8c 100644 --- a/app/components/Button.js +++ b/app/components/Button.js @@ -35,7 +35,7 @@ const RealButton = styled.button` border: 0; } - &:hover { + &:hover:not(:disabled) { background: ${(props) => darken(0.05, props.theme.buttonBackground)}; } @@ -43,6 +43,10 @@ const RealButton = styled.button` cursor: default; pointer-events: none; color: ${(props) => props.theme.white50}; + + svg { + fill: ${(props) => props.theme.white50}; + } } ${(props) => @@ -65,7 +69,7 @@ const RealButton = styled.button` } - &:hover { + &:hover:not(:disabled) { background: ${ props.borderOnHover ? props.theme.buttonNeutralBackground @@ -78,6 +82,10 @@ const RealButton = styled.button` &:disabled { color: ${props.theme.textTertiary}; + + svg { + fill: ${props.theme.textTertiary}; + } } `} ${(props) => props.danger && diff --git a/app/components/InputSelect.js b/app/components/InputSelect.js index 848cbb811..7d0672bad 100644 --- a/app/components/InputSelect.js +++ b/app/components/InputSelect.js @@ -24,6 +24,7 @@ export type Props = { nude?: boolean, ariaLabel: string, short?: boolean, + disabled?: boolean, className?: string, labelHidden?: boolean, options: Option[], @@ -44,6 +45,7 @@ const InputSelect = (props: Props) => { short, ariaLabel, onChange, + disabled, nude, } = props; @@ -57,6 +59,7 @@ const InputSelect = (props: Props) => { ...select, hideOnClickOutside: true, preventBodyScroll: true, + disabled, }); const previousValue = React.useRef(value); @@ -93,7 +96,12 @@ const InputSelect = (props: Props) => { ) : ( wrappedLabel ))} - {(props) => ( { {...select} value={option.value} key={option.value} + animating={select.animating} > {select.selectedValue !== undefined && ( <> @@ -191,6 +200,12 @@ const StyledButton = styled(Button)` export const StyledSelectOption = styled(SelectOption)` ${MenuAnchorCSS} + + ${(props) => + props.animating && + css` + pointer-events: none; + `} `; const Wrapper = styled.label`