fix: InputSelect disabled state

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 &&

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
           ))}
-        <Select {...select} aria-label={ariaLabel} ref={buttonRef}>
+        <Select
+          {...select}
+          disabled={disabled}
+          aria-label={ariaLabel}
+          ref={buttonRef}
+        >
           {(props) => (
             <StyledButton
               neutral
@@ -135,6 +143,7 @@ const InputSelect = (props: 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`