Fix Git merge conflict in LoginScreen.tsx - combined beautiful design with theme support

frontend/src/screens/LoginScreen.tsx

@@ -1,11 +1,6 @@
 import React, { useState, useEffect } from 'react';
-<<<<<<< HEAD
 import { View, StyleSheet, KeyboardAvoidingView, Platform, ScrollView, Dimensions, TouchableOpacity } from 'react-native';
-import { TextInput, Button, Text, Headline, HelperText, Surface } from 'react-native-paper';
+import { TextInput, Button, Text, Headline, HelperText, Surface, useTheme } from 'react-native-paper';
-=======
-import { View, StyleSheet, KeyboardAvoidingView, Platform, ScrollView, Dimensions } from 'react-native';
-import { TextInput, Button, Text, Headline, HelperText, useTheme } from 'react-native-paper';
->>>>>>> a3ad9832ae1663e2a76b50c417d43bcb23a0e03a
 import { useMutation } from '@apollo/client';
 import { LOGIN } from '../graphql/mutations';
 import { useAuth } from '../contexts/AuthContext';
@@ -95,8 +90,6 @@ export const LoginScreen = ({ navigation }: any) => {
     };
   });
 
-
-
   const handleButtonPressIn = () => {
     buttonScale.value = withSpring(0.95);
   };
