From dc4f962344d0bfe61db1d9a82303d611f7ed9b52 Mon Sep 17 00:00:00 2001
From: Nik Graf <nik@nikgraf.com>
Date: Wed, 12 Jun 2024 14:57:58 +0200
Subject: [PATCH] optimize for dark mode

---
 apps/app/app.json             |  2 +-
 apps/app/src/app/login.tsx    | 82 ++++++++++++++++++-----------------
 apps/app/src/app/register.tsx | 82 ++++++++++++++++++-----------------
 3 files changed, 85 insertions(+), 81 deletions(-)

diff --git a/apps/app/app.json b/apps/app/app.json
index f3de349..13a6001 100644
--- a/apps/app/app.json
+++ b/apps/app/app.json
@@ -7,7 +7,7 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "dark",
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",
diff --git a/apps/app/src/app/login.tsx b/apps/app/src/app/login.tsx
index b7e0f23..6a1121d 100644
--- a/apps/app/src/app/login.tsx
+++ b/apps/app/src/app/login.tsx
@@ -15,50 +15,52 @@ const Login = () => {
   const { redirect } = useLocalSearchParams<{ redirect?: string }>();
 
   return (
-    <View className="max-w-md mr-auto ml-auto min-w-80 mt-32">
-      <AuthForm
-        onSubmit={async ({ password, username }) => {
-          const loginResult = await login({
-            userIdentifier: username,
-            password,
-          });
-          if (loginResult === null) {
-            setError("Failed to login");
-            return;
-          }
-          const lockerKey = deriveKey({
-            context: "userLocker",
-            key: loginResult.exportKey,
-            subkeyId: "1D4xb6ADE6j67ZttH7cj7Q",
-          });
-          setSessionKey(loginResult.sessionKey);
-          setLockerKey(lockerKey.key);
+    <View className="bg-background flex-1">
+      <View className="max-w-md mr-auto ml-auto min-w-80 mt-32">
+        <AuthForm
+          onSubmit={async ({ password, username }) => {
+            const loginResult = await login({
+              userIdentifier: username,
+              password,
+            });
+            if (loginResult === null) {
+              setError("Failed to login");
+              return;
+            }
+            const lockerKey = deriveKey({
+              context: "userLocker",
+              key: loginResult.exportKey,
+              subkeyId: "1D4xb6ADE6j67ZttH7cj7Q",
+            });
+            setSessionKey(loginResult.sessionKey);
+            setLockerKey(lockerKey.key);
 
-          if (redirect) {
-            router.navigate(redirect);
-            return;
-          }
-          router.navigate("/");
-        }}
-        children="Login"
-        isPending={isPending}
-      />
+            if (redirect) {
+              router.navigate(redirect);
+              return;
+            }
+            router.navigate("/");
+          }}
+          children="Login"
+          isPending={isPending}
+        />
 
-      {error && (
-        <View className="mt-4">
-          <View className="flex flex-row items-center gap-1">
-            <AlertCircle className="h-4 w-4" />
-            {/* TODO proper styling */}
-            <Text>Error</Text>
+        {error && (
+          <View className="mt-4">
+            <View className="flex flex-row items-center gap-1">
+              <AlertCircle className="h-4 w-4" />
+              {/* TODO proper styling */}
+              <Text>Error</Text>
+            </View>
+            <Text>Failed to log in</Text>
           </View>
-          <Text>Failed to log in</Text>
-        </View>
-      )}
+        )}
 
-      <View className="mt-8 text-center">
-        <Link href="/register" className="text-center">
-          <Text>Sign up here</Text>
-        </Link>
+        <View className="mt-8 text-center">
+          <Link href="/register" className="text-center">
+            <Text>Sign up here</Text>
+          </Link>
+        </View>
       </View>
     </View>
   );
diff --git a/apps/app/src/app/register.tsx b/apps/app/src/app/register.tsx
index c906793..2f18b49 100644
--- a/apps/app/src/app/register.tsx
+++ b/apps/app/src/app/register.tsx
@@ -15,49 +15,51 @@ const Register = () => {
   const [error, setError] = useState<string | null>(null);
 
   return (
-    <View className="max-w-md mr-auto ml-auto min-w-80 mt-32">
-      <AuthForm
-        onSubmit={async ({ password, username }) => {
-          const result = await registerAndLogin({
-            userIdentifier: username,
-            password,
-          });
-          if (!result) {
-            setError("Failed to register");
-            return;
-          }
-          const lockerKey = deriveKey({
-            context: "userLocker",
-            key: result.exportKey,
-            subkeyId: "1D4xb6ADE6j67ZttH7cj7Q",
-          });
-          setSessionKey(result.sessionKey);
-          setLockerKey(lockerKey.key);
+    <View className="bg-background flex-1">
+      <View className="max-w-md mr-auto ml-auto min-w-80 mt-32">
+        <AuthForm
+          onSubmit={async ({ password, username }) => {
+            const result = await registerAndLogin({
+              userIdentifier: username,
+              password,
+            });
+            if (!result) {
+              setError("Failed to register");
+              return;
+            }
+            const lockerKey = deriveKey({
+              context: "userLocker",
+              key: result.exportKey,
+              subkeyId: "1D4xb6ADE6j67ZttH7cj7Q",
+            });
+            setSessionKey(result.sessionKey);
+            setLockerKey(lockerKey.key);
 
-          if (redirect) {
-            router.navigate(redirect);
-            return;
-          }
-          router.navigate("/");
-        }}
-        children="Sign up"
-        isPending={isPending}
-      />
-      {error && (
-        <View className="mt-4">
-          <View className="flex flex-row items-center gap-1">
-            <AlertCircle className="h-4 w-4" />
-            {/* TODO proper styling */}
-            <Text>Error</Text>
+            if (redirect) {
+              router.navigate(redirect);
+              return;
+            }
+            router.navigate("/");
+          }}
+          children="Sign up"
+          isPending={isPending}
+        />
+        {error && (
+          <View className="mt-4">
+            <View className="flex flex-row items-center gap-1">
+              <AlertCircle className="h-4 w-4" />
+              {/* TODO proper styling */}
+              <Text>Error</Text>
+            </View>
+            <Text>Failed to sign up</Text>
           </View>
-          <Text>Failed to sign up</Text>
-        </View>
-      )}
+        )}
 
-      <View className="mt-8 text-center">
-        <Link href="/login" className="text-center">
-          <Text>Login here</Text>
-        </Link>
+        <View className="mt-8 text-center">
+          <Link href="/login" className="text-center">
+            <Text>Login here</Text>
+          </Link>
+        </View>
       </View>
     </View>
   );