From 488b8c47ab5bed77397a35ce72017792a9974236 Mon Sep 17 00:00:00 2001 From: Marco van Dijk Date: Sun, 13 Mar 2022 00:27:55 +0100 Subject: [PATCH] New colours --- package.json | 1 - src/actions/livepeer.js | 42 +++++++++---------- src/components/OrchAddressViewer.js | 8 +--- src/components/OrchDelegatorViewer.js | 6 +-- src/components/OrchInfoViewer.js | 6 +-- src/components/eventButton.js | 14 +++---- src/components/eventViewer.js | 60 +++++++++++++-------------- src/pages/livepeer.js | 6 +-- src/style.css | 59 +++++++++++++------------- 9 files changed, 96 insertions(+), 106 deletions(-) diff --git a/package.json b/package.json index 6363c3c..c185bc0 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "react-retro-hit-counter": "^1.0.1", "react-router-dom": "^6.0.2", "react-scripts": "3.2.0", - "react-tooltip": "^4.2.21", "redux": "^4.1.2", "redux-thunk": "^2.4.1", "styled-components": "^5.3.3" diff --git a/src/actions/livepeer.js b/src/actions/livepeer.js index 5032efc..10ae72e 100644 --- a/src/actions/livepeer.js +++ b/src/actions/livepeer.js @@ -1,16 +1,16 @@ import * as apiUtil from "../util/livepeer"; import { receiveErrors } from "./error"; -const activationColour = "rgba(23, 60, 122, 0.3)"; -const rewardColour = "rgba(20, 99, 29, 0.3)"; -const updateColour = "rgba(122, 63, 23, 0.3)"; -const withdrawStakeColour = "rgba(115, 110, 22, 0.3)"; -const stakeColour = "rgba(56, 23, 122, 0.3)"; -const unbondColour = "rgba(122, 23, 51, 0.3)"; -const claimColour = "rgba(77, 91, 42, 0.3)"; +const claimColour = "rgba(25, 158, 29, 0.3)"; +const stakeColour = "rgba(25, 158, 147, 0.3)"; +const ticketRedeemColour = "rgba(25, 98, 158, 0.3)"; +const rewardColour = "rgba(25, 27, 158, 0.3)"; +const unbondColour = "rgba(105, 25, 158, 0.3)"; +const updateColour = "rgba(158, 25, 52, 0.3)"; +const withdrawStakeColour = "rgba(158, 98, 25, 0.3)"; +const activationColour = "rgba(154, 158, 25, 0.3)"; const ticketTransferColour = "rgba(88, 91, 42, 0.3)"; -const ticketRedeemColour = "rgba(42, 44, 91, 0.3)"; const thresholdStaking = 0.001; const thresholdFees = 0.00009; @@ -117,16 +117,16 @@ export const getEvents = () => async dispatch => { eventFrom = ""; eventTo = ""; if (eventContainsBond) { - eventDescription = "activated with a self stake of " + tmpAmount.toFixed(2) + " LPT and will become active in round " + tmpWhen; + eventDescription = "🚀activated with a self stake of " + tmpAmount.toFixed(2) + " LPT and will become active in round " + tmpWhen; } else { - eventDescription = "reactivated and will become active in round " + tmpWhen; + eventDescription = "🚀reactivated and will become active in round " + tmpWhen; } } // Lone Unbond => Unbond Event else if (eventContainsUnbond) { eventType = "Unbond"; eventColour = unbondColour; - eventDescription = "unbonded " + tmpAmount.toFixed(2) + " LPT starting from round " + tmpWhen; + eventDescription = "❌unbonded " + tmpAmount.toFixed(2) + " LPT starting from round " + tmpWhen; } // Lone Bond => Stake Event @@ -138,18 +138,18 @@ export const getEvents = () => async dispatch => { else if (eventContainsRebond) { eventType = "Stake"; eventColour = stakeColour; - eventDescription = "is now staking " + tmpAmount.toFixed(2) + " LPT"; + eventDescription = "⌛is now staking " + tmpAmount.toFixed(2) + " LPT"; } // Fill description of Stake Event if it wasn't set yet if (eventType === "Stake" && eventDescription === "") { if (eventFrom === "0x0000000000000000000000000000000000000000") { - eventDescription = "staked " + tmpAmount.toFixed(2) + " LPT"; + eventDescription = "⌛staked " + tmpAmount.toFixed(2) + " LPT"; } else if (eventFrom === eventTo) { eventFrom = ""; - eventDescription = "is now staking " + tmpAmount.toFixed(2) + " LPT"; + eventDescription = "⌛is now staking " + tmpAmount.toFixed(2) + " LPT"; } else { - eventDescription = "moved a " + tmpAmount.toFixed(2) + " LPT stake"; + eventDescription = "⌛moved a " + tmpAmount.toFixed(2) + " LPT stake"; } } // If we have an eventType at this point, we have a completed Event from the previous transaction @@ -199,7 +199,7 @@ export const getEvents = () => async dispatch => { if (amount < thresholdFees) { continue; } - const txt = " withdrew a " + amount.toFixed(2) + " LPT stake in round " + eventObj.data.withdrawRound; + const txt = "🏦withdrew a " + amount.toFixed(2) + " LPT stake in round " + eventObj.data.withdrawRound; finalEventList.push({ eventType: "Withdraw", eventDescription: txt, @@ -218,7 +218,7 @@ export const getEvents = () => async dispatch => { if (amount < thresholdFees) { continue; } - const txt = " withdrew " + amount.toFixed(2) + " LPT earned fees"; + const txt = "🏦withdrew " + amount.toFixed(2) + " LPT earned fees"; finalEventList.push({ eventType: "Withdraw", eventDescription: txt, @@ -238,7 +238,7 @@ export const getEvents = () => async dispatch => { eventContainsTranscoderUpdate = true; const amount1 = parseFloat(eventObj.data.rewardCut) / 10000; const amount2 = 100 - (eventObj.data.feeShare / 10000); - const txt = "changed their reward commission to " + amount1.toFixed(2) + "% and their fee commission to " + amount2.toFixed(2) + "%"; + const txt = "🔄changed their reward commission to " + amount1.toFixed(2) + "% and their fee commission to " + amount2.toFixed(2) + "%"; finalEventList.push({ eventType: "Update", eventDescription: txt, @@ -261,7 +261,7 @@ export const getEvents = () => async dispatch => { if (amount1 < thresholdStaking && amount2 < thresholdFees) { continue; } - let txt = "delegator claimed "; + let txt = "💰delegator claimed "; if (amount1 > thresholdStaking) { txt += amount1.toFixed(2) + " LPT staking rewards"; if (amount2 > thresholdFees) { @@ -290,7 +290,7 @@ export const getEvents = () => async dispatch => { else if (eventObj.name === "Reward") { eventContainsReward = true; const amount1 = parseFloat(eventObj.data.amount) / 1000000000000000000; - let txt = "called reward worth " + amount1.toFixed(2) + " LPT"; + let txt = "💸called reward worth " + amount1.toFixed(2) + " LPT"; if (Math.floor(amount1) == 69) { txt += "... Nice!"; } @@ -389,7 +389,7 @@ export const getTickets = () => async dispatch => { // Always split off WithdrawStake as a separate Withdraw Event if (eventObj.name === "WinningTicketRedeemed") { const amount = parseFloat(eventObj.data.faceValue) / 1000000000000000000; - const txt = " redeemed a winning ticket worth " + amount.toFixed(4) + " Eth"; + const txt = "🎟️winning ticket worth " + amount.toFixed(4) + " Eth"; finalTicketList.push({ eventType: "RedeemTicket", eventDescription: txt, diff --git a/src/components/OrchAddressViewer.js b/src/components/OrchAddressViewer.js index c683c4c..5bc6776 100644 --- a/src/components/OrchAddressViewer.js +++ b/src/components/OrchAddressViewer.js @@ -1,18 +1,14 @@ import React from "react"; -import ReactTooltip from "react-tooltip"; const Address = (obj) => { return (
- +
- {obj.address} + {obj.address}
- - {"https://explorer.livepeer.org/accounts/" + obj.address} -
) } diff --git a/src/components/OrchDelegatorViewer.js b/src/components/OrchDelegatorViewer.js index 5ae5f59..2121f17 100644 --- a/src/components/OrchDelegatorViewer.js +++ b/src/components/OrchDelegatorViewer.js @@ -12,12 +12,12 @@ const OrchDelegatorViewer = (obj) => {

{delegators.length} Current Delegators

- -
+ +
{ delegators.map((delObj, idx) => { return ( -
+

{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}

diff --git a/src/components/OrchInfoViewer.js b/src/components/OrchInfoViewer.js index e908ce9..d008730 100644 --- a/src/components/OrchInfoViewer.js +++ b/src/components/OrchInfoViewer.js @@ -1,6 +1,5 @@ import React from "react"; import Stat from "./statViewer"; -import ReactTooltip from "react-tooltip"; import Address from "./OrchAddressViewer"; function updateClipboard(newClip) { @@ -88,14 +87,11 @@ const OrchInfoViewer = (obj) => {
- - - Copy to clipboard -
diff --git a/src/components/eventButton.js b/src/components/eventButton.js index 78e3f60..1d76f3b 100644 --- a/src/components/eventButton.js +++ b/src/components/eventButton.js @@ -24,14 +24,14 @@ const EventButton = (obj) => { if (obj.eventObj.eventTo || obj.eventObj.eventFrom || obj.eventObj.eventCaller) { if (obj.eventObj.eventTo) { eventTo = -
+
- To        : + To        :  @@ -39,14 +39,14 @@ const EventButton = (obj) => { } if (obj.eventObj.eventFrom) { eventFrom = -
+
- From  : + From  :  @@ -54,14 +54,14 @@ const EventButton = (obj) => { } if (obj.eventObj.eventCaller) { eventCaller = -
+
- Caller : + Caller :  @@ -86,7 +86,7 @@ const EventButton = (obj) => {

- 💬 {obj.eventObj.eventDescription} + {obj.eventObj.eventDescription}

diff --git a/src/components/eventViewer.js b/src/components/eventViewer.js index a90a393..5450d22 100644 --- a/src/components/eventViewer.js +++ b/src/components/eventViewer.js @@ -5,15 +5,15 @@ import Filter from './filterComponent'; import ReactPaginate from 'react-paginate'; /// A scrollable and filterable list of EventButtons -const activationColour = "rgba(23, 60, 122, 0.3)"; -const rewardColour = "rgba(20, 99, 29, 0.3)"; -const updateColour = "rgba(122, 63, 23, 0.3)"; -const withdrawStakeColour = "rgba(115, 110, 22, 0.3)"; -const stakeColour = "rgba(71, 23, 122, 0.3)"; -const claimColour = "rgba(77, 91, 42, 0.3)"; -const unbondColour = "rgba(122, 23, 51, 0.3)"; -const ticketRedeemColour = "rgba(42, 44, 91, 0.3)"; -const greyColour = "rgba(122, 128, 127, 0.3)"; +const claimColour = "rgba(25, 158, 29, 0.4)"; +const stakeColour = "rgba(25, 158, 147, 0.4)"; +const ticketRedeemColour = "rgba(25, 98, 158, 0.4)"; +const rewardColour = "rgba(25, 27, 158, 0.4)"; +const unbondColour = "rgba(105, 25, 158, 0.4)"; +const updateColour = "rgba(158, 25, 52, 0.4)"; +const withdrawStakeColour = "rgba(158, 98, 25, 0.4)"; +const activationColour = "rgba(154, 158, 25, 0.4)"; +const greyColour = "rgba(122, 128, 127, 0.4)"; const defaultIncrementMaxShown = 100; @@ -244,16 +244,31 @@ const EventViewer = (obj) => {
- + + + - - - -
diff --git a/src/pages/livepeer.js b/src/pages/livepeer.js index 4c02291..4e67da6 100644 --- a/src/pages/livepeer.js +++ b/src/pages/livepeer.js @@ -76,16 +76,16 @@ const Livepeer = (obj) => { }}>

🏠

-

{headerString}

+

{headerString}

-

Sidebar

setShowSidebar(!showSidebar)}> diff --git a/src/style.css b/src/style.css index 2cb31c7..9af82bf 100644 --- a/src/style.css +++ b/src/style.css @@ -42,9 +42,9 @@ code, pre{ } h2, h3, h1, h4, h5, h6 { - text-shadow: 0.5px 0.5px 0.8px #948dff; + text-shadow: 0.5px 0.5px 0.8px #9493aa; color: #1a1b26; - cursor: default; + cursor: inherit; text-align: center; justify-content: center; align-items: center; @@ -61,7 +61,7 @@ h2, h3, h1, h4, h5, h6 { } p { - text-shadow: 0.5px 0.5px 0.8px #948dff; + text-shadow: 0.5px 0.5px 0.8px #9493aa; color: #1a1b26; font-size: 1.2em; margin: 0.3em; @@ -75,19 +75,19 @@ p { /* Track */ ::-webkit-scrollbar-track { - background-color: rgba(146, 144, 196, 0.9); + background-color: rgba(61, 61, 66, 0.3); border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { - background-color: rgba(51, 50, 78, 0.9); + background-color: rgba(44, 44, 46, 0.7); border-radius: 10px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { - background-color: rgba(25, 25, 59, 0.9); + background-color: rgba(35, 35, 39, 0.9); } #dvdlogo { @@ -145,7 +145,7 @@ svg { height: 50px; display: flex; align-items: center; - background-color: rgba(180, 175, 252, 0.80); + background-color: rgba(214, 214, 214, 0.80); } #bodyContent { height: calc( 100vh - 50px); @@ -155,9 +155,9 @@ svg { overflow: hidden; } #sideContent { - background-color: rgba(180, 175, 252, 0.80); + background-color: rgba(214, 214, 214, 0.8); backdrop-filter: blur(6px); - box-shadow: 9px 13px 8px 8px rgba(8, 7, 56, 0.692); + box-shadow: 9px 13px 8px 8px rgba(27, 23, 19, 0.692); border-bottom-right-radius: 1em; width: 400px; overflow-y: auto; @@ -187,7 +187,7 @@ svg { } .lightText { - color: rgba(162, 161, 255, 0.5); + color: rgba(176, 175, 218, 0.7); } .darkText { @@ -205,7 +205,7 @@ svg { user-select: text; font-size: small; color: rgba(15, 15, 15, 0.8750); - background-color: rgba(148, 154, 184, 0.8); + background-color: rgba(206, 206, 206, 0.8); -webkit-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2); -moz-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2); box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2); @@ -328,8 +328,8 @@ svg { padding: 8px; border: 0; border-radius: 5px; - background-color: rgba(163, 161, 255, 0.9); - box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692); + background-color: rgba(157, 157, 158, 0.9); + box-shadow: 4px 5px 3px 2px rgba(20, 20, 19, 0.692); text-align: center; justify-content: center; align-items: center; @@ -339,7 +339,7 @@ svg { backdrop-filter: blur(6px); } .waveButton:hover { - background-color: rgba(122, 121, 207, 0.9); + background-color: rgba(192, 195, 200, 0.8); } .waveButton:disabled { cursor: default; @@ -360,11 +360,11 @@ svg { z-index: 10; } .homeButton:hover { - box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692); + box-shadow: 4px 5px 3px 2px rgba(20, 20, 19, 0.692); backdrop-filter: blur(6px); } .homeButton:active { - box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692); + box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692); } .homeButton:disabled { cursor: default; @@ -385,30 +385,29 @@ svg { margin-bottom: 0.7em; } .nonHomeButton:hover { - box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692); + box-shadow: 4px 5px 3px 2px rgba(20, 20, 19, 0.692); backdrop-filter: blur(6px); } .nonHomeButton:active { - box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692); + box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692); } .active { - box-shadow: inset -4px -5px 6px 4px rgba(8, 7, 56, 0.692); + box-shadow: inset -4px -5px 6px 4px rgba(20, 20, 19, 0.692); } .searchField { margin: auto; display: flex; - background-color: rgba(44, 96, 238, 0.199); + background-color: rgba(107, 111, 122, 0.199); padding: 5px; border-radius: 20px; - color:rgba(8, 7, 56, 0.747); + color:rgba(20, 20, 19, 0.747); } .searchField::placeholder { - color:rgba(8, 7, 56, 0.445); + color:rgba(20, 20, 19, 0.445); } .searchField:focus { outline: none !important; - border:2px solid rgba(49, 13, 134, 0.459); - box-shadow: 0px 0px 3px 2px rgba(53, 118, 138, 0.8); + box-shadow: 0px 0px 3px 2px rgba(99, 109, 112, 0.8); } .main-container { @@ -450,8 +449,8 @@ svg { } .roundedOpaque { - background-color: rgba(180, 175, 252, 0.80); - box-shadow: 9px 13px 18px 8px rgba(8, 7, 56, 0.692); + 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); @@ -479,7 +478,7 @@ svg { } .selectOrch, .selectOrch a{ - text-shadow: 0.5px 0.5px 0.8px #948dff; + text-shadow: 0.5px 0.5px 0.8px #9493aa; background-color: transparent; border: none; } @@ -492,7 +491,7 @@ svg { } .selectOrchLight, .selectOrchLight a{ - text-shadow: 0.5px 0.5px 0.8px #948dff; + text-shadow: 0.5px 0.5px 0.8px #9493aa; background-color: transparent; border: none; } @@ -501,7 +500,7 @@ svg { backdrop-filter: blur(6px); text-decoration: none; cursor: pointer; - background-color: rgba(115, 114, 146, 0.9); + background-color: rgba(187, 187, 187, 0.9); border-radius: 1em; } @@ -541,7 +540,7 @@ svg { } .disabled { - background-color: #384e5c; + background-color: #495258; left: 2px; }