Page MenuHomePhabricator
Files F3521826

D14064.id46211.diff
No OneTemporary
Actions

D14064.id46211.diff
View Options

diff --git a/native/account/qr-code-screen.react.js b/native/account/qr-code-screen.react.js
--- a/native/account/qr-code-screen.react.js
+++ b/native/account/qr-code-screen.react.js
@@ -9,6 +9,8 @@
import { platformToIdentityDeviceType } from 'lib/types/identity-service-types.js';
import { getConfig } from 'lib/utils/config.js';
+import RegistrationContainer from './registration/registration-container.react.js';
+import RegistrationContentContainer from './registration/registration-content-container.react.js';
import type { SignInNavigationProp } from './sign-in-navigator.react.js';
import type { NavigationRoute } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js';
@@ -38,56 +40,61 @@
const styles = useStyles(unboundStyles);
return (
- <View style={styles.container}>
- <Text style={styles.heading}>Log in to Comm</Text>
- <Text style={styles.headingSubtext}>
- Open the Comm app on your logged-in phone and scan the QR code below
- </Text>
- <View style={styles.qrCodeContainer}>
- <QRCode value={qrCodeURL} size={200} />
- </View>
- <View style={styles.instructionsBox}>
- <Text style={styles.instructionsTitle}>How to find the scanner:</Text>
- <Text style={styles.instructionsStep}>
- <Text>Go to </Text>
- <Text style={styles.instructionsBold}>Profile</Text>
- </Text>
- <Text style={styles.instructionsStep}>
- <Text>Select </Text>
- <Text style={styles.instructionsBold}>Linked devices </Text>
- </Text>
- <Text style={styles.instructionsStep}>
- <Text>Click </Text>
- <Text style={styles.instructionsBold}>Add </Text>
- <Text>on the top right</Text>
- </Text>
- </View>
- </View>
+ <RegistrationContainer>
+ <RegistrationContentContainer>
+ <View style={styles.container}>
+ <Text style={styles.heading}>Log in to Comm</Text>
+ <Text style={styles.headingSubtext}>
+ Open the Comm app on your logged-in phone and scan the QR code below
+ </Text>
+ <View style={styles.qrCodeContainer}>
+ <QRCode value={qrCodeURL} size={200} />
+ </View>
+ <View style={styles.instructionsBox}>
+ <Text style={styles.instructionsTitle}>
+ How to find the scanner:
+ </Text>
+ <Text style={styles.instructionsStep}>
+ <Text>Go to </Text>
+ <Text style={styles.instructionsBold}>Profile</Text>
+ </Text>
+ <Text style={styles.instructionsStep}>
+ <Text>Select </Text>
+ <Text style={styles.instructionsBold}>Linked devices </Text>
+ </Text>
+ <Text style={styles.instructionsStep}>
+ <Text>Click </Text>
+ <Text style={styles.instructionsBold}>Add </Text>
+ <Text>on the top right</Text>
+ </Text>
+ </View>
+ </View>
+ </RegistrationContentContainer>
+ </RegistrationContainer>
);
}
const unboundStyles = {
container: {
flex: 1,
- alignItems: 'center',
- marginTop: 125,
+ backgroundColor: 'panelBackground',
},
heading: {
fontSize: 24,
color: 'panelForegroundLabel',
- paddingBottom: 12,
+ paddingBottom: 16,
},
headingSubtext: {
- fontSize: 12,
- color: 'panelForegroundLabel',
- paddingBottom: 30,
- textAlign: 'center',
- width: 300,
+ fontFamily: 'Arial',
+ fontSize: 15,
+ lineHeight: 20,
+ color: 'panelForegroundSecondaryLabel',
+ paddingBottom: 32,
},
instructionsBox: {
+ alignSelf: 'stretch',
alignItems: 'center',
- width: 300,
- marginTop: 40,
+ marginTop: 32,
padding: 15,
borderColor: 'panelForegroundLabel',
borderWidth: 2,
@@ -109,6 +116,7 @@
qrCodeContainer: {
padding: 5,
backgroundColor: 'panelForegroundLabel',
+ alignSelf: 'center',
},
};
diff --git a/native/account/sign-in-navigator.react.js b/native/account/sign-in-navigator.react.js
--- a/native/account/sign-in-navigator.react.js
+++ b/native/account/sign-in-navigator.react.js
@@ -6,7 +6,6 @@
} from '@react-navigation/core';
import { createStackNavigator } from '@react-navigation/stack';
import * as React from 'react';
-import { SafeAreaView } from 'react-native-safe-area-context';
import QRCodeScreen from './qr-code-screen.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
@@ -15,9 +14,7 @@
type SignInParamList,
QRCodeScreenRouteName,
} from '../navigation/route-names.js';
-import { useStyles, useColors } from '../themes/colors.js';
-
-const safeAreaEdges = ['bottom'];
+import { useColors } from '../themes/colors.js';
export type SignInNavigationProp<RouteName: $Keys<SignInParamList>> =
StackNavigationProp<ScreenParamList, RouteName>;
@@ -35,7 +32,6 @@
// eslint-disable-next-line no-unused-vars
function SignInNavigator(props: SignInNavigatorProps): React.Node {
- const styles = useStyles(unboundStyles);
const colors = useColors();
const screenOptions = React.useMemo(
@@ -52,25 +48,13 @@
);
return (
- <SafeAreaView style={styles.safeArea} edges={safeAreaEdges}>
- <SignInStack.Navigator screenOptions={screenOptions}>
- <SignInStack.Screen
- name={QRCodeScreenRouteName}
- component={QRCodeScreen}
- />
- </SignInStack.Navigator>
- </SafeAreaView>
+ <SignInStack.Navigator screenOptions={screenOptions}>
+ <SignInStack.Screen
+ name={QRCodeScreenRouteName}
+ component={QRCodeScreen}
+ />
+ </SignInStack.Navigator>
);
}
-const unboundStyles = {
- safeArea: {
- flex: 1,
- backgroundColor: 'panelBackground',
- },
- headerLeftStyle: {
- paddingLeft: 12,
- },
-};
-
export default SignInNavigator;

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 24, 4:54 AM (19 h, 15 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2698386
Default Alt Text
D14064.id46211.diff (5 KB)

Event Timeline