Cleanup logo consistency (incl. transform) (#1550)

packages/apps/src/SideBar/NodeInfo.tsx

@@ -10,46 +10,22 @@ import styled from 'styled-components';
 import { withApi } from '@polkadot/react-api/with';
 import { NodeName, NodeVersion } from '@polkadot/react-query';
 
-type Props = ApiProps & BareProps & {};
-
-const Wrapper = styled.div`
-  background: transparent;
-  color: white;
-  font-size: 0.75rem;
-  opacity: 0.5;
-  padding: 0 1.5rem 0 1.5rem;
-  text-align: right;
-
-  > div {
-    margin-bottom: -0.125em;
-    > div {
-      display: inline-block;
-    }
-
-    &.spacer {
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  .rx--updated {
-    background: inherit !important;
-  }
-`;
+interface Props extends ApiProps, BareProps {}
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const pkgJson = require('../../package.json');
 
 class NodeInfo extends React.PureComponent<Props> {
   public render (): React.ReactNode {
-    const { api } = this.props;
+    const { api, className } = this.props;
     const uiInfo = `apps v${pkgJson.version}`;
 
     return (
-      <Wrapper>
+      <div className={className}>
         {this.renderNode()}
         <div>{api.libraryInfo.replace('@polkadot/', '')}</div>
         <div>{uiInfo}</div>
-      </Wrapper>
+      </div>
     );
   }
 
@@ -69,4 +45,28 @@ class NodeInfo extends React.PureComponent<Props> {
   }
 }
 
-export default withApi(NodeInfo);
+export default withApi(
+  styled(NodeInfo)`
+    background: transparent;
+    color: white;
+    font-size: 0.75rem;
+    opacity: 0.5;
+    padding: 0 1.5rem 0 1.5rem;
+    text-align: right;
+
+    > div {
+      margin-bottom: -0.125em;
+      > div {
+        display: inline-block;
+      }
+
+      &.spacer {
+        margin-bottom: 0.5rem;
+      }
+    }
+
+    .rx--updated {
+      background: inherit !important;
+    }
+  `
+);

packages/apps/src/SideBar/SideBar.css

@@ -100,7 +100,7 @@
 
       img {
         border-radius: 50%;
-        width: 2.5rem;
+        width: 2.75rem;
       }
 
       > div.info {

packages/apps/src/SideBar/index.tsx

@@ -17,7 +17,6 @@ import routing from '@polkadot/apps-routing';
 import { withCalls, withMulti } from '@polkadot/react-api';
 import { Button, ChainImg, Icon, Menu, media } from '@polkadot/react-components';
 import { classes } from '@polkadot/react-components/util';
-import { logoBackground, logoPadding } from '@polkadot/react-components/styles/theme';
 import { BestNumber, Chain } from '@polkadot/react-query';
 
 import translate from '../translate';
@@ -233,16 +232,13 @@ class SideBar extends React.PureComponent<Props, State> {
 export default withMulti(
   styled(SideBar)`
     .toggleImg {
-      background: ${logoBackground};
-      padding: ${logoPadding};
-      border-radius: 50%;
       cursor: pointer;
       left: 0.9rem;
       opacity: 0;
       position: absolute;
       top: 0px;
       transition: opacity 0.2s ease-in, top 0.2s ease-in;
-      width: 2.8rem;
+      width: 2.75rem;
 
       &.delayed {
         transition-delay: 0.4s;

packages/react-components/src/ChainImg.tsx

@@ -6,7 +6,8 @@
 import { ApiProps } from '@polkadot/react-api/types';
 
 import React from 'react';
-import { withCalls } from '@polkadot/react-api';
+import styled from 'styled-components';
+import { withCalls, withMulti } from '@polkadot/react-api';
 import { Text } from '@polkadot/types';
 
 // the imports here as a bit all-over, non-aphabetical - since we expect this to grow,
@@ -49,23 +50,15 @@ const LOGOS: Record<string, any> = {
 interface Props extends ApiProps {
   className?: string;
   logo?: keyof typeof LOGOS;
+  logoChain?: any;
+  logoNode?: any;
   onClick?: () => any;
-  system_chain?: Text;
-  system_name?: Text;
-}
-
-function getLogo (node: Text | string = '', chain: Text | string = ''): any {
-  return CHAINS[chain.toString()] || NODES[node.toString()];
-}
-
-function getOverride (logo: string = ''): any {
-  return LOGOS[logo];
 }
 
 class ChainImg extends React.PureComponent<Props> {
   public render (): React.ReactNode {
-    const { className, logo, onClick, system_chain, system_name } = this.props;
-    const img = getOverride(logo) || getLogo(system_name, system_chain) || EMPTY;
+    const { className, logo = '', logoChain, logoNode, onClick } = this.props;
+    const img = LOGOS[logo] || logoChain || logoNode || EMPTY;
 
     return (
       <img
@@ -78,7 +71,20 @@ class ChainImg extends React.PureComponent<Props> {
   }
 }
 
-export default withCalls<Props>(
-  'rpc.system.chain',
-  'rpc.system.name'
-)(ChainImg);
+export default withMulti(
+  styled(ChainImg)`
+    background: #3f3f3f;
+    border: 1px solid #3f3f3f;
+    border-radius: 50%;
+  `,
+  withCalls<Props>(
+    ['rpc.system.chain', {
+      propName: 'logoChain',
+      transform: (chain: Text): any | null => CHAINS[chain.toString()]
+    }],
+    ['rpc.system.name', {
+      propName: 'logoNode',
+      transform: (node: Text): any | null => NODES[node.toString()]
+    }]
+  )
+);

packages/react-components/src/styles/theme.ts

@@ -8,13 +8,3 @@ export const primaryColor = theme('theme', {
   substrate: '#DB2828',
   polkadot: '#E6007A'
 });
-
-export const logoBackground = theme('theme', {
-  substrate: '#333',
-  polkadot: 'none'
-});
-
-export const logoPadding = theme('theme', {
-  substrate: '4px',
-  polkadot: '0px'
-});