Merge pull request #4793 from studio-504/add-tablet-breakpoint

New breakpoint for tablet size

Author: Tim Szot

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,14 @@ export default function (WrappedComponent) {
 
             const initialDimensions = Dimensions.get('window');
             const isSmallScreenWidth = initialDimensions.width <= variables.mobileResponsiveWidthBreakpoint;
+            const isMediumScreenWidth = initialDimensions.width > variables.mobileResponsiveWidthBreakpoint
+              && initialDimensions.width <= variables.tabletResponsiveWidthBreakpoint;
+
             this.state = {
                 windowHeight: initialDimensions.height,
                 windowWidth: initialDimensions.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}
                 />
             );
         }

src/pages/workspace/WorkspaceCardPage.js

@@ -71,6 +71,7 @@ const WorkspaceCardPage = ({
     user,
     translate,
     isSmallScreenWidth,
+    isMediumScreenWidth,
     reimbursementAccount,
 }) => {
     const isVerifying = lodashGet(reimbursementAccount, 'achData.state', '') === BankAccount.STATE.VERIFYING;
@@ -120,12 +121,17 @@ const WorkspaceCardPage = ({
                         styles.flexRow,
                         styles.workspaceCard,
                         isSmallScreenWidth && styles.workspaceCardMobile,
+                        isMediumScreenWidth && styles.workspaceCardMediumScreen,
                     ]}
                     >
-                        {isSmallScreenWidth
+                        {isSmallScreenWidth || isMediumScreenWidth
                             ? (
                                 <HeroCardMobileImage
-                                    style={StyleSheet.flatten([styles.fullscreenCard, styles.fullscreenCardMobile])}
+                                    style={StyleSheet.flatten([
+                                        styles.fullscreenCard,
+                                        isSmallScreenWidth && styles.fullscreenCardMobile,
+                                        isMediumScreenWidth && styles.fullscreenCardMediumScreen,
+                                    ])}
                                 />
                             )
                             : (
@@ -138,6 +144,7 @@ const WorkspaceCardPage = ({
                             styles.fullscreenCard,
                             styles.workspaceCardContent,
                             isSmallScreenWidth && styles.p5,
+                            isMediumScreenWidth && styles.workspaceCardContentMediumScreen,
                         ]}
                         >
                             <View
@@ -146,6 +153,7 @@ const WorkspaceCardPage = ({
                                     styles.justifyContentEnd,
                                     styles.alignItemsStart,
                                     !isSmallScreenWidth && styles.w50,
+                                    isMediumScreenWidth && styles.w100,
                                 ]}
                             >
                                 <Text

src/styles/styles.js

@@ -1884,6 +1884,12 @@ const styles = {
         width: '150%',
     },
 
+    fullscreenCardMediumScreen: {
+        left: '-15%',
+        top: '-30%',
+        width: '145%',
+    },
+
     smallEditIcon: {
         alignItems: 'center',
         backgroundColor: themeColors.icon,
@@ -1914,6 +1920,10 @@ const styles = {
         height: 475,
     },
 
+    workspaceCardMediumScreen: {
+        height: 540,
+    },
+
     workspaceCardMainText: {
         fontSize: variables.fontSizeXXXLarge,
         fontWeight: 'bold',
@@ -1925,6 +1935,10 @@ const styles = {
         padding: 50,
     },
 
+    workspaceCardContentMediumScreen: {
+        padding: 25,
+    },
+
     workspaceCardCTA: {
         width: 250,
     },

src/styles/variables.js

@@ -29,6 +29,7 @@ export default {
     iconSizeLarge: 24,
     iouAmountTextSize: 40,
     mobileResponsiveWidthBreakpoint: 800,
+    tabletResponsiveWidthBreakpoint: 1024,
     safeInsertPercentage: 0.7,
     sideBarWidth: 375,
     pdfPageMaxWidth: 992,