From 6fb62ef7e1d6d27426ded6924f857b0b877134ca Mon Sep 17 00:00:00 2001
From: Maximilian Schneider <mail@maximilianschneider.net>
Date: Mon, 5 Jul 2021 21:37:28 +0200
Subject: [PATCH] fix styling issues around disabled buttons

---
 components/ContributionModal.tsx | 2 +-
 components/Slider.tsx            | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/ContributionModal.tsx b/components/ContributionModal.tsx
index e5225f5..6781a14 100644
--- a/components/ContributionModal.tsx
+++ b/components/ContributionModal.tsx
@@ -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()}
diff --git a/components/Slider.tsx b/components/Slider.tsx
index c189014..8e4bb35 100644
--- a/components/Slider.tsx
+++ b/components/Slider.tsx
@@ -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>