More hover effects

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">

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">

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" />

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);