Minor formatting updates (count events & extrinsics) (#638)

* Minor formatting updates (count evnts & extrinsics)

* flex alignment, font-familt (headers)

* Height adjustment (slight)

packages/app-explorer/src/BlockByHash/Events.tsx

@@ -27,6 +27,7 @@ class Events extends React.PureComponent<Props> {
         <h1>{t('events')}</h1>
         <div className='explorer--BlockByHash-flexable'>
           <EventsDisplay
+            isSummary
             eventClassName='explorer--BlockByHash-block'
             value={value}
           />

packages/app-explorer/src/BlockByHash/Extrinsics.tsx

@@ -58,7 +58,7 @@ class Extrinsics extends React.PureComponent<Props> {
         <article className='ui--hoverable explorer--Container'>
           <div className='header'>
             <h3>
-              #{numberFormat(index)}:&nbsp;{section}.{method}
+              {section}.{method}&nbsp;(#{numberFormat(index)})
             </h3>
             <div className='ui--hover description'>{
               meta && meta.documentation && meta.documentation.length

packages/app-explorer/src/BlockHeader/BlockHeader.css

@@ -27,13 +27,6 @@
     }
   }
 
-  &.summary {
-    .header .hash {
-      /* 0.5 * 0.5 */
-      opacity: 0.5625;
-    }
-  }
-
   .author {
     font-size: 1rem;
     text-align: right;
@@ -47,8 +40,8 @@
   .header {
     color: rgba(0, 0, 0, 0.6);
     display: flex;
-    line-height: 2.25rem;
-    overflow: hidden;
+    align-items: center;
+    justify-content: space-between;
     text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -67,6 +60,8 @@
 
     .hash {
       font-size: 1.5rem;
+      font-family: sans-serif;
+      /*opacity: 0.75;*/
     }
   }
 

packages/app-explorer/src/Events.tsx

@@ -12,6 +12,7 @@ import { numberFormat } from '@polkadot/ui-reactive/util/index';
 import translate from './translate';
 
 type Props = I18nProps & {
+  isSummary?: boolean,
   value?: Array<EventRecord>,
   emptyLabel?: React.ReactNode,
   eventClassName?: string,
@@ -45,23 +46,23 @@ class Events extends React.PureComponent<Props> {
   }
 
   private renderEvent = ({ event, phase }: EventRecord, index: number) => {
-    const { withoutIndex } = this.props;
+    const { isSummary, withoutIndex } = this.props;
     const extIndex = !withoutIndex && phase.type === 'ApplyExtrinsic'
       ? phase.asApplyExtrinsic
       : -1;
 
     return (
       <article
-        className={['explorer--Container', index ? 'ui--hoverable' : ''].join(' ')}
+        className={['explorer--Container', (isSummary || index) ? 'ui--hoverable' : ''].join(' ')}
         key={index}
       >
         <div className='header'>
           <h3>
-            {
+            {event.section}.{event.method}&nbsp;{
               extIndex !== -1
-                ? `#${numberFormat(extIndex)}: `
+                ? `(#${numberFormat(extIndex)})`
                 : ''
-            }{event.section}.{event.method}
+            }
           </h3>
           <div className='ui--hover description'>
             {