From ac796e0fdbdac2672fa400525a88a67f3079aab7 Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Fri, 22 Apr 2022 11:49:15 +0200
Subject: [PATCH] ens, 3box avatar placement

---
 src/components/OrchAddressViewer.js  | 15 +++++++++------
 src/components/eventButtonAddress.js | 15 +++++++++------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/OrchAddressViewer.js b/src/components/OrchAddressViewer.js
index 6e32f9c..5c00821 100644
--- a/src/components/OrchAddressViewer.js
+++ b/src/components/OrchAddressViewer.js
@@ -77,13 +77,13 @@ const Address = (obj) => {
     thisName = thisInfo.domain;
     if (thisInfo.avatar) {
       thisIcon =
-        <a className="selectOrchLight" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + thisInfo.domain + "/details"} >
-          <img alt="" src={thisInfo.avatar.url} width="20em" height="20em" />
+        <a className="selectOrchLight" style={{ marginRight: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + thisInfo.domain + "/details"} >
+          <img alt="" src={thisInfo.avatar.url} width="20em" height="20em" style={{ margin: '0.2em', padding: '0.2em' }}  />
         </a >
     } else {
       thisIcon =
-        <a className="selectOrchLight" style={{ padding: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + thisInfo.domain + "/details"} >
-          <img alt="" src="ens.png" width="20em" height="20em" />
+        <a className="selectOrchLight" style={{ marginRight: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + thisInfo.domain + "/details"} >
+          <img alt="" src="ens.png" width="20em" height="20em" style={{ margin: '0.2em', padding: '0.2em' }}  />
         </a >
     }
   } else if (hasThreeBox) {
@@ -93,7 +93,10 @@ const Address = (obj) => {
       thisName = <span className="elipsText elipsOnMobileExtra">{obj.address}</span>;
     }
     if (thisInfo.image) {
-      thisIcon = <img alt="" src={"https://cloudflare-ipfs.com/ipfs/" + thisInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
+      thisIcon =
+        <a className="selectOrch" style={{ marginRight: '0.5em', cursor: 'grab'}} disabled>
+          <img alt="" src={"https://cloudflare-ipfs.com/ipfs/" + thisInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
+        </a >
     } else {
       thisIcon = null;
     }
@@ -108,7 +111,7 @@ const Address = (obj) => {
         <img alt="" src="livepeer.png" width="20em" height="20em" />
       </a>
       {thisIcon}
-      <span className="elipsText elipsOnMobile">{thisName}</span>
+      <span className="elipsText elipsOnMobileExtra">{thisName}</span>
     </div>
   )
 }
diff --git a/src/components/eventButtonAddress.js b/src/components/eventButtonAddress.js
index dee93df..82dd792 100644
--- a/src/components/eventButtonAddress.js
+++ b/src/components/eventButtonAddress.js
@@ -11,7 +11,7 @@ const EventButtonAddress = (obj) => {
   const [hasThreeBoxRefreshed, setThreeBoxRefresh] = useState(false);
   const [orchInfo, setOrchInfo] = useState(null);
   const now = new Date().getTime();
-  
+
   useEffect(() => {
     let thisInfo = null;
     let thisDomain = null;
@@ -87,7 +87,7 @@ const EventButtonAddress = (obj) => {
         }
       }
     }
-    if (thisInfo && thisInfo != orchInfo){
+    if (thisInfo && thisInfo != orchInfo) {
       console.log("Setting INFO obj");
       setOrchInfo(thisInfo);
     }
@@ -113,7 +113,7 @@ const EventButtonAddress = (obj) => {
       shouldUpdate = true;
     }
     // Preload Orch info
-    if (shouldUpdate){
+    if (shouldUpdate) {
       console.log("Refresh due to non-existing orch in global state");
       getOrchestratorInfoSilent(obj.address);
     }
@@ -125,8 +125,8 @@ const EventButtonAddress = (obj) => {
     thisName = <h4 className="elipsText elipsOnMobileExtra">{orchInfo.domain}</h4>;
     if (orchInfo.avatar) {
       thisIcon =
-        <a className="selectOrch" style={{ padding: '0', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + orchInfo.domain + "/details"} >
-          <img alt="" src={orchInfo.avatar.url} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
+        <a className="selectOrch" style={{ marginRight: '0.2em', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + orchInfo.domain + "/details"} >
+          <img alt="" src={orchInfo.avatar.url} width="20em" height="20em" style={{ margin: '0.2em', padding: '0.2em' }} />
         </a >
     }
   } else if (orchInfo && (orchInfo.name || orchInfo.image)) {
@@ -136,7 +136,10 @@ const EventButtonAddress = (obj) => {
       thisName = <span className="elipsText elipsOnMobileExtra">{obj.address}</span>;
     }
     if (orchInfo.image) {
-      thisIcon = <img alt="" src={"https://cloudflare-ipfs.com/ipfs/" + orchInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
+      thisIcon =
+        <a className="selectOrch" style={{ marginRight: '0.5em', cursor: 'grab'}} disabled>
+          <img alt="" src={"https://cloudflare-ipfs.com/ipfs/" + orchInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} style={{ margin: 0, padding: 0 }} />
+        </a >
     } else {
       thisIcon = null;
     }