diff --git a/app/components/InputSelect.js b/app/components/InputSelect.js index 210df9f9c..5198c800b 100644 --- a/app/components/InputSelect.js +++ b/app/components/InputSelect.js @@ -28,6 +28,7 @@ export type Props = { disabled?: boolean, className?: string, labelHidden?: boolean, + icon?: React.Node, options: Option[], onChange: (string) => Promise | void, }; @@ -48,6 +49,7 @@ const InputSelect = (props: Props) => { onChange, disabled, nude, + icon, } = props; const select = useSelectState({ @@ -134,10 +136,12 @@ const InputSelect = (props: Props) => { disclosure className={className} nude={nude} + icon={icon} {...props} > - {getOptionFromValue(options, select.selectedValue).label || - `Select a ${ariaLabel}`} + {getOptionFromValue(options, select.selectedValue).label || ( + Select a {ariaLabel.toLowerCase()} + )} )} @@ -202,7 +206,11 @@ const InputSelect = (props: Props) => { ); }; -const Spacer = styled.svg` +const Placeholder = styled.span` + color: ${(props) => props.theme.placeholder}; +`; + +const Spacer = styled.div` width: 24px; height: 24px; flex-shrink: 0; @@ -226,7 +234,11 @@ const StyledButton = styled(Button)` line-height: 28px; padding-left: 16px; padding-right: 8px; - justify-content: space-between; + } + + svg { + justify-self: flex-end; + margin-left: auto; } `;