Clean up lots of CSS. Halfway done

src/components/OrchDelegatorViewer.js

@@ -6,20 +6,20 @@ const OrchDelegatorViewer = (obj) => {
   let delegators = obj.delegators;
   if (delegators && delegators.length) {
     return (
-      <div className="row" style={{ width: 'unset', marginBottom: '1em', marginTop: '1em' }}>
-        <div className="strokeSmollLeft" style={{ display: "flex" }}>
-          <div className="row" style={{ margin: '0' }}>
-            <h3 style={{ padding: 0, margin: 0 }}>{delegators.length} Current Delegators</h3>
+      <div className="row">
+        <div className="strokeSmollLeft fullMargin">
+          <div className="row">
+            <h3>{delegators.length} Current Delegators</h3>
           </div>
           <div className="content-wrapper">
-            <ScrollContainer className="overflow-container" hideScrollbars={false} style={{  }}>
-              <div className="overflow-content" style={{ cursor: 'grab', padding: 0, maxHeight: '300px', margin: '0.5em' }}>
+            <ScrollContainer className="overflow-container" hideScrollbars={false} style={{}}>
+              <div className="overflow-content" style={{ cursor: 'grab', maxHeight: '300px' }}>
                 {
                   delegators.map((delObj, idx) => {
                     return (
-                      <div className="flexContainer forceWrap" key={"delegator" + idx} style={{ margin: 0, textAlign: 'center', alignItems: 'center', justifyContent: 'center' }}>
+                      <div className="flexContainer forceWrap" key={"delegator" + idx}>
                         <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
-                        <div className="rowAlignRight" style={{ margin: 0 }}>
+                        <div className="rowAlignRight">
                           <p className="darkText">{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
                         </div>
                       </div>
@@ -34,13 +34,13 @@ const OrchDelegatorViewer = (obj) => {
     )
   }
   return (
-    <div className="row" style={{ width: 'unset', marginBottom: '1em', marginTop: '1em' }}>
-      <div className="strokeSmollLeft" style={{ display: "flex" }}>
-        <div className="row" style={{ margin: '0' }}>
-          <h3 style={{ padding: 0, margin: 0 }}>The selected Orchestrator has no Delegators</h3>
+    <div className="row">
+      <div className="strokeSmollLeft">
+        <div className="row">
+          <h3>The selected Orchestrator has no Delegators</h3>
         </div>
       </div>
-    </div>
+    </div >
   )
 }
 

src/components/OrchInfoViewer.js

@@ -69,41 +69,43 @@ const OrchInfoViewer = (obj) => {
     }
 
     return (
-      <div className="row" style={{ width: 'unset', }}>
-        <div className="strokeSmollLeft" style={{ display: "flex" }}>
-          <div style={{ flexDirection: 'row', display: "flex", borderBottom: '2px solid rgba(15,15,15,0.05)', marginTop: '1em' }}>
+      <div className="row sideMargin">
+        <div className="stroke stretchAndBetween sideMargin">
+          <div className="verticalDivider" />
+          <div className="row" style={{ borderBottom: '2px solid rgba(15,15,15,0.05)' }}>
             <a href={thisUrl}>
-              <h3 style={{ padding: 0, margin: 0 }}>Orchestrator Info</h3>
+              <h3 >Orchestrator Info</h3>
               <Address address={thisID} />
             </a>
           </div>
-          <div className="row" style={{ margin: 0 }}>
+          <div className="stretchAndBetween sideMargin" >
             <Stat header={"Earned Fees"} content1={totalVolumeETH + " Eth"} content2={"$" + totalVolumeUSD} />
           </div>
-          <div className="row" style={{ margin: 0 }}>
+          <div className="stretchAndBetween sideMargin" >
             <Stat header={"Commission"} title1={"Reward"} content1={rewardCut + "%"} title2={"Fee"} content2={feeCut + "%"} />
           </div>
-          <div className="row" style={{ margin: 0 }}>
+          <div className="stretchAndBetween sideMargin" >
             <Stat header={"Stake"} title1={"Total"} content1={totalStake + " LPT"} title2={"Self"} content2={selfStake + " LPT (" + selfStakeRatio + ")%"} />
           </div>
-          <div className="strokeSmollLeft" style={{ display: "flex" }}>
-            <button style={{ marginBottom: '1em' }} className="selectOrchLight" onClick={() => {
+          <div className="stretchAndBetween strokeSmollLeft">
+            <button className="selectOrchLight" onClick={() => {
               copyLink(shareUrl);
             }}>
               <img alt="" src="clipboard.svg" width="20em" height="20em" />
             </button>
           </div>
         </div>
+        <div className="verticalDivider" />
       </div>
     )
   }
   return (
-    <div className="row" style={{ width: 'unset', marginBottom: '1em', marginTop: '1em' }}>
-      <div className="strokeSmollLeft" style={{ display: "flex" }}>
-        <div className="row" style={{ margin: '0' }}>
-          <h3 style={{ padding: 0, margin: 0 }}>The selected Orchestrator is currently inactive</h3>
-        </div>
+    <div className="stroke stretchAndBetween sideMargin">
+      <div className="verticalDivider" />
+      <div className="stretchAndBetween sideMargin" >
+        <h3 >The selected Orchestrator is currently inactive</h3>
       </div>
+      <div className="verticalDivider" />
     </div>
   )
 }

src/components/TicketViewer.js

@@ -2,22 +2,22 @@ import React from "react";
 
 const Ticket = (obj) => {
   return (
-    <div className="flexContainer" style={{ justifyContent: 'space-between', alignItems: "stretch", width: "100%" }}>
+    <div className="flexContainer stretchAndBetween">
       <div className="strokeSmoll" style={{flex: 1}}>
         <div className="row">
-          <h3 style={{ margin: 0, padding: 0 }}>{obj.icon}</h3>
+          <h3>{obj.icon}</h3>
         </div>
         <div className="row">
-          <p style={{ fontSize: 'small' }}>
+          <p className="smallTxt">
             {obj.subtext}
           </p>
         </div>
       </div>
       <div className="verticalSeparator"></div>
-      <div className="stroke" style={{ margin: 0, padding : 0, flex: 2 }}>
+      <div className="stroke" style={{ flex: 2 }}>
         {obj.descriptions.map(function (thisTextItem, i) {
           return (
-            <p style={{ fontSize: 'small' }}>
+            <p className="smallTxt">
               {thisTextItem}
             </p>
           )

src/components/eventViewer.js

@@ -207,7 +207,7 @@ const EventViewer = (obj) => {
     showMoreButton =
       <div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}>
         <div className="strokeSmollLeft" style={{ borderRadius: "1.2em", padding: 0, margin: 0, width: '100%' }}>
-          <button className="row nonHomeButton" style={{ backgroundColor: greyColour }} onClick={() => {
+          <button className="row nonHomeButton buttonPadding" style={{ backgroundColor: greyColour }} onClick={() => {
             obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
           }}>
             <h3>🔄 Show More</h3>
@@ -232,7 +232,7 @@ const EventViewer = (obj) => {
     <div className="strokeSmollLeft" style={{ padding: 0, margin: 0, height: 'calc( 100vh - 50px)' }}>
       {filterBit}
       <div className="row" style={{ padding: 0, margin: 0, width: '100%', height: '100%' }}>
-        <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, width: 'unset', minWidth: "350px", height: '100%', marginRight: '1em', overflow: 'hidden', marginTop: '1em', overflowX: 'scroll' }}>
+        <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, width: 'unset', minWidth: "400px", height: '100%', marginRight: '1em', overflow: 'hidden', marginTop: '1em', overflowX: 'scroll' }}>
           <div className="content-wrapper" style={{ width: '100%' }}>
             <ScrollContainer activationDistance={1} className="overflow-container"
               hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}>
@@ -243,43 +243,44 @@ const EventViewer = (obj) => {
                 </div>
               </div>
             </ScrollContainer>
-            <div className="strokeSmollLeft" style={{ marginRight: "1em" }}>
-              <button className={delegatorRewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: delegatorActivatedColour, marginTop: '0.7em' }} onClick={() => {
+            <div className="strokeSmollLeft sideMargin">
+              <div className="verticalDivider"/>
+              <button className={delegatorRewardActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: delegatorActivatedColour}} onClick={() => {
                 setDelegatorRewardActivated(!delegatorRewardActivated);
               }}>
                 <h3>Claim</h3>
               </button>
-              <button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeActivatedColour }} onClick={() => {
+              <button className={stakeActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: stakeActivatedColour }} onClick={() => {
                 setStakeActivated(!stakeActivated);
               }}>
                 <h3>Stake</h3>
               </button>
-              <button className={ticketRedemptionActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: ticketActivatedColour }} onClick={() => {
+              <button className={ticketRedemptionActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: ticketActivatedColour }} onClick={() => {
                 setTicketRedemptionActivated(!ticketRedemptionActivated);
               }}>
                 <h3>Tickets</h3>
               </button>
-              <button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardActivatedColour }} onClick={() => {
+              <button className={rewardActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: rewardActivatedColour }} onClick={() => {
                 setRewardActivated(!rewardActivated);
               }}>
                 <h3>Reward</h3>
               </button>
-              <button className={unbondActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: unbondActivatedColour }} onClick={() => {
+              <button className={unbondActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: unbondActivatedColour }} onClick={() => {
                 setUnbondActivated(!unbondActivated);
               }}>
                 <h3>Unbond</h3>
               </button>
-              <button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateActivatedColour }} onClick={() => {
+              <button className={updateActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: updateActivatedColour }} onClick={() => {
                 setUpdateActivated(!updateActivated);
               }}>
                 <h3>Update</h3>
               </button>
-              <button className={withdrawActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: withdrawActivatedColour }} onClick={() => {
+              <button className={withdrawActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: withdrawActivatedColour }} onClick={() => {
                 setWithdrawActivated(!withdrawActivated);
               }}>
                 <h3>Withdraw</h3>
               </button>
-              <button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: filterActivatedColour }} onClick={() => {
+              <button className={filterActivated ? "row nonHomeButton buttonPadding active" : "row nonHomeButton buttonPadding"} style={{ backgroundColor: filterActivatedColour }} onClick={() => {
                 setFilterActivated(!filterActivated);
               }}>
                 <h3>Activated</h3>

src/components/filterComponent.js

@@ -15,20 +15,20 @@ const Filter = (obj) => {
   }
 
   return (
-    <div className="flexContainer" style={{ margin: 0, width: '100%' }}>
-      <div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}>
-        <div className="row" style={{ margin: 0, padding: 0 }}>
+    <div className="flexContainer" style={{  width: '100%' }}>
+      <div className="strokeSmollLeft" style={{ flex: 2 }}>
+        <div className="row">
           {searchTermText}
         </div>
-        <div className="row" style={{ margin: 0, padding: 0 }}>
-          <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
-            <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
+        <div className="row">
+          <div className="strokeSmollLeft">
+            <button className={"nonHomeButton buttonPadding"} style={{ backgroundColor: greyColour, width: '5em' }} onClick={() => {
               obj.setSearchTerm("");
             }}>
               <h3>Clear</h3>
             </button>
           </div>
-          <input className="searchField" style={{  margin: 0, padding: 0, height: '2em', width: '80%', paddingLeft: '1em', paddingRight: '1em', marginRight: '1em' }}
+          <input className="searchField" style={{ height: '2em', width: '100%' }}
             value={obj.searchTerm}
             onChange={(evt) => obj.setSearchTerm(evt.target.value)}
             placeholder='Filter by Orchestrator address'
@@ -36,34 +36,35 @@ const Filter = (obj) => {
           />
         </div>
       </div>
-      <div className="strokeSmollLeft" style={{ margin: 0, padding: 0, flex: 2 }}>
-        <div className="row" style={{ margin: 0, padding: 0 }}>
+      <div className="verticalSeparator"/>
+      <div className="strokeSmollLeft" style={{ flex: 2 }}>
+        <div className="row">
           <h3>{parseFloat(obj.amountFilter) > 0 ? ("Only showing higher than " + obj.amountFilter) : "Filter by minimum value"}</h3>
         </div>
-        <div className="row" style={{ margin: 0, padding: 0 }}>
-          <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
-            <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
+        <div className="row">
+          <div className="strokeSmollLeft">
+            <button className={"nonHomeButton buttonPadding"} style={{ backgroundColor: greyColour, width: '5em' }} onClick={() => {
               obj.setAmountFilter(0);
             }}>
               <h3>0</h3>
             </button>
           </div>
-          <input className="searchField" style={{ margin: 0, padding: 0, height: '2em', width: '80%', paddingLeft: '1em', paddingRight: '1em' }}
+          <input className="searchField" style={{ height: '2em', width: '100%' }}
             value={obj.amountFilter}
             onChange={(evt) => obj.setAmountFilter(evt.target.value)}
             placeholder='Filter by minimum value'
             type="number"
           />
-          <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
-            <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '4em' }} onClick={() => {
+          <div className="strokeSmollLeft">
+            <button className={"nonHomeButton buttonPadding"} style={{ backgroundColor: greyColour, width: '4em' }} onClick={() => {
               const curVal = parseFloat(obj.amountFilter);
               obj.setAmountFilter(curVal + 100);
             }}>
               <h3>+100</h3>
             </button>
           </div>
-          <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
-            <button className={"nonHomeButton"} style={{ backgroundColor: greyColour, margin: 0, padding: '0', width: '5em' }} onClick={() => {
+          <div className="strokeSmollLeft">
+            <button className={"nonHomeButton buttonPadding"} style={{ backgroundColor: greyColour, width: '5em' }} onClick={() => {
               const curVal = parseFloat(obj.amountFilter);
               obj.setAmountFilter(curVal + 1000);
             }}>
@@ -72,6 +73,7 @@ const Filter = (obj) => {
           </div>
         </div>
       </div>
+      <div className="verticalDivider" />
     </div>
   )
 }

src/components/orchestratorViewer.js

@@ -27,7 +27,7 @@ const Orchestrator = (obj) => {
   if (obj.thisOrchestrator) {
     if (obj.forceVertical) {
       return (
-        <div className="hostInfo">
+        <div className="hostInfo sideMargin">
           <div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start', flexDirection: 'column' }}>
             <OrchInfoViewer
               rewardCut={obj.thisOrchestrator.rewardCut}
@@ -41,10 +41,10 @@ const Orchestrator = (obj) => {
           </div>
         </div>
       )
-    }else{
+    } else {
       return (
-        <div className="hostInfo">
-          <div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start' }}>
+        <div className="hostInfo sideMargin">
+          <div className="flexContainer" style={{ justifyContent: 'flex-start', alignItems: 'flex-start', flexDirection: 'column' }}>
             <OrchInfoViewer
               rewardCut={obj.thisOrchestrator.rewardCut}
               feeShare={obj.thisOrchestrator.feeShare}
@@ -62,7 +62,7 @@ const Orchestrator = (obj) => {
   if (obj.forceVertical) {
     return (
       <div className="hostInfo">
-        <div className="flexContainer" style={{ alignItems: 'center', flexDirection: 'column' }}>
+        <div className="flexContainer fullMargin">
           <div className="rowAlignLeft">
             <img alt="" src="livepeer.png" width="30" height="30" />
             <h3>Orchestrator Info</h3>
@@ -76,7 +76,7 @@ const Orchestrator = (obj) => {
   } else {
     return (
       <div className="hostInfo">
-        <div className="flexContainer" style={{ alignItems: 'center' }}>
+        <div className="flexContainer fullMargin">
           <div className="rowAlignLeft">
             <img alt="" src="livepeer.png" width="30" height="30" />
             <h3>Orchestrator Info</h3>

src/components/statViewer.js

@@ -11,20 +11,24 @@ const Stat = (obj) => {
   }
 
   return (
-    <div className="strokeSmollLeft" style={{ margin: 0, padding: 0, width: '100%' }}>
-      <div className="rowAlignLeft" style={{ margin: 0, padding: 0 }}>
-        <h3 style={{ margin: 0, padding: 0 }}>{obj.header}</h3>
+    <div className="strokeSmollLeft">
+      <div className="rowAlignLeft" >
+        <h3 >{obj.header}</h3>
       </div>
-      <div className="row" style={{ margin: 0 }}>
-        <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
-          <h4 style={{ margin: 0, padding: 0 }}>{obj.title1}</h4>
-          <div className="rowAlignLeft" style={{ margin: 0, padding: 0 }}>
+      <div className="row">
+        <div className="strokeSmollLeft" >
+          <div className="rowAlignLeft" >
+            <h4 >{obj.title1}</h4>
+          </div>
+          <div className="rowAlignRight" >
             <p className="darkText">{obj.content1}</p>
           </div>
         </div>
-        <div className="strokeSmollLeft" style={{ margin: 0, padding: 0 }}>
-          <h4 style={{ margin: 0, padding: 0 }}>{obj.title2}</h4>
-          <div className="rowAlignLeft" style={{ margin: 0, padding: 0 }}>
+        <div className="strokeSmollLeft" >
+          <div className="rowAlignLeft" >
+            <h4 >{obj.title2}</h4>
+          </div>
+          <div className="rowAlignRight" >
             <p className="darkText">{obj.content2}</p>
           </div>
         </div>

src/pages/grafana.js

@@ -31,26 +31,29 @@ const Grafana = (obj) => {
   }
 
   return (
-    <div className="stroke" style={{ margin: 0, padding: 0 }}>
-      <div className="row" style={{ margin: 0, padding: 0 }}>
+    <div className="stroke" >
+      <div className="verticalDivider"/>
+      <div className="row" >
         <button className="homeButton" onClick={() => {
           setRedirectToHome(true);
         }}>
           <img alt="" src="/livepeer.png" width="100em" height="100em" />
         </button>
       </div>
-      <div className="stroke" style={{ margin: 0, padding: 0 }}>
+      <div className="verticalDivider"/>
+      <div className="stroke" >
         <div className="flexContainer">
-          <div className="stroke" style={{ marginTop: 0, marginBottom: 5, paddingBottom: 0 }}>
+          <div className="stroke">
             <div className="stroke roundedOpaque">
-              <div className="flexContainer" style={{ margin: 0, textAlign: 'center',alignItems: 'center', justifyContent:'center' }}>
+            <div className="verticalDivider"/>
+              <div className="flexContainer">
                 <div className="row">
                   <img alt="" src="livepeer.png" width="30" height="30" />
                   <p>${lptPrice}</p>
                   <p>({lptPriceChange24h}%)</p>
                 </div>
-                <div className="row selectOrch">
-                  <h2> <a href="https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/">Livepeer Orchestrator</a></h2>
+                <div className="row">
+                  <h2>Livepeer Orchestrator</h2>
                 </div>
                 <div className="row">
                   <img alt="" src="eth.png" width="30" height="30" />
@@ -58,35 +61,40 @@ const Grafana = (obj) => {
                   <p>({ethPriceChange24h}%)</p>
                 </div>
               </div>
-              <div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
-                <div className="flexContainer" style={{ justifyContent: "center" }}>
+              <div className="verticalDivider"/>
+              <div className="stroke roundedOpaqueDark">
+                <div className="flexContainer fullMargin">
                   <Orchestrator thisOrchestrator={livepeer.thisOrchestrator} rootOnly={true} />
                 </div>
-                <div className="flexContainer" style={{ justifyContent: "stretch", padding: '20px', width: '100%' }}>
+                <div className="flexContainer stretchAndPad">
                   <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>
-                <div className="flexContainer" style={{ justifyContent: "stretch", padding: '20px', width: '100%' }}>
+                <div className="flexContainer stretchAndPad">
                   <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572077" height="400" frameBorder="0"></iframe>
                 </div>
-                <div className="flexContainer" style={{ justifyContent: "stretch", padding: '20px', width: '100%' }}>
+                <div className="flexContainer stretchAndPad">
                   <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572032" height="200" frameBorder="0"></iframe>
                 </div>
-                <div className="flexContainer" style={{ justifyContent: "stretch", padding: '20px', width: '100%' }}>
+                <div className="flexContainer stretchAndPad">
                   <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&from=now-2d&to=now&refresh=5s&theme=dark&panelId=23763572040" height="400" frameBorder="0"></iframe>
                 </div>
-                <div className="row">
-                  <a href="https://grafana.stronk.tech/d/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark">
-                    <button className="waveButton">
-                      <img alt="" src="grafana.png" width="30" height="30" />
-                      <p>Full Statistics</p>
-                    </button>
-                  </a>
-                </div>
               </div>
+              <div className="verticalDivider"/>
+              <div className="row">
+                <a href="https://grafana.stronk.tech/d/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark">
+                  <button className="waveButton">
+                    <img alt="" src="grafana.png" width="30" height="30" />
+                    <p>Full Statistics</p>
+                  </button>
+                </a>
+              </div>
+              <div className="verticalDivider"/>
             </div>
           </div>
+          <div className="smallVerticalDivider" />
         </div>
       </div>
+      <div className="verticalDivider" />
     </div>
   );
 }

src/pages/home.js

@@ -24,12 +24,15 @@ const Home = (obj) => {
   }
 
   return (
-    <div className="stroke" style={{ padding: 0 }}>
-      <div className="row" style={{ margin: 0, padding: 0 }}>
+    <div className="stroke">
+      <div className="verticalDivider"/>
+      <div className="row">
         <img alt="" src="livepeer.png" width="100em" height="100em" style={{ zIndex: 10 }} />
       </div>
+      <div className="verticalDivider" />
       <div className="flexContainer">
         <div className="stroke roundedOpaque">
+          <div className="verticalDivider" />
           <div className="row">
             <h3>Home</h3>
           </div>
@@ -54,10 +57,11 @@ const Home = (obj) => {
               <p>🔎 Blockchain 🕵️</p>
             </button>
           </div>
+          <div className="verticalDivider" />
         </div>
       </div>
-      <div className="alwaysOnBottom showNeverOnMobile" style={{ margin: 0, padding: 0 }}>
-        <div className="row" style={{ margin: 0, padding: 0 }}>
+      <div className="alwaysOnBottom showNeverOnMobile">
+        <div className="row">
           <RetroHitCounter
             hits={totalVisitorCount}
             withBorder={true}
@@ -75,7 +79,7 @@ const Home = (obj) => {
             glowStrength={0.4}
           />
         </div>
-        <h6 className="lightText" style={{ margin: 0, padding: 0 }}>
+        <h6 className="lightText">
           nframe.nl
         </h6>
       </div>

src/pages/livepeer.js

@@ -55,10 +55,14 @@ const Livepeer = (obj) => {
   let sidebar;
   if (showSidebar) {
     sidebar = <div id='sideContent'>
-      <div className="strokeSmollLeft" style={{ margin: 0, padding: 0, width: '100%', marginTop: '1em' }}>
-        <div className="row" style={{ alignItems: 'stretch', height: '100%', padding: '0.2em', width: "unset" }}>
-          <Orchestrator thisOrchestrator={thisOrchObj} rootOnly={false} forceVertical={true} />
+      <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 className="row">
           <ContractPrices quotes={livepeer.quotes} blockchains={livepeer.blockchains} />
         </div>
@@ -74,7 +78,7 @@ const Livepeer = (obj) => {
           <button className="homeButton" onClick={() => {
             setRedirectToHome(true);
           }}>
-            <h1 style={{ margin: 0, padding: 0 }}>🏠</h1>
+            <h1>🏠</h1>
           </button>
           <h4 className="rowAlignLeft withWrap showNeverOnMobile">{headerString}</h4>
         </div>
@@ -85,7 +89,7 @@ const Livepeer = (obj) => {
             setAmountFilter(0);
             setMaxAmount(defaultMaxShown);
           }}>
-            <h4 style={{margin: 0, padding: 0}}>✖️ Clear</h4>
+            <h4>✖️ Clear</h4>
           </button>
           <p>Sidebar</p>
           <div className="toggle-container" onClick={() => setShowSidebar(!showSidebar)}>

src/pages/loadingScreen.js

@@ -66,13 +66,13 @@ const Startup = (obj) => {
     console.log("Rendering Loading Screen");
     return (
       <div className="stroke">
+        <div className="verticalDivider" />
         <div className="row">
-          <img alt="" src="livepeer.png" width="200em" height="200em" style={{ zIndex: 10 }} />
+          <img alt="" src="livepeer.png" width="100em" height="100em" style={{ zIndex: 10 }} />
         </div>
+        <div className="verticalDivider" />
         <div className="stroke roundedOpaque" style={{ width: 'unset', padding: '5em' }}>
-          <div className="stroke">
             <h1>{texts[Math.floor(Math.random() * texts.length)]}</h1>
-          </div>
         </div>
       </div>
     )

src/style.css

@@ -49,6 +49,8 @@ h2, h3, h1, h4, h5, h6 {
   justify-content: center;
   align-items: center;
   display: flex;
+  margin: 0;
+  padding: 0;
   justify-content: space-evenly;
 }
 
@@ -160,7 +162,8 @@ svg {
   backdrop-filter: blur(6px);
   box-shadow: 9px 13px 8px 8px  rgba(27, 23, 19, 0.692);
   border-bottom-right-radius: 1em;
-  max-width: 400px;
+  max-width: 500px;
+  width: 500px;
   overflow-y: auto;
   overflow-x: hidden;
 }
@@ -217,15 +220,31 @@ svg {
   border-radius: 1em;
 }
 
+.smallTxt {
+  font-size: small;
+}
+
 .verticalSeparator {
   width: 0.2em;
-  border-left: dashed 2px rgba(122, 128, 127, 0.4);
+  border-left: dashed 2px rgba(72, 80, 79, 0.4);
   margin-left: 0.5em;
   margin-right: 0.5em;
   display: flex;
   align-items: stretch;
 }
 
+.verticalDivider {
+  height: 20px;
+  display: flex;
+  align-items: stretch;
+}
+
+.smallVerticalDivider {
+  height: 5px;
+  display: flex;
+  align-items: stretch;
+}
+
 .flexContainer {
   box-sizing: border-box;
   height: 100%;
@@ -238,15 +257,30 @@ svg {
   width: auto;
 }
 
+.forceVertical {
+  flex-direction: column;
+}
+
 .forceWrap{
   flex-direction: column;
 }
 
+.stretchAndPad {
+  justify-content: stretch;
+  padding: 20px;
+  width: 100%;
+}
+
+.stretchAndBetween {
+  align-items: stretch;
+  justify-content: space-between;
+  width: 100%;
+}
+
 .stroke {
   box-sizing: border-box;
-  padding-bottom: 20px;
-  padding-top: 20px;
-  margin: 10px;
+  padding: 0;
+  margin: 0;
   width: 100%;
   display: flex;
   align-items: center;
@@ -288,8 +322,17 @@ svg {
   display: flex;
   justify-content: space-evenly;
   vertical-align: middle;
-  margin-left: 10px;
-  margin-right: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+.sideMargin {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+.fullMargin {
+  margin: 2em;
 }
 
 .withWrap {
@@ -401,6 +444,9 @@ svg {
 .nonHomeButton:active {
   box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692);
 }
+.buttonPadding {
+  padding: 1em;
+}
 .active {
   box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692);
 }
@@ -450,7 +496,8 @@ svg {
 }
 .overflow-content {
   color: black;
-  padding: 1em;
+  padding-left: 1em;
+  padding-right: 1em;
 }
 
 
@@ -461,9 +508,17 @@ svg {
 .roundedOpaque {
   background-color: rgba(214, 214, 214, 0.80);
   box-shadow: 9px 13px 18px 8px  rgba(20, 20, 19, 0.692);
-  border-radius: 30px;
   box-sizing: border-box;
   backdrop-filter: blur(6px);
+  border-radius: 1em;
+}
+
+.roundedOpaqueDark {
+  background-color: rgba(17, 18, 23, 0.95);
+  box-shadow: 9px 13px 18px 8px  rgba(20, 20, 19, 0.692);
+  box-sizing: border-box;
+  backdrop-filter: blur(6px);
+  border-radius: 1em;
 }
 
 .header {
@@ -554,7 +609,7 @@ svg {
   left: 2px;
 }
 
-@media (max-aspect-ratio: 3/2) {
+@media (max-aspect-ratio: 4/3) {
   .mobileSmallerFont{
     font-size: xx-small;
   }
@@ -569,11 +624,12 @@ svg {
   }
   .flexContainer {
     height: 100%;
+    width: 100%;
     padding: 0;
     margin: 0;
     display: flex;
-    align-items: flex-start;
-    justify-content: center;
+    align-items: stretch;
+    justify-content: space-between;
     flex-direction: column;
   }
   .roundedOpaque {
@@ -613,8 +669,4 @@ svg {
   .main-container {
     height: calc(100vh - 60px);
   }
-  #sideContent {
-    max-width: 100%;
-    width: 100%;
-  }
 }