From 573c1249edf74aa6cc50af1f92fd38832149d3eb Mon Sep 17 00:00:00 2001
From: Laurence Maultsby <laurence.maultsby@riftio.com>
Date: Tue, 18 Oct 2016 21:02:50 -0400
Subject: [PATCH] RIFT-14850: Volume styling update

Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
---
 .../launchpad/src/recordViewer/recordCard.jsx | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
index a57770629..737ef701d 100644
--- a/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
+++ b/skyquake/plugins/launchpad/src/recordViewer/recordCard.jsx
@@ -134,12 +134,32 @@ export default class RecordCard extends React.Component {
             notice = <li className='notice'>* If a separate browser window does not open, please check if the popup was blocked and allow it.</li>
             if(vdur.hasOwnProperty('volumes') && (vdur.volumes.length > 0)) {
               displayVolumesTab = true;
-              vdur.volumes.map((volume, vi) => {
-                let html = Prism.highlight(JSON.stringify(volume), Prism.languages.javascript, 'javascript');
+              vdur.volumer.map((volume, vi) => {
+                // let html = Prism.highlight(JSON.stringify(volume), Prism.languages.javascript, 'javascript');
+                // volumesHTML.push(
+                //     <pre className="language-js" key={index + '-' + vi}>
+                //       <code dangerouslySetInnerHTML={{__html: html}} />
+                //     </pre>
+                let properties = [];
+                 _.forEach(volume, function(v, k) {
+                    properties.push(
+                      <div style={{display: 'flex', margin: '0.5rem 0'}} key={k + vi}>
+                        <div style={{margin: '0 1rem',
+    fontWeight: 'bold', textTransform: 'uppercase'}}>{k}</div>
+                        <div>{v}</div>
+                      </div>
+                    )
+                  })
                 volumesHTML.push(
-                    <pre className="language-js" key={index + '-' + vi}>
-                      <code dangerouslySetInnerHTML={{__html: html}} />
-                    </pre>
+                    <div key={vi}>
+                      <div className="launchpadCard_title">
+                        VOLUME
+                      </div>
+
+                      {
+                        properties
+                      }
+                    </div>
                 )
               })
             }
-- 
2.25.1