diff options
| -rw-r--r-- | packages/website/ts/@next/pages/instant/config_generator.tsx | 32 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/instant/select.tsx | 15 |
2 files changed, 29 insertions, 18 deletions
diff --git a/packages/website/ts/@next/pages/instant/config_generator.tsx b/packages/website/ts/@next/pages/instant/config_generator.tsx index 4f837d7fa..a1263da58 100644 --- a/packages/website/ts/@next/pages/instant/config_generator.tsx +++ b/packages/website/ts/@next/pages/instant/config_generator.tsx @@ -64,7 +64,13 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi return ( <Container minWidth="350px"> <ConfigGeneratorSection title="Liquidity Source"> - <Select id="" value={value.orderSource} items={this._generateItems()} onChange={this._handleSRASelection.bind(this)} /> + <Select + includeEmpty={false} + id="" + value={value.orderSource} + items={this._generateItems()} + onChange={this._handleSRASelection.bind(this)} + /> </ConfigGeneratorSection> <ConfigGeneratorSection {...this._getTokenSelectorProps()}> {this._renderTokenMultiSelectOrSpinner()} @@ -257,7 +263,9 @@ export class ConfigGenerator extends React.Component<ConfigGeneratorProps, Confi <Container marginRight="10px"> <CheckMark isChecked={isSelected} color={colors.brandLight} /> </Container> - <CheckboxText isSelected={isSelected}>{metaData.symbol.toUpperCase()} — {metaData.name}</CheckboxText> + <CheckboxText isSelected={isSelected}> + {metaData.symbol.toUpperCase()} — {metaData.name} + </CheckboxText> </Container> ), onClick: this._handleTokenClick.bind(this, assetData), @@ -287,18 +295,9 @@ export const ConfigGeneratorSection: React.StatelessComponent<ConfigGeneratorSec <Container marginBottom="10px" className="flex justify-between items-center"> <Heading size="small" marginBottom="0" isFlex={true}> <span>{title}</span> - {isOptional && ( - <OptionalText> - {' '} - Optional - </OptionalText> - )} + {isOptional && <OptionalText> Optional</OptionalText>} </Heading> - {actionText && ( - <OptionalAction onClick={onActionTextClick}> - {actionText} - </OptionalAction> - )} + {actionText && <OptionalAction onClick={onActionTextClick}>{actionText}</OptionalAction>} </Container> {children} </Container> @@ -319,10 +318,13 @@ interface CheckboxTextProps { isSelected?: boolean; } -const CheckboxText = styled.span<CheckboxTextProps>` +const CheckboxText = + styled.span < + CheckboxTextProps > + ` font-size: 14px; line-height: 18px; - color: ${props => props.isSelected ? colors.brandDark : '#666666'} + color: ${props => (props.isSelected ? colors.brandDark : '#666666')} `; const OptionalAction = styled(OptionalText)` diff --git a/packages/website/ts/@next/pages/instant/select.tsx b/packages/website/ts/@next/pages/instant/select.tsx index 1e428c9a1..f5b5e60c8 100644 --- a/packages/website/ts/@next/pages/instant/select.tsx +++ b/packages/website/ts/@next/pages/instant/select.tsx @@ -12,14 +12,22 @@ interface SelectProps { id: string; items: SelectItemConfig[]; emptyText?: string; - onChange?: () => void; + onChange?: (ev: React.ChangeEvent<HTMLSelectElement>) => void; + includeEmpty: boolean; } -export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, emptyText, onChange }) => { +export const Select: React.FunctionComponent<SelectProps> = ({ + value, + id, + items, + includeEmpty, + emptyText, + onChange, +}) => { return ( <Container> <StyledSelect id={id} onChange={onChange}> - <option value="">{emptyText}</option> + {includeEmpty && <option value="">{emptyText}</option>} {items.map((item, index) => ( <option key={`${id}-item-${index}`} @@ -40,6 +48,7 @@ export const Select: React.FunctionComponent<SelectProps> = ({ value, id, items, Select.defaultProps = { emptyText: 'Select...', + includeEmpty: true, }; const Container = styled.div` |