diff --git a/css/emoji-picker.css b/css/emoji-picker.css
index 5ac57c9..39a18b4 100644
--- a/css/emoji-picker.css
+++ b/css/emoji-picker.css
@@ -41,14 +41,11 @@
overflow: hidden;
transition: color .1s ease-out;
}
-.emoji-picker-anchor:hover {
+.emoji-picker-anchor:hover,
+.emoji-picker-anchor-selected {
color: #464646;
}
-.emoji-picker-anchor-selected,
-.emoji-picker-anchor-selected:hover {
- color: #ae65c5;
-}
.emoji-picker-anchor-selected .emoji-picker-anchor-bar {
bottom: 0;
}
@@ -57,7 +54,7 @@
position: absolute;
bottom: -3px; left: 0;
width: 100%; height: 3px;
- background-color: #ae65c5;
+ background-color: #464646;
}
.emoji-picker-anchors i {
diff --git a/src/components/anchors.js b/src/components/anchors.js
index 118d937..5f51203 100644
--- a/src/components/anchors.js
+++ b/src/components/anchors.js
@@ -18,12 +18,13 @@ export default class Anchors extends React.Component {
}
render() {
- var { categories, onAnchorClick } = this.props,
+ var { categories, onAnchorClick, color } = this.props,
{ selected } = this.state
return
{categories.map((category, i) => {
- var { name, anchor } = category
+ var { name, anchor } = category,
+ isSelected = name == selected
if (anchor) {
return null
@@ -34,10 +35,11 @@ export default class Anchors extends React.Component {
key={name}
title={name}
onClick={() => onAnchorClick(category, i)}
- className={`emoji-picker-anchor ${name == selected ? 'emoji-picker-anchor-selected' : ''}`}
+ className={`emoji-picker-anchor ${isSelected ? 'emoji-picker-anchor-selected' : ''}`}
+ style={{ color: isSelected ? color : null }}
>
-
+
)
})}
diff --git a/src/components/picker.js b/src/components/picker.js
index eb5514c..9d4cc52 100644
--- a/src/components/picker.js
+++ b/src/components/picker.js
@@ -216,7 +216,7 @@ export default class Picker extends React.Component {
}
render() {
- var { perLine, emojiSize, sheetURL, style, title, emoji } = this.props,
+ var { perLine, emojiSize, sheetURL, style, title, emoji, color } = this.props,
{ skin } = this.state,
width = (perLine * (emojiSize + 12)) + 12 + 2
@@ -224,6 +224,7 @@ export default class Picker extends React.Component {
@@ -283,6 +284,7 @@ Picker.propTypes = {
style: React.PropTypes.object,
title: React.PropTypes.string,
emoji: React.PropTypes.string,
+ color: React.PropTypes.string,
sheetURL: React.PropTypes.string.isRequired,
}
@@ -294,4 +296,5 @@ Picker.defaultProps = {
skin: 1,
title: 'EmojiPicker',
emoji: 'tophat',
+ color: '#ae65c5',
}