fix styling issues around disabled buttons

This commit is contained in:
Maximilian Schneider 2021-07-05 21:37:28 +02:00
parent 4b8cfe572d
commit 6fb62ef7e1
2 changed files with 7 additions and 1 deletions

View File

@ -217,7 +217,7 @@ const ContributionModal = () => {
) : null}
<Button
className={`${
submitted && 'opacity-30'
disableFormInputs && 'opacity-30'
} bg-bkg-4 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
disabled={disableFormInputs}
onClick={() => handleMax()}

View File

@ -96,6 +96,7 @@ const StyledSliderButton = styled.button<StyledSliderButtonProps>`
${({ styleValue, sliderValue }) => styleValue < sliderValue && tw`opacity-40`}
${({ styleValue, sliderValue }) =>
styleValue === sliderValue && tw`animate-pulse text-primary-light`}
${({ disabled }) => disabled && 'cursor: default'}
`
type SliderProps = {
@ -153,6 +154,7 @@ const AmountSlider: FunctionComponent<SliderProps> = ({
onClick={() => handleSliderButtonClick(0)}
styleValue={0}
sliderValue={value}
disabled={disabled}
>
0%
</StyledSliderButton>
@ -160,6 +162,7 @@ const AmountSlider: FunctionComponent<SliderProps> = ({
onClick={() => handleSliderButtonClick(25)}
styleValue={25}
sliderValue={value}
disabled={disabled}
>
25%
</StyledSliderButton>
@ -167,6 +170,7 @@ const AmountSlider: FunctionComponent<SliderProps> = ({
onClick={() => handleSliderButtonClick(50)}
styleValue={50}
sliderValue={value}
disabled={disabled}
>
50%
</StyledSliderButton>
@ -174,6 +178,7 @@ const AmountSlider: FunctionComponent<SliderProps> = ({
onClick={() => handleSliderButtonClick(75)}
styleValue={75}
sliderValue={value}
disabled={disabled}
>
75%
</StyledSliderButton>
@ -181,6 +186,7 @@ const AmountSlider: FunctionComponent<SliderProps> = ({
onClick={() => handleSliderButtonClick(100)}
styleValue={100}
sliderValue={value}
disabled={disabled}
>
100%
</StyledSliderButton>