tela inicial com estilo pronta para testes

4 months ago · 174b4e108e
4 changed files with 895 additions and 894 deletions
--- a/react-native-webrtc-app/client/App.js
+++ b/react-native-webrtc-app/client/App.js
--- a/react-native-webrtc-app/client/asset/pages/JoinScreen/JoinScreen.js
+++ b/react-native-webrtc-app/client/asset/pages/JoinScreen/JoinScreen.js
@ -1,73 +1,92 @@
-import {
-  Keyboard,
-  KeyboardAvoidingView,
-  View,
-  Text,
-  TouchableWithoutFeedback,
-  TouchableOpacity,
-  Alert,
-} from 'react-native';
-import React from 'react';
-import Logo from '../../Logo';
-import TextInputContainer from '../../../components/TextInputContainer';
-import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
-import {IconButton, MD2Colors} from 'react-native-paper';
-import {useNavigation} from '@react-navigation/native';
-import styles from './styles';
-import Clipboard from '@react-native-clipboard/clipboard';
-
-const handleCopyToClipboard = (text) => {
-  Clipboard.setString(text);
-  Alert.alert('Ramal copiado para área de transferência!');
-}
-
-const JoinScreen = ({setCalle, calle, handleIniciarChamada, myRamal}) => {
-  const navigation = useNavigation();
-  return (
-    <SafeAreaProvider>
-      <KeyboardAvoidingView
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        style={styles.container}>
-        <SafeAreaView style={styles.header}>
-          <IconButton
-            style={styles.settingsButton}
-            icon={'account-cog'}
-            iconColor={MD2Colors.grey300}
-            size={25}
-            onPress={() => navigation.navigate('configuracoes')}
-          />
-        </SafeAreaView>
-        <View style={styles.logoContainer}>
-          <Text style={styles.subtitle}>Softphone</Text>
-          <Logo />
-        </View>
-        <View style={styles.inner}>
-          <Text style={styles.titles}>Ramal do agente</Text>
-          <TouchableOpacity onPress={() => handleCopyToClipboard(myRamal)}>
-            <View style={styles.box}>
-              <Text style={styles.idCall}>{myRamal}</Text>
-            </View>
-          </TouchableOpacity>
-        </View>
-        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-          <View style={styles.inner}>
-            <TextInputContainer
-              placeholder={'Insira o ramal para ligação'}
-              value={calle}
-              setValue={setCalle}
-              keyboardType={'number-pad'}
-              style={styles.textInput}
-            />
-            <TouchableOpacity
-              onPress={handleIniciarChamada}
-              style={styles.buttonCall}>
-              <Text style={styles.buttonText}>Realizar chamada</Text>
-            </TouchableOpacity>
-          </View>
-        </TouchableWithoutFeedback>
-      </KeyboardAvoidingView>
-    </SafeAreaProvider>
-  );
-};
-
-export default JoinScreen;
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  View,
+  Text,
+  TouchableWithoutFeedback,
+  TouchableOpacity,
+  Alert,
+} from 'react-native';
+import React from 'react';
+import Logo from '../../Logo';
+import TextInputContainer from '../../../components/TextInputContainer';
+import {SafeAreaProvider, SafeAreaView} from 'react-native-safe-area-context';
+import {IconButton, MD2Colors} from 'react-native-paper';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import {useNavigation} from '@react-navigation/native';
+import styles from './styles';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+const handleCopyToClipboard = text => {
+  Clipboard.setString(text);
+  Alert.alert('Ramal copiado para área de transferência!');
+};
+
+const JoinScreen = ({
+  setCalle,
+  calle,
+  handleIniciarChamada,
+  myRamal,
+  status,
+}) => {
+  const navigation = useNavigation();
+  return (
+    <SafeAreaProvider>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.container}>
+        <SafeAreaView style={styles.header}>
+          <View style={styles.viewBnConfig}>
+            <IconButton
+              style={styles.settingsButton}
+              icon={'account-cog'}
+              iconColor={MD2Colors.grey300}
+              size={30}
+              onPress={() => navigation.navigate('configuracoes')}
+            />
+          </View>
+          <View style={styles.logoContainer}>
+            <Text style={styles.subtitle}>Softphone</Text>
+            <Logo />
+          </View>
+        </SafeAreaView>
+        <View style={styles.inner}>
+          <View style={{display: 'flex', flexDirection: 'row'}}>
+            <Icon
+              name={'circle'}
+              color={status}
+              size={20}
+              style={{marginHorizontal: 4}}
+            />
+            <Text style={styles.titles}>Ramal do agente</Text>
+          </View>
+          <TouchableOpacity onPress={() => handleCopyToClipboard(myRamal)}>
+            <View style={styles.box}>
+              <Text style={styles.idCall}>{myRamal}</Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <View style={styles.inner}>
+            <Text style={{fontSize: 15}}>Insira o ramal para ligação</Text>
+            <TextInputContainer
+              style={styles.textInput}
+              value={calle}
+              setValue={setCalle}
+              keyboardType={'number-pad'}
+            />
+            <IconButton
+              icon={'phone'}
+              size={45}
+              onPress={handleIniciarChamada}
+              iconColor={MD2Colors.lightGreen300}
+              backgroundColor={MD2Colors.green900}
+            />
+          </View>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
+    </SafeAreaProvider>
+  );
+};
+
+export default JoinScreen;
--- a/react-native-webrtc-app/client/asset/pages/JoinScreen/styles.js
+++ b/react-native-webrtc-app/client/asset/pages/JoinScreen/styles.js
@ -1,85 +1,85 @@
-import {StyleSheet} from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    padding: 16,
-    backgroundColor: 'rgba(17, 24, 39, 1)',
-  },
-  header: {
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    position: 'relative',
-    top: 0,
-  },
-  settingsButton: {
-    justifyContent: 'center',
-    alignSelf: 'center',
-  },
-  logoContainer: {
-    alignItems: 'center',
-    marginBottom: 24,
-  },
-  subtitle: {
-    fontSize: 18,
-    textAlign: 'center',
-    alignSelf: 'flex-start',
-    marginTop: 2,
-    marginLeft: 24,
-    fontWeight: 'bold',
-  },
-  inner: {
-    marginVertical: 16,
-    padding: 10,
-    backgroundColor: 'rgba(26, 28, 34, 0.7)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 15,
-    marginTop: 12,
-  },
-  titles: {
-    fontSize: 16,
-    fontWeight: 'bold',
-    marginBottom: 6,
-  },
-  box: {
-    borderRadius: 8,
-    padding: 16,
-    alignItems: 'center',
-    marginBottom: 16,
-  },
-  idCall: {
-    fontSize: 34,
-    fontWeight: 'bold',
-    color: '#FFF',
-    letterSpacing: 6,
-  },
-  textInput: {
-    backgroundColor: '#f5f5f559',
-    margin: 6,
-    fontSize: 18,
-    color: 'white',
-    padding: 10,
-    borderRadius: 8,
-    borderColor: '#DDD',
-    borderWidth: 1,
-    width: '100%',
-  },
-  buttonCall: {
-    backgroundColor: 'green',
-    borderRadius: 8,
-    paddingVertical: 12,
-    alignItems: 'center',
-    width: '80%',
-    marginTop: 16,
-  },
-  buttonText: {
-    color: '#FFF',
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
-});
-
-export default styles;
+import {StyleSheet} from 'react-native';
+import {MD2Colors, MD3Colors, TextInput} from 'react-native-paper';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 16,
+    backgroundColor: 'rgba(17, 24, 39, 1)',
+  },
+  viewBnConfig: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    position: 'relative',
+    top: 0,
+  },
+  settingsButton: {
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  logoContainer: {
+    alignItems: 'center',
+    marginBottom: 24,
+  },
+  subtitle: {
+    fontSize: 18,
+    textAlign: 'center',
+    alignSelf: 'flex-start',
+    marginTop: 2,
+    marginLeft: 24,
+    fontWeight: 'bold',
+  },
+  inner: {
+    marginVertical: 10,
+    padding: 14,
+    backgroundColor: MD2Colors.blueGrey900,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10,
+  },
+  titles: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginBottom: 6,
+  },
+  box: {
+    borderRadius: 8,
+    padding: 16,
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  idCall: {
+    fontSize: 34,
+    fontWeight: 'bold',
+    color: '#FFF',
+    letterSpacing: 6,
+  },
+  buttonCall: {
+    backgroundColor: 'green',
+    borderRadius: 100,
+    paddingVertical: 12,
+    alignItems: 'center',
+    width: '60%',
+    marginTop: 16,
+  },
+  textInput: {
+    borderRadius: 50,
+    margin: 10,
+    fontSize: 30,
+    justifyContent: 'center',
+    alignSelf: 'center',
+    fontWeight: 'bold',
+    height: 60,
+    width: '100%',
+    backgroundColor: MD2Colors.blueGrey800,
+  },
+  header: {
+    position: 'relative',
+    alignSelf: 'center',
+    top: -50,
+  },
+});
+
+export default styles;
--- a/react-native-webrtc-app/client/components/TextInputContainer/index.js
+++ b/react-native-webrtc-app/client/components/TextInputContainer/index.js
@ -1,36 +1,20 @@
-import React from 'react';
-import {View, TextInput} from 'react-native';
-const TextInputContainer = ({placeholder, value, setValue, keyboardType}) => {
-  return (
-    <View
-      style={{
-        width: '100%',
-        height: 50,
-        justifyContent: 'center',
-        alignItems: 'center',
-        backgroundColor: '#EAEAEA',
-        borderRadius: 12,
-        marginVertical: 12,
-      }}>
-      <TextInput
-        style={{
-          margin: 8,
-          padding: 6,
-          textAlign: 'center',
-          fontSize: 16,
-          color: '#333',
-        }}
-        multiline={true}
-        numberOfLines={1}
-        cursorColor={'#5568FE'}
-        placeholder={placeholder}
-        placeholderTextColor={'#9A9FA5'}
-        onChangeText={setValue}
-        value={value}
-        keyboardType={keyboardType}
-      />
-    </View>
-  );
-};
-
-export default TextInputContainer;
+import React from 'react';
+import {View, TextInput} from 'react-native';
+const TextInputContainer = ({value, setValue, keyboardType, style}) => {
+  return (
+    <View style={{width: '100%'}}>
+      <TextInput
+        style={style}
+        multiline={true}
+        numberOfLines={1}
+        cursorColor={'#EAEAEA'}
+        onChangeText={setValue}
+        value={value}
+        keyboardType={keyboardType}
+        textAlign="center"
+      />
+    </View>
+  );
+};
+
+export default TextInputContainer;