Browse Source

Re-style the dropdown's selected item

Sergiu Miclea 8 years ago
parent
commit
49092ee86f
1 changed files with 4 additions and 3 deletions
  1. 4 3
      src/components/molecules/Dropdown/index.jsx

+ 4 - 3
src/components/molecules/Dropdown/index.jsx

@@ -16,7 +16,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 
 import React from 'react'
 import React from 'react'
 import { observer } from 'mobx-react'
 import { observer } from 'mobx-react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import ReactDOM from 'react-dom'
 import ReactDOM from 'react-dom'
 
 
 import DropdownButton from '../../atoms/DropdownButton'
 import DropdownButton from '../../atoms/DropdownButton'
@@ -70,9 +70,10 @@ const Tip = styled.div`
 `
 `
 const ListItem = styled.div`
 const ListItem = styled.div`
   position: relative;
   position: relative;
-  color: ${props => props.dim ? Palette.grayscale[3] : Palette.grayscale[4]};
+  color: ${props => props.selected ? 'white' : props.dim ? Palette.grayscale[3] : Palette.grayscale[4]};
+  ${props => props.selected ? css`background: ${Palette.primary};` : ''}
+  ${props => props.selected ? css`font-weight: ${StyleProps.fontWeights.medium};` : ''}
   padding: 8px 16px;
   padding: 8px 16px;
-  ${props => props.selected ? `font-weight: ${StyleProps.fontWeights.medium};` : ''}
   transition: all ${StyleProps.animations.swift};
   transition: all ${StyleProps.animations.swift};
 
 
   &:first-child {
   &:first-child {