From 86fc69f2a012f9b37e1d2d76535162b81c4ca089 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Wed, 4 Jan 2023 08:46:02 +0200
Subject: [PATCH] Minor link adjustments, Account/Address/Referendum (#8684)

---
 .../page-accounts/src/Accounts/Account.tsx    | 18 ++++----
 .../page-addresses/src/Contacts/Address.tsx   | 18 ++++----
 .../src/Referenda/Referendum.tsx              | 33 ++++++++------
 .../react-components/src/LinkExternal.tsx     | 44 +++++++++----------
 4 files changed, 60 insertions(+), 53 deletions(-)

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index d213cdefee..fd5907f8c3 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -741,15 +741,6 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
             withBalance={BAL_OPTS_EXPANDED}
             withExtended={false}
           />
-          <Columar is100>
-            <Columar.Column>
-              <LinkExternal
-                data={address}
-                type='address'
-                withTitle
-              />
-            </Columar.Column>
-          </Columar>
           <Columar size='tiny'>
             <Columar.Column>
               <div data-testid='tags'>
@@ -764,6 +755,15 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
               <CryptoType accountId={address} />
             </Columar.Column>
           </Columar>
+          <Columar is100>
+            <Columar.Column>
+              <LinkExternal
+                data={address}
+                type='address'
+                withTitle
+              />
+            </Columar.Column>
+          </Columar>
         </td>
         <td />
       </tr>
diff --git a/packages/page-addresses/src/Contacts/Address.tsx b/packages/page-addresses/src/Contacts/Address.tsx
index cc58262ee1..74a61ddc2a 100644
--- a/packages/page-addresses/src/Contacts/Address.tsx
+++ b/packages/page-addresses/src/Contacts/Address.tsx
@@ -267,15 +267,6 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
             withBalance={BALANCE_OPTS}
             withExtended={false}
           />
-          <Columar is100>
-            <Columar.Column>
-              <LinkExternal
-                data={address}
-                type='address'
-                withTitle
-              />
-            </Columar.Column>
-          </Columar>
           <Columar size='tiny'>
             <Columar.Column>
               <div data-testid='tags'>
@@ -286,6 +277,15 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
               </div>
             </Columar.Column>
           </Columar>
+          <Columar is100>
+            <Columar.Column>
+              <LinkExternal
+                data={address}
+                type='address'
+                withTitle
+              />
+            </Columar.Column>
+          </Columar>
         </td>
         <td />
       </tr>
diff --git a/packages/page-referenda/src/Referenda/Referendum.tsx b/packages/page-referenda/src/Referenda/Referendum.tsx
index 66210b2a38..1c87c78653 100644
--- a/packages/page-referenda/src/Referenda/Referendum.tsx
+++ b/packages/page-referenda/src/Referenda/Referendum.tsx
@@ -409,13 +409,6 @@ function Referendum (props: Props): React.ReactElement<Props> {
             </Columar>
           )}
           <Columar size='tiny'>
-            <Columar.Column>
-              <LinkExternal
-                data={id}
-                type={palletReferenda}
-                withTitle
-              />
-            </Columar.Column>
             <Columar.Column>
               {submittedIn && (
                 <>
@@ -423,12 +416,6 @@ function Referendum (props: Props): React.ReactElement<Props> {
                   <label>#{formatNumber(submittedIn)}</label>
                 </>
               )}
-              {enactAt && (
-                <>
-                  <h5>{enactAt.at ? t<string>('Enact at') : t<string>('Enact after')}</h5>
-                  <label>{enactAt.at && '#'}{formatNumber(enactAt.blocks)}</label>
-                </>
-              )}
               {nextAlarm && (
                 <>
                   <h5>{t<string>('Next alarm')}</h5>
@@ -436,6 +423,26 @@ function Referendum (props: Props): React.ReactElement<Props> {
                 </>
               )}
             </Columar.Column>
+            <Columar.Column>
+              {enactAt && (
+                <>
+                  <h5>{enactAt.at ? t<string>('Enact at') : t<string>('Enact after')}</h5>
+                  <label>{enactAt.at && '#'}{t<string>('{{blocks}} blocks', { replace: { blocks: formatNumber(enactAt.blocks) } })}</label>
+                </>
+              )}
+            </Columar.Column>
+          </Columar>
+          <Columar
+            is100
+            size='tiny'
+          >
+            <Columar.Column>
+              <LinkExternal
+                data={id}
+                type={palletReferenda}
+                withTitle
+              />
+            </Columar.Column>
           </Columar>
         </td>
         <td />
diff --git a/packages/react-components/src/LinkExternal.tsx b/packages/react-components/src/LinkExternal.tsx
index 7b85c12002..9bc11d8305 100644
--- a/packages/react-components/src/LinkExternal.tsx
+++ b/packages/react-components/src/LinkExternal.tsx
@@ -23,11 +23,7 @@ interface Props {
   withTitle?: boolean;
 }
 
-// function shortName (name: string): string {
-//   return `${name[0]}${name[name.length - 1]}`;
-// }
-
-function genLinks (systemChain: string, { data, hash, isSidebar, isText, type }: Props): React.ReactNode[] {
+function genLinks (systemChain: string, { data, hash, isText, type }: Props): React.ReactNode[] {
   return Object
     .entries(externalLinks)
     .map(([name, { chains, create, isActive, logo, paths, url }]): React.ReactNode | null => {
@@ -48,12 +44,7 @@ function genLinks (systemChain: string, { data, hash, isSidebar, isText, type }:
         >
           {isText
             ? name
-            : (
-              <img
-                className={`${isSidebar ? ' isSidebar' : ''}`}
-                src={logo}
-              />
-            )
+            : <img src={logo} />
           }
         </a>
       );
@@ -74,7 +65,7 @@ function LinkExternal ({ className = '', data, hash, isSidebar, isSmall, isText,
   }
 
   return (
-    <div className={`${className} ui--LinkExternal ${isText ? 'isText' : 'isLogo'}${withTitle ? ' isMain' : ''}${isSmall ? ' isSmall' : ''}${isSidebar ? ' isSidebar' : ''}`}>
+    <div className={`${className} ui--LinkExternal ${isText ? 'isText' : 'isLogo'} ${withTitle ? 'isMain' : ''} ${isSmall ? 'isSmall' : ''} ${isSidebar ? 'isSidebar' : ''}`}>
       {(isText && !isSmall) && <div>{t<string>('View this externally')}</div>}
       {withTitle && (
         <h5>{t('external links')}</h5>
@@ -104,24 +95,33 @@ export default React.memo(styled(LinkExternal)`
 
   &.isSidebar {
     text-align: center;
+
+    .links {
+      img {
+        height: 2rem;
+        width: 2rem;
+      }
+    }
+  }
+
+  &:not(.fullColor) {
+    .links {
+      img {
+        filter: grayscale(1) opacity(0.66);
+
+        &:hover {
+          filter: grayscale(0) opacity(1);
+        }
+      }
+    }
   }
 
   .links {
     img {
       border-radius: 50%;
       cursor: pointer;
-      filter: grayscale(1) opacity(0.66);
       height: 1.5rem;
       width: 1.5rem;
-
-      &.isSidebar {
-        height: 2rem;
-        width: 2rem;
-      }
-
-      &:hover {
-        filter: grayscale(0) opacity(1);
-      }
     }
 
     span {