Added icon to team dropdown

website/src/ui/DropdownList.js

@@ -87,8 +87,8 @@ export class DropdownList extends Component {
             <img src={open ? upArrowImage : downArrowImage}
               style={{
                 verticalAlign: 'middle',
-                width: sizeInfo.dropDownIconSize,
-                height: sizeInfo.dropDownIconSize,
+                width: sizeInfo.dropdownIconSize,
+                height: sizeInfo.dropdownIconSize,
                 margin: sizeInfo.dropdownIconMargin,
               }}
               onClick={this.handleClick} />
@@ -114,8 +114,8 @@ DropdownList.Item = Radium(class ListItem extends Component {
     return (
       <div
         style={[
-          { width: '100%', background: active ? colorInfo.listBackgroundActive : 'transparent' },
-          hover && { ':hover': { background: colorInfo.listBackgroundHover } },
+          { width: '100%', background: active ? colorInfo.dropdownBackgroundActive : 'transparent' },
+          hover && { ':hover': { background: colorInfo.dropdownBackgroundHover } },
         ]}
         onClick={onClick}>
         {children}
@@ -124,12 +124,16 @@ DropdownList.Item = Radium(class ListItem extends Component {
   }
 })
 
-DropdownList.Icon = Radium(class ListIcon extends Component {
+DropdownList.Icon = Radium(class DropdownIcon extends Component {
   static propTypes = {
     name: PropTypes.string,
     size: PropTypes.number,
   }
 
+  static defaultProps = {
+    size: sizeInfo.dropdownIconSize
+  }
+
   render() {
     const { size, name } = this.props
     let source = Icon.svgs[name] || Icon.svgs['placeholder']
@@ -139,13 +143,13 @@ DropdownList.Icon = Radium(class ListIcon extends Component {
         verticalAlign: 'middle',
         width: size,
         height: size,
-        margin: sizeInfo.listIconMargin,
+        margin: sizeInfo.dropdownIconMargin,
       }} />
     )
   }
 })
 
-DropdownList.Text = Radium(class ListText extends Component {
+DropdownList.Text = Radium(class DropdownText extends Component {
   static propTypes = {
     children: PropTypes.node,
   }

website/src/ui/style.js

@@ -43,6 +43,9 @@ Object.assign(colorInfo, {
   listBorder: colorInfo.headerBorder,
 
   dropdownBorder: colorInfo.headerBorder,
+  dropdownBackground: colorInfo.listBackground,
+  dropdownBackgroundActive: colorInfo.listBackgroundActive,
+  dropdownBackgroundHover: colorInfo.headerButtonBackgroundHover,
 })
 
 const sizeInfo = {
@@ -85,10 +88,11 @@ const sizeInfo = {
   listIcon: 25,
   listIconMargin: '5px 10px 5px 10px',
 
-  dropDownIconSize: 20,
-  dropdownIconMargin: 5,
+  dropdownIconSize: 20,
   dropdownItems: 6,
   dropdownBorderWidth: 1,
+  dropdownIcon: 25,
+  dropdownIconMargin: '5px 10px 5px 10px',
 
   modalWidth: 450,
   modalShadowWidth: 25,