From cb72a46c2985aef1f35cfec73e31438680a072f8 Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Fri, 14 Mar 2025 17:37:28 +0500
Subject: [PATCH] mobile: fix login ui on tablets

---
 apps/mobile/app/components/auth/index.js  |  5 ++++-
 apps/mobile/app/components/auth/login.js  |  2 +-
 apps/mobile/app/components/auth/signup.js | 11 ++++++-----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/mobile/app/components/auth/index.js b/apps/mobile/app/components/auth/index.js
index 3bce62c31..cbfdfd499 100644
--- a/apps/mobile/app/components/auth/index.js
+++ b/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%"
         }}
       >
diff --git a/apps/mobile/app/components/auth/login.js b/apps/mobile/app/components/auth/login.js
index d299d2a0c..0efee870a 100644
--- a/apps/mobile/app/components/auth/login.js
+++ b/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
           }}
         >
diff --git a/apps/mobile/app/components/auth/signup.js b/apps/mobile/app/components/auth/signup.js
index 5436b9359..b3acab1a0 100644
--- a/apps/mobile/app/components/auth/signup.js
+++ b/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
           }}
         >