<SummaryBox /> styled component (#830)

* <SummaryBox /> styled component

* remove comment

* apps -> ui-app comment

* rolling back to .css

* rm styled

* styled SummaryBox

* indent

packages/app-democracy/src/Summary.tsx

@@ -6,7 +6,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { CardSummary } from '@polkadot/ui-app';
+import { SummaryBox, CardSummary } from '@polkadot/ui-app';
 import { formatNumber } from '@polkadot/ui-util';
 import { withCalls } from '@polkadot/ui-api';
 
@@ -26,7 +26,7 @@ class Summary extends React.PureComponent<Props> {
     const { chain_bestNumber = new BN(0), democracy_launchPeriod = new BN(1), democracy_nextTally = new BN(0), democracy_publicPropCount, democracy_referendumCount = new BN(0), t } = this.props;
 
     return (
-      <summary>
+      <SummaryBox>
         <section>
           <CardSummary label={t('proposals')}>
             {formatNumber(democracy_publicPropCount)}
@@ -47,7 +47,7 @@ class Summary extends React.PureComponent<Props> {
             }}
           />
         </section>
-      </summary>
+      </SummaryBox>
     );
   }
 }

packages/app-explorer/src/NodeInfo/Summary.tsx

@@ -7,7 +7,7 @@ import { Info } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
-import { CardSummary } from '@polkadot/ui-app';
+import { SummaryBox, CardSummary } from '@polkadot/ui-app';
 import { formatNumber } from '@polkadot/ui-util';
 import { BestNumber, Elapsed } from '@polkadot/ui-reactive';
 
@@ -44,7 +44,7 @@ class Summary extends React.PureComponent<Props, State> {
     const { peerBest } = this.state;
 
     return (
-      <summary>
+      <SummaryBox>
         <section className='ui--media-medium'>
           <CardSummary label={t('refresh in')}>
             <Elapsed value={nextRefresh} />
@@ -85,7 +85,7 @@ class Summary extends React.PureComponent<Props, State> {
             <BestNumber />
           </CardSummary>
         </section>
-      </summary>
+      </SummaryBox>
     );
   }
 }

packages/app-explorer/src/Summary.tsx

@@ -5,7 +5,7 @@
 import { I18nProps } from '@polkadot/ui-app/types';
 
 import React from 'react';
-import { CardSummary } from '@polkadot/ui-app';
+import { SummaryBox, CardSummary } from '@polkadot/ui-app';
 import { BestFinalised, BestNumber, TimeNow, TimePeriod } from '@polkadot/ui-reactive';
 
 import SummarySession from './SummarySession';
@@ -18,7 +18,7 @@ class Summary extends React.PureComponent<Props> {
     const { className, style, t } = this.props;
 
     return (
-      <summary
+      <SummaryBox
         className={className}
         style={style}
       >
@@ -41,7 +41,7 @@ class Summary extends React.PureComponent<Props> {
             <BestNumber />
           </CardSummary>
         </section>
-      </summary>
+      </SummaryBox>
     );
   }
 }

packages/app-staking/src/Overview/Summary.tsx

@@ -8,7 +8,7 @@ import { I18nProps } from '@polkadot/ui-app/types';
 import BN from 'bn.js';
 import React from 'react';
 import SummarySession from '@polkadot/app-explorer/SummarySession';
-import { CardSummary } from '@polkadot/ui-app';
+import { SummaryBox, CardSummary } from '@polkadot/ui-app';
 import { formatBalance } from '@polkadot/ui-util';
 import { withCall, withMulti } from '@polkadot/ui-api';
 
@@ -27,7 +27,7 @@ class Summary extends React.PureComponent<Props> {
     const { className, intentions, style, t, staking_validatorCount, validators } = this.props;
 
     return (
-      <summary
+      <SummaryBox
         className={className}
         style={style}
       >
@@ -43,7 +43,7 @@ class Summary extends React.PureComponent<Props> {
           <SummarySession withBroken={false} />
         </section>
         {this.renderBalances()}
-      </summary>
+      </SummaryBox>
     );
   }
 

packages/apps/src/index.tsx

@@ -13,7 +13,7 @@ import store from 'store';
 import { getTypeRegistry } from '@polkadot/types';
 import { Api } from '@polkadot/ui-api';
 
-import { QueueConsumer } from '@polkadot/ui-app//Status/Context';
+import { QueueConsumer } from '@polkadot/ui-app/Status/Context';
 import Queue from '@polkadot/ui-app/Status/Queue';
 import Apps from './Apps';
 

packages/ui-app/src/SummaryBox.tsx

@@ -0,0 +1,59 @@
+// Copyright 2017-2019 @polkadot/ui-app authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { BareProps } from './types';
+
+import React from 'react';
+import styled from 'styled-components';
+
+type Props = BareProps & {
+  children?: React.ReactNode
+};
+
+const StyledSummary = styled.div`
+  align-items: stretch;
+  margin-bottom: 2em;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+	article {
+		color: rgba(0, 0, 0, 0.6);
+		flex: 0 1 auto;
+		text-align: left;
+	}
+
+	> section {
+		display: flex;
+		flex: 0 1 auto;
+		text-align: left;
+	}
+
+	details & {
+		display: block;
+		margin: 0.5rem 0.25rem;
+		opacity: 0.75;
+		outline: none;
+		overflow: hidden;
+		text-align: left;
+		text-overflow: ellipsis;
+		vertical-align: middle;
+		white-space: nowrap;
+
+		+ div {
+			margin-top: 0.75rem;
+		}
+	}
+  `;
+
+export default class SummaryBox extends React.PureComponent<Props> {
+  render () {
+    return (
+      <StyledSummary>
+        {this.props.children}
+      </StyledSummary>
+    );
+  }
+}

packages/ui-app/src/index.tsx

@@ -34,5 +34,6 @@ export { default as Password } from './Password';
 export { default as Progress } from './Progress';
 export { default as Static } from './Static';
 export { default as Status } from './Status';
+export { default as SummaryBox } from './SummaryBox';
 export { default as Tabs } from './Tabs';
 export { default as TxButton } from './TxButton';

packages/ui-app/src/styles/app.css

@@ -97,45 +97,7 @@ article {
   }
 }
 
-details {
-  summary {
-    display: block;
-    margin: 0.5rem 0.25rem;
-    opacity: 0.75;
-    outline: none;
-    overflow: hidden;
-    text-align: left;
-    text-overflow: ellipsis;
-    vertical-align: middle;
-    white-space: nowrap;
-  }
-
-  summary + div {
-    margin-top: 0.75rem;
-  }
-}
-
-header,
-summary {
+header {
   margin-bottom: 2em;
   text-align: center;
 }
-
-summary {
-  align-items: stretch;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-
-summary article {
-  color: rgba(0, 0, 0, 0.6);
-  flex: 0 1 auto;
-  text-align: left;
-}
-
-summary > section {
-  display: flex;
-  flex: 0 1 auto;
-  text-align: left;
-}