blockworks-foundation
/
mango-token-sale
mirror of https://github.com/blockworks-foundation/mango-token-sale.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/ContributionModal.tsx
View File

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

6
components/Slider.tsx
View File

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