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}
/>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
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,