From 673ec3265e60609d4c0273e0a2621a47b577eeb1 Mon Sep 17 00:00:00 2001 From: Marco van Dijk Date: Sat, 23 Apr 2022 02:08:11 +0200 Subject: [PATCH] Lots of formatting fixes --- src/components/BlockViewer.js | 8 +- src/components/MonthlyGraphs.js | 36 ++--- src/components/OrchDelegatorViewer.js | 2 +- src/components/eventButton.js | 48 +++--- src/components/eventButtonAddress.js | 38 +++-- src/components/eventViewer.js | 13 +- src/pages/MonthlyStats.js | 4 +- src/pages/stats.js | 222 +++++++++++++------------- src/style.css | 41 ++++- 9 files changed, 229 insertions(+), 183 deletions(-) diff --git a/src/components/BlockViewer.js b/src/components/BlockViewer.js index b8cc510..9c0d6e1 100644 --- a/src/components/BlockViewer.js +++ b/src/components/BlockViewer.js @@ -6,14 +6,14 @@ const Block = (obj) => { dateObj.setUTCSeconds(thisEpoch); const [thisDate, thisTime] = dateObj.toISOString().split('T'); return ( -
- +
+ - +

🔗

 - + UTC ðŸ“…{thisDate} - {thisTime.split('.')[0]}
diff --git a/src/components/MonthlyGraphs.js b/src/components/MonthlyGraphs.js index f0b6b88..4f322fe 100644 --- a/src/components/MonthlyGraphs.js +++ b/src/components/MonthlyGraphs.js @@ -98,11 +98,11 @@ const MonthlyGraphs = (obj) => { { fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5 }, labels: { - fontSize: 16, zIndex: 999 + fontSize: 24, zIndex: 999 } }} labelPosition="centroid" @@ -180,11 +180,11 @@ const MonthlyGraphs = (obj) => { { fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5 }, labels: { - fontSize: 16, zIndex: 999 + fontSize: 24, zIndex: 999 } }} labelPosition="centroid" @@ -265,11 +265,11 @@ const MonthlyGraphs = (obj) => { { fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5 }, labels: { - fontSize: 16, zIndex: 999 + fontSize: 24, zIndex: 999 } }} labelPosition="centroid" diff --git a/src/components/OrchDelegatorViewer.js b/src/components/OrchDelegatorViewer.js index 15128f0..abfd566 100644 --- a/src/components/OrchDelegatorViewer.js +++ b/src/components/OrchDelegatorViewer.js @@ -52,7 +52,7 @@ const OrchDelegatorViewer = (obj) => {
-

{idx}

+

{idx + 1}

diff --git a/src/components/eventButton.js b/src/components/eventButton.js index d52286c..21cf5e8 100644 --- a/src/components/eventButton.js +++ b/src/components/eventButton.js @@ -122,15 +122,15 @@ const EventButton = (obj) => { if (eventTo || eventFrom || eventCaller) { if (eventTo) { eventTo = - + } if (eventFrom) { eventFrom = - + } if (eventCaller) { eventCaller = - + } } @@ -140,27 +140,31 @@ const EventButton = (obj) => { } return ( -
- {blockNumber} -
-
-
- {eventCaller} -
-
-
-
- {eventDescription} +
+
+ {blockNumber} +
+
+
+
+ {eventCaller} +
+
+
+
+ {eventDescription} +
+
+
+
+
+ {eventFrom} +
+
+ {eventTo} +
-
-
- {eventFrom} -
-
- {eventTo} -
-
diff --git a/src/components/eventButtonAddress.js b/src/components/eventButtonAddress.js index 7dce464..2989c3a 100644 --- a/src/components/eventButtonAddress.js +++ b/src/components/eventButtonAddress.js @@ -3,6 +3,7 @@ import { getOrchestratorInfo, getEnsInfo, getThreeBoxInfo, setCachedOrch, getOrchestratorInfoSilent } from "../actions/livepeer"; import { useDispatch, useSelector } from 'react-redux'; +import { Text } from '@mantine/core'; const EventButtonAddress = (obj) => { const dispatch = useDispatch(); @@ -122,44 +123,48 @@ const EventButtonAddress = (obj) => { let thisName; let thisIcon; if (orchInfo && orchInfo.domain) { - thisName =

{orchInfo.domain}

; + thisName = {orchInfo.domain}; if (orchInfo.avatar) { thisIcon = - - + + } } else if (orchInfo && (orchInfo.name || orchInfo.image)) { if (orchInfo.name) { - thisName =

{orchInfo.name}

; + thisName = {orchInfo.name}; } else { - thisName = {obj.address}; + thisName = {obj.address}; } if (orchInfo.image) { thisIcon = - - + + } else { thisIcon = null; } } else { - thisName = {obj.address}; + thisName = {obj.address}; thisIcon = null; } return ( -
- +
+ - - {obj.name} {thisIcon} - +
) } diff --git a/src/components/eventViewer.js b/src/components/eventViewer.js index 1101502..40c05d6 100644 --- a/src/components/eventViewer.js +++ b/src/components/eventViewer.js @@ -453,15 +453,14 @@ const EventViewer = (obj) => { searchTerm={obj.searchTerm} setSearchTerm={obj.setSearchTerm} />
} - return (
{filterBit}
- -
+ +
{ @@ -471,9 +470,9 @@ const EventViewer = (obj) => { return (
-
-

{idx}

-
+ {/*
+

{idx + 1}

+
*/}
{delObj}
@@ -533,7 +532,7 @@ const EventViewer = (obj) => {
- +
diff --git a/src/pages/MonthlyStats.js b/src/pages/MonthlyStats.js index 17e4a61..b3b8117 100644 --- a/src/pages/MonthlyStats.js +++ b/src/pages/MonthlyStats.js @@ -13,7 +13,7 @@ const MonthlyStats = (obj) => { } else if (activePage == 2) { thisColour = "indigo"; } else if (activePage == 3) { - thisColour = "red"; + thisColour = "gray"; } return ( @@ -98,7 +98,7 @@ const MonthlyStats = (obj) => { data={[ { label: 'Info', value: '1' }, { label: 'Graph', value: '2' }, - { label: 'Score', value: '3' } + { label: 'Fees', value: '3' } ]} />
diff --git a/src/pages/stats.js b/src/pages/stats.js index 2be569e..728a6e1 100644 --- a/src/pages/stats.js +++ b/src/pages/stats.js @@ -28,120 +28,116 @@ const Stats = (obj) => {
-
-
-
-
-
-
-
-
- - { - livepeer.monthlyStats.slice(0).reverse().map(function (data, i) { - let thisMonth = ""; - let monthAsNum = data.month; - if (monthAsNum == 0) { - thisMonth = "Januari";; - } else if (monthAsNum == 1) { - thisMonth = "Februari";; - } else if (monthAsNum == 2) { - thisMonth = "March";; - } else if (monthAsNum == 3) { - thisMonth = "April"; - } else if (monthAsNum == 4) { - thisMonth = "May"; - } else if (monthAsNum == 5) { - thisMonth = "June"; - } else if (monthAsNum == 6) { - thisMonth = "July"; - } else if (monthAsNum == 7) { - thisMonth = "August"; - } else if (monthAsNum == 8) { - thisMonth = "September"; - } else if (monthAsNum == 9) { - thisMonth = "October"; - } else if (monthAsNum == 10) { - thisMonth = "November"; - } else if (monthAsNum == 11) { - thisMonth = "December";; - } - - const title = data.year + "-" + thisMonth + ": " + data.winningTicketsReceived.length + " orchestrators earned " + data.winningTicketsReceivedSum.toFixed(2) + " Eth"; - - return ( - - - - ) - }) +
+
+
+
+
+
+ -
-
+ }, + itemOpened: { padding: 0, width: '100%', alignItems: 'stretch' }, + itemTitle: { + color: 'rgba(218, 218, 218, 0.9)', + padding: 0, width: '100%', + }, + control: { + color: 'rgba(218, 218, 218, 0.9)', + padding: 0, margin: 0, height: '100%', + backgroundColor: 'rgba(56, 56, 56, 0.8)', + boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)', + color: 'black', + border: 'none', + '&:hover': { + color: 'black', + backgroundColor: 'rgba(56, 56, 56, 0.9)', + }, + '&': { + color: 'black', + backgroundColor: 'rgba(56, 56, 56, 0.8)', + border: 'none', + } + }, + label: { + color: 'rgba(218, 218, 218, 0.9)', + padding: '1em', width: '100%', + backgroundColor: 'rgba(56, 56, 56, 0.8)', + boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)' + }, + icon: { + padding: '0.2em', margin: '0.2em', + }, + content: { + padding: 0, alignItems: 'stretch', width: '100%', height: '100%', + backgroundColor: 'rgba(56, 56, 56, 0.3)', + boxShadow: 'inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05)' + }, + contentInner: { padding: 0, width: '100%', height: '100%' }, + }}> + { + livepeer.monthlyStats.slice(0).reverse().map(function (data, i) { + let thisMonth = ""; + let monthAsNum = data.month; + if (monthAsNum == 0) { + thisMonth = "Januari";; + } else if (monthAsNum == 1) { + thisMonth = "Februari";; + } else if (monthAsNum == 2) { + thisMonth = "March";; + } else if (monthAsNum == 3) { + thisMonth = "April"; + } else if (monthAsNum == 4) { + thisMonth = "May"; + } else if (monthAsNum == 5) { + thisMonth = "June"; + } else if (monthAsNum == 6) { + thisMonth = "July"; + } else if (monthAsNum == 7) { + thisMonth = "August"; + } else if (monthAsNum == 8) { + thisMonth = "September"; + } else if (monthAsNum == 9) { + thisMonth = "October"; + } else if (monthAsNum == 10) { + thisMonth = "November"; + } else if (monthAsNum == 11) { + thisMonth = "December";; + } + + const title = data.year + "-" + thisMonth + ": " + data.winningTicketsReceived.length + " orchestrators earned " + data.winningTicketsReceivedSum.toFixed(2) + " Eth"; + + return ( + + + + ) + }) + } +
diff --git a/src/style.css b/src/style.css index 30a63ba..78d1afa 100644 --- a/src/style.css +++ b/src/style.css @@ -70,7 +70,7 @@ p { /* width */ ::-webkit-scrollbar { - width: 10px; + width: 15px; border-radius: 10px; } @@ -228,6 +228,42 @@ svg { border-radius: 1em; } +.infoBar { + cursor: default; + text-align: start; + padding: 0; + margin: 0; + user-select: text; + font-size: small; + color: rgba(15, 15, 15, 0.8750); + background-color: rgba(192, 188, 202, 0.335); + -webkit-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.2); + -moz-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.2); + box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.2); + display: flex; + flex-direction: row; + height: 100%; + width: 100%; + border-radius: 0.5em; +} + +.infoContainer { + cursor: default; + text-align: start; + padding: 0; + margin: 0; + user-select: text; + font-size: small; + color: rgba(15, 15, 15, 0.8750); + background: rgba(2, 0, 36, 0.5); + background: linear-gradient(120deg, rgba(4, 3, 24, 0.10) 0%, rgba(78, 78, 85, 0.05) 35%, rgba(49, 79, 85, 0.10) 100%); + display: flex; + flex-direction: row; + height: 100%; + width: 100%; + border-radius: 0.5em; +} + .insetEffect { background-color: rgba(206, 206, 206, 0.26); -webkit-box-shadow: inset 3px 3px 12px 2px rgba(62, 62, 104, 0.05); @@ -576,6 +612,9 @@ svg { text-shadow: 0.5px 0.5px 0.8px #9493aa; background-color: transparent; border: none; + justify-content: center; + align-items: center; + display: flex; } .selectOrch:hover, .selectOrch a:hover{