From 86db25caee8f04b0f7375544ad9329553df1c462 Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Sat, 23 Apr 2022 21:23:28 +0200
Subject: [PATCH] formatting of popups, moved prices to  home for nowo

---
 src/components/eventViewer.js |  2 +-
 src/pages/home.js             |  9 ++++++++-
 src/pages/livepeer.js         | 32 +++++++++++++++++---------------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/components/eventViewer.js b/src/components/eventViewer.js
index 3481e20..98f9699 100644
--- a/src/components/eventViewer.js
+++ b/src/components/eventViewer.js
@@ -454,7 +454,7 @@ const EventViewer = (obj) => {
         position={{ bottom: 20, left: 20 }}
         radius="md"
         styles={{
-          root: { backgroundColor: 'rgba(214, 214, 214, 0.90)' },
+          root: { backgroundColor: 'rgba(214, 214, 214, 0.80)' },
           closeButton: {},
         }}
       >
diff --git a/src/pages/home.js b/src/pages/home.js
index 4748682..111dfb6 100644
--- a/src/pages/home.js
+++ b/src/pages/home.js
@@ -5,10 +5,13 @@ import {
 } from "react-router-dom";
 import { useSelector } from 'react-redux';
 import RetroHitCounter from 'react-retro-hit-counter';
+import ContractPrices from '../components/ContractPrices';
+
 // Index of all sub-pages on this website
 
 const Home = (obj) => {
   const userstate = useSelector((state) => state.userstate);
+  const livepeer = useSelector((state) => state.livepeerstate);
   const [redirectToGrafana, setRedirectToGrafana] = useState(false);
   const [redirectToLPT, setRedirectToLPT] = useState(false);
   const [redirectToStats, setRedirectToStats] = useState(false);
@@ -29,7 +32,7 @@ const Home = (obj) => {
 
   return (
     <div className="stroke">
-      <div className="verticalDivider"/>
+      <div className="verticalDivider" />
       <div className="row">
         <img alt="" src="livepeer.png" width="100em" height="100em" style={{ zIndex: 10 }} />
       </div>
@@ -69,6 +72,10 @@ const Home = (obj) => {
             </button>
           </div>
           <div className="verticalDivider" />
+          <div className="row">
+            <ContractPrices quotes={livepeer.quotes} blockchains={livepeer.blockchains} />
+          </div>
+          <div className="verticalDivider" />
         </div>
       </div>
       <div className="alwaysOnBottom showNeverOnMobile">
diff --git a/src/pages/livepeer.js b/src/pages/livepeer.js
index 8e8f918..52053d7 100644
--- a/src/pages/livepeer.js
+++ b/src/pages/livepeer.js
@@ -6,7 +6,8 @@ import { getOrchestratorInfo, clearOrchestrator } from "../actions/livepeer";
 import EventViewer from "../components/eventViewer";
 import Orchestrator from "../components/orchestratorViewer";
 import ContractPrices from '../components/ContractPrices';
-import { Dialog } from '@mantine/core';
+import { Dialog, ScrollArea, Stack } from '@mantine/core';
+import ScrollContainer from 'react-indiana-drag-scroll';
 
 // Shows the EventViewer and other Livepeer related info
 const defaultMaxShown = 50;
@@ -107,24 +108,25 @@ const Livepeer = (obj) => {
           shadow="xl"
           radius="md"
           styles={{
-            root: { backgroundColor: 'rgba(214, 214, 214, 0.90)' },
-            closeButton: { },
+            root: { backgroundColor: 'rgba(214, 214, 214, 0.80)', maxHeight: '90vh' },
+            closeButton: {},
           }}
         >
-          <div className='stroke'>
-            <div className="verticalDivider" />
-            <div className="strokeSmollLeft sideMargin">
-              <div className="row">
-                <div className="row">
-                  <Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} />
+          <div className="content-wrapper" style={{ width: '100%' }}>
+            <ScrollContainer activationDistance={1} className="overflow-container" hideScrollbars={false} style={{ width: '100%', overflowX: 'hidden' }}>
+              <div className="overflow-content" style={{ cursor: 'grab', padding: 0, width: '100%' }}>
+                <div className="verticalDivider" />
+                <div className="strokeSmollLeft sideMargin">
+                  <div className="row">
+                    <div className="row">
+                      <Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} />
+                    </div>
+                  </div>
+                  <div className="verticalDivider" />
                 </div>
               </div>
-              <div className="verticalDivider" />
-              <div className="row">
-                <ContractPrices quotes={livepeer.quotes} blockchains={livepeer.blockchains} />
-              </div>
-            </div>
-          </div >
+            </ScrollContainer>
+          </div>
         </Dialog>
         {sidebar}
         <div className="mainContent">