fix slider again...

components/Button.tsx

@@ -31,6 +31,8 @@ const StyledButton = styled.button<StyledButtonProps>`
       ${tw`ring-4 ring-secondary-2-light ring-opacity-40`}
     }
   }
+
+  ${({ secondary }) => secondary && tw`bg-none`}
 `
 
 interface ButtonProps {
@@ -52,13 +54,7 @@ const Button: FunctionComponent<ButtonProps> = ({
     <StyledButton
       onClick={onClick}
       disabled={disabled}
-      className={`${className} ${
-        secondary || disabled
-          ? 'bg-bkg-4'
-          : 'bg-gradient-to-br from-secondary-1-light via-secondary-1-dark to-secondary-2-light'
-      } relative z-10 bg-bkg-4 border-none default-transition px-6 py-2 rounded-lg text-fgd-1
-      active:border-primary hover:bg-bkg-3 focus:outline-none
-      disabled:cursor-not-allowed`}
+      className={`${className} bg-gradient-to-br from-secondary-1-light via-secondary-1-dark to-secondary-2-light relative z-10 default-transition px-6 py-2 rounded-lg text-fgd-1 hover:bg-bkg-3 focus:outline-none disabled:cursor-not-allowed`}
       secondary={secondary}
       {...props}
     >

components/ContributionModal.tsx

@@ -1,11 +1,8 @@
 import { useEffect, useState } from 'react'
 import styled from '@emotion/styled'
 import tw from 'twin.macro'
-import {
-  LinkIcon,
-  LockClosedIcon,
-  LockOpenIcon,
-} from '@heroicons/react/outline'
+import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/outline'
+import { LinkIcon } from '@heroicons/react/solid'
 import useWalletStore from '../stores/useWalletStore'
 import { getUsdcBalance } from '../utils'
 import Input from './Input'
@@ -26,16 +23,18 @@ const ContributionModal = () => {
   const wallet = useWalletStore((s) => s.current)
   const usdcBalance = getUsdcBalance()
 
-  const [contributionAmount, setContributionAmount] = useState(null)
-  const [sliderPercentage, setSliderPercentage] = useState(null)
+  const [contributionAmount, setContributionAmount] = useState(0)
+  const [sliderPercentage, setSliderPercentage] = useState(0)
   const [submitting, setSubmitting] = useState(false)
   const [submitted, setSubmitted] = useState(false)
   const [editContribution, setEditContribution] = useState(false)
   const [loading, setLoading] = useState(true)
+  const [maxButtonTransition, setMaxButtonTransition] = useState(false)
 
   const handleConnectDisconnect = () => {
     if (connected) {
-      setContributionAmount(null)
+      // setContributionAmount(0)
+      // setSliderPercentage(0)
       setSubmitted(false)
       setEditContribution(false)
       wallet.disconnect()
@@ -67,8 +66,15 @@ const ContributionModal = () => {
   const handleMax = () => {
     setContributionAmount(usdcBalance)
     setSliderPercentage(100)
+    setMaxButtonTransition(true)
   }
 
+  useEffect(() => {
+    if (maxButtonTransition) {
+      setMaxButtonTransition(false)
+    }
+  }, [maxButtonTransition])
+
   useEffect(() => {
     setLoading(true)
     if (usdcBalance) {
@@ -86,6 +92,8 @@ const ContributionModal = () => {
     }
   }, [submitting])
 
+  const disableFormInputs = submitted || !connected || loading
+
   return (
     <StyledModalWrapper>
       <div className="pb-4 text-center">
@@ -153,7 +161,7 @@ const ContributionModal = () => {
               <div className="flex">
                 {submitted ? (
                   <Button
-                    className="bg-secondary-2-light hover:bg-secondary-2-dark font-normal rounded text-fgd-1 text-xs py-0.5 px-1.5 mr-2"
+                    className="ring-1 ring-secondary-1-light ring-inset hover:ring-secondary-1-dark hover:bg-transparent hover:text-secondary-1-dark font-normal rounded text-secondary-1-light text-xs py-0.5 px-1.5 mr-2"
                     disabled={!connected}
                     onClick={() => handleEditContribution()}
                     secondary
@@ -165,7 +173,7 @@ const ContributionModal = () => {
                   className={`${
                     submitted && 'opacity-30'
                   } bg-bkg-4 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
-                  disabled={!connected || submitted}
+                  disabled={disableFormInputs}
                   onClick={() => handleMax()}
                   secondary
                 >
@@ -182,7 +190,7 @@ const ContributionModal = () => {
               ) : null}
               <Input
                 className={(submitted || editContribution) && 'pl-7'}
-                disabled={!connected || submitted || loading}
+                disabled={disableFormInputs}
                 type="text"
                 onChange={(e) => onChangeAmountInput(e.target.value)}
                 value={loading ? '' : contributionAmount}
@@ -196,16 +204,17 @@ const ContributionModal = () => {
             >
               <div className="pb-20">
                 <Slider
-                  disabled={submitted || !connected || loading}
+                  disabled={disableFormInputs}
                   value={sliderPercentage}
                   onChange={(v) => onChangeSlider(v)}
                   step={1}
+                  maxButtonTransition={maxButtonTransition}
                 />
               </div>
               <Button
                 onClick={() => handleSetContribution()}
                 className="w-full py-2.5"
-                disabled={!connected || submitted}
+                disabled={disableFormInputs}
               >
                 <div className={`flex items-center justify-center`}>
                   Set Contribution

components/Slider.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, useState } from 'react'
+import { FunctionComponent, useEffect, useState } from 'react'
 import tw from 'twin.macro'
 import styled from '@emotion/styled'
 import Slider from 'rc-slider'
@@ -55,20 +55,56 @@ const StyledSlider = styled(Slider)<StyledSliderProps>`
   ${({ disabled }) => disabled && 'background-color: transparent'}
 `
 
+const StyledSliderButtonWrapper = styled.div`
+  ${tw`absolute left-0 top-4 w-full`}
+`
+
+type StyledSliderButtonProps = {
+  styleValue: number
+  sliderValue: number
+}
+
+const StyledSliderButton = styled.button<StyledSliderButtonProps>`
+  ${tw`bg-none font-display transition-all duration-300 hover:text-primary-light focus:outline-none`}
+  font-size: 0.6rem;
+  position: absolute;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  left: 0%;
+
+  :nth-of-type(2) {
+    left: 23%;
+    transform: translateX(-23%);
+  }
+
+  :nth-of-type(3) {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  :nth-of-type(4) {
+    left: 76%;
+    transform: translateX(-76%);
+  }
+
+  :nth-of-type(5) {
+    left: 100%;
+    transform: translateX(-100%);
+  }
+
+  ${({ styleValue, sliderValue }) => styleValue < sliderValue && tw`opacity-40`}
+  ${({ styleValue, sliderValue }) =>
+    styleValue === sliderValue && tw`animate-pulse text-primary-light`}
+`
+
 type SliderProps = {
   onChange: (...args: any[]) => any
   step: number
   value: number
   disabled: boolean
   max?: number
-}
-
-const marks = {
-  0: '0%',
-  25: '25%',
-  50: '50%',
-  75: '75%',
-  100: '100%',
+  maxButtonTransition?: boolean
 }
 
 const AmountSlider: FunctionComponent<SliderProps> = ({
@@ -77,22 +113,79 @@ const AmountSlider: FunctionComponent<SliderProps> = ({
   value,
   disabled,
   max,
+  maxButtonTransition,
 }) => {
-  const [enableTransition, setEnableTransition] = useState(true)
+  const [enableTransition, setEnableTransition] = useState(false)
+
+  useEffect(() => {
+    if (maxButtonTransition) {
+      setEnableTransition(true)
+    }
+  }, [maxButtonTransition])
+
+  useEffect(() => {
+    if (enableTransition) {
+      const transitionTimer = setTimeout(() => {
+        setEnableTransition(false)
+      }, 500)
+      return () => clearTimeout(transitionTimer)
+    }
+  }, [enableTransition])
+
+  const handleSliderButtonClick = (value) => {
+    onChange(value)
+    setEnableTransition(true)
+  }
 
   return (
-    <StyledSlider
-      min={0}
-      max={max}
-      value={value || 0}
-      onChange={onChange}
-      step={step}
-      marks={marks}
-      enableTransition={enableTransition}
-      onBeforeChange={() => setEnableTransition(false)}
-      onAfterChange={() => setEnableTransition(true)}
-      disabled={disabled}
-    />
+    <div className="relative">
+      <StyledSlider
+        min={0}
+        max={max}
+        value={value || 0}
+        onChange={onChange}
+        step={step}
+        enableTransition={enableTransition}
+        disabled={disabled}
+      />
+      <StyledSliderButtonWrapper>
+        <StyledSliderButton
+          onClick={() => handleSliderButtonClick(0)}
+          styleValue={0}
+          sliderValue={value}
+        >
+          0%
+        </StyledSliderButton>
+        <StyledSliderButton
+          onClick={() => handleSliderButtonClick(25)}
+          styleValue={25}
+          sliderValue={value}
+        >
+          25%
+        </StyledSliderButton>
+        <StyledSliderButton
+          onClick={() => handleSliderButtonClick(50)}
+          styleValue={50}
+          sliderValue={value}
+        >
+          50%
+        </StyledSliderButton>
+        <StyledSliderButton
+          onClick={() => handleSliderButtonClick(75)}
+          styleValue={75}
+          sliderValue={value}
+        >
+          75%
+        </StyledSliderButton>
+        <StyledSliderButton
+          onClick={() => handleSliderButtonClick(100)}
+          styleValue={100}
+          sliderValue={value}
+        >
+          100%
+        </StyledSliderButton>
+      </StyledSliderButtonWrapper>
+    </div>
   )
 }