feat(send-view-additional-options): add bgColor optional prop

app/components/input.js

@@ -3,12 +3,14 @@ import React from 'react';
 
 import styled from 'styled-components';
 
+import theme from '../theme';
+
 const getDefaultStyles = t => styled[t]`
   border-radius: ${// $FlowFixMe
   props => props.theme.boxBorderRadius};
   border: none;
   background-color: ${// $FlowFixMe
-  props => props.theme.colors.inputBackground};
+  props => props.bgColor || props.theme.colors.inputBackground};
   color: ${// $FlowFixMe
   props => props.theme.colors.text};
   padding: 15px;
@@ -34,15 +36,26 @@ type Props = {
   disabled?: boolean,
   type?: string,
   step?: number,
+  bgColor?: string,
 };
 
-export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
+export const InputComponent = ({
+  inputType, onChange, bgColor, ...props
+}: Props) => {
   const inputTypes = {
     input: () => (
-      <Input onChange={evt => onChange(evt.target.value)} {...props} />
+      <Input
+        onChange={evt => onChange(evt.target.value)}
+        bgColor={bgColor}
+        {...props}
+      />
     ),
     textarea: () => (
-      <Textarea onChange={evt => onChange(evt.target.value)} {...props} />
+      <Textarea
+        onChange={evt => onChange(evt.target.value)}
+        bgColor={bgColor}
+        {...props}
+      />
     ),
   };
 
@@ -58,4 +71,5 @@ InputComponent.defaultProps = {
   rows: 4,
   disabled: false,
   type: 'text',
+  bgColor: theme.colors.inputBackground,
 };

app/components/select.js

@@ -6,13 +6,16 @@ import { TextComponent } from './text';
 import ChevronUp from '../assets/images/chevron-up.svg';
 import ChevronDown from '../assets/images/chevron-down.svg';
 
+import theme from '../theme';
+
+/* eslint-disable max-len */
 const SelectWrapper = styled.div`
   align-items: center;
   display: flex;
   flex-direction: row;
   border-radius: ${props => props.theme.boxBorderRadius};
   border: none;
-  background-color: ${props => props.theme.colors.inputBackground};
+  background-color: ${props => props.bgColor || props.theme.colors.inputBackground};
   color: ${props => props.theme.colors.text};
   width: 100%;
   outline: none;
@@ -25,6 +28,7 @@ const SelectWrapper = styled.div`
       props.placement
     }-right-radius: 0;`}
 `;
+/* eslint-enable max-len */
 
 const ValueWrapper = styled.div`
   width: 95%;
@@ -51,11 +55,8 @@ const SelectMenuButton = styled.button`
   padding: 3px 7px;
   outline: none;
   background-color: transparent;
-  border: 1px solid ${props => props.theme.colors.text};
+  border: 1px solid ${props => (props.isOpen ? props.theme.colors.primary : '#29292D')};
   border-radius: 100%;
-  box-shadow: ${props => `0px 0px 10px 0px ${
-    props.theme.colors.selectButtonShadow
-  }, 0px 0px 10px 0px ${props.theme.colors.selectButtonShadow} inset`};
 `;
 /* eslint-enable max-len */
 
@@ -73,11 +74,12 @@ const OptionsWrapper = styled.div`
   overflow-y: auto;
 `;
 
+/* eslint-disable max-len */
 const Option = styled.button`
   border: none;
   background: none;
   height: 60px;
-  background-color: ${props => props.theme.colors.inputBackground};
+  background-color: ${props => props.bgColor || props.theme.colors.inputBackground};
   cursor: pointer;
   z-index: 99;
   text-transform: capitalize;
@@ -86,6 +88,7 @@ const Option = styled.button`
     background-color: ${props => props.theme.colors.background};
   }
 `;
+/* eslint-enable max-len */
 
 type Props = {
   value: string,
@@ -93,6 +96,7 @@ type Props = {
   placeholder?: string,
   onChange: string => void,
   placement?: 'top' | 'bottom',
+  bgColor?: string,
 };
 type State = {
   isOpen: boolean,
@@ -106,6 +110,7 @@ export class SelectComponent extends PureComponent<Props, State> {
   static defaultProps = {
     placeholder: '',
     placement: 'bottom',
+    bgColor: theme.colors.inputBackground,
   };
 
   onSelect = (value: string) => {
@@ -139,7 +144,7 @@ export class SelectComponent extends PureComponent<Props, State> {
 
   render() {
     const {
-      value, options, placeholder, placement,
+      value, options, placeholder, placement, bgColor,
     } = this.props;
     const { isOpen } = this.state;
 
@@ -148,12 +153,13 @@ export class SelectComponent extends PureComponent<Props, State> {
         isOpen={isOpen}
         placement={placement}
         onClick={() => this.setState(() => ({ isOpen: !isOpen }))}
+        bgColor={bgColor}
       >
         <ValueWrapper hasValue={Boolean(value)}>
           {this.getSelectedLabel(value) || placeholder}
         </ValueWrapper>
         <SelectMenuButtonWrapper>
-          <SelectMenuButton>
+          <SelectMenuButton isOpen={isOpen}>
             <Icon src={this.getSelectIcon()} />
           </SelectMenuButton>
         </SelectMenuButtonWrapper>
@@ -167,6 +173,7 @@ export class SelectComponent extends PureComponent<Props, State> {
               <Option
                 key={label + optionValue}
                 onClick={() => this.onSelect(optionValue)}
+                bgColor={bgColor}
               >
                 <TextComponent value={label} />
               </Option>