Add parrot support to the queue message (#201)

* Add parrot support to queue message * Make parrot size match surrounding text * Fix prettier errors * Add changelog entry
illinois · Feb 8, 2019 · 7e087b5 · 7e087b5
1 parent 74048ac
commit 7e087b5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@ with the current date and the next changes should go under a **[Next]** header.
 * Make improvements to staff message experience. ([@nwalters512](https://github.com/nwalters512) in [#194](https://github.com/illinois/queue/pull/194))
 * Add markdown previews to the queue message editor. ([@shwavedefapp](https://github.com/shwavedefapp) in [#193](https://github.com/illinois/queue/pull/193))
 * Add ability to cancel editing of the queue message. ([@shwavedefapp](https://github.com/shwavedefapp) in [#197](https://github.com/illinois/queue/pull/197))
+* Add parrot support to queue messages. ([@nwalters512](https://github.com/nwalters512) in [#201](https://github.com/illinois/queue/pull/201))
 
 ## 26 January 2019
 

diff --git a/src/components/ParrotText.js b/src/components/ParrotText.js
@@ -20,7 +20,7 @@ const ParrotText = ({ text }) => {
         src={parrots[c]}
         alt={c}
         key={`${c}_${i + 1}`}
-        style={{ height: '1rem', marginTop: '-0.2rem' }}
+        style={{ height: '1em', marginTop: '-0.2em' }}
       />
     )
   })

diff --git a/src/components/QueueMessage.js b/src/components/QueueMessage.js
@@ -17,6 +17,7 @@ import {
   TabPane,
 } from 'reactstrap'
 import ReactMarkdown from 'react-markdown'
+import ParrotText from './ParrotText'
 
 class QueueMessage extends React.Component {
   constructor(props) {
@@ -105,6 +106,11 @@ class QueueMessage extends React.Component {
       }
     }
 
+    // We use a custom renderer for text so that we can support parrots!
+    const renderers = {
+      text: props => <ParrotText text={props.children} />,
+    }
+
     let content
     let button
     if (editing) {
@@ -162,6 +168,7 @@ class QueueMessage extends React.Component {
                   source={
                     editedMessage === '' ? 'Nothing to preview' : editedMessage
                   }
+                  renderers={renderers}
                 />
               </TabPane>
             </TabContent>
@@ -179,7 +186,7 @@ class QueueMessage extends React.Component {
         </>
       )
     } else {
-      content = <ReactMarkdown source={message} />
+      content = <ReactMarkdown source={message} renderers={renderers} />
       button = (
         <Button color="primary" onClick={this.onStartEdit}>
           Edit