feat(prejoin/lobby): style adjustments (#16550)

* UI adjustments, for prejoin and lobby, around device screen orientation.

react/features/prejoin/components/native/Prejoin.tsx

@@ -25,7 +25,7 @@ import { IconCloseLarge } from '../../../base/icons/svg';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { getLocalParticipant } from '../../../base/participants/functions';
 import { getFieldValue } from '../../../base/react/functions';
-import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
+import { ASPECT_RATIO_WIDE } from '../../../base/responsive-ui/constants';
 import { updateSettings } from '../../../base/settings/actions';
 import Button from '../../../base/ui/components/native/Button';
 import Input from '../../../base/ui/components/native/Input';
@@ -51,9 +51,10 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
     const dispatch = useDispatch();
     const isFocused = useIsFocused();
     const { t } = useTranslation();
-    const aspectRatio = useSelector(
-        (state: IReduxState) => state['features/base/responsive-ui']?.aspectRatio
+    const { aspectRatio, clientHeight, clientWidth } = useSelector(
+        (state: IReduxState) => state['features/base/responsive-ui']
     );
+    const isTablet = Math.min(clientWidth, clientHeight) >= 768;
     const localParticipant = useSelector((state: IReduxState) => getLocalParticipant(state));
     const isDisplayNameMandatory = useSelector((state: IReduxState) => isDisplayNameRequired(state));
     const isDisplayNameVisible
@@ -147,16 +148,11 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
         });
     }, [ navigation ]);
 
-    let contentWrapperStyles;
-    let contentContainerStyles;
-    let largeVideoContainerStyles;
+    let contentContainerStyles = styles.contentContainer;
+    let largeVideoContainerStyles = styles.largeVideoContainer;
 
-    if (aspectRatio === ASPECT_RATIO_NARROW) {
-        contentWrapperStyles = styles.contentWrapper;
-        contentContainerStyles = styles.contentContainer;
-        largeVideoContainerStyles = styles.largeVideoContainer;
-    } else {
-        contentWrapperStyles = styles.contentWrapperWide;
+    if (isTablet && aspectRatio === ASPECT_RATIO_WIDE) {
+        // @ts-ignore
         contentContainerStyles = styles.contentContainerWide;
         largeVideoContainerStyles = styles.largeVideoContainerWide;
     }
@@ -165,7 +161,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
         <JitsiScreen
             addBottomPadding = { false }
             safeAreaInsets = { [ 'right' ] }
-            style = { contentWrapperStyles }>
+            style = { styles.contentWrapper }>
             <BrandingImageBackground />
             {
                 isFocused
@@ -207,7 +203,7 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
                 }
                 {
                     showDisplayNameError && (
-                        <View style = { styles.errorContainer as StyleProp<TextStyle> }>
+                        <View style = { styles.errorContainer as StyleProp<ViewStyle> }>
                             <Text style = { styles.error as StyleProp<TextStyle> }>
                                 { t('prejoin.errorMissingName') }
                             </Text>

react/features/prejoin/components/native/styles.ts

@@ -10,14 +10,14 @@ export const preJoinStyles = {
     buttonStylesBorderless: {
         iconStyle: {
             color: BaseTheme.palette.icon01,
-            fontSize: 24
+            fontSize: BaseTheme.spacing[5]
         },
         style: {
             flexDirection: 'row',
             justifyContent: 'center',
             margin: BaseTheme.spacing[3],
-            height: 24,
-            width: 24
+            height: BaseTheme.spacing[5],
+            width: BaseTheme.spacing[5]
         },
         underlayColor: 'transparent'
     },
@@ -27,13 +27,8 @@ export const preJoinStyles = {
         flexDirection: 'row'
     },
 
-    contentWrapperWide: {
-        flex: 1,
-        flexDirection: 'row'
-    },
-
     largeVideoContainer: {
-        height: '60%'
+        height: '50%'
     },
 
     largeVideoContainerWide: {
@@ -46,9 +41,9 @@ export const preJoinStyles = {
     contentContainer: {
         alignItems: 'center',
         backgroundColor: BaseTheme.palette.uiBackground,
-        bottom: 0,
+        bottom: BaseTheme.spacing[0],
         display: 'flex',
-        height: 280,
+        height: '50%',
         justifyContent: 'center',
         position: 'absolute',
         width: '100%',
@@ -177,6 +172,6 @@ export const preJoinStyles = {
     },
     warningIcon: {
         color: BaseTheme.palette.ui01,
-        fontSize: 40
+        fontSize: BaseTheme.spacing[7]
     }
 };