More emoji options

src/components/EmojiPicker/index.tsx

@@ -16,9 +16,15 @@ export class EmojiPicker extends Component<IEmojiPickerProps, any> {
         return (
             <Picker
                 custom={this.retrieveFromLocal()}
-                emoji="point_up"
-                title="Pick an emoji"
+                emoji=""
+                title=""
                 onClick={this.props.onGetEmoji}
+                style={{
+                    borderColor: 'transparent'
+                }}
+                perLine={10}
+                emojiSize={20}
+                set={"google"}
             />
         )
     }

src/pages/Compose.styles.tsx

@@ -26,5 +26,14 @@ export const styles = (theme: Theme) => createStyles({
     composeAttachmentAreaGridList: {
         height: 250,
         width: '100%'
+    },
+    composeEmoji: {
+        marginTop: theme.spacing.unit * 8
+    },
+    desktopOnly: {
+        display: "none",
+        [theme.breakpoints.up('sm')]: {
+            display: "block"
+        }
     }
 });

src/pages/Compose.tsx

@@ -55,22 +55,25 @@ class Composer extends Component<any, IComposerState> {
 
     componentDidMount() {
         let state = this.getComposerParams(this.props);
+        let text = state.acct? `@${state.acct}: `: '';
         this.setState({
             reply: state.reply,
             acct: state.acct,
             visibility: state.visibility,
-            text: state.acct? `@${state.acct}: `: ''
+            text,
+            remainingChars: 500 - text.length
         })
     }
 
     componentWillReceiveProps(props: any) {
         let state = this.getComposerParams(props);
+        let text = state.acct? `@${state.acct}: `: '';
         this.setState({
             reply: state.reply,
             acct: state.acct,
             visibility: state.visibility,
-            text: state.acct? `@${state.acct}: `: '',
-            remainingChars: 500 - (state.acct? `@${state.acct}: `: '').length
+            text,
+            remainingChars: 500 - text.length
         })
     }
 
@@ -304,7 +307,7 @@ class Composer extends Component<any, IComposerState> {
                         </IconButton>
                     </Tooltip>
                     <Tooltip title="Insert emoji">
-                        <IconButton id="compose-emoji" onClick={() => this.toggleEmojis()}>
+                        <IconButton id="compose-emoji" onClick={() => this.toggleEmojis()} className={classes.desktopOnly}>
                             <TagFacesIcon/>
                         </IconButton>
                     </Tooltip>
@@ -312,6 +315,7 @@ class Composer extends Component<any, IComposerState> {
                         open={this.state.showEmojis}
                         anchorEl={document.getElementById('compose-emoji')}
                         onClose={() => this.toggleEmojis()}
+                        className={classes.composeEmoji}
                     >
                         <EmojiPicker onGetEmoji={(emoji: any) => this.insertEmoji(emoji)}/>
                     </Menu>