From ec2609bb0fbfc5c2dfc9d9c0ec25320dff73ff2c Mon Sep 17 00:00:00 2001
From: Andre Neves <andrerfneves@protonmail.com>
Date: Sun, 2 Jun 2019 13:19:20 -0400
Subject: [PATCH] hotfix(responsive): refactoring UI on wallet summary to allow
 for small screens

---
 app/components/wallet-summary.js | 74 ++++++++++++++++++++------------
 app/theme/index.js               |  1 +
 app/theme/media-queries.js       | 20 +++++++++
 config/electron.js               |  2 +-
 4 files changed, 68 insertions(+), 29 deletions(-)
 create mode 100644 app/theme/media-queries.js

diff --git a/app/components/wallet-summary.js b/app/components/wallet-summary.js
index 1556d0c..293aab3 100644
--- a/app/components/wallet-summary.js
+++ b/app/components/wallet-summary.js
@@ -9,6 +9,8 @@ import { formatNumber } from '../utils/format-number';
 import { getCoinName } from '../utils/get-coin-name';
 import { DARK } from '../constants/themes';
 
+import { media } from '../theme';
+
 import ShieldDarkImage from '../assets/images/shield_dark.png';
 import ShieldLightImage from '../assets/images/shield_light.png';
 
@@ -18,12 +20,17 @@ const OutsideWrapper = styled.div`
 
 const Wrapper = styled.div`
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   background-color: ${props => props.theme.colors.walletSummaryBg};
   border: 1px solid ${props => props.theme.colors.walletSummaryBorder};
   border-radius: ${props => props.theme.boxBorderRadius};
   padding: 30px 30px;
   position: relative;
+
+  ${media.main`
+    margin-top: 0;
+    flex-direction: row;
+  `}
 `;
 
 const OutsideLabel = styled(TextComponent)`
@@ -86,6 +93,15 @@ const UnconfirmedValue = styled(MiddleLabel)`
   color: ${props => props.theme.colors.walletSummaryUnconfirmed};
 `;
 
+const DetailMainContainer = styled.div`
+  display: flex;
+  margin-top: 1rem;
+
+  ${media.main`
+    margin-top: 0;
+  `}
+`;
+
 type Props = {
   total: number,
   shielded: number,
@@ -120,33 +136,35 @@ export const Component = ({
             size={theme.fontSize.medium * 2}
           />
         </TotalContainer>
-        <DetailContainer>
-          <ShieldedValue value='SHIELDED' isBold size={theme.fontSize.small} />
-          <MiddleLabel
-            value={`${coinName} ${formatNumber({ value: shielded })}`}
-            isBold
-            size='16px'
-          />
-          <USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
-        </DetailContainer>
-        <DetailContainer>
-          <DefaultLabel value='TRANSPARENT' isBold size={theme.fontSize.small} />
-          <MiddleLabel
-            value={`${coinName} ${formatNumber({ value: transparent })}`}
-            isBold
-            size='16px'
-          />
-          <USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
-        </DetailContainer>
-        <DetailContainer>
-          <UnconfirmedLabel value='UNCONFIRMED' isBold size={theme.fontSize.small} />
-          <UnconfirmedValue
-            value={`${coinName} ${formatNumber({ value: transparent })}`}
-            isBold
-            size='16px'
-          />
-          <USDValue value={`USD $${formatNumber({ value: unconfirmed * zecPrice })}`} />
-        </DetailContainer>
+        <DetailMainContainer>
+          <DetailContainer>
+            <ShieldedValue value='SHIELDED' isBold size={theme.fontSize.small} />
+            <MiddleLabel
+              value={`${coinName} ${formatNumber({ value: shielded })}`}
+              isBold
+              size='16px'
+            />
+            <USDValue value={`USD $${formatNumber({ value: shielded * zecPrice })}`} />
+          </DetailContainer>
+          <DetailContainer>
+            <DefaultLabel value='TRANSPARENT' isBold size={theme.fontSize.small} />
+            <MiddleLabel
+              value={`${coinName} ${formatNumber({ value: transparent })}`}
+              isBold
+              size='16px'
+            />
+            <USDValue value={`USD $${formatNumber({ value: transparent * zecPrice })}`} />
+          </DetailContainer>
+          <DetailContainer>
+            <UnconfirmedLabel value='UNCONFIRMED' isBold size={theme.fontSize.small} />
+            <UnconfirmedValue
+              value={`${coinName} ${formatNumber({ value: transparent })}`}
+              isBold
+              size='16px'
+            />
+            <USDValue value={`USD $${formatNumber({ value: unconfirmed * zecPrice })}`} />
+          </DetailContainer>
+        </DetailMainContainer>
       </Wrapper>
     </OutsideWrapper>
   );
diff --git a/app/theme/index.js b/app/theme/index.js
index da7221b..1555ce0 100644
--- a/app/theme/index.js
+++ b/app/theme/index.js
@@ -3,3 +3,4 @@
 export { appTheme } from './theme';
 export { DoczWrapper } from './docz';
 export { GlobalStyle } from './global';
+export { media } from './media-queries';
diff --git a/app/theme/media-queries.js b/app/theme/media-queries.js
new file mode 100644
index 0000000..001bb25
--- /dev/null
+++ b/app/theme/media-queries.js
@@ -0,0 +1,20 @@
+// @flow
+
+import { css } from 'styled-components';
+
+// Media Queries
+export const sizes = {
+  main: 910,
+  // desktop: 1024,
+  // largeDesktop: 1280,
+};
+
+export const media = Object.keys(sizes).reduce((acc, label) => {
+  acc[label] = (...args: any) => css`
+    @media (min-width: ${sizes[label]}px) {
+      ${css(...args)}
+    }
+  `;
+
+  return acc;
+}, {});
diff --git a/config/electron.js b/config/electron.js
index 576c7d9..5879ab2 100644
--- a/config/electron.js
+++ b/config/electron.js
@@ -57,7 +57,7 @@ const createWindow = () => {
   });
 
   mainWindow = new BrowserWindow({
-    minWidth: 700,
+    minWidth: 815,
     minHeight: 600,
     width: 1000,
     height: 660,