From 4724e35b0451e03c2def59ea4dc70f6ea73867cb Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Thu, 24 Jan 2019 18:48:01 +0100
Subject: [PATCH] responsive modals

---
 src/components/modals/confirm/Address/index.js           | 2 +-
 src/components/modals/confirm/SignTx/index.js            | 2 +-
 src/components/modals/confirm/UnverifiedAddress/index.js | 2 +-
 src/components/modals/device/WalletType/index.js         | 1 -
 src/components/modals/passphrase/Type/index.js           | 2 +-
 src/components/modals/pin/Pin/components/Button/index.js | 7 ++++++-
 6 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/modals/confirm/Address/index.js b/src/components/modals/confirm/Address/index.js
index 93c49404..568784cf 100644
--- a/src/components/modals/confirm/Address/index.js
+++ b/src/components/modals/confirm/Address/index.js
@@ -13,7 +13,7 @@ import P from 'components/Paragraph';
 import type { Props } from '../../Container';
 
 const Wrapper = styled.div`
-    width: 390px;
+    max-width: 390px;
 `;
 
 const Header = styled.div`
diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js
index ad9ccd86..a5bbdf2b 100644
--- a/src/components/modals/confirm/SignTx/index.js
+++ b/src/components/modals/confirm/SignTx/index.js
@@ -20,7 +20,7 @@ type Props = {
 }
 
 const Wrapper = styled.div`
-    width: 390px;
+    max-width: 390px;
 `;
 
 const Header = styled.div`
diff --git a/src/components/modals/confirm/UnverifiedAddress/index.js b/src/components/modals/confirm/UnverifiedAddress/index.js
index 871068c0..e6f26592 100644
--- a/src/components/modals/confirm/UnverifiedAddress/index.js
+++ b/src/components/modals/confirm/UnverifiedAddress/index.js
@@ -30,7 +30,7 @@ const StyledLink = styled(Link)`
 `;
 
 const Wrapper = styled.div`
-    width: 370px;
+    max-width: 370px;
     padding: 30px 48px;
 `;
 
diff --git a/src/components/modals/device/WalletType/index.js b/src/components/modals/device/WalletType/index.js
index ca91bc99..349c7e1a 100644
--- a/src/components/modals/device/WalletType/index.js
+++ b/src/components/modals/device/WalletType/index.js
@@ -25,7 +25,6 @@ type Props = {
 }
 
 const Wrapper = styled.div`
-    width: 360px;
 `;
 
 const Header = styled.div`
diff --git a/src/components/modals/passphrase/Type/index.js b/src/components/modals/passphrase/Type/index.js
index fa44d5b1..422bb065 100644
--- a/src/components/modals/passphrase/Type/index.js
+++ b/src/components/modals/passphrase/Type/index.js
@@ -18,7 +18,7 @@ type Props = {
 }
 
 const Wrapper = styled.div`
-    width: 360px;
+    max-width: 360px;
     padding: 30px 48px;
 `;
 
diff --git a/src/components/modals/pin/Pin/components/Button/index.js b/src/components/modals/pin/Pin/components/Button/index.js
index 65b8c0a4..9f73ff6d 100644
--- a/src/components/modals/pin/Pin/components/Button/index.js
+++ b/src/components/modals/pin/Pin/components/Button/index.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import colors from 'config/colors';
-import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
+import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
 
 type Props = {
     onClick: () => void;
@@ -24,6 +24,11 @@ const Wrapper = styled.button`
     transition: all 0.3s;
     cursor: pointer;
 
+    @media screen and (max-width: ${SCREEN_SIZE.XS}) {
+        width: 50px;
+        height: 50px;
+    }
+
     &:first-child {
         margin-left: 0px;
     }