mobile: fix login ui on tablets

apps/mobile/app/components/auth/index.js

@@ -31,11 +31,13 @@ import { Login } from "./login";
 import { Signup } from "./signup";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { DefaultAppStyles } from "../../utils/styles";
+import { useSettingStore } from "../../stores/use-setting-store";
 
 const Auth = ({ navigation, route }) => {
   const [currentAuthMode, setCurrentAuthMode] = useState(
     route?.params?.mode || AuthMode.login
   );
+  const deviceMode = useSettingStore((state) => state.deviceMode);
   const { colors } = useThemeColors();
   const insets = useGlobalSafeAreaInsets();
   initialAuthMode.current = route?.params.mode || AuthMode.login;
@@ -49,7 +51,8 @@ const Auth = ({ navigation, route }) => {
           paddingTop: insets.top,
           top: 0,
           zIndex: 999,
-          backgroundColor: colors.secondary.background,
+          backgroundColor:
+            deviceMode === "mobile" ? colors.secondary.background : null,
           width: "100%"
         }}
       >

apps/mobile/app/components/auth/login.js

@@ -113,7 +113,7 @@ export const Login = ({ changeMode }) => {
             borderColor: isTablet ? colors.primary.border : null,
             borderRadius: isTablet ? 20 : null,
             marginTop: isTablet ? 50 : null,
-            width: !isTablet ? null : "50%",
+            width: !isTablet ? null : "70%",
             minHeight: height * 0.4
           }}
         >

apps/mobile/app/components/auth/signup.js

@@ -50,9 +50,8 @@ export const Signup = ({ changeMode, trial }) => {
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
-  const isTablet = width > 600;
-
   const { width, height } = useWindowDimensions();
+  const isTablet = width > 600;
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
       ToastManager.show({
@@ -104,8 +103,10 @@ export const Signup = ({ changeMode, trial }) => {
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
           backgroundColor: colors.primary.background,
+          zIndex: 10,
           width: "100%",
-          height: "100%"
+          height: "100%",
+          alignSelf: "center"
         }}
       >
         <View
@@ -113,15 +114,15 @@ export const Signup = ({ changeMode, trial }) => {
             justifyContent: "flex-end",
             paddingHorizontal: DefaultAppStyles.GAP,
             backgroundColor: colors.secondary.background,
-            marginBottom: 20,
             borderBottomWidth: 0.8,
+            marginBottom: DefaultAppStyles.GAP_VERTICAL,
             borderBottomColor: colors.primary.border,
             alignSelf: isTablet ? "center" : undefined,
             borderWidth: isTablet ? 1 : null,
             borderColor: isTablet ? colors.primary.border : null,
             borderRadius: isTablet ? 20 : null,
             marginTop: isTablet ? 50 : null,
-            width: !isTablet ? null : "50%",
+            width: !isTablet ? null : "70%",
             minHeight: height * 0.4
           }}
         >