Page MenuHomePhabricator
Files F3509629

D14064.id46297.diff
No OneTemporary
Actions

D14064.id46297.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
@@ -1,7 +1,7 @@
// @flow
import * as React from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, useWindowDimensions } from 'react-native';
import QRCode from 'react-native-qrcode-svg';
import { useQRAuthContext } from 'lib/components/qr-auth-provider.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';
@@ -37,71 +39,79 @@
}, [platform, qrData]);
const styles = useStyles(unboundStyles);
+
+ const { width } = useWindowDimensions();
+ const qrCodeSize = width * 0.7;
+
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={qrCodeSize} />
+ </View>
+ <View style={styles.instructionsBox}>
+ <Text style={styles.instructionsTitle}>
+ How to find the scanner:
+ </Text>
+ <Text style={styles.instructionsStep}>
+ <Text>{'\u2022 Go to '}</Text>
+ <Text style={styles.instructionsBold}>Profile</Text>
+ </Text>
+ <Text style={styles.instructionsStep}>
+ <Text>{'\u2022 Select '}</Text>
+ <Text style={styles.instructionsBold}>Linked devices </Text>
+ </Text>
+ <Text style={styles.instructionsStep}>
+ <Text>{'\u2022 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: {
- alignItems: 'center',
- width: 300,
- marginTop: 40,
- padding: 15,
- borderColor: 'panelForegroundLabel',
- borderWidth: 2,
- borderRadius: 8,
+ alignSelf: 'stretch',
+ marginTop: 32,
},
instructionsTitle: {
- fontSize: 12,
- color: 'panelForegroundLabel',
+ fontFamily: 'Arial',
+ fontSize: 15,
+ lineHeight: 20,
+ color: 'panelForegroundSecondaryLabel',
paddingBottom: 15,
},
instructionsStep: {
- fontSize: 12,
+ fontFamily: 'Arial',
+ fontSize: 15,
+ lineHeight: 20,
padding: 1,
- color: 'panelForegroundLabel',
+ color: 'panelForegroundTertiaryLabel',
},
instructionsBold: {
fontWeight: 'bold',
@@ -109,6 +119,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
Sun, Dec 22, 6:56 AM (5 h, 22 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2689951
Default Alt Text
D14064.id46297.diff (6 KB)

Event Timeline