fix(nc-android): disable landscape mode (#3012)

* fix(nc-android): disable landscape mode

* feat(nc-android): UI sizing

.github/workflows/nc-android-apk.yml

@@ -25,6 +25,7 @@ jobs:
           sudo apt-get -y install \
           libwebkit2gtk-4.0-dev \
           build-essential \
+          unzip \
           curl \
           wget \
           libssl-dev \

nym-connect-android/src-tauri/gen/android/nym_connect_android/app/src/main/AndroidManifest.xml

@@ -5,6 +5,7 @@
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:theme="@style/Theme.nym_connect_android"
+        android:screenOrientation="portrait"
         android:usesCleartextTraffic="${usesCleartextTraffic}">
         <activity
             android:name=".MainActivity"

nym-connect-android/src/components/HelpPage.tsx

@@ -20,7 +20,7 @@ export const HelpPage = ({
   onPrev?: () => void;
 }) => (
   <Stack justifyContent="space-between" sx={{ height: '100%' }}>
-    <Stack gap={2}>
+    <Stack gap={2} alignItems="center">
       <StepIndicator step={step} />
       <Typography variant="body2" color="white" fontWeight="bold">
         How to connect guide {step}/{totalSteps}

nym-connect-android/src/components/HelpPageActions.tsx

@@ -5,14 +5,14 @@ import React from 'react';
 export const HelpPageActions = ({ onNext, onPrev }: { onNext?: () => void; onPrev?: () => void }) => (
   <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
     {onPrev ? (
-      <Button onClick={onPrev} color="inherit" startIcon={<ArrowBack color="inherit" style={{ fontSize: 16 }} />}>
+      <Button onClick={onPrev} color="inherit" startIcon={<ArrowBack color="inherit" style={{ fontSize: 22 }} />}>
         Back
       </Button>
     ) : (
       <div />
     )}
     {onNext && (
-      <Button onClick={onNext} endIcon={<ArrowForward style={{ fontSize: 16 }} />}>
+      <Button onClick={onNext} endIcon={<ArrowForward style={{ fontSize: 22 }} />}>
         Next
       </Button>
     )}

nym-connect-android/src/components/HelpPageStepIndicator.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
-import { Box } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 
 const Step = ({ highlight }: { highlight: boolean }) => (
-  <Box sx={{ width: '65px', height: '1px', bgcolor: highlight ? 'nym.highlight' : 'grey.600' }} />
+  <Box sx={{ width: '65px', height: '3px', bgcolor: highlight ? 'nym.highlight' : 'grey.600' }} />
 );
 
 export const StepIndicator = ({ step }: { step: number }) => (
-  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+  <Stack direction="row" alignItems="center" justifyContent="space-between" width="240px">
     <Step highlight />
     <Step highlight={step >= 2} />
     <Step highlight={step >= 3} />
-  </Box>
+  </Stack>
 );

nym-connect-android/src/pages/menu/index.tsx

@@ -17,7 +17,7 @@ export const Menu = () => (
           <ListItem disablePadding>
             <ListItemButton>
               <ListItemIcon sx={{ minWidth: 25 }}>
-                <item.icon sx={{ fontSize: '12px' }} />
+                <item.icon sx={{ fontSize: '18px' }} />
               </ListItemIcon>{' '}
               <ListItemText>{item.title}</ListItemText>
             </ListItemButton>