Fixed some styling

src/eventButton.js

@@ -103,15 +103,15 @@ const EventButton = (obj) => {
       eventSpecificInfo =
         <div className="rowAlignLeft">
           <p> staked {(transactionAmount / 1000000000000000000).toFixed(2)} LPT to </p>
-          <button className="selectOrch" onClick={() => {obj.setOrchFunction(transactionTo)}} >{transactionTo}</button>
+          <button className="selectOrch" onClick={() => { obj.setOrchFunction(transactionTo) }} >{transactionTo}</button>
         </div>
     } else {
       eventSpecificInfo =
         <div className="rowAlignLeft">
           <p> moved {(transactionAmount / 1000000000000000000).toFixed(2)} LPT stake: </p>
-          <button className="selectOrch" onClick={() => {obj.setOrchFunction(transactionFrom)}} >{transactionFrom}</button>
+          <button className="selectOrch" onClick={() => { obj.setOrchFunction(transactionFrom) }} >{transactionFrom}</button>
           <p> to </p>
-          <button className="selectOrch" onClick={() => {obj.setOrchFunction(transactionTo)}} >{transactionTo}</button>
+          <button className="selectOrch" onClick={() => { obj.setOrchFunction(transactionTo) }} >{transactionTo}</button>
         </div>
     }
   } else if (transactionName === "Withdraw") {
@@ -145,9 +145,11 @@ const EventButton = (obj) => {
   return (
     <div className="row" style={{ backgroundColor: thisColour, borderRadius: "1.2em" }}>
       <div style={{ flexDirection: 'row', display: "flex" }}>
-        <img alt="" src="livepeer.png" width="30" height="30" />
+        <a href={"https://explorer.livepeer.org/accounts/" + transactionCaller}>
+          <img alt="" src="livepeer.png" width="30" height="30" />
+        </a>
         <div className="row">
-          <button className="selectOrch" onClick={() => {obj.setOrchFunction(transactionCaller)}} >{transactionCaller}</button>
+          <button className="selectOrch" onClick={() => { obj.setOrchFunction(transactionCaller) }} >{transactionCaller}</button>
         </div>
       </div>
       {eventSpecificInfo}

src/grafana.js

@@ -81,7 +81,9 @@ class Grafana extends React.Component {
                   </div>
                 </div>
                 <div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
-                  <Orchestrator thisOrchestrator={this.props.livepeer.thisOrchestrator} />
+                  <div className="row" style={{paddingLeft: "1em", paddingRight: "1em"}}>
+                    <Orchestrator thisOrchestrator={this.props.livepeer.thisOrchestrator} />
+                  </div>
                   <div className="flexContainer" style={{ justifyContent: "center" }}>
                     <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572056" height="200" frameBorder="0"></iframe>
                   </div>

src/livepeer.js

@@ -135,10 +135,10 @@ class Livepeer extends React.Component {
           }}>
             <img alt="" src="livepeer.png" width="100em" height="100em" />
           </button>
-          <div className="row" style={{alignItems: 'stretch', height:'100%'}}>
+          <div className="row" style={{alignItems: 'stretch', height:'100%', flex: 2}}>
             <Orchestrator thisOrchestrator={thisOrchObj} />
           </div>
-          <div className="row metaSidebar" style={{ padding: 0 }}>
+          <div className="row metaSidebar" style={{ padding: 0, flex: 1 }}>
             <div className="stroke" style={{ margin: 0, padding: 0 }}>
               <h3>Smart contract prices</h3>
               <div className="row">

src/orchestratorViewer.js

@@ -39,28 +39,38 @@ const Orchestrator = (obj) => {
 
     return (
       <div className="hostInfo">
-        <div className="strokeSmollLeft">
-          <div style={{ flexDirection: 'row', display: "flex" }}>
+        <div className="strokeSmollLeft" style={{ flex: 1, display: "flex" }}>
+          <div style={{ flexDirection: 'row', flex: 1, display: "flex" }}>
             <a href={thisUrl}>
               <img alt="" src="livepeer.png" width="30" height="30" />
-              <h3>Orchestrator Info</h3>
+              <h3 style={{ padding: 0, margin: 0 }}>Orchestrator Info</h3>
               {thisID}
             </a>
           </div>
-          <p>Earned fees {totalVolumeETH} Eth (${totalVolumeUSD})</p>
-          <p>Reward Cut {rewardCut}%</p>
-          <p>Fee Cut {feeCut}%</p>
-          <p>Total Stake {totalStake} LPT</p>
-          <p>Self stake {selfStake} LPT ({selfStakeRatio}%)</p>
+          <div className="rowAlignLeft">
+            <p>Earned fees {totalVolumeETH} Eth (${totalVolumeUSD})</p>
+          </div>
+          <div className="rowAlignLeft">
+            <p>Reward Cut {rewardCut}%</p>
+          </div>
+          <div className="rowAlignLeft">
+            <p>Fee Cut {feeCut}%</p>
+          </div>
+          <div className="rowAlignLeft">
+            <p>Total Stake {totalStake} LPT</p>
+          </div>
+          <div className="rowAlignLeft">
+            <p>Self stake {selfStake} LPT ({selfStakeRatio}%)</p>
+          </div>
         </div>
-        <div className="strokeSmollLeft">
+        <div className="strokeSmollLeft" style={{ alignItems: 'stretch', flex: 2, marginLeft: '1em', borderLeft: '3px solid rgba(15,15,15,0.05)' }}>
           <div className="content-wrapper">
             <ScrollContainer className="overflow-container" hideScrollbars={false}>
               <div className="overflow-content" style={{ cursor: 'grab', height: '300px' }}>
                 {
                   delegators.map((delObj, idx) => {
                     return (
-                      <div className="rowAlignLeft" key={"delegator"+idx}>
+                      <div className="rowAlignLeft" key={"delegator" + idx} style={{ marginLeft: '1em', borderBottom: '2px solid rgba(15,15,15,0.05)' }}>
                         <a href={"https://explorer.livepeer.org/accounts/" + delObj.id}>
                           <img alt="" src="livepeer.png" width="30" height="30" />{delObj.id.substr(0, 6) + ".."}</a>
                         <div className="strokeSmollLeft">
@@ -78,7 +88,7 @@ const Orchestrator = (obj) => {
     )
   }
   return (
-    <div className="hostInfo" style={{ height: '100%', width: '100%', display: 'flex' }}>
+    <div className="hostInfo">
       <div className="rowAlignLeft">
         <img alt="" src="livepeer.png" width="30" height="30" />
         <h3>Orchestrator Info</h3>

src/style.css

@@ -199,12 +199,14 @@ svg {
   user-select: text;
   font-size: small;
   color: rgba(15, 15, 15, 0.8750);
-  background-color: rgba(169, 177, 214, 0.8);
+  background-color: rgba(148, 154, 184, 0.8);
   -webkit-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2);
   -moz-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2);
   box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2);
   display: flex;
   flex-direction: row;
+  height: 100%;
+  width: 100%;
 }
 
 .flexContainer {
@@ -248,9 +250,9 @@ svg {
   margin: 0;
   display: flex;
   text-align: center;
-  justify-content: center;
-  align-items: center;
-  justify-content: middle;
+  justify-content: flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
   vertical-align: middle;
   flex-direction: column;
   z-index: 2;