From aab07e848fd7c646e9e33b613e49b2aa0b0a8a79 Mon Sep 17 00:00:00 2001
From: Mikael Finstad <finstaden@gmail.com>
Date: Sun, 9 Sep 2018 20:04:20 +0200
Subject: [PATCH] make info boxes different from buttons

---
 src/renderer.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/renderer.jsx b/src/renderer.jsx
index 3c253cde..6358e93a 100644
--- a/src/renderer.jsx
+++ b/src/renderer.jsx
@@ -408,6 +408,7 @@ class App extends React.Component {
 
   render() {
     const jumpCutButtonStyle = { position: 'absolute', color: 'black', bottom: 0, top: 0, padding: '2px 8px' };
+    const infoSpanStyle = { background: 'rgba(255, 255, 255, 0.4)', padding: '.1em .4em', margin: '0 3px', fontSize: 13, borderRadius: '.3em' };
 
     return (<div>
       {!this.state.filePath && <div id="drag-drop-field">DROP VIDEO</div>}
@@ -536,13 +537,13 @@ class App extends React.Component {
       </div>
 
       <div className="left-menu">
-        <button title="Format of current file">
+        <span style={infoSpanStyle} title="Format of current file">
           {this.state.fileFormat || 'FMT'}
-        </button>
+        </span>
 
-        <button className="playback-rate" title="Playback rate">
+        <span style={infoSpanStyle} title="Playback rate">
           {_.round(this.state.playbackRate, 1) || 1}x
-        </button>
+        </span>
       </div>
 
       <div className="right-menu">