Style improvements

package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-speech-recognition-status",
   "description": "React component useful to display the speech recognition status",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "license": "MIT",
   "scripts": {
     "lint": "eslint ./src ./tests",
-    "build": "webpack --progress",
+    "build": "webpack -p --progress",
     "test": "NODE_ENV=testing jest --coverage --ci --runInBand && cat ./coverage/lcov.info | coveralls",
     "test:dev": "NODE_ENV=testing jest --watch",
     "profile": "webpack --json | webpack-bundle-size-analyzer"
@@ -24,6 +24,7 @@
     "css-loader": "^0.28.10",
     "eslint": "1.7.x",
     "eslint-plugin-babel": "2.x.x",
+    "eslint-plugin-react": "^7.7.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^22.4.2",
     "node-sass": "^4.7.2",

src/index.js

@@ -58,10 +58,13 @@ export default class SpeechRecognitionStatus extends React.Component {
   }
 
   renderCompactMode = () => {
+    const classes = classnames('status-details', {
+      'without-context': !this.props.contextName
+    });
     return (
       <div className='speech-recognition-status compact'>
         {this.speechRecognitionIcon()}
-        <span className='status-details'>
+        <span className={classes}>
           {this.speechRecognitionContext()}
           {(this.props.contextName || this.props.text) && this.speechRecognitionText()}
         </span>

src/style.scss

@@ -110,6 +110,7 @@
 
       .context {
         font-weight: 600;
+        margin-right: 0.5em;
         border-right: 1px solid #ccc;
         background: #eee;
         display: inline-block;
@@ -119,22 +120,22 @@
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
         text-transform: capitalize;
-        margin-right: -1em;
-        span {
-          padding-left: 1em;
-        }
+        padding-left: 1.5em;
       }
 
-      .current-command {
+      .current-speech {
         display: inline-block;
         color: #aaa;
-        padding: 0.5em;
-        padding-left: 1.5em;
+        padding: 0.5em 0.5em 0.5em 0;
 
         &.final {
           color: #111;
         }
       }
+
+      &.without-context .current-speech {
+        padding-left: 1.5em;
+      }
     }
   }
 }

tests/__snapshots__/index.test.js.snap

@@ -39,7 +39,7 @@ exports[`speech recognition status component should render compact view 1`] = `
     />
   </span>
   <span
-    className="status-details"
+    className="status-details without-context"
   >
     <span
       className="current-speech"