@@ -106,7 +99,6 @@ export const LoginScreen = ({ navigation }: any) => {
   };
 
   return (
-<<<<<<< HEAD
     <BackgroundDesign variant="login">
       <KeyboardAvoidingView 
         style={styles.container} 
@@ -116,118 +108,6 @@ export const LoginScreen = ({ navigation }: any) => {
           <Animated.View 
             style={[styles.content, cardAnimatedStyle]}
             entering={FadeInDown.duration(800).springify()}
-=======
-    <KeyboardAvoidingView 
-      style={[styles.container, { backgroundColor: theme.colors.background }]} 
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
-      <ScrollView contentContainerStyle={styles.scrollContent}>
-        <Animated.View style={[styles.content, containerAnimatedStyle]}>
-          <Animated.View style={[styles.glowContainer, glowContainerStyle]}>
-            <Headline style={styles.title}>Вход в Prism</Headline>
-            <Text style={styles.subtitle}>Добро пожаловать обратно</Text>
-          </Animated.View>
-          
-          <AnimatedView style={inputStyle1}>
-            <TextInput
-              label="Имя пользователя"
-              value={username}
-              onChangeText={setUsername}
-              mode="outlined"
-              style={styles.input}
-              autoCapitalize="none"
-              disabled={loading}
-              theme={{
-                colors: {
-                  primary: theme.colors.primary,
-                  placeholder: theme.colors.secondary,
-                  text: theme.colors.onSurface,
-                  background: theme.colors.surface,
-                  outline: theme.colors.outline,
-                }
-              }}
-              onFocus={() => {
-                inputFocusAnimation1.value = withSpring(1);
-              }}
-              onBlur={() => {
-                inputFocusAnimation1.value = withSpring(0);
-              }}
-            />
-          </AnimatedView>
-
-          <AnimatedView style={inputStyle2}>
-            <TextInput
-              label="Пароль"
-              value={password}
-              onChangeText={setPassword}
-              mode="outlined"
-              style={styles.input}
-              secureTextEntry={!showPassword}
-              disabled={loading}
-              theme={{
-                colors: {
-                  primary: theme.colors.primary,
-                  placeholder: theme.colors.secondary,
-                  text: theme.colors.onSurface,
-                  background: theme.colors.surface,
-                  outline: theme.colors.outline,
-                }
-              }}
-              right={
-                <TextInput.Icon 
-                  icon={showPassword ? 'eye-off' : 'eye'} 
-                  onPress={() => setShowPassword(!showPassword)}
-                  color="#a855f7"
-                />
-              }
-              onFocus={() => {
-                inputFocusAnimation2.value = withSpring(1);
-              }}
-              onBlur={() => {
-                inputFocusAnimation2.value = withSpring(0);
-              }}
-            />
-          </AnimatedView>
-
-          {error && (
-            <HelperText type="error" visible={true} style={styles.errorText}>
-              {error.message}
-            </HelperText>
-          )}
-
-          <AnimatedView style={buttonAnimatedStyle}>
-            <Button
-              mode="contained"
-              onPress={handleLogin}
-              onPressIn={handleButtonPressIn}
-              onPressOut={handleButtonPressOut}
-              loading={loading}
-              disabled={loading || !username || !password}
-              style={styles.button}
-              contentStyle={styles.buttonContent}
-              labelStyle={styles.buttonLabel}
-              theme={{
-                colors: {
-                  primary: '#9333ea',
-                }
-              }}
-            >
-              Войти
-            </Button>
-          </AnimatedView>
-
-          <Button
-            mode="text"
-            onPress={() => navigation.navigate('Register')}
-            disabled={loading}
-            style={styles.linkButton}
-            labelStyle={styles.linkButtonLabel}
-            theme={{
-              colors: {
-                primary: '#a855f7',
-              }
-            }}
->>>>>>> a3ad9832ae1663e2a76b50c417d43bcb23a0e03a
           >
             <Animated.View style={[styles.loginCard, glowStyle]}>
               <LinearGradient
@@ -242,11 +122,11 @@ export const LoginScreen = ({ navigation }: any) => {
                 style={styles.headerContainer}
               >
                 <View style={styles.logoContainer}>
-                  <View style={styles.logoPlaceholder}>
+                  <View style={[styles.logoPlaceholder, { backgroundColor: theme.colors.surfaceVariant }]}>
-                    <Text style={styles.logoText}>P</Text>
+                    <Text style={[styles.logoText, { color: theme.colors.onSurface }]}>P</Text>
                   </View>
                 </View>
-                <Headline style={styles.title}>PRISM</Headline>
+                <Headline style={[styles.title, { color: theme.colors.onSurface }]}>PRISM</Headline>
               </Animated.View>
               
               <Animated.View 
@@ -258,18 +138,18 @@ export const LoginScreen = ({ navigation }: any) => {
                   value={username}
                   onChangeText={setUsername}
                   mode="flat"
-                    style={styles.input}
+                  style={[styles.input, { backgroundColor: theme.colors.surfaceVariant }]}
                   autoCapitalize="none"
                   disabled={loading}
                   underlineColor="transparent"
-                    activeUnderlineColor="#ffffff"
+                  activeUnderlineColor={theme.colors.primary}
                   theme={{
                     colors: {
-                        primary: '#ffffff',
+                      primary: theme.colors.primary,
-                        placeholder: '#808080',
+                      placeholder: theme.colors.onSurfaceVariant,
-                        text: '#ffffff',
+                      text: theme.colors.onSurface,
-                        background: 'rgba(255,255,255,0.05)',
+                      background: 'transparent',
-                        outline: '#666666',
+                      outline: theme.colors.outline,
                     }
                   }}
                 />
@@ -279,31 +159,31 @@ export const LoginScreen = ({ navigation }: any) => {
                   value={password}
                   onChangeText={setPassword}
                   mode="flat"
-                    style={styles.input}
+                  style={[styles.input, { backgroundColor: theme.colors.surfaceVariant }]}
                   secureTextEntry={!showPassword}
                   disabled={loading}
                   underlineColor="transparent"
-                    activeUnderlineColor="#ffffff"
+                  activeUnderlineColor={theme.colors.primary}
                   theme={{
                     colors: {
-                        primary: '#ffffff',
+                      primary: theme.colors.primary,
-                        placeholder: '#808080',
+                      placeholder: theme.colors.onSurfaceVariant,
-                        text: '#ffffff',
+                      text: theme.colors.onSurface,
-                        background: 'rgba(255,255,255,0.05)',
+                      background: 'transparent',
-                        outline: '#666666',
+                      outline: theme.colors.outline,
                     }
                   }}
                   right={
                     <TextInput.Icon 
                       icon={showPassword ? 'eye-off' : 'eye'} 
                       onPress={() => setShowPassword(!showPassword)}
-                        color="#808080"
+                      color={theme.colors.onSurfaceVariant}
                     />
                   }
                 />
 
                 {error && (
-                  <HelperText type="error" visible={true} style={styles.errorText}>
+                  <HelperText type="error" visible={true} style={[styles.errorText, { color: theme.colors.error }]}>
                     {error.message}
                   </HelperText>
                 )}
@@ -317,7 +197,7 @@ export const LoginScreen = ({ navigation }: any) => {
                     activeOpacity={0.8}
                   >
                     <LinearGradient
-                      colors={['#ffffff', '#e6e6e6']}
+                      colors={[theme.colors.primary, theme.colors.primaryContainer]}
                       style={[
                         styles.gradientButton,
                         (loading || !username || !password) && styles.disabledButton
@@ -325,7 +205,7 @@ export const LoginScreen = ({ navigation }: any) => {
                       start={{ x: 0, y: 0 }}
                       end={{ x: 1, y: 0 }}
                     >
-                      <Text style={styles.buttonText}>
+                      <Text style={[styles.buttonText, { color: theme.colors.onPrimary }]}>
                         {loading ? 'ВХОД...' : 'ВОЙТИ'}
                       </Text>
                     </LinearGradient>
@@ -333,9 +213,9 @@ export const LoginScreen = ({ navigation }: any) => {
                 </Animated.View>
 
                 <View style={styles.dividerContainer}>
-                  <View style={styles.divider} />
+                  <View style={[styles.divider, { backgroundColor: theme.colors.outlineVariant }]} />
-                  <Text style={styles.dividerText}>ИЛИ</Text>
+                  <Text style={[styles.dividerText, { color: theme.colors.onSurfaceVariant }]}>ИЛИ</Text>
-                  <View style={styles.divider} />
+                  <View style={[styles.divider, { backgroundColor: theme.colors.outlineVariant }]} />
                 </View>
 
                 <TouchableOpacity
@@ -344,10 +224,10 @@ export const LoginScreen = ({ navigation }: any) => {
                   style={styles.linkButton}
                   activeOpacity={0.7}
                 >
-                  <Text style={styles.linkButtonText}>
+                  <Text style={[styles.linkButtonText, { color: theme.colors.onSurfaceVariant }]}>
                     Нет аккаунта? 
                   </Text>
-                  <Text style={styles.linkButtonTextBold}>
+                  <Text style={[styles.linkButtonTextBold, { color: theme.colors.primary }]}>
                     {' Создать'}
                   </Text>
                 </TouchableOpacity>
@@ -381,7 +261,6 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(26, 26, 26, 0.8)',
     borderWidth: 1,
     borderColor: 'rgba(255, 255, 255, 0.1)',
-    // backdropFilter: 'blur(10px)', // не поддерживается в React Native
     // iOS тени
     shadowColor: '#ffffff',
     shadowOffset: {
@@ -412,7 +291,6 @@ const styles = StyleSheet.create({
     width: 80,
     height: 80,
     borderRadius: 20,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
     justifyContent: 'center',
     alignItems: 'center',
     borderWidth: 2,
@@ -421,23 +299,18 @@ const styles = StyleSheet.create({
   logoText: {
     fontSize: 40,
     fontWeight: 'bold',
-    color: '#ffffff',
   },
   title: {
     fontSize: 36,
     fontWeight: '300',
-    color: '#ffffff',
     letterSpacing: 4,
     marginBottom: 8,
   },
-
   formContainer: {
     width: '100%',
   },
-
   input: {
     marginBottom: 20,
-    backgroundColor: 'rgba(255, 255, 255, 0.05)',
     fontSize: 16,
     borderRadius: 12,
     paddingHorizontal: 16,
@@ -445,7 +318,6 @@ const styles = StyleSheet.create({
     borderColor: 'rgba(255, 255, 255, 0.1)',
   },
   errorText: {
-    color: '#ff6b6b',
     textAlign: 'center',
     marginBottom: 16,
     fontSize: 14,
@@ -457,7 +329,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginTop: 8,
     // iOS тени
-    shadowColor: '#ffffff',
+    shadowColor: '#000',
     shadowOffset: {
       width: 0,
       height: 4,
@@ -471,7 +343,6 @@ const styles = StyleSheet.create({
     opacity: 0.5,
   },
   buttonText: {
-    color: '#000000',
     fontSize: 16,
     fontWeight: '700',
     letterSpacing: 2,
@@ -484,10 +355,8 @@ const styles = StyleSheet.create({
   divider: {
     flex: 1,
     height: 1,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
   },
   dividerText: {
-    color: '#666666',
     paddingHorizontal: 16,
     fontSize: 12,
     letterSpacing: 1,
@@ -499,11 +368,9 @@ const styles = StyleSheet.create({
   },
   linkButtonText: {
     fontSize: 14,
-    color: '#808080',
   },
   linkButtonTextBold: {
     fontSize: 14,
-    color: '#ffffff',
     fontWeight: '600',
   },
 });