From dc8ac788db55bf6acb22766f7fe2ddc0b2b6c4c0 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 14 Aug 2021 17:34:43 +0530
Subject: [PATCH 1/3] fix(signin-med-layout): Made container flex1

---
 src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
index 4164c902b128..0a6d100cfb84 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
@@ -19,11 +19,14 @@ const propTypes = {
      * on form type (set password, sign in, etc.) */
     welcomeText: PropTypes.string.isRequired,
 
+    /* Flag to check medium screen with device */
+    isMediumScreenWidth: PropTypes.string.isRequired,
+
     ...withLocalizePropTypes,
 };
 
 const SignInPageLayoutWide = props => (
-    <View style={[styles.signInPageInner]}>
+    <View style={[styles.flex1, styles.signInPageInner]}>
         <View style={[styles.flex1, styles.flexRow, styles.dFlex, styles.flexGrow1]}>
             <View style={[styles.signInPageWideLeftContainer, styles.dFlex, styles.flexColumn, styles.ph6]}>
                 <View style={[

From ec865b708afb45b36cb6f230aae61a0efd71a954 Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 14 Aug 2021 17:35:34 +0530
Subject: [PATCH 2/3] fix(signin-med-layout): Added props for medium screen in
 withWindowDimensions

---
 src/components/withWindowDimensions.js | 8 ++++++++
 src/styles/variables.js                | 1 +
 2 files changed, 9 insertions(+)

diff --git a/src/components/withWindowDimensions.js b/src/components/withWindowDimensions.js
index d7c4799a800e..f03b6ea6be80 100644
--- a/src/components/withWindowDimensions.js
+++ b/src/components/withWindowDimensions.js
@@ -14,6 +14,9 @@ const windowDimensionsPropTypes = {
 
     // Is the window width narrow, like on a mobile device?
     isSmallScreenWidth: PropTypes.bool.isRequired,
+
+    // Is the window width narrow, like on a tablet device?
+    isMediumScreenWidth: PropTypes.bool.isRequired,
 };
 
 export default function (WrappedComponent) {
@@ -40,10 +43,12 @@ export default function (WrappedComponent) {
 
             const initialDimensions = Dimensions.get('window');
             const isSmallScreenWidth = initialDimensions.width <= variables.mobileResponsiveWidthBreakpoint;
+            const isMediumScreenWidth = !isSmallScreenWidth && initialDimensions.width <= variables.mediumScreenResponsiveWidthBreakpoint;
             this.state = {
                 windowHeight: initialDimensions.height,
                 windowWidth: initialDimensions.width,
                 isSmallScreenWidth,
+                isMediumScreenWidth,
             };
         }
 
@@ -64,10 +69,12 @@ export default function (WrappedComponent) {
         onDimensionChange(newDimensions) {
             const {window} = newDimensions;
             const isSmallScreenWidth = window.width <= variables.mobileResponsiveWidthBreakpoint;
+            const isMediumScreenWidth = !isSmallScreenWidth && window.width <= variables.mediumScreenResponsiveWidthBreakpoint;
             this.setState({
                 windowHeight: window.height,
                 windowWidth: window.width,
                 isSmallScreenWidth,
+                isMediumScreenWidth,
             });
         }
 
@@ -81,6 +88,7 @@ export default function (WrappedComponent) {
                     windowHeight={this.state.windowHeight}
                     windowWidth={this.state.windowWidth}
                     isSmallScreenWidth={this.state.isSmallScreenWidth}
+                    isMediumScreenWidth={this.state.isMediumScreenWidth}
                 />
             );
         }
diff --git a/src/styles/variables.js b/src/styles/variables.js
index c82e20d2e3a5..469424a393ee 100644
--- a/src/styles/variables.js
+++ b/src/styles/variables.js
@@ -29,6 +29,7 @@ export default {
     iconSizeLarge: 24,
     iouAmountTextSize: 40,
     mobileResponsiveWidthBreakpoint: 800,
+    mediumScreenResponsiveWidthBreakpoint: 1024,
     safeInsertPercentage: 0.7,
     sideBarWidth: 375,
     pdfPageMaxWidth: 992,

From e4de1ed88099fb456cf16f3b12f567c0ea46842a Mon Sep 17 00:00:00 2001
From: Manan Jadhav <manan.jadhav@gmail.com>
Date: Sat, 14 Aug 2021 17:51:05 +0530
Subject: [PATCH 3/3] fix(signin-med-layout): Fixed hero layout for tablet
 devices

---
 .../signin/SignInPageLayout/SignInPageLayoutWide.js      | 4 +++-
 src/pages/signin/SignInPageLayout/index.js               | 9 ++++++++-
 src/styles/utilities/spacing.js                          | 4 +++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
index 0a6d100cfb84..93d4cadd159c 100755
--- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
+++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js
@@ -64,7 +64,9 @@ const SignInPageLayoutWide = props => (
                 styles.justifyContentAround,
                 styles.backgroundBlue,
                 styles.pb10Percentage,
-                styles.p20,
+                !props.isMediumScreenWidth && styles.p20,
+                props.isMediumScreenWidth && styles.p10,
+                props.isMediumScreenWidth && styles.alignItemsCenter,
             ]}
             >
                 <View style={[styles.dFlex, styles.flexColumnReverse, styles.alignItemsCenter, styles.w50]}>
diff --git a/src/pages/signin/SignInPageLayout/index.js b/src/pages/signin/SignInPageLayout/index.js
index dc07a96af5a3..1a5a88a4c7ad 100644
--- a/src/pages/signin/SignInPageLayout/index.js
+++ b/src/pages/signin/SignInPageLayout/index.js
@@ -9,7 +9,14 @@ const propTypes = {
 
 const SignInPageLayout = props => (
     !props.isSmallScreenWidth
-        ? <SignInPageLayoutWide welcomeText={props.welcomeText}>{props.children}</SignInPageLayoutWide>
+        ? (
+            <SignInPageLayoutWide
+                welcomeText={props.welcomeText}
+                isMediumScreenWidth={props.isMediumScreenWidth}
+            >
+                {props.children}
+            </SignInPageLayoutWide>
+        )
         : <SignInPageLayoutNarrow welcomeText={props.welcomeText}>{props.children}</SignInPageLayoutNarrow>
 );
 
diff --git a/src/styles/utilities/spacing.js b/src/styles/utilities/spacing.js
index a376ad817217..0d7a2a936b6e 100644
--- a/src/styles/utilities/spacing.js
+++ b/src/styles/utilities/spacing.js
@@ -184,7 +184,9 @@ export default {
     p5: {
         padding: 20,
     },
-
+    p10: {
+        padding: 40,
+    },
     p20: {
         padding: 80,
     },