stronk/LivepeerEvents
1
0
Fork 0
mirror of https://github.com/stronk-dev/LivepeerEvents.git synced 2025-07-05 10:45:10 +02:00
Code Issues Packages Projects Releases Wiki Activity

More code cleanup

Browse Source
This commit is contained in:
Marco van Dijk 2022-03-14 10:13:31 +01:00
parent d517be8a39
commit b5b9f49f56
11 changed files with 102 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/actions/livepeer.js
View File

@ -119,14 +119,14 @@ export const getEvents = () => async dispatch => {
eventFrom = ""; eventFrom = "";
eventTo = ""; eventTo = "";
if (eventContainsBond) { if (eventContainsBond) {
const subtext = "activated their orchestrator"; const subtext = "activated";
const descriptions = [ const descriptions = [
tmpAmount.toFixed(2) + " LPT stake", tmpAmount.toFixed(2) + " LPT stake",
"round " + tmpWhen "round " + tmpWhen
] ]
eventDescription = <Ticket icon={"🚀"} subtext={subtext} descriptions={descriptions} /> eventDescription = <Ticket icon={"🚀"} subtext={subtext} descriptions={descriptions} />
} else { } else {
const subtext = "reactivated their orchestrator"; const subtext = "reactivated";
const descriptions = [ const descriptions = [
"round " + tmpWhen "round " + tmpWhen
] ]
@ -154,7 +154,7 @@ export const getEvents = () => async dispatch => {
else if (eventContainsRebond) { else if (eventContainsRebond) {
eventType = "Stake"; eventType = "Stake";
eventColour = stakeColour; eventColour = stakeColour;
const subtext = "changed stake amount"; const subtext = "changed stake";
const descriptions = [ const descriptions = [
tmpAmount.toFixed(2) + " LPT" tmpAmount.toFixed(2) + " LPT"
] ]
@ -173,7 +173,7 @@ export const getEvents = () => async dispatch => {
<Ticket icon={"⌛"} subtext={subtext} descriptions={descriptions} /> <Ticket icon={"⌛"} subtext={subtext} descriptions={descriptions} />
} else if (eventFrom === eventTo) { } else if (eventFrom === eventTo) {
eventFrom = ""; eventFrom = "";
const subtext = "changed stake amount"; const subtext = "changed stake";
const descriptions = [ const descriptions = [
tmpAmount.toFixed(2) + " LPT" tmpAmount.toFixed(2) + " LPT"
] ]
@ -261,7 +261,7 @@ export const getEvents = () => async dispatch => {
if (amount < thresholdFees) { if (amount < thresholdFees) {
continue; continue;
} }
const subtext = "withdrew fee rewards"; const subtext = "withdrew fees";
const descriptions = [ const descriptions = [
amount.toFixed(4) + " Eth" amount.toFixed(4) + " Eth"
] ]
@ -286,7 +286,7 @@ export const getEvents = () => async dispatch => {
eventContainsTranscoderUpdate = true; eventContainsTranscoderUpdate = true;
const amount1 = parseFloat(eventObj.data.rewardCut) / 10000; const amount1 = parseFloat(eventObj.data.rewardCut) / 10000;
const amount2 = 100 - (eventObj.data.feeShare / 10000); const amount2 = 100 - (eventObj.data.feeShare / 10000);
const subtext = "changed commission rates"; const subtext = "changed commission";
const descriptions = [ const descriptions = [
amount1.toFixed(2) + "% on staking rewards", amount1.toFixed(2) + "% on staking rewards",
amount2.toFixed(2) + "% on transcoding fees" amount2.toFixed(2) + "% on transcoding fees"
@ -315,9 +315,9 @@ export const getEvents = () => async dispatch => {
if (amount1 < thresholdStaking && amount2 < thresholdFees) { if (amount1 < thresholdStaking && amount2 < thresholdFees) {
continue; continue;
} }
const subtext = "delegator claimed rewards"; const subtext = "delegator claimed";
const descriptions = [ const descriptions = [
"of " + (eventObj.data.endRound - eventObj.data.startRound + 1) + " rounds", (eventObj.data.endRound - eventObj.data.startRound + 1) + " rounds",
"+" + amount1.toFixed(2) + " LPT rewards", "+" + amount1.toFixed(2) + " LPT rewards",
"+" + amount2.toFixed(4) + " Eth fees" "+" + amount2.toFixed(4) + " Eth fees"
] ]

8
src/components/BlockViewer.js
View File

@ -6,15 +6,15 @@ const Block = (obj) => {
dateObj.setUTCSeconds(thisEpoch); dateObj.setUTCSeconds(thisEpoch);
const [thisDate, thisTime] = dateObj.toISOString().split('T'); const [thisDate, thisTime] = dateObj.toISOString().split('T');
return ( return (
<div className="rowAlignLeft" style={{ width: '100%', marginTop: '1em' }}> <div className="rowAlignLeft" style={{ marginTop: '1em' }}>
<a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={obj.url}> <a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={obj.url}>
<img alt="" src="arb.svg" width="20em" height="20em" /> <img alt="" src="arb.svg" width="20em" height="20em" />
</a> </a>
<a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://arbiscan.io/block/" + obj.block}> <a className="selectOrch" style={{ cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://arbiscan.io/block/" + obj.block}>
<h3 style={{ margin: 0, padding: '0.2em', cursor: 'alias' }}>🔗</h3> <h3 style={{ padding: '0.2em', cursor: 'alias' }}>🔗</h3>
</a> </a>
<span className="rowAlignRight elipsText"> <span className="rowAlignRight darkText mobileSmallerFont">
<p className="darkText mobileSmallerFont">UTC&nbsp;📅{thisDate} - {thisTime.split('.')[0]} </p> UTC&nbsp;📅{thisDate} - {thisTime.split('.')[0]}
</span> </span>
</div> </div>
) )

8
src/components/ContractPrices.js
View File

@ -94,11 +94,11 @@ const ContractPrices = (obj) => {
} }
return ( return (
<div className="stroke metaSidebar" style={{ padding: 0, maxWidth: "300px" }}> <div className="stroke" style={{ maxWidth: "300px" }}>
<div className="row" style={{ margin: 0, padding: 0 }}> <div className="row">
<h3 style={{ margin: 0, padding: 0 }}>Smart contract prices</h3> <h3>Smart contract prices</h3>
</div> </div>
<div className="stroke" style={{ margin: 0, padding: 0 }}> <div className="stroke">
<div className='rowAlignRight'> <div className='rowAlignRight'>
<Stat header={"Reward Call"} content1={"$" + redeemRewardCostL2USD + " ($" + redeemRewardCostL1USD + " on L1)"} /> <Stat header={"Reward Call"} content1={"$" + redeemRewardCostL2USD + " ($" + redeemRewardCostL1USD + " on L1)"} />
<Stat header={"Claim Ticket"} content1={"$" + claimTicketCostL2USD + " ($" + claimTicketCostL1USD + " on L1)"} /> <Stat header={"Claim Ticket"} content1={"$" + claimTicketCostL2USD + " ($" + claimTicketCostL1USD + " on L1)"} />

6
src/components/OrchAddressViewer.js
View File

@ -2,11 +2,11 @@ import React from "react";
const Address = (obj) => { const Address = (obj) => {
return ( return (
<div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}> <div className="rowAlignLeft">
<a className="selectOrchLight" target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/" + obj.address} > <a className="selectOrchLight" target="_blank" rel="noopener noreferrer" href={"https://explorer.livepeer.org/accounts/" + obj.address} >
<div className="rowAlignLeft" style={{ width: 'unset', margin: 0 }}> <div className="rowAlignLeft">
<img alt="" src="livepeer.png" width="20" height="20" /> <img alt="" src="livepeer.png" width="20" height="20" />
<span className="elipsText elipsOnMobile" style={{ marginRight: "0.5em" }}>{obj.address}</span> <span className="elipsText elipsOnMobile">{obj.address}</span>
</div> </div>
</a> </a>
</div> </div>

1
src/components/OrchDelegatorViewer.js
View File

@ -39,6 +39,7 @@ const OrchDelegatorViewer = (obj) => {
<div className="row"> <div className="row">
<h3>The selected Orchestrator has no Delegators</h3> <h3>The selected Orchestrator has no Delegators</h3>
</div> </div>
<div className="verticalDivider"/>
</div> </div>
</div > </div >
) )

12
src/components/OrchInfoViewer.js
View File

@ -69,22 +69,22 @@ const OrchInfoViewer = (obj) => {
} }
return ( return (
<div className="row sideMargin"> <div className="row">
<div className="stroke stretchAndBetween sideMargin"> <div className="stroke sideMargin">
<div className="verticalDivider" /> <div className="verticalDivider" />
<div className="row" style={{ borderBottom: '2px solid rgba(15,15,15,0.05)' }}> <div className="row">
<a href={thisUrl}> <a href={thisUrl}>
<h3 >Orchestrator Info</h3> <h3 >Orchestrator Info</h3>
<Address address={thisID} /> <Address address={thisID} />
</a> </a>
</div> </div>
<div className="stretchAndBetween sideMargin" > <div className="stretchAndBetween" style={{ borderTop: '2px solid rgba(15,15,15,0.05)', marginTop: '0.2em' }} >
<Stat header={"Earned Fees"} content1={totalVolumeETH + " Eth"} content2={"$" + totalVolumeUSD} /> <Stat header={"Earned Fees"} content1={totalVolumeETH + " Eth"} content2={"$" + totalVolumeUSD} />
</div> </div>
<div className="stretchAndBetween sideMargin" > <div className="stretchAndBetween" >
<Stat header={"Commission"} title1={"Reward"} content1={rewardCut + "%"} title2={"Fee"} content2={feeCut + "%"} /> <Stat header={"Commission"} title1={"Reward"} content1={rewardCut + "%"} title2={"Fee"} content2={feeCut + "%"} />
</div> </div>
<div className="stretchAndBetween sideMargin" > <div className="stretchAndBetween" >
<Stat header={"Stake"} title1={"Total"} content1={totalStake + " LPT"} title2={"Self"} content2={selfStake + " LPT (" + selfStakeRatio + ")%"} /> <Stat header={"Stake"} title1={"Total"} content1={totalStake + " LPT"} title2={"Self"} content2={selfStake + " LPT (" + selfStakeRatio + ")%"} />
</div> </div>
<div className="stretchAndBetween strokeSmollLeft"> <div className="stretchAndBetween strokeSmollLeft">

66
src/components/eventButton.js
View File

@ -1,20 +1,13 @@
import React from "react"; import React from "react";
import {
getOrchestratorInfo
} from "../actions/livepeer";
import { useDispatch } from 'react-redux';
import Block from "./BlockViewer"; import Block from "./BlockViewer";
import EventButtonAddress from "./eventButtonAddress";
/// Displays a single event. Sets selected Orchestrator info in the redux store /// Displays a single event. Sets selected Orchestrator info in the redux store
const EventButton = (obj) => { const EventButton = (obj) => {
const dispatch = useDispatch();
let eventTo; let eventTo;
let eventFrom; let eventFrom;
let eventCaller; let eventCaller;
let eventRightAddr;
if (obj.eventObj.eventFrom === "0x0000000000000000000000000000000000000000") { if (obj.eventObj.eventFrom === "0x0000000000000000000000000000000000000000") {
obj.eventObj.eventFrom = ""; obj.eventObj.eventFrom = "";
} }
@ -24,52 +17,16 @@ const EventButton = (obj) => {
if (obj.eventObj.eventTo || obj.eventObj.eventFrom || obj.eventObj.eventCaller) { if (obj.eventObj.eventTo || obj.eventObj.eventFrom || obj.eventObj.eventCaller) {
if (obj.eventObj.eventTo) { if (obj.eventObj.eventTo) {
eventTo = eventTo =
<div className="rowAlignLeft" style={{ width: '100%', margin: 0 }}> <EventButtonAddress name="To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;" address={obj.eventObj.eventTo} />
<a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventTo}>
<img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
</a>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventTo) }} >
<span className="elipsText">🔎</span>
</button>
<span>To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;</span>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventTo)) }} >
<span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventTo}</span>
</button>
</div>
} }
if (obj.eventObj.eventFrom) { if (obj.eventObj.eventFrom) {
eventFrom = eventFrom =
<div className="rowAlignLeft" style={{ width: '100%', margin: 0 }}> <EventButtonAddress name="From&nbsp;&nbsp;:&nbsp;" address={obj.eventObj.eventFrom} />
<a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventFrom}>
<img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
</a>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventFrom) }} >
<span className="elipsText">🔎</span>
</button>
<span>From&nbsp;&nbsp;:&nbsp;</span>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventFrom)) }}>
<span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventFrom}</span>
</button>
</div >
} }
if (obj.eventObj.eventCaller) { if (obj.eventObj.eventCaller) {
eventCaller = eventCaller =
<div className="rowAlignLeft" style={{ width: '100%', margin: 0 }}> <EventButtonAddress name="Caller&nbsp;:&nbsp;" address={obj.eventObj.eventCaller} />
<a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
<img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
</a>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.eventObj.eventCaller) }} >
<span className="elipsText">🔎</span>
</button>
<span>Caller&nbsp;:&nbsp;</span>
<button className="selectOrch" style={{ margin: 0, padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventCaller)) }} >
<span className="elipsText elipsOnMobileExtra">{obj.eventObj.eventCaller}</span>
</button>
</div>
} }
eventRightAddr = <div className="strokeSmollLeft" style={{ width: 'unset', padding: 0, margin: 0 }}>
</div>
} }
let blockNumber; let blockNumber;
@ -78,24 +35,29 @@ const EventButton = (obj) => {
} }
return ( return (
<div className="stroke" style={{ width: '100%', padding: '0', margin: 0, marginBottom: '1.0em' }}> <div className="strokeSmollLeft">
{blockNumber} {blockNumber}
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: obj.eventObj.eventColour, boxShadow: "5px 8px 5px 4px " + obj.eventObj.eventColour, padding: '0', margin: 0, width: '100%' }}> <div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: obj.eventObj.eventColour, opacity: 0.9, border: '0.1em solid rgba(54, 46, 46, 0.1)', boxShadow: "4px 2px 3px 2px rgba(54, 46, 46, 0.1)" }}>
<div className="rowAlignLeft" style={{ marginTop: '0.5em' }}> <div className="halfVerticalDivider" />
<div className="rowAlignLeft">
{eventCaller} {eventCaller}
</div> </div>
<div className="row" style={{marginBottom: '0.5em', marginTop: '0.5em'}}> <div className="halfVerticalDivider" />
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch' ,maxWidth: '61.8%', 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)" }}> <div className="row">
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: obj.eventObj.eventColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
{obj.eventObj.eventDescription} {obj.eventObj.eventDescription}
</div> </div>
</div> </div>
<div className="halfVerticalDivider" />
<div className="rowAlignLeft"> <div className="rowAlignLeft">
{eventFrom} {eventFrom}
</div> </div>
<div className="rowAlignLeft"> <div className="rowAlignLeft">
{eventTo} {eventTo}
</div> </div>
<div className="halfVerticalDivider" />
</div> </div>
<div className="halfVerticalDivider" />
</div> </div>
) )
} }

