tablet relogin and name device screens (keybase#22464)

* relogin * patch username,password * patch other name input * phone entry screens
lynsei · Feb 11, 2020 · 52e3698 · 52e3698
1 parent 94a0eee
commit 52e3698
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 15 deletions.
diff --git a/shared/common-adapters/user-card.native.tsx b/shared/common-adapters/user-card.native.tsx
@@ -61,11 +61,16 @@ const styles = Styles.styleSheetCreate(() => ({
     position: 'absolute',
     right: 0,
   },
-  container: {
-    ...Styles.globalStyles.flexBoxColumn,
-    alignItems: 'stretch',
-    width: '100%',
-  },
+  container: Styles.platformStyles({
+    common: {
+      ...Styles.globalStyles.flexBoxColumn,
+      alignItems: 'stretch',
+      width: '100%',
+    },
+    isTablet: {
+      maxWidth: 410,
+    },
+  }),
   inside: {
     ...Styles.globalStyles.flexBoxColumn,
     alignItems: 'stretch',

diff --git a/shared/login/relogin/index.native.tsx b/shared/login/relogin/index.native.tsx
@@ -48,7 +48,7 @@ class LoginRender extends React.Component<Props, State> {
               </Kb.Box>
             )}
             {!!this.props.error && <Kb.Banner color="red">{this.props.error}</Kb.Banner>}
-            <Kb.UserCard username={this.props.selectedUser} outerStyle={styles.card}>
+            <Kb.UserCard username={this.props.selectedUser} outerStyle={styles.card} style={styles.cardInner}>
               <Dropdown
                 type="Username"
                 value={this.props.selectedUser}
@@ -94,7 +94,7 @@ class LoginRender extends React.Component<Props, State> {
               </Kb.Text>
             </Kb.UserCard>
             <Kb.Box2 direction="vertical" style={Styles.globalStyles.flexOne} />
-            <Kb.Box2 direction="vertical" fullWidth={true} style={{padding: Styles.globalMargins.medium}}>
+            <Kb.Box2 direction="vertical" fullWidth={true} style={styles.createAccountContainer}>
               <Kb.Button
                 fullWidth={true}
                 label="Create an account"
@@ -117,12 +117,19 @@ const styles = Styles.styleSheetCreate(
         marginTop: Styles.globalMargins.medium,
         width: '100%',
       },
+      cardInner: Styles.platformStyles({
+        isTablet: {paddingBottom: 0},
+      }),
       container: {
         ...Styles.globalStyles.flexBoxColumn,
         alignItems: 'center',
         backgroundColor: Styles.globalColors.blueGrey,
         flex: 1,
       },
+      createAccountContainer: Styles.platformStyles({
+        common: {padding: Styles.globalMargins.medium},
+        isTablet: {maxWidth: 410, padding: Styles.globalMargins.small},
+      }),
       deviceNotSecureContainer: {
         alignSelf: 'stretch',
         backgroundColor: Styles.globalColors.yellow,

diff --git a/shared/provision/password/index.tsx b/shared/provision/password/index.tsx
@@ -107,7 +107,10 @@ const styles = Styles.styleSheetCreate(() => ({
     },
   }),
   contentContainer: Styles.platformStyles({isMobile: {...Styles.padding(0)}}),
-  fill: Styles.platformStyles({isMobile: {height: '100%', width: '100%'}}),
+  fill: Styles.platformStyles({
+    isMobile: {height: '100%', width: '100%'},
+    isTablet: {width: 410},
+  }),
   forgotPassword: {
     alignSelf: 'flex-end',
   },

diff --git a/shared/provision/set-public-name/index.tsx b/shared/provision/set-public-name/index.tsx
@@ -4,6 +4,7 @@ import * as Constants from '../../constants/provision'
 import * as Styles from '../../styles'
 import * as Platform from '../../constants/platform'
 import {defaultDevicename} from '../../constants/signup'
+import flags from '../../util/feature-flags'
 
 import {SignupScreen, errorBanner} from '../../signup/common'
 
@@ -48,7 +49,13 @@ const SetPublicName = (props: Props) => {
         },
       ]}
       onBack={props.onBack}
-      title={`Name this ${Styles.isMobile ? 'phone' : 'computer'}`}
+      title={
+        Styles.isMobile
+          ? flags.tabletSupport
+            ? 'Name this device'
+            : 'Name this phone'
+          : 'Name this computer'
+      }
     >
       <Kb.Box2 direction="vertical" style={styles.contents} centerChildren={true} gap="medium">
         <Kb.Icon type={Kb.isValidIconType(maybeIcon) ? maybeIcon : defaultIcon} />
@@ -79,16 +86,20 @@ const styles = Styles.styleSheetCreate(() => ({
       marginTop: 0,
     },
   }),
-  contents: {
-    width: '100%',
-  },
+  contents: Styles.platformStyles({
+    common: {width: '100%'},
+    isTablet: {width: undefined},
+  }),
   nameInput: Styles.platformStyles({
     common: {
       padding: Styles.globalMargins.tiny,
     },
     isMobile: {
       minHeight: 48,
     },
+    isTablet: {
+      maxWidth: 368,
+    },
   }),
   wrapper: Styles.platformStyles({
     isElectron: {

diff --git a/shared/provision/username-or-email/index.tsx b/shared/provision/username-or-email/index.tsx
@@ -123,7 +123,10 @@ const styles = Styles.styleSheetCreate(
         },
       }),
       contentContainer: Styles.platformStyles({isMobile: {...Styles.padding(0)}}),
-      fill: Styles.platformStyles({isMobile: {height: '100%', width: '100%'}}),
+      fill: Styles.platformStyles({
+        isMobile: {height: '100%', width: '100%'},
+        isTablet: {width: 410},
+      }),
       forgotUsername: {
         alignSelf: 'flex-end',
       },

diff --git a/shared/signup/device-name/index.tsx b/shared/signup/device-name/index.tsx
@@ -3,6 +3,7 @@ import * as Kb from '../../common-adapters'
 import * as Styles from '../../styles'
 import * as Platform from '../../constants/platform'
 import {SignupScreen, errorBanner, InfoIcon} from '../common'
+import flags from '../../util/feature-flags'
 
 type Props = {
   error: string
@@ -35,7 +36,13 @@ const EnterDevicename = (props: Props) => {
       banners={errorBanner(props.error)}
       buttons={[{disabled, label: 'Continue', onClick: onContinue, type: 'Success', waiting: props.waiting}]}
       onBack={props.onBack}
-      title={Styles.isMobile ? 'Name this phone' : 'Name this computer'}
+      title={
+        Styles.isMobile
+          ? flags.tabletSupport
+            ? 'Name this device'
+            : 'Name this phone'
+          : 'Name this computer'
+      }
     >
       <Kb.Box2
         alignItems="center"
@@ -89,6 +96,9 @@ const styles = Styles.styleSheetCreate(() => ({
     isElectron: {
       width: 368,
     },
+    isTablet: {
+      maxWidth: 368,
+    },
   }),
   inputBox: Styles.platformStyles({
     isElectron: {
@@ -98,6 +108,9 @@ const styles = Styles.styleSheetCreate(() => ({
     isMobile: {
       width: '100%',
     },
+    isTablet: {
+      maxWidth: 368,
+    },
   }),
   inputSub: {
     marginLeft: 2,

diff --git a/shared/signup/phone-number/index.tsx b/shared/signup/phone-number/index.tsx
@@ -80,7 +80,7 @@ export const EnterPhoneNumberBody = (props: BodyProps) => {
       direction="vertical"
       gap={Styles.isMobile ? 'small' : 'medium'}
       fullWidth={true}
-      style={Styles.globalStyles.flexOne}
+      style={styles.container}
     >
       <Kb.Icon type={props.iconType} />
       <Kb.Box2 direction="vertical" gap="tiny" style={styles.inputBox}>
@@ -111,6 +111,10 @@ EnterPhoneNumberBody.defaultProps = {
 
 const styles = Styles.styleSheetCreate(() => ({
   checkbox: {width: '100%'},
+  container: Styles.platformStyles({
+    common: Styles.globalStyles.flexOne,
+    isTablet: {maxWidth: 386},
+  }),
   input: Styles.platformStyles({
     isElectron: {
       height: 38,

diff --git a/shared/signup/phone-number/verify.tsx b/shared/signup/phone-number/verify.tsx
@@ -182,6 +182,7 @@ const styles = Styles.styleSheetCreate(
           minHeight: 48,
           width: '100%',
         },
+        isTablet: {maxWidth: 368},
       }),
       inputText: Styles.platformStyles({
         isMobile: {