From 1731d5188d4f6c92e9c6f2d9e0857efed21acdfd Mon Sep 17 00:00:00 2001
From: Calinteodor <calin.chitu@8x8.com>
Date: Tue, 8 Nov 2022 19:14:29 +0200
Subject: [PATCH] feat(prejoin/native): updated UI (#12528)

---
 .../prejoin/components/native/Prejoin.tsx     | 26 +++++-----
 react/features/prejoin/components/styles.js   | 47 ++++++++++---------
 2 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/react/features/prejoin/components/native/Prejoin.tsx b/react/features/prejoin/components/native/Prejoin.tsx
index eb38cec139..eedca4d385 100644
--- a/react/features/prejoin/components/native/Prejoin.tsx
+++ b/react/features/prejoin/components/native/Prejoin.tsx
@@ -89,7 +89,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
         return true;
     }, [ dispatch ]);
 
-    const headerLeft = useCallback(() => {
+    const headerLeft = () => {
         if (Platform.OS === 'ios') {
             return (
                 <HeaderNavigationButton
@@ -103,9 +103,9 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                 onPress = { goBack }
                 src = { IconCloseLarge } />
         );
-    }, []);
+    };
 
-    const { PRIMARY, SECONDARY } = BUTTON_TYPES;
+    const { PRIMARY, TERTIARY } = BUTTON_TYPES;
     const joinButtonDisabled = isJoining || (!displayName && isDisplayNameMandatory);
 
     useEffect(() => {
@@ -148,21 +148,26 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
             {
                 isFocused
                 && <View style = { largeVideoContainerStyles }>
-                    <LargeVideo />
-                    <View style = { styles.displayRoomNameBackdrop }>
+                    <View style = { styles.displayRoomNameBackdrop as StyleProp<TextStyle> }>
                         <Text
                             numberOfLines = { 1 }
                             style = { styles.preJoinRoomName as StyleProp<TextStyle> }>
                             { roomName }
                         </Text>
                     </View>
+                    <LargeVideo />
                 </View>
             }
             <View style = { contentContainerStyles }>
+                <View style = { toolboxContainerStyles }>
+                    <AudioMuteButton
+                        styles = { styles.buttonStylesBorderless } />
+                    <VideoMuteButton
+                        styles = { styles.buttonStylesBorderless } />
+                </View>
                 <View style = { styles.formWrapper as StyleProp<ViewStyle> }>
                     <Input
                         // @ts-ignore
-                        autoFocus = { true }
                         customStyles = {{ input: styles.customInput }}
                         onChange = { onChangeDisplayName }
                         placeholder = { t('dialog.enterDisplayName') }
@@ -178,14 +183,9 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                         accessibilityLabel = 'prejoin.joinMeetingInLowBandwidthMode'
                         disabled = { joinButtonDisabled }
                         labelKey = 'prejoin.joinMeetingInLowBandwidthMode'
+                        labelStyle = { styles.joinLowBandwidthLabel }
                         onClick = { onJoinLowBandwidth }
-                        type = { SECONDARY } />
-                </View>
-                <View style = { toolboxContainerStyles }>
-                    <AudioMuteButton
-                        styles = { styles.buttonStylesBorderless } />
-                    <VideoMuteButton
-                        styles = { styles.buttonStylesBorderless } />
+                        type = { TERTIARY } />
                 </View>
             </View>
         </JitsiScreen>
diff --git a/react/features/prejoin/components/styles.js b/react/features/prejoin/components/styles.js
index 4ca2095edb..fe265f6adb 100644
--- a/react/features/prejoin/components/styles.js
+++ b/react/features/prejoin/components/styles.js
@@ -1,12 +1,16 @@
 import BaseTheme from '../../base/ui/components/BaseTheme.native';
 
-const SECONDARY_COLOR = BaseTheme.palette.border04;
 
 export default {
     joinButton: {
         marginVertical: BaseTheme.spacing[3]
     },
 
+    joinLowBandwidthLabel: {
+        color: BaseTheme.palette.text01,
+        textAlign: 'center'
+    },
+
     buttonStylesBorderless: {
         iconStyle: {
             color: BaseTheme.palette.icon01,
@@ -32,7 +36,7 @@ export default {
     },
 
     largeVideoContainer: {
-        minHeight: '60%'
+        height: '60%'
     },
 
     largeVideoContainerWide: {
@@ -44,11 +48,14 @@ export default {
 
     contentContainer: {
         alignSelf: 'center',
+        backgroundColor: BaseTheme.palette.uiBackground,
+        bottom: 0,
         display: 'flex',
+        height: 284,
         justifyContent: 'center',
-        minHeight: '40%',
-        padding: BaseTheme.spacing[3],
-        width: 400
+        position: 'absolute',
+        width: 390,
+        zIndex: 1
     },
 
     contentContainerWide: {
@@ -63,9 +70,15 @@ export default {
 
     toolboxContainer: {
         alignSelf: 'center',
+        backgroundColor: BaseTheme.palette.ui01,
+        borderRadius: BaseTheme.shape.borderRadius,
         display: 'flex',
         flexDirection: 'row',
-        justifyContent: 'center'
+        height: 60,
+        justifyContent: 'space-between',
+        marginVertical: BaseTheme.spacing[3],
+        paddingHorizontal: BaseTheme.spacing[2],
+        width: 148
     },
 
     toolboxContainerWide: {
@@ -83,16 +96,6 @@ export default {
         textAlign: 'center'
     },
 
-    field: {
-        backgroundColor: BaseTheme.palette.field02,
-        borderColor: SECONDARY_COLOR,
-        borderRadius: BaseTheme.shape.borderRadius,
-        borderWidth: 2,
-        color: BaseTheme.palette.text06,
-        height: BaseTheme.spacing[7],
-        textAlign: 'center'
-    },
-
     preJoinRoomName: {
         ...BaseTheme.typography.heading5,
         color: BaseTheme.palette.text01,
@@ -101,12 +104,14 @@ export default {
 
     displayRoomNameBackdrop: {
         alignSelf: 'center',
-        backgroundColor: BaseTheme.palette.ui16,
-        bottom: BaseTheme.spacing[3],
-        borderRadius: 4,
-        margin: BaseTheme.spacing[3],
+        backgroundColor: BaseTheme.palette.uiBackground,
+        borderRadius: BaseTheme.shape.borderRadius,
+        marginTop: BaseTheme.spacing[3],
+        opacity: 0.7,
         paddingHorizontal: BaseTheme.spacing[3],
         paddingVertical: BaseTheme.spacing[1],
-        position: 'absolute'
+        position: 'absolute',
+        width: 243,
+        zIndex: 1
     }
 };