From b116167f790fcbc35687483605b6e672d25fd38f Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Sat, 5 Mar 2022 18:10:56 +0100
Subject: [PATCH] More hover effects

---
 src/OrchAddressViewer.js  |  4 ++--
 src/grafana.js            |  2 +-
 src/orchestratorViewer.js |  2 +-
 src/style.css             | 40 ++++++++++++++++++++++++++-------------
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/OrchAddressViewer.js b/src/OrchAddressViewer.js
index f5dd125..9e02dff 100644
--- a/src/OrchAddressViewer.js
+++ b/src/OrchAddressViewer.js
@@ -4,10 +4,10 @@ import ReactTooltip from "react-tooltip";
 const Address = (obj) => {
   return (
     <div className="rowAlignLeft" style={{ width: 'unset' }}>
-      <a href={"https://explorer.livepeer.org/accounts/" + obj.address} data-tip data-for={obj.seed} >
+      <a className="selectOrchLight" href={"https://explorer.livepeer.org/accounts/" + obj.address} data-tip data-for={obj.seed} >
         <div className="rowAlignLeft" style={{ width: 'unset' }}>
           <img alt="" src="livepeer.png" width="20" height="20" />
-          {obj.address}
+          <span className="elipsText">{obj.address}</span>
         </div>
       </a>
       <ReactTooltip id={obj.seed} place="top" effect="solid">
diff --git a/src/grafana.js b/src/grafana.js
index 7f6579a..1d6f5d7 100644
--- a/src/grafana.js
+++ b/src/grafana.js
@@ -50,7 +50,7 @@ const Grafana = (obj) => {
                   <p>${lptPrice}</p>
                   <p>({lptPriceChange24h}%)</p>
                 </div>
-                <div className="row">
+                <div className="row selectOrch">
                   <h2> <a href="https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/">Livepeer Orchestrator</a></h2>
                 </div>
                 <div className="row">
diff --git a/src/orchestratorViewer.js b/src/orchestratorViewer.js
index 7c7068f..24ce1b2 100644
--- a/src/orchestratorViewer.js
+++ b/src/orchestratorViewer.js
@@ -91,7 +91,7 @@ const Orchestrator = (obj) => {
             <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="homeButton" data-tip data-for="registerTip" onClick={() => {
+            <button style={{marginBottom:'1em'}} className="selectOrchLight" data-tip data-for="registerTip" onClick={() => {
               copyLink(shareUrl);
             }}>
               <img alt="" src="clipboard.svg" width="20em" height="20em" />
diff --git a/src/style.css b/src/style.css
index 2f90f94..b121843 100644
--- a/src/style.css
+++ b/src/style.css
@@ -50,19 +50,6 @@ h2, h3, h1, h4, h5, h6 {
   width: 100%;
 }
 
-.selectOrch{
-  text-shadow: 0.5px 0.5px 0.8px #948dff;
-  background-color: transparent;
-  border: none;
-}
-
-.selectOrch:hover{
-  text-decoration: none;
-  cursor: pointer;
-  backdrop-filter: blur(6px);
-  border-radius: 1em;
-}
-
 p {
   text-shadow: 0.5px 0.5px 0.8px #948dff;
   color: #1a1b26;
@@ -453,6 +440,33 @@ svg {
   user-select: none;
 }
 
+.selectOrch, .selectOrch a{
+  text-shadow: 0.5px 0.5px 0.8px #948dff;
+  background-color: transparent;
+  border: none;
+}
+
+.selectOrch:hover, .selectOrch a:hover{
+  backdrop-filter: blur(6px);
+  text-decoration: none;
+  cursor: pointer;
+  border-radius: 1em;
+}
+
+.selectOrchLight, .selectOrchLight a{
+  text-shadow: 0.5px 0.5px 0.8px #948dff;
+  background-color: transparent;
+  border: none;
+}
+
+.selectOrchLight:hover, .selectOrchLight a:hover{
+  backdrop-filter: blur(6px);
+  text-decoration: none;
+  cursor: pointer;
+  background-color: rgba(115, 114, 146, 0.9);
+  border-radius: 1em;
+}
+
 @media (max-aspect-ratio: 1/1) {
   .fullGrafana {
     width: calc(100vw - 2em);