From 5b3619ae1bcd5f83ac5b8a6b50f635ea1286f5e6 Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Tue, 2 Apr 2019 09:56:01 +0200
Subject: [PATCH] Re-add media queries (pertinent info) (#877)

---
 packages/app-democracy/src/Summary.tsx         | 2 +-
 packages/app-explorer/src/NodeInfo/Summary.tsx | 4 ++--
 packages/app-explorer/src/Summary.tsx          | 4 ++--
 packages/app-staking/src/Overview/Summary.tsx  | 2 +-
 packages/ui-app/src/SummaryBox.tsx             | 3 +--
 5 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/app-democracy/src/Summary.tsx b/packages/app-democracy/src/Summary.tsx
index 3301bcf8c6..1b5e9630bc 100644
--- a/packages/app-democracy/src/Summary.tsx
+++ b/packages/app-democracy/src/Summary.tsx
@@ -38,7 +38,7 @@ class Summary extends React.PureComponent<Props> {
             {formatNumber(democracy_referendumCount.sub(democracy_nextTally))}
           </CardSummary>
         </section>
-        <section>
+        <section className='ui--media-medium'>
           <CardSummary
             label={t('launch period')}
             progress={{
diff --git a/packages/app-explorer/src/NodeInfo/Summary.tsx b/packages/app-explorer/src/NodeInfo/Summary.tsx
index 5973c48fa6..6174fdee92 100644
--- a/packages/app-explorer/src/NodeInfo/Summary.tsx
+++ b/packages/app-explorer/src/NodeInfo/Summary.tsx
@@ -45,7 +45,7 @@ class Summary extends React.PureComponent<Props, State> {
 
     return (
       <SummaryBox>
-        <section>
+        <section className='ui--media-medium'>
           <CardSummary label={t('refresh in')}>
             <Elapsed value={nextRefresh} />
           </CardSummary>
@@ -68,7 +68,7 @@ class Summary extends React.PureComponent<Props, State> {
             }
           </CardSummary>
         </section>
-        <section>
+        <section className='ui--media-large'>
           <CardSummary label={t('queued tx')}>
             {
               info.extrinsics
diff --git a/packages/app-explorer/src/Summary.tsx b/packages/app-explorer/src/Summary.tsx
index 295dd629c1..84aea392dd 100644
--- a/packages/app-explorer/src/Summary.tsx
+++ b/packages/app-explorer/src/Summary.tsx
@@ -19,7 +19,7 @@ class Summary extends React.PureComponent<Props> {
 
     return (
       <SummaryBox>
-        <section>
+        <section className='ui--media-small'>
           <CardSummary label={t('target')}>
             <TimePeriod />
           </CardSummary>
@@ -27,7 +27,7 @@ class Summary extends React.PureComponent<Props> {
             <TimeNow />
           </CardSummary>
         </section>
-        <section>
+        <section className='ui--media-large'>
           <SummarySession />
         </section>
         <section>
diff --git a/packages/app-staking/src/Overview/Summary.tsx b/packages/app-staking/src/Overview/Summary.tsx
index b7578f655a..98335207ef 100644
--- a/packages/app-staking/src/Overview/Summary.tsx
+++ b/packages/app-staking/src/Overview/Summary.tsx
@@ -39,7 +39,7 @@ class Summary extends React.PureComponent<Props> {
             {intentions.length}
           </CardSummary>
         </section>
-        <section>
+        <section className='ui--media-medium'>
           <SummarySession withBroken={false} />
         </section>
         {this.renderBalances()}
diff --git a/packages/ui-app/src/SummaryBox.tsx b/packages/ui-app/src/SummaryBox.tsx
index 623d2004e6..dbd6b6754d 100644
--- a/packages/ui-app/src/SummaryBox.tsx
+++ b/packages/ui-app/src/SummaryBox.tsx
@@ -14,9 +14,8 @@ type Props = BareProps & {
 const StyledSummary = styled.div`
   align-items: stretch;
   background: rgba(255,255,255,0.65);
-  border: 1px solid rgba(0,0,0,0.03);
   border-radius: 4px;
-  box-shadow: inset 0px -5px 12px rgba(0,0,0,0.035);
+  box-shadow: 0 10px 40px rgba(0,0,0,.1);
   display: flex;
   flex-wrap: no-wrap;
   justify-content: space-between;