@entropy-softworks/ui 2026.8.12 → 2026.8.17

package/src/screens/auth/ConsentScreen.tsx

@@ -51,7 +51,7 @@ export function ConsentScreen({
   const isDark = colorScheme === "dark";
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -85,11 +85,11 @@ export function ConsentScreen({
               ))
             )}
             {error ? (
-              <Text className="text-sm text-destructive">{error}</Text>
+              <Text className="text-sm text-destructive dark:text-red-900">{error}</Text>
             ) : null}
           </CardContent>
 
-          <CardFooter className="flex-col gap-3 border-t-0">
+          <CardFooter className="flex-col items-stretch gap-3 border-t-0">
             <Button
               className="w-full"
               telemetryId="auth.consent.allow"

package/src/screens/auth/ErrorScreen.tsx

@@ -43,7 +43,7 @@ export function ErrorScreen({
   const isDark = colorScheme === "dark";
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -63,7 +63,7 @@ export function ErrorScreen({
           ) : null}
 
           {onRetry || onHome ? (
-            <CardFooter className="flex-col gap-3 border-t-0">
+            <CardFooter className="flex-col items-stretch gap-3 border-t-0">
               {onRetry ? (
                 <Button
                   className="w-full"

package/src/screens/auth/ExpiredLinkScreen.tsx

@@ -40,7 +40,7 @@ export function ExpiredLinkScreen({
   const isDark = colorScheme === "dark";
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -54,7 +54,7 @@ export function ExpiredLinkScreen({
           </CardHeader>
 
           {onRequestNew || onHome ? (
-            <CardFooter className="flex-col gap-3 border-t-0">
+            <CardFooter className="flex-col items-stretch gap-3 border-t-0">
               {onRequestNew ? (
                 <Button
                   className="w-full"

package/src/screens/auth/ForgotPasswordScreen.tsx

@@ -70,7 +70,7 @@ export function ForgotPasswordScreen() {
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -119,7 +119,7 @@ export function ForgotPasswordScreen() {
                 />
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <Button
                   className="w-full"
                   telemetryId="auth.forgot_password.submit"
@@ -145,7 +145,7 @@ export function ForgotPasswordScreen() {
               </CardFooter>
             </>
           ) : (
-            <CardFooter className="flex-col gap-3 border-t-0">
+            <CardFooter className="flex-col items-stretch gap-3 border-t-0">
               <Button
                 className="w-full"
                 telemetryId="auth.forgot_password.push_2"

package/src/screens/auth/ImportDataScreen.tsx

@@ -55,7 +55,7 @@ export function ImportDataScreen({ renderImport }: ImportDataScreenProps = {}) {
 
   if (renderImport) {
     return (
-      <SafeAreaView className="flex-1 bg-background">
+      <SafeAreaView className="flex-1 bg-background dark:bg-black">
         <StatusBar style={isDark ? "light" : "dark"} />
         {renderImport({ onComplete: completeAndNavigate, onSkip: completeAndNavigate })}
       </SafeAreaView>
@@ -63,7 +63,7 @@ export function ImportDataScreen({ renderImport }: ImportDataScreenProps = {}) {
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"

package/src/screens/auth/LoginScreen.tsx

@@ -269,7 +269,7 @@ export function LoginScreen({
 
   return (
     <>
-      <SafeAreaView className="flex-1 bg-background">
+      <SafeAreaView className="flex-1 bg-background dark:bg-black">
         <StatusBar style={isDark ? "light" : "dark"} />
         <ScrollView
           className="flex-1"
@@ -387,7 +387,7 @@ export function LoginScreen({
                   </View>
                 </CardContent>
 
-                <CardFooter className="flex-col gap-3 border-t-0">
+                <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                   <MutedText className="text-center text-sm">
                     Don&apos;t have an account?{" "}
                     <Text

package/src/screens/auth/MfaEnrollScreen.tsx

@@ -160,7 +160,7 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -189,7 +189,7 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
                 <CardContent className="gap-3">{authenticatorAppPromo}</CardContent>
               ) : null}
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <Button
                   className="w-full"
                   telemetryId="auth.mfa_enroll.start_setup"
@@ -293,7 +293,7 @@ export function MfaEnrollScreen({ authenticatorAppPromo }: MfaEnrollScreenProps
                 </View>
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <Button
                   className="w-full"
                   telemetryId="auth.mfa_enroll.verify_code"

package/src/screens/auth/PasskeyEnrollScreen.tsx

@@ -39,7 +39,7 @@ export function PasskeyEnrollScreen({
   const isDark = colorScheme === "dark";
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -58,7 +58,7 @@ export function PasskeyEnrollScreen({
 
           <CardContent className="gap-2">
             {error ? (
-              <Text className="text-sm text-destructive">{error}</Text>
+              <Text className="text-sm text-destructive dark:text-red-900">{error}</Text>
             ) : (
               <MutedText className="text-sm">
                 You can always add or remove passkeys later in your account
@@ -67,7 +67,7 @@ export function PasskeyEnrollScreen({
             )}
           </CardContent>
 
-          <CardFooter className="flex-col gap-3 border-t-0">
+          <CardFooter className="flex-col items-stretch gap-3 border-t-0">
             <Button
               className="w-full"
               telemetryId="auth.passkey_enroll.enroll"

package/src/screens/auth/RegisterScreen.tsx

@@ -210,7 +210,7 @@ export function RegisterScreen({
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <KeyboardAvoidingView
         behavior={Platform.OS === "ios" ? "padding" : "height"}
@@ -381,7 +381,7 @@ export function RegisterScreen({
                   </ShakeField>
                 </CardContent>
 
-                <CardFooter className="flex-col gap-3 border-t-0">
+                <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                   <MutedText className="text-center text-sm">
                     Already have an account?{" "}
                     <Text

package/src/screens/auth/ResetPasswordScreen.tsx

@@ -219,7 +219,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"
@@ -267,7 +267,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
                 </ShakeField>
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <FormError message={firstError} />
 
                 <Button
@@ -345,7 +345,7 @@ export function ResetPasswordScreen({ encryptionWarning }: ResetPasswordScreenPr
                 </ShakeField>
               </CardContent>
 
-              <CardFooter className="flex-col gap-3 border-t-0">
+              <CardFooter className="flex-col items-stretch gap-3 border-t-0">
                 <FormError message={firstError} />
 
                 <Button

package/src/screens/auth/ServerConfigScreen.tsx

@@ -223,7 +223,7 @@ export function ServerConfigScreen({
 
   if (isLoading) {
     return (
-      <SafeAreaView className="flex-1 bg-background">
+      <SafeAreaView className="flex-1 bg-background dark:bg-black">
         <View className="flex-1 items-center justify-center">
           <ActivityIndicator size="large" color={isDark ? "white" : "black"} />
         </View>
@@ -238,7 +238,7 @@ export function ServerConfigScreen({
   ];
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style="auto" />
       <ScrollView className="flex-1">
         <View className="px-6 py-6">
@@ -247,15 +247,15 @@ export function ServerConfigScreen({
               onPress={withClickTracking("auth.server_config.back", () => router.back())}
               accessibilityRole="button"
               accessibilityLabel="Go back"
-              className="active:scale-98 h-10 w-10 items-center justify-center rounded-lg bg-secondary"
+              className="active:scale-98 h-10 w-10 items-center justify-center rounded-lg bg-secondary dark:bg-neutral-800"
             >
               <Ionicons name="close" size={24} color={isDark ? "white" : "black"} />
             </Pressable>
-            <Text className="text-lg font-semibold text-foreground">Server Configuration</Text>
+            <Text className="text-lg font-semibold text-foreground dark:text-white">Server Configuration</Text>
             <View className="h-10 w-10" />
           </View>
 
-          <View className="mb-6 rounded-lg bg-secondary p-4">
+          <View className="mb-6 rounded-lg bg-secondary dark:bg-neutral-800 p-4">
             <View className="flex-row items-start">
               <Ionicons
                 name="information-circle"
@@ -263,10 +263,10 @@ export function ServerConfigScreen({
                 color={isDark ? "#3b82f6" : "#2563eb"}
               />
               <View className="ml-3 flex-1">
-                <Text className="mb-1 text-sm font-semibold text-foreground">
+                <Text className="mb-1 text-sm font-semibold text-foreground dark:text-white">
                   Self-Hosted Server
                 </Text>
-                <Text className="text-xs text-muted-foreground">
+                <Text className="text-xs text-muted-foreground dark:text-neutral-400">
                   Configure your own {appName} server for complete control over your data. Default
                   server: {defaultUrl}
                 </Text>
@@ -275,8 +275,8 @@ export function ServerConfigScreen({
           </View>
 
           <View className="mb-6">
-            <Text className="mb-2 text-sm font-medium text-foreground">Server URL</Text>
-            <View className="flex-row items-center rounded-lg border border-border bg-background px-3 py-3">
+            <Text className="mb-2 text-sm font-medium text-foreground dark:text-white">Server URL</Text>
+            <View className="flex-row items-center rounded-lg border border-border dark:border-neutral-800 bg-background dark:bg-black px-3 py-3">
               <Ionicons
                 name="globe-outline"
                 size={20}
@@ -294,7 +294,7 @@ export function ServerConfigScreen({
                 autoCorrect={false}
                 keyboardType="url"
                 accessibilityLabel="Server URL"
-                className="ml-2 flex-1 text-base text-foreground"
+                className="ml-2 flex-1 text-base text-foreground dark:text-white"
               />
               {connectionStatus === "success" && (
                 <Ionicons name="checkmark-circle" size={20} color="#22c55e" />
@@ -310,12 +310,12 @@ export function ServerConfigScreen({
             disabled={isTestingConnection}
             accessibilityRole="button"
             accessibilityLabel="Test connection"
-            className="active:scale-98 mb-3 w-full rounded-lg border border-border bg-background px-6 py-4"
+            className="active:scale-98 mb-3 w-full rounded-lg border border-border dark:border-neutral-800 bg-background dark:bg-black px-6 py-4"
           >
             {isTestingConnection ? (
               <View className="flex-row items-center justify-center">
                 <ActivityIndicator size="small" color={isDark ? "white" : "black"} />
-                <Text className="ml-2 text-base font-semibold text-foreground">
+                <Text className="ml-2 text-base font-semibold text-foreground dark:text-white">
                   Testing Connection
                   {testAttempt > 0 ? ` (Attempt ${testAttempt}/${defaultMaxRetries})` : "..."}
                 </Text>
@@ -323,7 +323,7 @@ export function ServerConfigScreen({
             ) : (
               <View className="flex-row items-center justify-center">
                 <Ionicons name="wifi-outline" size={20} color={isDark ? "white" : "black"} />
-                <Text className="ml-2 text-base font-semibold text-foreground">
+                <Text className="ml-2 text-base font-semibold text-foreground dark:text-white">
                   Test Connection
                 </Text>
               </View>
@@ -334,11 +334,11 @@ export function ServerConfigScreen({
             onPress={withClickTracking("auth.server_config.use_default", handleUseDefault)}
             accessibilityRole="button"
             accessibilityLabel="Use default server"
-            className="active:scale-98 mb-3 w-full rounded-lg border border-border bg-background px-6 py-4"
+            className="active:scale-98 mb-3 w-full rounded-lg border border-border dark:border-neutral-800 bg-background dark:bg-black px-6 py-4"
           >
             <View className="flex-row items-center justify-center">
               <Ionicons name="cloud-outline" size={20} color={isDark ? "white" : "black"} />
-              <Text className="ml-2 text-base font-semibold text-foreground">
+              <Text className="ml-2 text-base font-semibold text-foreground dark:text-white">
                 Use Default Server
               </Text>
             </View>
@@ -348,11 +348,11 @@ export function ServerConfigScreen({
             onPress={withClickTracking("auth.server_config.clear_configuration", handleClearConfiguration)}
             accessibilityRole="button"
             accessibilityLabel="Clear all settings"
-            className="active:scale-98 mb-3 w-full rounded-lg border border-destructive bg-background px-6 py-3"
+            className="active:scale-98 mb-3 w-full rounded-lg border border-destructive dark:border-red-900 bg-background dark:bg-black px-6 py-3"
           >
             <View className="flex-row items-center justify-center">
               <Ionicons name="trash-outline" size={20} color="#ef4444" />
-              <Text className="ml-2 text-base font-medium text-destructive">
+              <Text className="ml-2 text-base font-medium text-destructive dark:text-red-900">
                 Clear All Settings
               </Text>
             </View>
@@ -362,20 +362,20 @@ export function ServerConfigScreen({
             onPress={withClickTracking("auth.server_config.save", handleSave)}
             accessibilityRole="button"
             accessibilityLabel="Save configuration"
-            className="active:scale-98 mb-6 w-full rounded-lg bg-primary px-6 py-4"
+            className="active:scale-98 mb-6 w-full rounded-lg bg-primary dark:bg-white px-6 py-4"
           >
-            <Text className="text-center text-base font-semibold text-primary-foreground">
+            <Text className="text-center text-base font-semibold text-primary-foreground dark:text-black">
               Save Configuration
             </Text>
           </Pressable>
 
-          <View className="rounded-lg bg-card p-4">
-            <Text className="mb-3 text-sm font-semibold text-foreground">Need Help?</Text>
+          <View className="rounded-lg bg-card dark:bg-neutral-900/50 p-4">
+            <Text className="mb-3 text-sm font-semibold text-foreground dark:text-white">Need Help?</Text>
             <View className="space-y-2">
               {bullets.map((bullet, idx) => (
                 <View key={idx} className="flex-row items-start">
-                  <Text className="mr-2 text-sm text-muted-foreground">•</Text>
-                  <Text className="flex-1 text-sm text-muted-foreground">{bullet}</Text>
+                  <Text className="mr-2 text-sm text-muted-foreground dark:text-neutral-400">•</Text>
+                  <Text className="flex-1 text-sm text-muted-foreground dark:text-neutral-400">{bullet}</Text>
                 </View>
               ))}
             </View>

package/src/screens/auth/VerifyEmailScreen.tsx

@@ -214,7 +214,7 @@ export function VerifyEmailScreen() {
   };
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <ScrollView
         className="flex-1"

package/src/screens/auth/WelcomeScreen.tsx

@@ -30,7 +30,7 @@ export function WelcomeScreen({ decoration, topAccessory }: WelcomeScreenProps)
   const { appName, Logo, routes, tagline } = useAppConfig();
 
   return (
-    <SafeAreaView className="flex-1 bg-background">
+    <SafeAreaView className="flex-1 bg-background dark:bg-black">
       <StatusBar style={isDark ? "light" : "dark"} />
       <View className="flex-1 items-center justify-center px-6 py-8">
         {topAccessory}