Slight Event Button style update

README.md

@@ -21,8 +21,8 @@ Orchestrators can be inspected by clicking on their address, showing all of thei
   - Returns a JSON object of top 200 coint data by coin symbol
 - https://nframe.nl/api/livepeer/getEvents
   - Returns a JSON object of the raw data of all events on the Livepeer BondingManager contract
-- https://nframe.nl/api/livepeer/getEvents
-  - Returns a JSON object of the raw data of all events on the Livepeer BondingManager contract
+- https://nframe.nl/api/livepeer/getTickets
+  - Returns a JSON object of the raw data of all events on the Livepeer TicketBroker contract
 - https://nframe.nl/api/livepeer/getOrchestrator
     - POST request with orchAddr in the body
 - https://www.nframe.nl/livepeer/getOrchestrator?orchAddr=0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e
@@ -33,6 +33,8 @@ Orchestrators can be inspected by clicking on their address, showing all of thei
 - https://www.nframe.nl/livepeer/prometheus/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e
   - Returns a Prometheus compatible output of all data except blockchain Events
 
+See the wiki for examples of their raw output
+
 # How
 
 ## Frontend

src/components/eventButton.js

@@ -77,19 +77,19 @@ const EventButton = (obj) => {
     blockNumber = <Block block={obj.isFirstOfBlock} time={obj.time} url={obj.eventObj.transactionUrl} />
   }
 
-  return (
-    <div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '0.2em' }}>
-      {blockNumber}
-      <div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: obj.eventObj.eventColour, padding: 0, margin: 0, width: '100%' }}>
-        {eventCaller}
-        <p className="row withWrap" style={{ maxWidth: '600px' }}>
-          💬 {obj.eventObj.eventDescription}
-        </p>
-        {eventFrom}
-        {eventTo}
-      </div>
+return (
+  <div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '0.5em' }}>
+    {blockNumber}
+    <div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: obj.eventObj.eventColour, boxShadow: "4px 1px 5px 4px  " + obj.eventObj.eventColour, padding: 0, margin: 0, width: '100%' }}>
+      {eventCaller}
+      <p className="row withWrap" style={{ maxWidth: '600px', textAlign: 'justify', padding: '0.5em', border: '0.1em solid rgba(54, 46, 46, 0.1)', boxShadow: "4px 2px 3px 2px rgba(54, 46, 46, 0.1)" }}>
+        💬 {obj.eventObj.eventDescription}
+      </p>
+      {eventFrom}
+      {eventTo}
     </div>
-  )
+  </div>
+)
 }
 
 export default EventButton;

src/components/filterComponent.js

@@ -28,7 +28,7 @@ const Filter = (obj) => {
               <h3>Clear</h3>
             </button>
           </div>
-          <input className="searchField" style={{ width: '80%', paddingLeft: '1em', paddingRight: '1em' }}
+          <input className="searchField" style={{  margin: 0, padding: 0, height: '2em', width: '80%', paddingLeft: '1em', paddingRight: '1em', marginRight: '1em' }}
             value={obj.searchTerm}
             onChange={(evt) => obj.setSearchTerm(evt.target.value)}
             placeholder='Filter by Orchestrator address'

src/pages/livepeer.js

@@ -59,7 +59,9 @@ const Livepeer = (obj) => {
         <div className="row" style={{ alignItems: 'stretch', height: '100%', padding: '0.2em', width: "unset" }}>
           <Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} />
         </div>
-        <ContractPrices quotes={livepeer.quotes} blockchains={livepeer.blockchains} />
+        <div className="row">
+          <ContractPrices quotes={livepeer.quotes} blockchains={livepeer.blockchains} />
+        </div>
       </div>
     </div >
   }