Fix squashed signup instructions on iPad with keyboard (keybase#23856)

digitalfu · Apr 20, 2020 · fced6b2 · fced6b2
1 parent d8f3394
commit fced6b2
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 123 deletions.
diff --git a/shared/signup/device-name/index.tsx b/shared/signup/device-name/index.tsx
@@ -62,7 +62,7 @@ const EnterDevicename = (props: Props) => {
               : 'icon-computer-background-1-96'
           }
         />
-        <Kb.Box2 direction="vertical" gap="tiny" style={styles.inputBox}>
+        <Kb.Box2 direction="vertical" fullWidth={Styles.isPhone} gap="tiny">
           <Kb.LabeledInput
             autoFocus={true}
             containerStyle={styles.input}
@@ -78,7 +78,7 @@ const EnterDevicename = (props: Props) => {
               {Constants.deviceNameInstructions}
             </Kb.Text>
           ) : (
-            <Kb.Text type="BodySmall" style={styles.inputSub}>
+            <Kb.Text type="BodySmall">
               Your device name will be public and can not be changed in the future.
             </Kb.Text>
           )}
@@ -107,28 +107,9 @@ const styles = Styles.styleSheetCreate(() => ({
     marginLeft: 2,
   },
   input: Styles.platformStyles({
-    isElectron: {
-      width: 368,
-    },
-    isTablet: {
-      maxWidth: 368,
-    },
+    isElectron: {width: 368},
+    isTablet: {width: 368},
   }),
-  inputBox: Styles.platformStyles({
-    isElectron: {
-      // need to set width so subtext will wrap
-      width: 368,
-    },
-    isMobile: {
-      width: '100%',
-    },
-    isTablet: {
-      maxWidth: 368,
-    },
-  }),
-  inputSub: {
-    marginLeft: 2,
-  },
 }))
 
 export default EnterDevicename
diff --git a/shared/signup/username/index.tsx b/shared/signup/username/index.tsx
@@ -68,7 +68,7 @@ const EnterUsername = (props: Props) => {
         fullWidth={true}
       >
         <Kb.Avatar size={Platform.isLargeScreen ? 96 : 64} />
-        <Kb.Box2 direction="vertical" gap="tiny" style={styles.inputBox}>
+        <Kb.Box2 direction="vertical" fullWidth={Styles.isPhone} gap="tiny">
           <Kb.LabeledInput
             autoFocus={true}
             containerStyle={styles.input}
@@ -78,9 +78,7 @@ const EnterUsername = (props: Props) => {
             onEnterKeyDown={onContinue}
             value={username}
           />
-          <Kb.Text type="BodySmall" style={styles.inputSub}>
-            Your username is unique and can not be changed in the future.
-          </Kb.Text>
+          <Kb.Text type="BodySmall">Your username is unique and can not be changed in the future.</Kb.Text>
         </Kb.Box2>
       </Kb.Box2>
     </SignupScreen>
@@ -106,25 +104,9 @@ const styles = Styles.styleSheetCreate(() => ({
     flex: 1,
   },
   input: Styles.platformStyles({
-    isElectron: {
-      width: 368,
-    },
+    isElectron: {width: 368},
+    isTablet: {width: 368},
   }),
-  inputBox: Styles.platformStyles({
-    isElectron: {
-      // need to set width so subtext will wrap
-      width: 368,
-    },
-    isMobile: {
-      width: '100%',
-    },
-    isTablet: {
-      maxWidth: 368,
-    },
-  }),
-  inputSub: {
-    marginLeft: 2,
-  },
 }))
 
 export default EnterUsername
diff --git a/shared/stories/__rntests__/__snapshots__/Storyshots-rn.js.snap b/shared/stories/__rntests__/__snapshots__/Storyshots-rn.js.snap
diff --git a/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap b/shared/stories/__tests__/__snapshots__/Storyshots.test.js.snap