Style Select

src/components/Select/index.js

@@ -4,15 +4,11 @@ import Select from 'react-select';
 import AsyncSelect from 'react-select/lib/Async';
 import colors from 'config/colors';
 
-const styles = {
+const styles = isSearchable => ({
     singleValue: base => ({
         ...base,
         color: colors.TEXT_SECONDARY,
     }),
-    container: base => ({
-        ...base,
-        width: '180px',
-    }),
     control: (base, { isDisabled }) => ({
         ...base,
         borderRadius: '2px',
@@ -20,7 +16,7 @@ const styles = {
         boxShadow: 'none',
         background: isDisabled ? colors.LANDING : colors.WHITE,
         '&:hover': {
-            cursor: 'pointer',
+            cursor: isSearchable ? 'text' : 'pointer',
             borderColor: colors.DIVIDER,
         },
     }),
@@ -29,6 +25,7 @@ const styles = {
     }),
     dropdownIndicator: base => ({
         ...base,
+        display: isSearchable ? 'none' : 'block',
         color: colors.TEXT_SECONDARY,
         path: '',
         '&:hover': {
@@ -61,21 +58,23 @@ const styles = {
             background: colors.LANDING,
         },
     }),
-};
+});
 
 const SelectWrapper = props => (
     <div>
-        {props.isAsync && <AsyncSelect styles={styles} {...props} /> }
-        {!props.isAsync && <Select styles={styles} {...props} />}
+        {props.isAsync && <AsyncSelect styles={styles(props.isSearchable)} {...props} /> }
+        {!props.isAsync && <Select styles={styles(props.isSearchable)} {...props} />}
     </div>
 );
 
 SelectWrapper.propTypes = {
     isAsync: PropTypes.bool,
+    isSearchable: PropTypes.bool,
 };
 
 SelectWrapper.defaultProps = {
     isAsync: false,
+    isSearchable: false,
 };
 
 export default SelectWrapper;

src/views/Landing/components/InstallBridge/index.js

@@ -64,6 +64,7 @@ const LearnMoreText = styled.span`
 
 const SelectWrapper = styled(Select)`
     margin-right: 10px;
+    width: 180px;
 `;
 
 const DownloadBridgeWrapper = styled.div`