Style the WordDisplay component properly!

src/components/display/WordDisplay.jsx

@@ -2,6 +2,8 @@ import Inferno from 'inferno';
 import Component from 'inferno-component';
 import marked from 'marked';
 
+import './WordDisplay.scss';
+
 import idManager from '../../managers/IDManager';
 import { Word } from '../../managers/Word';
 
@@ -14,6 +16,14 @@ export class WordDisplay extends Component {
     this.state = {
       isEditing: false,
     }
+
+    this.wordDetailsHTML = marked(props.word.details);
+  }
+
+  componentWillUpdate (nextProps, nextState) {
+    if (this.props.word.details !== nextProps.word.details) {
+      this.wordDetailsHTML = marked(nextProps.word.details);
+    }
   }
 
   render () {
@@ -21,42 +31,48 @@ export class WordDisplay extends Component {
       <div className='card'>
 
         <header className='card-header'>
-          <h3 className='card-header-title'>
+          <div className='word-card-header-title'>
+            <span className='word-name'>
               { this.props.word.name }
-          </h3>
+            </span>
+            {
+              (this.props.word.pronunciation || this.props.word.partOfSpeech)
+              && (
+                <span className='word-classification'>
+                  {
+                    (this.props.word.pronunciation)
+                    && (
+                      <span className='word-pronunciation'>
+                      { this.props.word.pronunciation }
+                      </span>
+                    )
+                  }
+
+                  {
+                    (this.props.word.partOfSpeech)
+                    && (
+                      <span className='word-part-of-speech'>
+                      { this.props.word.partOfSpeech }
+                      </span>
+                    )
+                  }
+                </span>
+              )
+            }
+          </div>
+          <a className='card-header-icon' aria-label='more options'>
+            <span className='icon'>
+              <i className='fa fa-angle-down' aria-hidden='true'></i>
+            </span>
+          </a>
         </header>
 
         <section className='card-content'>
           <div className='content'>
-            {
-              (this.props.word.pronunciation || this.props.word.partOfSpeech)
-              && (
-                <p>
-                  {
-                    (this.props.word.partOfSpeech)
-                    ? (<small>{ this.props.word.partOfSpeech }</small>)
-                    : ''
-                  }
-                
-                  {
-                    (this.props.word.partOfSpeech && this.props.word.pronunciation)
-                    ? ' | '
-                    : ''
-                  }
-                
-                  {
-                    (this.props.word.pronunciation)
-                    ? (<small>{ this.props.word.pronunciation }</small>)
-                    : ''
-                  }
-                </p>
-              )
-            }
-
             {
               (this.props.word.definition)
               && (
-                <p>
+                <p className='word-definition'>
                   { this.props.word.definition }
                 </p>
               )
@@ -65,9 +81,8 @@ export class WordDisplay extends Component {
             {
               (this.props.word.details)
               && (
-                <p>
+                <p className='word-details'
-                  { this.props.word.details }
+                  dangerouslySetInnerHTML={{__html: this.wordDetailsHTML}} />
-                </p>
               )
             }
           </div>

src/components/display/WordDisplay.scss

@@ -0,0 +1,39 @@
+@import '../../node_modules/bulma/sass/utilities/initial-variables';
+@import '../../node_modules/bulma/sass/utilities/derived-variables';
+@import '../../node_modules/bulma/sass/components/card';
+
+.word-card-header-title {
+  @extend .card-header-title;
+
+  align-items: baseline;
+
+  .word-name {
+    font-size: 1.2em;
+  }
+}
+
+.word-card-header-title,
+.word-classification {
+  span:not(:last-child) {
+    margin-right: 10px;
+  }
+}
+
+.word-classification {
+  font-size: 0.75em;
+
+  .word-pronunciation {
+    font-weight: normal !important;
+  }
+  .word-part-of-speech {
+    font-style: italic;
+  }
+}
+
+.word-definition {
+  font-style: italic;
+}
+
+.word-details {
+  padding-left: 15px;
+}