26
src/components/eventButtonAddress.js Normal file
View File

@ -0,0 +1,26 @@
import React from "react";
import {
getOrchestratorInfo
} from "../actions/livepeer";
import { useDispatch } from 'react-redux';
const EventButtonAddress = (obj) => {
const dispatch = useDispatch();
return (
<div className="rowAlignLeft" style={{ width: '100%' }}>
<a className="selectOrch" style={{ cursor: 'alias' }} rel="noopener noreferrer" target="_blank" href={"https://explorer.livepeer.org/accounts/" + obj.address}>
<img alt="" src="livepeer.png" width="20em" height="20em" style={{ margin: 0 }} />
</a>
<button className="selectOrch" style={{ padding: '0.5em', cursor: 'pointer' }} onClick={() => { obj.setSearchTerm(obj.address) }} >
<span className="elipsText">🔎</span>
</button>
<span>{obj.name}</span>
<button className="selectOrch" style={{ padding: '0.5em', cursor: 'help' }} onClick={() => { dispatch(getOrchestratorInfo(obj.address)) }} >
<span className="elipsText elipsOnMobileExtra">{obj.address}</span>
</button>
</div>
)
}
export default EventButtonAddress;

25
src/components/eventViewer.js
View File

@ -196,18 +196,19 @@ const EventViewer = (obj) => {
let showMoreButton; let showMoreButton;
if (hidden == 0) { if (hidden == 0) {
showMoreButton = showMoreButton =
<div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}> <div className="row">
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", backgroundColor: greyColour, padding: 0, margin: 0, width: '100%' }}> <div className="strokeSmollLeft" style={{ width: '100%' }}>
<p className="row withWrap" style={{ maxWidth: '600px' }}> <p className="row buttonPadding" style={{ borderRadius: "1.2em", backgroundColor: greyColour, maxWidth: '600px' }}>
☑️ Reached end of results ☑️ Reached end of results
</p> </p>
</div> </div>
</div> </div>
} else { } else {
showMoreButton = showMoreButton =
<div className="stroke" style={{ width: '100%', padding: 0, margin: 0, marginBottom: '2em', marginTop: '2em' }}> <div className="row">
<div className="strokeSmollLeft" style={{ borderRadius: "1.2em", padding: 0, margin: 0, width: '100%' }}> <div className="strokeSmollLeft" style={{ width: '100%' }}>
<button className="row nonHomeButton buttonPadding" style={{ backgroundColor: greyColour }} onClick={() => { <button className="row nonHomeButton buttonPadding" style={{ borderRadius: "1.2em", backgroundColor: greyColour, maxWidth: '600px' }}
onClick={() => {
obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown); obj.setMaxAmount(obj.maxAmount + defaultIncrementMaxShown);
}}> }}>
<h3>🔄 Show More</h3> <h3>🔄 Show More</h3>
@ -219,7 +220,7 @@ const EventViewer = (obj) => {
let filterBit; let filterBit;
if (obj.showFilter) { if (obj.showFilter) {
filterBit = filterBit =
<div className="strokeSmollLeft roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, margin: 0, width: '100%' }}> <div className="strokeSmollLeft roundedOpaque" style={{ borderTopLeftRadius: 0, borderTopRightRadius: 0, borderBottomLeftRadius: 0, width: '100%' }}>
<div className="row"> <div className="row">
<span>Showing {hidden + unfiltered} out of {limitShown} results</span> <span>Showing {hidden + unfiltered} out of {limitShown} results</span>
</div> </div>
@ -229,17 +230,19 @@ const EventViewer = (obj) => {
} }
return ( return (
<div className="strokeSmollLeft" style={{ padding: 0, margin: 0, height: 'calc( 100vh - 50px)' }}> <div className="strokeSmollLeft" style={{ height: 'calc( 100vh - 50px)' }}>
{filterBit} {filterBit}
<div className="row" style={{ padding: 0, margin: 0, width: '100%', height: '100%' }}> <div className="row" style={{ width: '100%', height: '100%' }}>
<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="stroke roundedOpaque onlyVerticalScroll" style={{ width: '40vw', minWidth: '400px', height: 'calc( 100vh - 50px - 2em)', marginTop: '2em' }}>
<div className="content-wrapper" style={{ width: '100%' }}> <div className="content-wrapper" style={{ width: '100%' }}>
<ScrollContainer activationDistance={1} className="overflow-container" <ScrollContainer activationDistance={1} className="overflow-container"
hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}> hideScrollbars={false} onEndScroll={updateOnScroll} ref={listInnerRef}>
<div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}> <div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
<div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} style={{ margin: 0, textAlign: 'center', alignItems: 'center', justifyContent: 'center' }}> <div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} >
{eventList} {eventList}
<div className="verticalDivider" />
{showMoreButton} {showMoreButton}
<div className="verticalDivider" />
</div> </div>
</div> </div>
</ScrollContainer> </ScrollContainer>

2
src/pages/grafana.js
View File

@ -42,7 +42,7 @@ const Grafana = (obj) => {
</div> </div>
<div className="verticalDivider"/> <div className="verticalDivider"/>
<div className="stroke" > <div className="stroke" >
<div className="flexContainer"> <div className="flexContainer makeItWide">
<div className="stroke"> <div className="stroke">
<div className="stroke roundedOpaque"> <div className="stroke roundedOpaque">
<div className="verticalDivider"/> <div className="verticalDivider"/>

20
src/style.css
View File

@ -239,6 +239,12 @@ svg {
align-items: stretch; align-items: stretch;
} }
.halfVerticalDivider {
height: 10px;
display: flex;
align-items: stretch;
}
.smallVerticalDivider { .smallVerticalDivider {
height: 5px; height: 5px;
display: flex; display: flex;
@ -254,7 +260,10 @@ svg {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: row; flex-direction: row;
width: auto; }
.makeItWide {
width: 50vw;
} }
.forceVertical { .forceVertical {
@ -500,6 +509,11 @@ svg {
padding-right: 1em; padding-right: 1em;
} }
.onlyVerticalScroll {
overflow-y: auto;
overflow-x: hidden;
}
.noCursor { .noCursor {
cursor: default; cursor: default;
@ -514,8 +528,8 @@ svg {
} }
.roundedOpaqueDark { .roundedOpaqueDark {
background-color: rgba(17, 18, 23, 0.95); background-color: rgba(5, 5, 10, 0.95);
box-shadow: 9px 13px 18px 8px rgba(20, 20, 19, 0.692); box-shadow: 9px 13px 18px 8px rgba(5, 5, 10, 0.6);
box-sizing: border-box; box-sizing: border-box;
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border-radius: 1em; border-radius: 1em;