From 178dd8e5f56f87370d1cbb7ac86d5857d619be90 Mon Sep 17 00:00:00 2001 From: Uttam Rao Date: Thu, 17 Oct 2024 01:14:29 +0530 Subject: [PATCH 1/2] Removed inline CSS --- src/components/ButtonWidget.tsx | 6 ++++- .../CreateGoalForm/CreateGoalform.tsx | 5 +++- src/components/CreateGoalForm/DatePicker.tsx | 24 ++++++++++--------- src/components/CreateGoalForm/SearchBar.tsx | 11 +++++---- src/components/CustomProgressBar.tsx | 10 +++++++- src/components/Modal/ProgressModal.tsx | 15 +++++++++--- src/components/ShortGoalsComponent/Card.tsx | 6 ++--- .../ShortGoalsComponent/Styles/CardStyles.tsx | 10 ++++++++ .../ToDoComponent/TodoComponent.tsx | 13 +++++----- 9 files changed, 69 insertions(+), 31 deletions(-) diff --git a/src/components/ButtonWidget.tsx b/src/components/ButtonWidget.tsx index 63687a6e..16856998 100644 --- a/src/components/ButtonWidget.tsx +++ b/src/components/ButtonWidget.tsx @@ -37,7 +37,7 @@ const ButtonWidget = ({ return ( {icon ? ( - + ) : ( - Create + Create @@ -130,4 +130,7 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, + buttonText:{ + color: 'white' + } }); diff --git a/src/components/CreateGoalForm/DatePicker.tsx b/src/components/CreateGoalForm/DatePicker.tsx index 08562266..d1859e36 100644 --- a/src/components/CreateGoalForm/DatePicker.tsx +++ b/src/components/CreateGoalForm/DatePicker.tsx @@ -19,17 +19,8 @@ const DatePickerComponent = () => { confirmBtnText="Confirm" cancelBtnText="Cancel" customStyles={{ - dateIcon: { - position: 'absolute', - left: 0, - top: 4, - marginLeft: 0, - }, - dateInput: { - marginLeft: 36, - height: 30, - border: 'none', - }, + dateIcon: styles.dateIconStyle, + dateInput: styles.dateInputStyle, }} onDateChange={() => { setDate(date); @@ -55,4 +46,15 @@ const styles = StyleSheet.create({ width: 205, marginTop: 2, }, + dateIconStyle:{ + position: 'absolute', + left: 0, + top: 4, + marginLeft: 0, + }, + dateInputStyle:{ + marginLeft: 36, + height: 30, + border: 'none', + } }); diff --git a/src/components/CreateGoalForm/SearchBar.tsx b/src/components/CreateGoalForm/SearchBar.tsx index 83b5e87b..5ac789c6 100644 --- a/src/components/CreateGoalForm/SearchBar.tsx +++ b/src/components/CreateGoalForm/SearchBar.tsx @@ -63,11 +63,7 @@ const SearchBar = () => { const ItemSeparatorView = () => { return ( ); }; @@ -114,6 +110,11 @@ const styles = StyleSheet.create({ borderColor: 'black', backgroundColor: '#ecf0f1', }, + itemSeparatorStyle: { + height: 0.5, + width: '100%', + backgroundColor: '#C8C8C8', + } }); export default SearchBar; diff --git a/src/components/CustomProgressBar.tsx b/src/components/CustomProgressBar.tsx index 11d88a14..48e915fc 100644 --- a/src/components/CustomProgressBar.tsx +++ b/src/components/CustomProgressBar.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { StyleSheet } from 'react-native'; import { View, Text } from 'react-native'; import * as Progress from 'react-native-progress'; @@ -13,7 +14,7 @@ const CustomProgressBar = ({ }) => { return ( - {text} + {text} + Slide to update progress: Current Progress: {progress}% - @@ -75,6 +75,11 @@ function ProgressModal() { } const styles = StyleSheet.create({ + viewContainer:{ + flex: 1, + justifyContent: 'center', + alignItems: 'center' + }, cardContainer: { margin: 20, padding: 15, @@ -118,5 +123,9 @@ const styles = StyleSheet.create({ padding: 10, borderRadius: 8, }, + sliderStyle:{ + width: '80%', + alignSelf: 'center' + } }); export default ProgressModal; diff --git a/src/components/ShortGoalsComponent/Card.tsx b/src/components/ShortGoalsComponent/Card.tsx index ff366112..b06b6b20 100644 --- a/src/components/ShortGoalsComponent/Card.tsx +++ b/src/components/ShortGoalsComponent/Card.tsx @@ -25,11 +25,11 @@ const Card = ({ item }: any) => { - {item.messageCount} + {item.messageCount} - Due in {item.dueDate} days + Due in {item.dueDate} days - + Mark as done diff --git a/src/components/ShortGoalsComponent/Styles/CardStyles.tsx b/src/components/ShortGoalsComponent/Styles/CardStyles.tsx index 5d29091e..33a3cf39 100644 --- a/src/components/ShortGoalsComponent/Styles/CardStyles.tsx +++ b/src/components/ShortGoalsComponent/Styles/CardStyles.tsx @@ -48,4 +48,14 @@ export const CardStyles = StyleSheet.create({ width: 17, height: 17, }, + messageCount:{ + color: 'blue' + }, + dueDate:{ + color: 'red' + }, + MarkAsDone:{ + color: 'white', + fontWeight: 'bold' + } }); diff --git a/src/components/ToDoComponent/TodoComponent.tsx b/src/components/ToDoComponent/TodoComponent.tsx index d9f321d1..a87aac96 100644 --- a/src/components/ToDoComponent/TodoComponent.tsx +++ b/src/components/ToDoComponent/TodoComponent.tsx @@ -60,12 +60,7 @@ const TodoComponent = () => { onPress={() => navigation.navigate('CreatingGoals')} > Add @@ -123,6 +118,12 @@ const styles = StyleSheet.create({ paddingLeft: 15, paddingRight: 15, }, + addText:{ + color: 'black', + elevation: 10, + paddingHorizontal: 6, + paddingVertical: 6, + } }); export default TodoComponent; From 31f0b1ba79c0f825c43e26a991058e4183dc836d Mon Sep 17 00:00:00 2001 From: Uttam Rao Date: Fri, 18 Oct 2024 02:30:31 +0530 Subject: [PATCH 2/2] moved css to separate files --- src/components/ButtonWidget.tsx | 23 +- .../CreateGoalForm/CreateGoalFormStyle.tsx | 62 +++++ .../CreateGoalForm/CreateGoalform.tsx | 63 +---- src/components/CreateGoalForm/DatePicker.tsx | 29 +-- .../CreateGoalForm/DatePickerStyle.tsx | 27 ++ src/components/CreateGoalForm/Dropdown.tsx | 28 +-- .../CreateGoalForm/DropdownStyle.tsx | 24 ++ src/components/CreateGoalForm/RadioGroup.tsx | 13 +- .../CreateGoalForm/RadioGroupStyle.tsx | 9 + src/components/CreateGoalForm/SearchBar.tsx | 28 +-- .../CreateGoalForm/SearchBarStyle.tsx | 25 ++ src/components/CustomProgressBar.tsx | 9 +- src/components/DisplayContribution.tsx | 80 +----- src/components/EllipseComponent.tsx | 55 +--- src/components/ErrorScreen.tsx | 19 +- src/components/FloatingButton.tsx | 11 +- src/components/Header.tsx | 21 +- src/components/Loader.tsx | 27 +- src/components/LoadingScreen.tsx | 16 +- src/components/Modal/CustomModal.tsx | 48 +--- src/components/Modal/CustomModalStyle.tsx | 44 ++++ src/components/Modal/ProgressModal.tsx | 57 +---- src/components/Modal/ProgressModalStyle.tsx | 56 +++++ src/components/Notify/NotifyButton.tsx | 16 +- src/components/Notify/NotifyButtonStyle.tsx | 14 ++ src/components/Notify/NotifyForm.tsx | 20 +- src/components/Notify/NotifyFormStyle.tsx | 19 ++ src/components/OOO/OOOForm.tsx | 46 +--- src/components/OOO/OOOFormDatePicker.tsx | 28 +-- src/components/OOO/OOOFormDatePickerStyle.tsx | 24 ++ src/components/OOO/OOOFormStyle.tsx | 43 ++++ .../ExtensionDatePicker.tsx | 28 +-- .../ExtensionDatePickerStyle.tsx | 24 ++ .../ProfileExtensionForm/ExtensionRequest.tsx | 56 +---- .../ExtensionRequestStyle.tsx | 53 ++++ src/components/ProgressBar.tsx | 51 +--- src/components/PushUpModalContent.tsx | 54 +--- src/components/SearchBar.tsx | 28 +-- .../ConnectionScreen/ConnectionScreen.tsx | 38 +-- .../ConnectionScreenStyle.tsx | 34 +++ src/screens/MemberScreen/MembersPage.tsx | 19 +- src/screens/MemberScreen/MembersPageStyle.tsx | 16 ++ src/screens/NotifyScreen/NotifyScreen.tsx | 10 +- .../NotifyScreen/NotifyScreenStyle.tsx | 7 + .../DetailScreen/ActiveTaskDetail.tsx | 55 +--- .../DetailScreen/ExtensionRequest.tsx | 65 +---- .../DetailScreen/TaskStatusDropdown.tsx | 42 +--- .../styles/ActiveTaskDetailStyle.tsx | 54 ++++ .../styles/ExtensionRequestStyle.tsx | 61 +++++ .../styles/TaskStatusDropdownStyle.tsx | 39 +++ .../DetailsScreen/ProgressDetailScreen.tsx | 237 +----------------- .../styles/ProgressDetailScreenStyle.tsx | 234 +++++++++++++++++ .../ProfileScreen/User Data/UserData.tsx | 32 +-- .../ProfileScreen/User Data/UserDataStyle.tsx | 31 +++ src/styles/ButtonWidgetStyle.tsx | 22 ++ src/styles/CustomProgressBarStyle.tsx | 8 + src/styles/DisplayContributionStyle.tsx | 76 ++++++ src/styles/EllipseComponentStyle.tsx | 53 ++++ src/styles/ErrorScreenStyle.tsx | 15 ++ src/styles/FloatingButtonStyle.tsx | 7 + src/styles/HeaderStyle.tsx | 18 ++ src/styles/LoaderStyle.tsx | 23 ++ src/styles/LoadingScreenStyle.tsx | 15 ++ src/styles/ProgressBarStyle.tsx | 48 ++++ src/styles/PushUpModalContentStyle.tsx | 52 ++++ src/styles/SearchBarStyle.tsx | 24 ++ 66 files changed, 1336 insertions(+), 1277 deletions(-) create mode 100644 src/components/CreateGoalForm/CreateGoalFormStyle.tsx create mode 100644 src/components/CreateGoalForm/DatePickerStyle.tsx create mode 100644 src/components/CreateGoalForm/DropdownStyle.tsx create mode 100644 src/components/CreateGoalForm/RadioGroupStyle.tsx create mode 100644 src/components/CreateGoalForm/SearchBarStyle.tsx create mode 100644 src/components/Modal/CustomModalStyle.tsx create mode 100644 src/components/Modal/ProgressModalStyle.tsx create mode 100644 src/components/Notify/NotifyButtonStyle.tsx create mode 100644 src/components/Notify/NotifyFormStyle.tsx create mode 100644 src/components/OOO/OOOFormDatePickerStyle.tsx create mode 100644 src/components/OOO/OOOFormStyle.tsx create mode 100644 src/components/ProfileExtensionForm/ExtensionDatePickerStyle.tsx create mode 100644 src/components/ProfileExtensionForm/ExtensionRequestStyle.tsx create mode 100644 src/screens/ConnectionScreen/ConnectionScreenStyle.tsx create mode 100644 src/screens/MemberScreen/MembersPageStyle.tsx create mode 100644 src/screens/NotifyScreen/NotifyScreenStyle.tsx create mode 100644 src/screens/ProfileScreen/DetailScreen/styles/ActiveTaskDetailStyle.tsx create mode 100644 src/screens/ProfileScreen/DetailScreen/styles/ExtensionRequestStyle.tsx create mode 100644 src/screens/ProfileScreen/DetailScreen/styles/TaskStatusDropdownStyle.tsx create mode 100644 src/screens/ProfileScreen/DetailsScreen/styles/ProgressDetailScreenStyle.tsx create mode 100644 src/screens/ProfileScreen/User Data/UserDataStyle.tsx create mode 100644 src/styles/ButtonWidgetStyle.tsx create mode 100644 src/styles/CustomProgressBarStyle.tsx create mode 100644 src/styles/DisplayContributionStyle.tsx create mode 100644 src/styles/EllipseComponentStyle.tsx create mode 100644 src/styles/ErrorScreenStyle.tsx create mode 100644 src/styles/FloatingButtonStyle.tsx create mode 100644 src/styles/HeaderStyle.tsx create mode 100644 src/styles/LoaderStyle.tsx create mode 100644 src/styles/LoadingScreenStyle.tsx create mode 100644 src/styles/ProgressBarStyle.tsx create mode 100644 src/styles/PushUpModalContentStyle.tsx create mode 100644 src/styles/SearchBarStyle.tsx diff --git a/src/components/ButtonWidget.tsx b/src/components/ButtonWidget.tsx index 16856998..79631f1a 100644 --- a/src/components/ButtonWidget.tsx +++ b/src/components/ButtonWidget.tsx @@ -4,9 +4,9 @@ import { Image, ImageSourcePropType, Pressable, - StyleSheet, Text, } from 'react-native'; +import { styles } from '../styles/ButtonWidgetStyle'; interface IButtonWidget { icon?: ImageSourcePropType; @@ -53,25 +53,4 @@ const ButtonWidget = ({ ); }; -const styles = StyleSheet.create({ - button: { - borderRadius: 10, - marginVertical: 4, - borderColor: '#16A334', - borderWidth: 1, - padding: 10, - elevation: 2, - color: 'white', - minWidth: '35%', - maxWidth: '100%', - }, - iconStyle: { - borderRadius: 15, - }, - imageStyle:{ - height: 50, - width: 50 - } -}); - export default ButtonWidget; diff --git a/src/components/CreateGoalForm/CreateGoalFormStyle.tsx b/src/components/CreateGoalForm/CreateGoalFormStyle.tsx new file mode 100644 index 00000000..50b2ee9d --- /dev/null +++ b/src/components/CreateGoalForm/CreateGoalFormStyle.tsx @@ -0,0 +1,62 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'white', + border: '2px solid black', + padding: 30, + }, + form: { + border: '2px solid black', + padding: 10, + borderRadius: 15, + }, + paragraph: { + margin: 5, + fontSize: 18, + fontWeight: 'bold', + color: 'blue', + textAlign: 'center', + }, + input: { + height: 30, + margin: 10, + borderWidth: 1, + padding: 10, + backgroundColor: '#ecf0f1', + fontSize: 12, + }, + formchild: { + marginTop: 5, + fontWeight: 'bold', + }, + toggle: { + display: 'flex', + flexDirection: 'row', + margin: 5, + padding: 3, + alignItems: 'center', + justifyContent: 'center', + }, + togglechild: { + margin: 5, + }, + button: { + backgroundColor: 'blue', + padding: 6, + marginTop: 12, + width: '40%', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 15, + }, + buttoncontainer: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + buttonText:{ + color: 'white' + } +}); \ No newline at end of file diff --git a/src/components/CreateGoalForm/CreateGoalform.tsx b/src/components/CreateGoalForm/CreateGoalform.tsx index cc27d77f..3498a97c 100644 --- a/src/components/CreateGoalForm/CreateGoalform.tsx +++ b/src/components/CreateGoalForm/CreateGoalform.tsx @@ -1,7 +1,6 @@ import { Text, View, - StyleSheet, TextInput, Switch, TouchableOpacity, @@ -9,6 +8,7 @@ import { import React, { useState } from 'react'; import Deadline from './DatePicker'; import Dropdown from './Dropdown'; +import { styles } from './CreateGoalFormStyle'; export default function CreateGoalform() { const [title, onChangeTitle] = useState(''); @@ -73,64 +73,3 @@ export default function CreateGoalform() { ); } - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: 'white', - border: '2px solid black', - padding: 30, - }, - form: { - border: '2px solid black', - padding: 10, - borderRadius: 15, - }, - paragraph: { - margin: 5, - fontSize: 18, - fontWeight: 'bold', - color: 'blue', - textAlign: 'center', - }, - input: { - height: 30, - margin: 10, - borderWidth: 1, - padding: 10, - backgroundColor: '#ecf0f1', - fontSize: 12, - }, - formchild: { - marginTop: 5, - fontWeight: 'bold', - }, - toggle: { - display: 'flex', - flexDirection: 'row', - margin: 5, - padding: 3, - alignItems: 'center', - justifyContent: 'center', - }, - togglechild: { - margin: 5, - }, - button: { - backgroundColor: 'blue', - padding: 6, - marginTop: 12, - width: '40%', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 15, - }, - buttoncontainer: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - buttonText:{ - color: 'white' - } -}); diff --git a/src/components/CreateGoalForm/DatePicker.tsx b/src/components/CreateGoalForm/DatePicker.tsx index d1859e36..5f83ce88 100644 --- a/src/components/CreateGoalForm/DatePicker.tsx +++ b/src/components/CreateGoalForm/DatePicker.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; -import { SafeAreaView, StyleSheet, View } from 'react-native'; +import { SafeAreaView View } from 'react-native'; import DatePicker from 'react-native-datepicker'; +import { styles } from './DatePickerStyle'; const DatePickerComponent = () => { const [date, setDate] = useState(''); @@ -33,28 +34,4 @@ const DatePickerComponent = () => { export default DatePickerComponent; -const styles = StyleSheet.create({ - container: { - flex: 1, - padding: 8, - justifyContent: 'center', - alignItems: 'center', - }, - datePickerStyle: { - height: 40, - border: '1px solid black', - width: 205, - marginTop: 2, - }, - dateIconStyle:{ - position: 'absolute', - left: 0, - top: 4, - marginLeft: 0, - }, - dateInputStyle:{ - marginLeft: 36, - height: 30, - border: 'none', - } -}); + diff --git a/src/components/CreateGoalForm/DatePickerStyle.tsx b/src/components/CreateGoalForm/DatePickerStyle.tsx new file mode 100644 index 00000000..a76b7c97 --- /dev/null +++ b/src/components/CreateGoalForm/DatePickerStyle.tsx @@ -0,0 +1,27 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + flex: 1, + padding: 8, + justifyContent: 'center', + alignItems: 'center', + }, + datePickerStyle: { + height: 40, + border: '1px solid black', + width: 205, + marginTop: 2, + }, + dateIconStyle:{ + position: 'absolute', + left: 0, + top: 4, + marginLeft: 0, + }, + dateInputStyle:{ + marginLeft: 36, + height: 30, + border: 'none', + } +}); \ No newline at end of file diff --git a/src/components/CreateGoalForm/Dropdown.tsx b/src/components/CreateGoalForm/Dropdown.tsx index c64a2737..c1a41c9e 100644 --- a/src/components/CreateGoalForm/Dropdown.tsx +++ b/src/components/CreateGoalForm/Dropdown.tsx @@ -1,8 +1,9 @@ import React, { useState } from 'react'; -import { StyleSheet, Text, View } from 'react-native'; +import { Text, View } from 'react-native'; import { SelectCountry } from 'react-native-element-dropdown'; import Searchbar from './SearchBar'; import Radio from './RadioGroup'; +import { styles } from './DropdownStyle'; const local_data = [ { @@ -60,27 +61,4 @@ const SelectCountryScreen: React.FC = (_props) => { ); }; -export default SelectCountryScreen; - -const styles = StyleSheet.create({ - dropdown: { - margin: 10, - height: 30, - width: 205, - backgroundColor: '#ecf0f1', - fontSize: 12, - paddingHorizontal: 8, - border: '1px solid black', - }, - - placeholderStyle: { - fontSize: 12, - }, - selectedTextStyle: { - fontSize: 15, - marginLeft: 8, - }, - formchild: { - marginTop: 5, - }, -}); +export default SelectCountryScreen; \ No newline at end of file diff --git a/src/components/CreateGoalForm/DropdownStyle.tsx b/src/components/CreateGoalForm/DropdownStyle.tsx new file mode 100644 index 00000000..94201ef6 --- /dev/null +++ b/src/components/CreateGoalForm/DropdownStyle.tsx @@ -0,0 +1,24 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + dropdown: { + margin: 10, + height: 30, + width: 205, + backgroundColor: '#ecf0f1', + fontSize: 12, + paddingHorizontal: 8, + border: '1px solid black', + }, + + placeholderStyle: { + fontSize: 12, + }, + selectedTextStyle: { + fontSize: 15, + marginLeft: 8, + }, + formchild: { + marginTop: 5, + }, +}); \ No newline at end of file diff --git a/src/components/CreateGoalForm/RadioGroup.tsx b/src/components/CreateGoalForm/RadioGroup.tsx index a57916c5..01e13bc3 100644 --- a/src/components/CreateGoalForm/RadioGroup.tsx +++ b/src/components/CreateGoalForm/RadioGroup.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import RadioGroup from 'react-native-radio-buttons-group'; -import { Text, View, StyleSheet } from 'react-native'; +import { Text, View} from 'react-native'; +import { styles } from './RadioGroupStyle'; const radioButtonsData = [ { @@ -34,12 +35,4 @@ export default function RadioGroupComponent() { /> ); -} - -const styles = StyleSheet.create({ - header: { - fontSize: 8, - margin: 4, - fontWeight: 'bold', - }, -}); +} \ No newline at end of file diff --git a/src/components/CreateGoalForm/RadioGroupStyle.tsx b/src/components/CreateGoalForm/RadioGroupStyle.tsx new file mode 100644 index 00000000..398094bb --- /dev/null +++ b/src/components/CreateGoalForm/RadioGroupStyle.tsx @@ -0,0 +1,9 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + header: { + fontSize: 8, + margin: 4, + fontWeight: 'bold', + }, +}); \ No newline at end of file diff --git a/src/components/CreateGoalForm/SearchBar.tsx b/src/components/CreateGoalForm/SearchBar.tsx index 5ac789c6..1f6a530f 100644 --- a/src/components/CreateGoalForm/SearchBar.tsx +++ b/src/components/CreateGoalForm/SearchBar.tsx @@ -3,11 +3,11 @@ import React, { useState } from 'react'; import { SafeAreaView, Text, - StyleSheet, View, FlatList, TextInput, } from 'react-native'; +import { styles } from './SearchBarStyle'; const SearchBar = () => { const [search, setSearch] = useState(''); @@ -93,28 +93,4 @@ const SearchBar = () => { ); }; -const styles = StyleSheet.create({ - container: { - backgroundColor: 'white', - }, - itemStyle: { - padding: 10, - }, - textInputStyle: { - height: 30, - width: 205, - borderWidth: 1, - paddingLeft: 10, - margin: 5, - marginLeft: 8, - borderColor: 'black', - backgroundColor: '#ecf0f1', - }, - itemSeparatorStyle: { - height: 0.5, - width: '100%', - backgroundColor: '#C8C8C8', - } -}); - -export default SearchBar; +export default SearchBar; \ No newline at end of file diff --git a/src/components/CreateGoalForm/SearchBarStyle.tsx b/src/components/CreateGoalForm/SearchBarStyle.tsx new file mode 100644 index 00000000..396c45c4 --- /dev/null +++ b/src/components/CreateGoalForm/SearchBarStyle.tsx @@ -0,0 +1,25 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + backgroundColor: 'white', + }, + itemStyle: { + padding: 10, + }, + textInputStyle: { + height: 30, + width: 205, + borderWidth: 1, + paddingLeft: 10, + margin: 5, + marginLeft: 8, + borderColor: 'black', + backgroundColor: '#ecf0f1', + }, + itemSeparatorStyle: { + height: 0.5, + width: '100%', + backgroundColor: '#C8C8C8', + } +}); \ No newline at end of file diff --git a/src/components/CustomProgressBar.tsx b/src/components/CustomProgressBar.tsx index 48e915fc..99e02707 100644 --- a/src/components/CustomProgressBar.tsx +++ b/src/components/CustomProgressBar.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { StyleSheet } from 'react-native'; import { View, Text } from 'react-native'; import * as Progress from 'react-native-progress'; +import { styles } from '../styles/CustomProgressBarStyle'; const CustomProgressBar = ({ progress, @@ -28,11 +28,4 @@ const CustomProgressBar = ({ ); }; -const styles = StyleSheet.create({ - text:{ - color: 'black', - margin: 10 - } -}) - export default CustomProgressBar; diff --git a/src/components/DisplayContribution.tsx b/src/components/DisplayContribution.tsx index 12cc1659..79dba7bf 100644 --- a/src/components/DisplayContribution.tsx +++ b/src/components/DisplayContribution.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native'; +import { Text, FlatList, TouchableOpacity } from 'react-native'; import moment from 'moment'; import { displayContributionType, taskType } from './UserContibution/Type'; import { useNavigation } from '@react-navigation/native'; +import { styles } from '../styles/DisplayContributionStyle'; type TaskItem = { taskId: string; isActive: string; @@ -69,79 +70,4 @@ const DisplayContribution = ({ tasks }: { tasks: taskType }) => { ); }; -const styles = StyleSheet.create({ - card: { - borderWidth: 1, - borderColor: '#ddd', - borderRadius: 10, - padding: 16, - margin: 12, - backgroundColor: 'white', - elevation: 3, - }, - title: { - fontSize: 18, - fontWeight: 'bold', - marginBottom: 8, - color: '#1D1283', - }, - text: { - fontSize: 16, - marginBottom: 6, - fontWeight: 'bold', - color: '#333', - }, - createdBy: { - color: 'grey', - }, - assignee: { - color: 'grey', - }, - endsOn: { - color: 'grey', - }, - startedOn: { - color: 'grey', - }, - status: { - fontWeight: 'bold', - color: '#3498db', - }, - - isActiveButton: { - color: '#3498db', - marginTop: 10, - }, - - isActiveableContent: { - paddingBottom: 30, - }, - - progressBar: { - width: '100%', - // marginBottom: 16, - }, - - progressControls: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - // marginBottom: 16, - }, - - button: { - fontSize: 20, - color: '#3498db', - }, - - progressText: { - fontSize: 18, - color: '#333', - }, - emptyView: { - color: 'black', - marginTop: 20, - }, -}); - -export default DisplayContribution; +export default DisplayContribution; \ No newline at end of file diff --git a/src/components/EllipseComponent.tsx b/src/components/EllipseComponent.tsx index f52cf2d6..35907ffd 100644 --- a/src/components/EllipseComponent.tsx +++ b/src/components/EllipseComponent.tsx @@ -1,7 +1,8 @@ -import { StyleSheet, Text, View } from 'react-native'; +import { Text, View } from 'react-native'; import React from 'react'; import { TouchableOpacity } from 'react-native'; import { useDispatch, useSelector } from 'react-redux'; +import { styles } from '../styles/EllipseComponentStyle'; const EllipseComponent = ({ handleLogout, @@ -33,56 +34,4 @@ const EllipseComponent = ({ ); }; -const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - paddingHorizontal: 10, - }, - flexContainer: { - flexDirection: 'row', - alignItems: 'center', - }, - optionsButton: { - flex: 1, - padding: 4, - alignItems: 'flex-end', - }, - verticalEllipse: { - color: 'black', - fontSize: 24, - fontWeight: 'bold', - transform: [{ rotate: '90deg' }], - padding: 8, - }, - dropdownContainer: { - position: 'absolute', - top: 10, // Adjust the top position according to your layout - right: 10, - backgroundColor: 'white', - borderRadius: 5, - elevation: 5, - padding: 10, - }, - dropdownOption: { - fontSize: 18, - paddingVertical: 8, - color: 'red', - }, - closeContainer: { - flex: 1, - alignItems: 'flex-end', - }, - closeButton: { - fontSize: 18, - color: 'black', - padding: 2, - }, - close: { - height: 20, - width: 20, - }, -}); - export default EllipseComponent; diff --git a/src/components/ErrorScreen.tsx b/src/components/ErrorScreen.tsx index 9210103b..2bd845c2 100644 --- a/src/components/ErrorScreen.tsx +++ b/src/components/ErrorScreen.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Modal, StyleSheet, View, Text } from 'react-native'; +import { Modal, View, Text } from 'react-native'; +import { styles } from '../styles/ErrorScreenStyle'; const ErrorScreen = ({ error }: string) => { return ( @@ -11,18 +12,4 @@ const ErrorScreen = ({ error }: string) => { ); }; -export default ErrorScreen; - -const styles = StyleSheet.create({ - container: { - justifyContent: 'center', - alignItems: 'center', - flex: 1, - top: 0, - bottom: 0, - left: 0, - right: 0, - position: 'absolute', - zIndex: 1, - }, -}); +export default ErrorScreen; \ No newline at end of file diff --git a/src/components/FloatingButton.tsx b/src/components/FloatingButton.tsx index 8b2ab353..5321e646 100644 --- a/src/components/FloatingButton.tsx +++ b/src/components/FloatingButton.tsx @@ -1,7 +1,8 @@ import { FloatingAction } from 'react-native-floating-action'; -import { View, StyleSheet } from 'react-native'; +import { View } from 'react-native'; import React from 'react'; import FloatingActions from './FloatingActions'; +import { styles } from '../styles/FloatingButtonStyle'; export default function FloatingButton() { return ( @@ -13,10 +14,4 @@ export default function FloatingButton() { /> ); -} - -const styles = StyleSheet.create({ - float: { - marginTop: '120%', - }, -}); +} \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx index b1d3b021..450da1d7 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { View, Image, StyleSheet, SafeAreaView, StatusBar } from 'react-native'; -import Colors from '../constants/colors/Colors'; +import { View, Image, SafeAreaView, StatusBar } from 'react-native'; import Images from '../constants/images/Image'; +import { styles } from '../styles/HeaderStyle'; const Header = () => { return ( - + @@ -14,17 +14,4 @@ const Header = () => { ); }; -export default Header; - -const styles = StyleSheet.create({ - container: { - padding: 15, - backgroundColor: Colors.Primary_Color, - justifyContent: 'flex-start', - alignItems: 'flex-start', - }, - logo: { - width: 45, - height: 45, - }, -}); +export default Header; \ No newline at end of file diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx index 4c8f5679..0f538197 100644 --- a/src/components/Loader.tsx +++ b/src/components/Loader.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { StyleSheet, View, Text } from 'react-native'; +import { View, Text } from 'react-native'; +import { styles } from '../styles/LoaderStyle'; function Loader() { // TODO: revert once UI gets fix @@ -10,26 +11,4 @@ function Loader() { ); } -export default Loader; - -const styles = StyleSheet.create({ - container: { - justifyContent: 'center', - alignItems: 'center', - flex: 1, - top: 0, - bottom: 0, - left: 0, - right: 0, - position: 'absolute', - zIndex: 1, - }, - loadingContainer: { - marginTop: 20, - justifyContent: 'center', - alignItems: 'center', - }, - loadingText: { - color: 'black', - }, -}); +export default Loader; \ No newline at end of file diff --git a/src/components/LoadingScreen.tsx b/src/components/LoadingScreen.tsx index c2a8cc2d..de1fb2b5 100644 --- a/src/components/LoadingScreen.tsx +++ b/src/components/LoadingScreen.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { ActivityIndicator, Modal, StyleSheet, View } from 'react-native'; +import { ActivityIndicator, Modal, View } from 'react-native'; +import { styles } from '../styles/LoadingScreenStyle'; function LoadingScreen() { return ( @@ -13,16 +14,3 @@ function LoadingScreen() { export default LoadingScreen; -const styles = StyleSheet.create({ - container: { - justifyContent: 'center', - alignItems: 'center', - flex: 1, - top: 0, - bottom: 0, - left: 0, - right: 0, - position: 'absolute', - zIndex: 1, - }, -}); diff --git a/src/components/Modal/CustomModal.tsx b/src/components/Modal/CustomModal.tsx index b0c03ecf..ee2e2d84 100644 --- a/src/components/Modal/CustomModal.tsx +++ b/src/components/Modal/CustomModal.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Alert, Modal, StyleSheet, Text, Pressable, View } from 'react-native'; +import { Alert, Modal, Text, Pressable, View } from 'react-native'; +import { styles } from './CustomModalStyle'; const message = 'Press Done button once you verify yourself from My-site'; const CustomModal = ({ modalVisible, setModalVisible, qrCodeLogin }) => { @@ -29,47 +30,4 @@ const CustomModal = ({ modalVisible, setModalVisible, qrCodeLogin }) => { ); }; -const styles = StyleSheet.create({ - centeredView: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - modalView: { - margin: 20, - backgroundColor: 'white', - borderRadius: 20, - padding: 35, - alignItems: 'center', - shadowColor: '#fff', - shadowOffset: { - width: 0, - height: 2, - }, - shadowOpacity: 0.25, - shadowRadius: 4, - elevation: 5, - }, - button: { - borderRadius: 20, - padding: 10, - elevation: 2, - }, - buttonOpen: {}, // backgroundColor: '#F194FF', - - buttonClose: { - backgroundColor: '#2196F3', - }, - textStyle: { - color: 'white', - fontWeight: 'bold', - textAlign: 'center', - }, - modalText: { - marginBottom: 15, - textAlign: 'center', - color: 'black', - }, -}); - -export default CustomModal; +export default CustomModal; \ No newline at end of file diff --git a/src/components/Modal/CustomModalStyle.tsx b/src/components/Modal/CustomModalStyle.tsx new file mode 100644 index 00000000..d58fd361 --- /dev/null +++ b/src/components/Modal/CustomModalStyle.tsx @@ -0,0 +1,44 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + centeredView: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + modalView: { + margin: 20, + backgroundColor: 'white', + borderRadius: 20, + padding: 35, + alignItems: 'center', + shadowColor: '#fff', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 4, + elevation: 5, + }, + button: { + borderRadius: 20, + padding: 10, + elevation: 2, + }, + buttonOpen: {}, // backgroundColor: '#F194FF', + + buttonClose: { + backgroundColor: '#2196F3', + }, + textStyle: { + color: 'white', + fontWeight: 'bold', + textAlign: 'center', + }, + modalText: { + marginBottom: 15, + textAlign: 'center', + color: 'black', + }, +}); \ No newline at end of file diff --git a/src/components/Modal/ProgressModal.tsx b/src/components/Modal/ProgressModal.tsx index 90838c88..6d15e543 100644 --- a/src/components/Modal/ProgressModal.tsx +++ b/src/components/Modal/ProgressModal.tsx @@ -1,9 +1,10 @@ import React, { useState } from 'react'; -import { View, TouchableOpacity, StyleSheet } from 'react-native'; +import { View, TouchableOpacity } from 'react-native'; import Modal from 'react-native-modal'; import CircularProgress from 'react-native-circular-progress-indicator'; import { Card, Title, Paragraph, Button } from 'react-native-paper'; import Slider from '@react-native-community/slider'; +import { styles } from './ProgressModalStyle'; function ProgressModal() { const [isModalVisible, setModalVisible] = useState(false); @@ -74,58 +75,4 @@ function ProgressModal() { ); } -const styles = StyleSheet.create({ - viewContainer:{ - flex: 1, - justifyContent: 'center', - alignItems: 'center' - }, - cardContainer: { - margin: 20, - padding: 15, - borderRadius: 10, - backgroundColor: '#fff', - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 2, - }, - shadowOpacity: 1, - shadowRadius: 3.84, - elevation: 5, - }, - titleText: { - fontSize: 24, - fontWeight: 'bold', - textAlign: 'center', - color: '#333', - }, - paragraphText: { - fontSize: 16, - fontWeight: 'normal', - color: '#555', - marginBottom: 10, - }, - Modal: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - - container: { - alignContent: 'center', - margin: 37, - }, - - Button: { - marginTop: 20, - backgroundColor: '#6a6bcf', - padding: 10, - borderRadius: 8, - }, - sliderStyle:{ - width: '80%', - alignSelf: 'center' - } -}); export default ProgressModal; diff --git a/src/components/Modal/ProgressModalStyle.tsx b/src/components/Modal/ProgressModalStyle.tsx new file mode 100644 index 00000000..cbe5ecb5 --- /dev/null +++ b/src/components/Modal/ProgressModalStyle.tsx @@ -0,0 +1,56 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + viewContainer:{ + flex: 1, + justifyContent: 'center', + alignItems: 'center' + }, + cardContainer: { + margin: 20, + padding: 15, + borderRadius: 10, + backgroundColor: '#fff', + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 1, + shadowRadius: 3.84, + elevation: 5, + }, + titleText: { + fontSize: 24, + fontWeight: 'bold', + textAlign: 'center', + color: '#333', + }, + paragraphText: { + fontSize: 16, + fontWeight: 'normal', + color: '#555', + marginBottom: 10, + }, + Modal: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + + container: { + alignContent: 'center', + margin: 37, + }, + + Button: { + marginTop: 20, + backgroundColor: '#6a6bcf', + padding: 10, + borderRadius: 8, + }, + sliderStyle:{ + width: '80%', + alignSelf: 'center' + } +}); \ No newline at end of file diff --git a/src/components/Notify/NotifyButton.tsx b/src/components/Notify/NotifyButton.tsx index 61c61a48..a67187ef 100644 --- a/src/components/Notify/NotifyButton.tsx +++ b/src/components/Notify/NotifyButton.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { TouchableOpacity, Text, StyleSheet } from 'react-native'; +import { TouchableOpacity, Text } from 'react-native'; import { NotifyType } from './NotifyType'; +import { styles } from './NotifyButtonStyle'; const NotifyButton = ({ onPress, @@ -15,17 +16,4 @@ const NotifyButton = ({ ); }; -const styles = StyleSheet.create({ - button: { - backgroundColor: '#3498db', - padding: 10, - borderRadius: 5, - alignItems: 'center', - }, - text: { - color: 'white', - fontSize: 16, - }, -}); - export default NotifyButton; diff --git a/src/components/Notify/NotifyButtonStyle.tsx b/src/components/Notify/NotifyButtonStyle.tsx new file mode 100644 index 00000000..6a3faa25 --- /dev/null +++ b/src/components/Notify/NotifyButtonStyle.tsx @@ -0,0 +1,14 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + button: { + backgroundColor: '#3498db', + padding: 10, + borderRadius: 5, + alignItems: 'center', + }, + text: { + color: 'white', + fontSize: 16, + }, +}); \ No newline at end of file diff --git a/src/components/Notify/NotifyForm.tsx b/src/components/Notify/NotifyForm.tsx index 66eb6c4b..ea301e78 100644 --- a/src/components/Notify/NotifyForm.tsx +++ b/src/components/Notify/NotifyForm.tsx @@ -4,9 +4,9 @@ import { TextInput, Picker, Button, - StyleSheet, } from 'react-native'; import React, { useState } from 'react'; +import { styles } from './NotifyFormStyle'; const NotifyForm = () => { const [title, setTitle] = useState(''); @@ -52,22 +52,4 @@ const NotifyForm = () => { ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - padding: 16, - }, - label: { - fontSize: 16, - marginBottom: 8, - }, - input: { - height: 40, - borderColor: 'gray', - borderWidth: 1, - marginBottom: 16, - paddingHorizontal: 8, - }, -}); - export default NotifyForm; diff --git a/src/components/Notify/NotifyFormStyle.tsx b/src/components/Notify/NotifyFormStyle.tsx new file mode 100644 index 00000000..2b5842cf --- /dev/null +++ b/src/components/Notify/NotifyFormStyle.tsx @@ -0,0 +1,19 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + flex: 1, + padding: 16, + }, + label: { + fontSize: 16, + marginBottom: 8, + }, + input: { + height: 40, + borderColor: 'gray', + borderWidth: 1, + marginBottom: 16, + paddingHorizontal: 8, + }, +}); \ No newline at end of file diff --git a/src/components/OOO/OOOForm.tsx b/src/components/OOO/OOOForm.tsx index 649e1772..6890f190 100644 --- a/src/components/OOO/OOOForm.tsx +++ b/src/components/OOO/OOOForm.tsx @@ -1,6 +1,5 @@ import Images from '../../constants/images/Image'; import { - StyleSheet, TextInput, View, Alert, @@ -12,6 +11,7 @@ import { import React from 'react'; import { OOOFormType } from './OOOFormType'; import DatePicker from './OOOFormDatePicker'; +import { styles } from './OOOFormStyle'; const OOOForm = ({ fromDate, @@ -81,46 +81,4 @@ const OOOForm = ({ ); }; -export default OOOForm; - -const styles = StyleSheet.create({ - container: { - padding: 20, - }, - input: { - height: 40, - borderColor: '#ccc', - borderWidth: 1, - borderRadius: 4, - marginBottom: 10, - marginTop: 20, - paddingHorizontal: 10, - }, - textArea: { - height: 80, - }, - close: { - height: 20, - width: 20, - marginLeft: 'auto', - marginBottom: 10, - }, - text: { - color: '#000000', - }, - SubmitButtonContainer: { - backgroundColor: '#0034a5', - paddingVertical: 10, - paddingHorizontal: 12, - width: '30%', - borderRadius: 10, - marginLeft: 'auto', - marginRight: 'auto', - }, - SubmitButtonText: { - color: '#fff', - alignSelf: 'center', - fontWeight: 'bold', - borderColor: '#808080', - }, -}); +export default OOOForm; \ No newline at end of file diff --git a/src/components/OOO/OOOFormDatePicker.tsx b/src/components/OOO/OOOFormDatePicker.tsx index d738b8f8..6b7d58f9 100644 --- a/src/components/OOO/OOOFormDatePicker.tsx +++ b/src/components/OOO/OOOFormDatePicker.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; -import { Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native'; +import { Text, TouchableOpacity, ScrollView } from 'react-native'; import DatePicker from 'react-native-date-picker'; +import { styles } from './OOOFormDatePickerStyle'; type DatePickerProps = { title: string; @@ -39,27 +40,4 @@ const DeadLineDatePicker = (props: DatePickerProps) => { ); }; -const styles = StyleSheet.create({ - buttonStyle: { - width: '100%', - height: 50, - elevation: 5, - borderRadius: 10, - borderWidth: 1, - backgroundColor: 'white', - alignSelf: 'center', - marginTop: 10, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - paddingLeft: 15, - paddingRight: 15, - }, - buttonTextStyle: { - fontWeight: '600', - color: 'black', - justifyContent: 'center', - }, -}); - -export default DeadLineDatePicker; +export default DeadLineDatePicker; \ No newline at end of file diff --git a/src/components/OOO/OOOFormDatePickerStyle.tsx b/src/components/OOO/OOOFormDatePickerStyle.tsx new file mode 100644 index 00000000..b1126824 --- /dev/null +++ b/src/components/OOO/OOOFormDatePickerStyle.tsx @@ -0,0 +1,24 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + buttonStyle: { + width: '100%', + height: 50, + elevation: 5, + borderRadius: 10, + borderWidth: 1, + backgroundColor: 'white', + alignSelf: 'center', + marginTop: 10, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + paddingLeft: 15, + paddingRight: 15, + }, + buttonTextStyle: { + fontWeight: '600', + color: 'black', + justifyContent: 'center', + }, +}); \ No newline at end of file diff --git a/src/components/OOO/OOOFormStyle.tsx b/src/components/OOO/OOOFormStyle.tsx new file mode 100644 index 00000000..e8db5582 --- /dev/null +++ b/src/components/OOO/OOOFormStyle.tsx @@ -0,0 +1,43 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + padding: 20, + }, + input: { + height: 40, + borderColor: '#ccc', + borderWidth: 1, + borderRadius: 4, + marginBottom: 10, + marginTop: 20, + paddingHorizontal: 10, + }, + textArea: { + height: 80, + }, + close: { + height: 20, + width: 20, + marginLeft: 'auto', + marginBottom: 10, + }, + text: { + color: '#000000', + }, + SubmitButtonContainer: { + backgroundColor: '#0034a5', + paddingVertical: 10, + paddingHorizontal: 12, + width: '30%', + borderRadius: 10, + marginLeft: 'auto', + marginRight: 'auto', + }, + SubmitButtonText: { + color: '#fff', + alignSelf: 'center', + fontWeight: 'bold', + borderColor: '#808080', + }, +}); \ No newline at end of file diff --git a/src/components/ProfileExtensionForm/ExtensionDatePicker.tsx b/src/components/ProfileExtensionForm/ExtensionDatePicker.tsx index d738b8f8..8d017132 100644 --- a/src/components/ProfileExtensionForm/ExtensionDatePicker.tsx +++ b/src/components/ProfileExtensionForm/ExtensionDatePicker.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; -import { Text, TouchableOpacity, StyleSheet, ScrollView } from 'react-native'; +import { Text, TouchableOpacity, ScrollView } from 'react-native'; import DatePicker from 'react-native-date-picker'; +import { styles } from './ExtensionDatePickerStyle'; type DatePickerProps = { title: string; @@ -39,27 +40,4 @@ const DeadLineDatePicker = (props: DatePickerProps) => { ); }; -const styles = StyleSheet.create({ - buttonStyle: { - width: '100%', - height: 50, - elevation: 5, - borderRadius: 10, - borderWidth: 1, - backgroundColor: 'white', - alignSelf: 'center', - marginTop: 10, - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', - paddingLeft: 15, - paddingRight: 15, - }, - buttonTextStyle: { - fontWeight: '600', - color: 'black', - justifyContent: 'center', - }, -}); - -export default DeadLineDatePicker; +export default DeadLineDatePicker; \ No newline at end of file diff --git a/src/components/ProfileExtensionForm/ExtensionDatePickerStyle.tsx b/src/components/ProfileExtensionForm/ExtensionDatePickerStyle.tsx new file mode 100644 index 00000000..b1126824 --- /dev/null +++ b/src/components/ProfileExtensionForm/ExtensionDatePickerStyle.tsx @@ -0,0 +1,24 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + buttonStyle: { + width: '100%', + height: 50, + elevation: 5, + borderRadius: 10, + borderWidth: 1, + backgroundColor: 'white', + alignSelf: 'center', + marginTop: 10, + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + paddingLeft: 15, + paddingRight: 15, + }, + buttonTextStyle: { + fontWeight: '600', + color: 'black', + justifyContent: 'center', + }, +}); \ No newline at end of file diff --git a/src/components/ProfileExtensionForm/ExtensionRequest.tsx b/src/components/ProfileExtensionForm/ExtensionRequest.tsx index 660dd142..914aa91b 100644 --- a/src/components/ProfileExtensionForm/ExtensionRequest.tsx +++ b/src/components/ProfileExtensionForm/ExtensionRequest.tsx @@ -1,7 +1,6 @@ import { View, Text, - StyleSheet, TouchableOpacity, Alert, Image, @@ -16,6 +15,7 @@ import { } from '../../screens/AuthScreen/Util'; import { AuthContext } from '../../context/AuthContext'; import DeadLineDatePicker from '../OOO/OOOFormDatePicker'; +import { styles } from './ExtensionRequestStyle'; export default function ExtensionRequest() { const navigation = useNavigation(); @@ -94,56 +94,4 @@ export default function ExtensionRequest() { ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: 'white', - padding: 30, - justifyContent: 'center', - }, - - paragraph: { - margin: 5, - fontSize: 18, - fontWeight: 'normal', - color: 'blue', - justifyContent: 'flex-start', - }, - - button: { - backgroundColor: 'grey', - padding: 6, - marginTop: 12, - width: '40%', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 15, - }, - buttoncontainer: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - titleText: { - margin: 5, - fontSize: 18, - fontWeight: 'bold', - color: 'blue', - justifyContent: 'flex-start', - }, - input: { - borderWidth: 1, - fontSize: 15, - padding: 10, - borderRadius: 5, - backgroundColor: '#718f9e', - }, - close: { - height: 10, - width: 10, - padding: 15, - justifyContent: 'flex-start', - }, -}); +} \ No newline at end of file diff --git a/src/components/ProfileExtensionForm/ExtensionRequestStyle.tsx b/src/components/ProfileExtensionForm/ExtensionRequestStyle.tsx new file mode 100644 index 00000000..5217da82 --- /dev/null +++ b/src/components/ProfileExtensionForm/ExtensionRequestStyle.tsx @@ -0,0 +1,53 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'white', + padding: 30, + justifyContent: 'center', + }, + + paragraph: { + margin: 5, + fontSize: 18, + fontWeight: 'normal', + color: 'blue', + justifyContent: 'flex-start', + }, + + button: { + backgroundColor: 'grey', + padding: 6, + marginTop: 12, + width: '40%', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 15, + }, + buttoncontainer: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + titleText: { + margin: 5, + fontSize: 18, + fontWeight: 'bold', + color: 'blue', + justifyContent: 'flex-start', + }, + input: { + borderWidth: 1, + fontSize: 15, + padding: 10, + borderRadius: 5, + backgroundColor: '#718f9e', + }, + close: { + height: 10, + width: 10, + padding: 15, + justifyContent: 'flex-start', + }, +}); \ No newline at end of file diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index 65281787..2473cfdd 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -3,7 +3,6 @@ import { View, Text, Animated, - StyleSheet, PanResponder, TouchableOpacity, } from 'react-native'; @@ -11,6 +10,7 @@ import { overallTaskProgress } from '../screens/AuthScreen/Util'; import { AuthContext } from '../context/AuthContext'; import Toast from 'react-native-toast-message'; import moment from 'moment'; +import { styles } from '../styles/ProgressBarStyle'; function ProgressBar({ percCompleted, @@ -171,51 +171,4 @@ function ProgressBar({ ); } -const styles = StyleSheet.create({ - container: { - // flex: 1, - height: 80, - backgroundColor: '#eee', - borderRadius: 10, - margin: 10, - padding: 10, - }, - bar: { - height: '30%', - backgroundColor: '#3498db', - borderRadius: 10, - alignItems: 'center', - }, - progressContainer: { - alignItems: 'center', - marginTop: 10, - }, - progressText: { - fontSize: 16, - fontWeight: 'bold', - color: 'black', - }, - buttonsContainer: { - flexDirection: 'row', - justifyContent: 'space-between', - marginTop: 5, - textAlign: 'center', - }, - button: { - backgroundColor: '#2980b9', - borderRadius: 5, - // padding: 10, - height: 30, - width: 30, - borderWidth: 1, - borderColor: '#2980b9', - }, - buttonText: { - color: 'white', - fontSize: 20, - textAlign: 'center', - fontWeight: 'bold', - }, -}); - -export default ProgressBar; +export default ProgressBar; \ No newline at end of file diff --git a/src/components/PushUpModalContent.tsx b/src/components/PushUpModalContent.tsx index 1a9c1fbe..f6e54953 100644 --- a/src/components/PushUpModalContent.tsx +++ b/src/components/PushUpModalContent.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { Text, View, StyleSheet } from 'react-native'; +import { Text, View } from 'react-native'; import { profileScreenStyles } from '../screens/ProfileScreen/styles'; import { calculateISODateFormat } from '../screens/AuthScreen/Util'; +import { styles } from '../styles/PushUpModalContentStyle'; const PushUpModalContent = ({ task }) => { return ( @@ -28,55 +29,4 @@ const PushUpModalContent = ({ task }) => { ); }; -const styles = StyleSheet.create({ - centerMain: { - flex: 1, - justifyContent: 'center', - width: '100%', - borderRadius: 8, - paddingHorizontal: 10, - }, - content: { - // margin: 4, - // alignSelf: 'center', - }, - modalView: { - justifyContent: 'center', - marginHorizontal: 30, - backgroundColor: '#f2f0f0', - padding: 10, - borderWidth: 1, - marginTop: 10, - borderColor: '#F0F0F0', - borderRadius: 8, - }, - block: { - display: 'flex', - flexDirection: 'row', - marginTop: 8, - alignItems: 'flex-start', - }, - buttonBg: { - width: '100%', - backgroundColor: '#0034a5', - textAlign: 'center', - paddingVertical: 10, - borderRadius: 8, - marginTop: 10, - fontWeight: 'bold', - color: '#FFFFFF', - }, - textTitle: { - flex: 2, - color: '#000000', - flexWrap: 'wrap', - }, - dateText: { - fontSize: 24, - color: 'black', - fontWeight: 'bold', - textAlign: 'center', - }, -}); - export default PushUpModalContent; diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx index 6f13e206..a79a4015 100644 --- a/src/components/SearchBar.tsx +++ b/src/components/SearchBar.tsx @@ -1,5 +1,6 @@ -import { View, StyleSheet, TextInput } from 'react-native'; +import { View, TextInput } from 'react-native'; import React from 'react'; +import { styles } from '../styles/SearchBarStyle'; type SearchBarProps = { setSearchValue: (text: string) => void; @@ -59,27 +60,4 @@ const SearchBar = ({ ); }; -export default SearchBar; - -const styles = StyleSheet.create({ - container: { - marginTop: 40, - position: 'absolute', - top: 30, - width: 350, - left: 20, - zIndex: 99, - backgroundColor: 'white', - borderRadius: 20, - }, - formField: { - borderWidth: 1, - padding: 12, - paddingLeft: 20, - paddingRight: 20, - borderColor: '#888888', - fontSize: 18, - height: 50, - borderRadius: 20, - }, -}); +export default SearchBar; \ No newline at end of file diff --git a/src/screens/ConnectionScreen/ConnectionScreen.tsx b/src/screens/ConnectionScreen/ConnectionScreen.tsx index ed6b6659..4c3beff6 100644 --- a/src/screens/ConnectionScreen/ConnectionScreen.tsx +++ b/src/screens/ConnectionScreen/ConnectionScreen.tsx @@ -1,11 +1,8 @@ import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'; import React from 'react'; -import { scale } from '../../utils/utils'; -import StyleConfig from '../../utils/StyleConfig'; import Images from '../../constants/images/Image'; import Strings from '../../i18n/en'; -Images - +import { styles } from './ConnectionScreenStyle'; type RetryFunction = () => void; @@ -27,35 +24,4 @@ const ConnectionScreen: React.FC = ({ ); }; -export default ConnectionScreen; - -const styles = StyleSheet.create({ - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: StyleConfig.colors.white, - }, - - retryButton: { - backgroundColor: StyleConfig.colors.primary, - paddingHorizontal: scale(20), - paddingVertical: scale(10), - borderRadius: 8, - }, - retry: { - color: StyleConfig.colors.white, - }, - - noInternetText: { - color: StyleConfig.colors.darkGrey, - fontWeight: '500', - fontSize: scale(16), - margin: scale(10), - }, - - offlineImage: { - height: scale(150), - width: scale(150), - }, -}); +export default ConnectionScreen; \ No newline at end of file diff --git a/src/screens/ConnectionScreen/ConnectionScreenStyle.tsx b/src/screens/ConnectionScreen/ConnectionScreenStyle.tsx new file mode 100644 index 00000000..87617777 --- /dev/null +++ b/src/screens/ConnectionScreen/ConnectionScreenStyle.tsx @@ -0,0 +1,34 @@ +import { StyleSheet } from "react-native"; +import StyleConfig from "../../utils/StyleConfig"; +import { scale } from "../../utils/utils"; + +export const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: StyleConfig.colors.white, + }, + + retryButton: { + backgroundColor: StyleConfig.colors.primary, + paddingHorizontal: scale(20), + paddingVertical: scale(10), + borderRadius: 8, + }, + retry: { + color: StyleConfig.colors.white, + }, + + noInternetText: { + color: StyleConfig.colors.darkGrey, + fontWeight: '500', + fontSize: scale(16), + margin: scale(10), + }, + + offlineImage: { + height: scale(150), + width: scale(150), + }, +}); \ No newline at end of file diff --git a/src/screens/MemberScreen/MembersPage.tsx b/src/screens/MemberScreen/MembersPage.tsx index 296477e1..44f8b65a 100644 --- a/src/screens/MemberScreen/MembersPage.tsx +++ b/src/screens/MemberScreen/MembersPage.tsx @@ -1,5 +1,4 @@ import { - StyleSheet, Text, View, FlatList, @@ -11,6 +10,7 @@ import SearchBar from '../../components/SearchBar'; import RenderMemberItem from '../../components/ToDoComponent/RenderMemberItem'; import { RouteProp, useRoute } from '@react-navigation/native'; import GoalsApi from '../../constants/apiConstant/GoalsApi'; +import { styles } from './MembersPageStyle'; type MembersPageRouteProp = RouteProp; @@ -94,19 +94,4 @@ const MembersPage = () => { ); }; -export default MembersPage; - -const styles = StyleSheet.create({ - container: { flex: 1, padding: 4, backgroundColor: '#F5F5F5' }, - title: { - fontSize: 30, - fontWeight: 'bold', - color: 'blue', - textShadowColor: 'rgba(0, 0, 0, 0.5)', - textShadowOffset: { width: 2, height: 2 }, - textShadowRadius: 2, - textAlign: 'center', - margin: 2, - }, - loaderView: { alignItems: 'center', paddingVertical: 20 }, -}); +export default MembersPage; \ No newline at end of file diff --git a/src/screens/MemberScreen/MembersPageStyle.tsx b/src/screens/MemberScreen/MembersPageStyle.tsx new file mode 100644 index 00000000..2c969341 --- /dev/null +++ b/src/screens/MemberScreen/MembersPageStyle.tsx @@ -0,0 +1,16 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { flex: 1, padding: 4, backgroundColor: '#F5F5F5' }, + title: { + fontSize: 30, + fontWeight: 'bold', + color: 'blue', + textShadowColor: 'rgba(0, 0, 0, 0.5)', + textShadowOffset: { width: 2, height: 2 }, + textShadowRadius: 2, + textAlign: 'center', + margin: 2, + }, + loaderView: { alignItems: 'center', paddingVertical: 20 }, +}); diff --git a/src/screens/NotifyScreen/NotifyScreen.tsx b/src/screens/NotifyScreen/NotifyScreen.tsx index 626c7a91..915733d9 100644 --- a/src/screens/NotifyScreen/NotifyScreen.tsx +++ b/src/screens/NotifyScreen/NotifyScreen.tsx @@ -1,7 +1,8 @@ -import { StyleSheet, View } from 'react-native'; +import { View } from 'react-native'; import React from 'react'; import NotifyButton from '../../components/Notify/NotifyButton'; import Colors from '../../constants/colors/Colors'; +import { styles } from './NotifyScreenStyle'; const NotifyScreen = () => { const onNotifyHandler = () => { @@ -19,9 +20,4 @@ const NotifyScreen = () => { ); }; -export default NotifyScreen; -const styles = StyleSheet.create({ - container: { - padding: 20, - }, -}); +export default NotifyScreen; \ No newline at end of file diff --git a/src/screens/NotifyScreen/NotifyScreenStyle.tsx b/src/screens/NotifyScreen/NotifyScreenStyle.tsx new file mode 100644 index 00000000..81399b3d --- /dev/null +++ b/src/screens/NotifyScreen/NotifyScreenStyle.tsx @@ -0,0 +1,7 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + padding: 20, + }, +}); \ No newline at end of file diff --git a/src/screens/ProfileScreen/DetailScreen/ActiveTaskDetail.tsx b/src/screens/ProfileScreen/DetailScreen/ActiveTaskDetail.tsx index 24d0244d..32c30b20 100644 --- a/src/screens/ProfileScreen/DetailScreen/ActiveTaskDetail.tsx +++ b/src/screens/ProfileScreen/DetailScreen/ActiveTaskDetail.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { StyleSheet } from 'react-native'; import { View, Text, TouchableOpacity, ScrollView } from 'react-native'; import { useNavigation, useRoute } from '@react-navigation/native'; import ProgressModal from '../../../components/Modal/ProgressModal'; // import { getDateAndTimeFromUnix } from '../../AuthScreen/Util'; +import { styles } from './styles/ActiveTaskDetailStyle'; const ActiveTaskDetail = () => { const route = useRoute(); @@ -68,57 +68,4 @@ const ActiveTaskDetail = () => { ); }; -const styles = StyleSheet.create({ - container: { - flex: 1, - padding: 20, - backgroundColor: '#e7cfe7', - alignContent: 'space-between', - }, - mainTitle: { - color: '#2827CC', - fontSize: 25, - fontWeight: 'bold', - textAlign: 'center', - }, - - titles: { - fontSize: 20, - elevation: 2, - marginBottom: 5, - marginTop: 20, - color: 'black', - fontWeight: 'bold', - }, - - buttonStyle: { - width: 150, - height: 40, - backgroundColor: '#9cb8b5', - padding: 5, - alignItems: 'center', - borderRadius: 5, - }, - buttonTextStyle: { - color: 'black', - justifyContent: 'space-evenly', - alignItems: 'flex-start', - fontSize: 15, - }, - buttoncontainer: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - button: { - backgroundColor: 'grey', - padding: 6, - marginTop: 12, - width: '40%', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 15, - }, -}); - export default ActiveTaskDetail; diff --git a/src/screens/ProfileScreen/DetailScreen/ExtensionRequest.tsx b/src/screens/ProfileScreen/DetailScreen/ExtensionRequest.tsx index d9ae4828..e4e47132 100644 --- a/src/screens/ProfileScreen/DetailScreen/ExtensionRequest.tsx +++ b/src/screens/ProfileScreen/DetailScreen/ExtensionRequest.tsx @@ -1,8 +1,9 @@ -import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'; +import { View, Text, TouchableOpacity } from 'react-native'; import React, { useState } from 'react'; import { useNavigation } from '@react-navigation/native'; import { TextInput } from 'react-native-gesture-handler'; // import axios from 'axios'; +import { styles } from './styles/ExtensionRequestStyle'; export default function ExtensionRequest() { const navigation = useNavigation(); @@ -88,64 +89,4 @@ export default function ExtensionRequest() { ); -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - backgroundColor: 'white', - border: '2px solid black', - padding: 30, - }, - - paragraph: { - margin: 5, - fontSize: 18, - fontWeight: 'normal', - color: 'blue', - justifyContent: 'flex-start', - }, - - formchild: { - marginTop: 5, - fontWeight: 'bold', - }, - toggle: { - display: 'flex', - flexDirection: 'row', - margin: 5, - padding: 3, - alignItems: 'center', - justifyContent: 'center', - }, - togglechild: { - margin: 5, - }, - button: { - backgroundColor: 'blue', - padding: 6, - marginTop: 12, - width: '40%', - alignItems: 'center', - justifyContent: 'center', - borderRadius: 15, - }, - buttoncontainer: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, - title: { - margin: 5, - fontSize: 18, - fontWeight: 'bold', - color: 'blue', - justifyContent: 'flex-start', - }, - input: { - borderColor: 'skyBlue', - borderwidth: 2, - fontSize: 15, - backgroundColor: 'lightgrey', - }, -}); +} \ No newline at end of file diff --git a/src/screens/ProfileScreen/DetailScreen/TaskStatusDropdown.tsx b/src/screens/ProfileScreen/DetailScreen/TaskStatusDropdown.tsx index 116755dc..1b750c29 100644 --- a/src/screens/ProfileScreen/DetailScreen/TaskStatusDropdown.tsx +++ b/src/screens/ProfileScreen/DetailScreen/TaskStatusDropdown.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { StyleSheet } from 'react-native'; import { Dropdown } from 'react-native-element-dropdown'; +import { styles } from './styles/TaskStatusDropdownStyle'; const data = [ { label: ' Available', value: '1' }, @@ -35,42 +35,4 @@ const DropdownComponent = () => { ); }; -export default DropdownComponent; - -const styles = StyleSheet.create({ - dropdown: { - width: '100%', - height: 50, - elevation: 5, - borderRadius: 10, - borderWidth: 1, - backgroundColor: '#6f9ee6', - marginTop: 10, - paddingLeft: 15, - paddingRight: 15, - }, - icon: { - marginRight: 5, - }, - placeholderStyle: { - fontSize: 16, - }, - selectedTextStyle: { - fontSize: 16, - textShadowColor: 'Blue', - }, - - inputSearchStyle: { - height: 40, - fontSize: 16, - }, - - label: { - position: 'absolute', - left: 22, - top: 8, - zIndex: 999, - paddingHorizontal: 8, - fontSize: 14, - }, -}); +export default DropdownComponent; \ No newline at end of file diff --git a/src/screens/ProfileScreen/DetailScreen/styles/ActiveTaskDetailStyle.tsx b/src/screens/ProfileScreen/DetailScreen/styles/ActiveTaskDetailStyle.tsx new file mode 100644 index 00000000..aab07800 --- /dev/null +++ b/src/screens/ProfileScreen/DetailScreen/styles/ActiveTaskDetailStyle.tsx @@ -0,0 +1,54 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + flex: 1, + padding: 20, + backgroundColor: '#e7cfe7', + alignContent: 'space-between', + }, + mainTitle: { + color: '#2827CC', + fontSize: 25, + fontWeight: 'bold', + textAlign: 'center', + }, + + titles: { + fontSize: 20, + elevation: 2, + marginBottom: 5, + marginTop: 20, + color: 'black', + fontWeight: 'bold', + }, + + buttonStyle: { + width: 150, + height: 40, + backgroundColor: '#9cb8b5', + padding: 5, + alignItems: 'center', + borderRadius: 5, + }, + buttonTextStyle: { + color: 'black', + justifyContent: 'space-evenly', + alignItems: 'flex-start', + fontSize: 15, + }, + buttoncontainer: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + button: { + backgroundColor: 'grey', + padding: 6, + marginTop: 12, + width: '40%', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 15, + }, +}); \ No newline at end of file diff --git a/src/screens/ProfileScreen/DetailScreen/styles/ExtensionRequestStyle.tsx b/src/screens/ProfileScreen/DetailScreen/styles/ExtensionRequestStyle.tsx new file mode 100644 index 00000000..1f3d1c25 --- /dev/null +++ b/src/screens/ProfileScreen/DetailScreen/styles/ExtensionRequestStyle.tsx @@ -0,0 +1,61 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'white', + border: '2px solid black', + padding: 30, + }, + + paragraph: { + margin: 5, + fontSize: 18, + fontWeight: 'normal', + color: 'blue', + justifyContent: 'flex-start', + }, + + formchild: { + marginTop: 5, + fontWeight: 'bold', + }, + toggle: { + display: 'flex', + flexDirection: 'row', + margin: 5, + padding: 3, + alignItems: 'center', + justifyContent: 'center', + }, + togglechild: { + margin: 5, + }, + button: { + backgroundColor: 'blue', + padding: 6, + marginTop: 12, + width: '40%', + alignItems: 'center', + justifyContent: 'center', + borderRadius: 15, + }, + buttoncontainer: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + title: { + margin: 5, + fontSize: 18, + fontWeight: 'bold', + color: 'blue', + justifyContent: 'flex-start', + }, + input: { + borderColor: 'skyBlue', + borderwidth: 2, + fontSize: 15, + backgroundColor: 'lightgrey', + }, +}); \ No newline at end of file diff --git a/src/screens/ProfileScreen/DetailScreen/styles/TaskStatusDropdownStyle.tsx b/src/screens/ProfileScreen/DetailScreen/styles/TaskStatusDropdownStyle.tsx new file mode 100644 index 00000000..d55d8f4a --- /dev/null +++ b/src/screens/ProfileScreen/DetailScreen/styles/TaskStatusDropdownStyle.tsx @@ -0,0 +1,39 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + dropdown: { + width: '100%', + height: 50, + elevation: 5, + borderRadius: 10, + borderWidth: 1, + backgroundColor: '#6f9ee6', + marginTop: 10, + paddingLeft: 15, + paddingRight: 15, + }, + icon: { + marginRight: 5, + }, + placeholderStyle: { + fontSize: 16, + }, + selectedTextStyle: { + fontSize: 16, + textShadowColor: 'Blue', + }, + + inputSearchStyle: { + height: 40, + fontSize: 16, + }, + + label: { + position: 'absolute', + left: 22, + top: 8, + zIndex: 999, + paddingHorizontal: 8, + fontSize: 14, + }, +}); \ No newline at end of file diff --git a/src/screens/ProfileScreen/DetailsScreen/ProgressDetailScreen.tsx b/src/screens/ProfileScreen/DetailsScreen/ProgressDetailScreen.tsx index 871a0161..130464ff 100644 --- a/src/screens/ProfileScreen/DetailsScreen/ProgressDetailScreen.tsx +++ b/src/screens/ProfileScreen/DetailsScreen/ProgressDetailScreen.tsx @@ -1,12 +1,12 @@ import { ScrollView, - StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native'; import React, { useState } from 'react'; +import { styles } from './styles/ProgressDetailScreenStyle'; const ProgressDetailScreen = () => { // TODO: progress detail api call @@ -94,237 +94,4 @@ const ProgressDetailScreen = () => { ); }; -export default ProgressDetailScreen; - -const styles = StyleSheet.create({ - mainview: { - flex: 1, - paddingTop: 10, - width: '100%', - alignItems: 'center', - }, - // titleText: { - // fontSize: 24, - // padding: 5, - // color: 'black', - // }, - titleContainer: { - padding: 10, - alignItems: 'center', - marginBottom: 12, - }, - titleText: { - color: '#041187', // You can customize the text color - fontSize: 26, - fontWeight: 'bold', - }, - subTitleText: { - fontSize: 16, - paddingBottom: 10, - color: 'black', - }, - smallTitle: { - paddingBottom: 10, - color: 'black', - fontWeight: '600', - paddingVertical: 5, - }, - imageView: { - alignItems: 'center', - }, - taskUpdateTitle: { - marginTop: 18, - color: '#041187', - fontSize: 20, - fontWeight: '800', - }, - taskUpdateDateTitle: { - marginTop: 8, - fontSize: 20, - fontWeight: '800', - marginBottom: 20, - }, - taskUpdateQuestion: { - marginTop: 16, - color: '#616161', - fontSize: 16, - }, - taskUpdateInput: { - height: 40, - borderColor: '#ccc', - borderWidth: 1, - borderRadius: 4, - marginBottom: 10, - marginTop: 10, - paddingHorizontal: 10, - }, - progressUpdateBackground: { - borderRadius: 8, - backgroundColor: '#1C315E', - paddingHorizontal: 20, - paddingVertical: 16, - }, - progressText: { - color: 'white', - fontWeight: '700', - fontSize: 20, - }, - progressListLeftPadding: { - marginLeft: 5, - }, - updateButtonContainer: { - backgroundColor: '#0034a5', - paddingVertical: 10, - paddingHorizontal: 12, - width: '45%', - borderRadius: 10, - }, - updatebutton: { - color: 'white', - textAlign: 'center', - fontWeight: '800', - }, - missedProgressCount: { - color: 'red', - fontWeight: '700', - fontSize: 18, - textDecorationLine: 'underline', - }, - submitProgressContainer: { - backgroundColor: '#0034a5', - paddingVertical: 10, - paddingHorizontal: 12, - width: '30%', - borderRadius: 10, - marginTop: 16, - }, - image: { - width: 100, - height: 100, - borderRadius: 100, - }, - centeredView: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, - mainContainer: { - marginHorizontal: 24, - marginVertical: 8, - }, - cardBackground: { - backgroundColor: 'white', - padding: 10, - borderWidth: 1, - marginTop: 10, - borderColor: '#F0F0F0', - borderRadius: 8, - }, - flexItemWidth: { - width: '50%', - }, - modalViewOld: { - margin: 20, - backgroundColor: 'white', - borderRadius: 20, - padding: 35, - alignItems: 'center', - shadowColor: '#000', - shadowOffset: { - width: 0, - height: 2, - }, - shadowOpacity: 0.25, - shadowRadius: 4, - elevation: 5, - }, - flexContainer: { - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - }, - modalView: { - position: 'absolute', - width: '100%', - height: '8%', - bottom: 0, - alignItems: 'center', - justifyContent: 'space-evenly', - backgroundColor: '#fff', - flexDirection: 'row', - borderTopRightRadius: 30, - borderTopLeftRadius: 30, - borderWidth: 1, - borderColor: 'black', - }, - buttonOpen: { - backgroundColor: '#E20062', - }, - buttonClose: { - backgroundColor: '#1D1283', - }, - textStyle: { - color: 'black', - textAlign: 'center', - }, - icon: { - backgroundColor: '#ccc', - position: 'absolute', - right: 0, - bottom: 0, - }, - logoutButton: { - // backgroundColor: '#E20062', - // borderRadius: 20, - // padding: 10, - // elevation: 2, - // width: '40%', - // alignItems: 'center', - // position: 'absolute', - // bottom: 10, - // color: 'white', - - paddingHorizontal: 5, - paddingVertical: 6, - borderRadius: 20, - elevation: 2, - top: 10, - backgroundColor: '#E20062', - alignSelf: 'flex-end', - margin: 5, - width: '20%', - textAlign: 'center', - }, - logoutText: { - color: 'white', - fontWeight: 'bold', - textAlign: 'center', - }, - //UI enhance - container: { - flex: 1, - padding: 10, - backgroundColor: '#fff', - borderRadius: 10, - // elevation: 1, - }, - DropDownElement: { - // padding: 2, - color: 'black', - width: '100%', - alignSelf: 'center', - height: 'auto', - }, - DropDownbackground: { - padding: 5, - // elevation: 1, - height: 'auto', - alignSelf: 'center', - width: '100%', - // backgroundColor: '#fff', - // borderRadius: 10, - borderBottomWidth: 1, - borderBottomColor: 'grey', - // elevation: 1, - }, -}); +export default ProgressDetailScreen; \ No newline at end of file diff --git a/src/screens/ProfileScreen/DetailsScreen/styles/ProgressDetailScreenStyle.tsx b/src/screens/ProfileScreen/DetailsScreen/styles/ProgressDetailScreenStyle.tsx new file mode 100644 index 00000000..bcab983d --- /dev/null +++ b/src/screens/ProfileScreen/DetailsScreen/styles/ProgressDetailScreenStyle.tsx @@ -0,0 +1,234 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + mainview: { + flex: 1, + paddingTop: 10, + width: '100%', + alignItems: 'center', + }, + // titleText: { + // fontSize: 24, + // padding: 5, + // color: 'black', + // }, + titleContainer: { + padding: 10, + alignItems: 'center', + marginBottom: 12, + }, + titleText: { + color: '#041187', // You can customize the text color + fontSize: 26, + fontWeight: 'bold', + }, + subTitleText: { + fontSize: 16, + paddingBottom: 10, + color: 'black', + }, + smallTitle: { + paddingBottom: 10, + color: 'black', + fontWeight: '600', + paddingVertical: 5, + }, + imageView: { + alignItems: 'center', + }, + taskUpdateTitle: { + marginTop: 18, + color: '#041187', + fontSize: 20, + fontWeight: '800', + }, + taskUpdateDateTitle: { + marginTop: 8, + fontSize: 20, + fontWeight: '800', + marginBottom: 20, + }, + taskUpdateQuestion: { + marginTop: 16, + color: '#616161', + fontSize: 16, + }, + taskUpdateInput: { + height: 40, + borderColor: '#ccc', + borderWidth: 1, + borderRadius: 4, + marginBottom: 10, + marginTop: 10, + paddingHorizontal: 10, + }, + progressUpdateBackground: { + borderRadius: 8, + backgroundColor: '#1C315E', + paddingHorizontal: 20, + paddingVertical: 16, + }, + progressText: { + color: 'white', + fontWeight: '700', + fontSize: 20, + }, + progressListLeftPadding: { + marginLeft: 5, + }, + updateButtonContainer: { + backgroundColor: '#0034a5', + paddingVertical: 10, + paddingHorizontal: 12, + width: '45%', + borderRadius: 10, + }, + updatebutton: { + color: 'white', + textAlign: 'center', + fontWeight: '800', + }, + missedProgressCount: { + color: 'red', + fontWeight: '700', + fontSize: 18, + textDecorationLine: 'underline', + }, + submitProgressContainer: { + backgroundColor: '#0034a5', + paddingVertical: 10, + paddingHorizontal: 12, + width: '30%', + borderRadius: 10, + marginTop: 16, + }, + image: { + width: 100, + height: 100, + borderRadius: 100, + }, + centeredView: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + mainContainer: { + marginHorizontal: 24, + marginVertical: 8, + }, + cardBackground: { + backgroundColor: 'white', + padding: 10, + borderWidth: 1, + marginTop: 10, + borderColor: '#F0F0F0', + borderRadius: 8, + }, + flexItemWidth: { + width: '50%', + }, + modalViewOld: { + margin: 20, + backgroundColor: 'white', + borderRadius: 20, + padding: 35, + alignItems: 'center', + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 4, + elevation: 5, + }, + flexContainer: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + }, + modalView: { + position: 'absolute', + width: '100%', + height: '8%', + bottom: 0, + alignItems: 'center', + justifyContent: 'space-evenly', + backgroundColor: '#fff', + flexDirection: 'row', + borderTopRightRadius: 30, + borderTopLeftRadius: 30, + borderWidth: 1, + borderColor: 'black', + }, + buttonOpen: { + backgroundColor: '#E20062', + }, + buttonClose: { + backgroundColor: '#1D1283', + }, + textStyle: { + color: 'black', + textAlign: 'center', + }, + icon: { + backgroundColor: '#ccc', + position: 'absolute', + right: 0, + bottom: 0, + }, + logoutButton: { + // backgroundColor: '#E20062', + // borderRadius: 20, + // padding: 10, + // elevation: 2, + // width: '40%', + // alignItems: 'center', + // position: 'absolute', + // bottom: 10, + // color: 'white', + + paddingHorizontal: 5, + paddingVertical: 6, + borderRadius: 20, + elevation: 2, + top: 10, + backgroundColor: '#E20062', + alignSelf: 'flex-end', + margin: 5, + width: '20%', + textAlign: 'center', + }, + logoutText: { + color: 'white', + fontWeight: 'bold', + textAlign: 'center', + }, + //UI enhance + container: { + flex: 1, + padding: 10, + backgroundColor: '#fff', + borderRadius: 10, + // elevation: 1, + }, + DropDownElement: { + // padding: 2, + color: 'black', + width: '100%', + alignSelf: 'center', + height: 'auto', + }, + DropDownbackground: { + padding: 5, + // elevation: 1, + height: 'auto', + alignSelf: 'center', + width: '100%', + // backgroundColor: '#fff', + // borderRadius: 10, + borderBottomWidth: 1, + borderBottomColor: 'grey', + // elevation: 1, + }, +}); \ No newline at end of file diff --git a/src/screens/ProfileScreen/User Data/UserData.tsx b/src/screens/ProfileScreen/User Data/UserData.tsx index 30929d33..92d28913 100644 --- a/src/screens/ProfileScreen/User Data/UserData.tsx +++ b/src/screens/ProfileScreen/User Data/UserData.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { - StyleSheet, View, Text, Linking, @@ -9,6 +8,7 @@ import { import GithubSvg from '../../../../assets/svgs/github_logo'; import LinkedInSvg from '../../../../assets/svgs/linkedIn'; import TwitterSvg from '../../../../assets/svgs/twitter'; +import { styles } from './UserDataStyle'; const UserData = ({ userData }) => { const { @@ -55,34 +55,4 @@ const UserData = ({ userData }) => { ); }; -const styles = StyleSheet.create({ - Name: { - fontSize: 20, - fontWeight: 'bold', - color: 'black', - textAlign: 'center', - }, - userName: { - fontSize: 13, - textAlign: 'center', - color: 'grey', - }, - designation: { - fontSize: 15, - color: 'black', - textAlign: 'center', - }, - company: { - fontSize: 13, - fontWeight: 'bold', - color: 'grey', - textAlign: 'center', - }, - contactView: { - justifyContent: 'center', - flexDirection: 'row', - marginTop: 20, - }, -}); - export default UserData; diff --git a/src/screens/ProfileScreen/User Data/UserDataStyle.tsx b/src/screens/ProfileScreen/User Data/UserDataStyle.tsx new file mode 100644 index 00000000..9ca56d80 --- /dev/null +++ b/src/screens/ProfileScreen/User Data/UserDataStyle.tsx @@ -0,0 +1,31 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + Name: { + fontSize: 20, + fontWeight: 'bold', + color: 'black', + textAlign: 'center', + }, + userName: { + fontSize: 13, + textAlign: 'center', + color: 'grey', + }, + designation: { + fontSize: 15, + color: 'black', + textAlign: 'center', + }, + company: { + fontSize: 13, + fontWeight: 'bold', + color: 'grey', + textAlign: 'center', + }, + contactView: { + justifyContent: 'center', + flexDirection: 'row', + marginTop: 20, + }, +}); \ No newline at end of file diff --git a/src/styles/ButtonWidgetStyle.tsx b/src/styles/ButtonWidgetStyle.tsx new file mode 100644 index 00000000..1f824591 --- /dev/null +++ b/src/styles/ButtonWidgetStyle.tsx @@ -0,0 +1,22 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + button: { + borderRadius: 10, + marginVertical: 4, + borderColor: '#16A334', + borderWidth: 1, + padding: 10, + elevation: 2, + color: 'white', + minWidth: '35%', + maxWidth: '100%', + }, + iconStyle: { + borderRadius: 15, + }, + imageStyle:{ + height: 50, + width: 50 + } +}); \ No newline at end of file diff --git a/src/styles/CustomProgressBarStyle.tsx b/src/styles/CustomProgressBarStyle.tsx new file mode 100644 index 00000000..a0a5efc3 --- /dev/null +++ b/src/styles/CustomProgressBarStyle.tsx @@ -0,0 +1,8 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + text:{ + color: 'black', + margin: 10 + } +}) \ No newline at end of file diff --git a/src/styles/DisplayContributionStyle.tsx b/src/styles/DisplayContributionStyle.tsx new file mode 100644 index 00000000..4bbc7f9c --- /dev/null +++ b/src/styles/DisplayContributionStyle.tsx @@ -0,0 +1,76 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + card: { + borderWidth: 1, + borderColor: '#ddd', + borderRadius: 10, + padding: 16, + margin: 12, + backgroundColor: 'white', + elevation: 3, + }, + title: { + fontSize: 18, + fontWeight: 'bold', + marginBottom: 8, + color: '#1D1283', + }, + text: { + fontSize: 16, + marginBottom: 6, + fontWeight: 'bold', + color: '#333', + }, + createdBy: { + color: 'grey', + }, + assignee: { + color: 'grey', + }, + endsOn: { + color: 'grey', + }, + startedOn: { + color: 'grey', + }, + status: { + fontWeight: 'bold', + color: '#3498db', + }, + + isActiveButton: { + color: '#3498db', + marginTop: 10, + }, + + isActiveableContent: { + paddingBottom: 30, + }, + + progressBar: { + width: '100%', + // marginBottom: 16, + }, + + progressControls: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + // marginBottom: 16, + }, + + button: { + fontSize: 20, + color: '#3498db', + }, + + progressText: { + fontSize: 18, + color: '#333', + }, + emptyView: { + color: 'black', + marginTop: 20, + }, +}); \ No newline at end of file diff --git a/src/styles/EllipseComponentStyle.tsx b/src/styles/EllipseComponentStyle.tsx new file mode 100644 index 00000000..b377042b --- /dev/null +++ b/src/styles/EllipseComponentStyle.tsx @@ -0,0 +1,53 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + paddingHorizontal: 10, + }, + flexContainer: { + flexDirection: 'row', + alignItems: 'center', + }, + optionsButton: { + flex: 1, + padding: 4, + alignItems: 'flex-end', + }, + verticalEllipse: { + color: 'black', + fontSize: 24, + fontWeight: 'bold', + transform: [{ rotate: '90deg' }], + padding: 8, + }, + dropdownContainer: { + position: 'absolute', + top: 10, // Adjust the top position according to your layout + right: 10, + backgroundColor: 'white', + borderRadius: 5, + elevation: 5, + padding: 10, + }, + dropdownOption: { + fontSize: 18, + paddingVertical: 8, + color: 'red', + }, + closeContainer: { + flex: 1, + alignItems: 'flex-end', + }, + closeButton: { + fontSize: 18, + color: 'black', + padding: 2, + }, + close: { + height: 20, + width: 20, + }, +}); \ No newline at end of file diff --git a/src/styles/ErrorScreenStyle.tsx b/src/styles/ErrorScreenStyle.tsx new file mode 100644 index 00000000..735748ab --- /dev/null +++ b/src/styles/ErrorScreenStyle.tsx @@ -0,0 +1,15 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + alignItems: 'center', + flex: 1, + top: 0, + bottom: 0, + left: 0, + right: 0, + position: 'absolute', + zIndex: 1, + }, +}); \ No newline at end of file diff --git a/src/styles/FloatingButtonStyle.tsx b/src/styles/FloatingButtonStyle.tsx new file mode 100644 index 00000000..a0c1b7a5 --- /dev/null +++ b/src/styles/FloatingButtonStyle.tsx @@ -0,0 +1,7 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + float: { + marginTop: '120%', + }, +}); \ No newline at end of file diff --git a/src/styles/HeaderStyle.tsx b/src/styles/HeaderStyle.tsx new file mode 100644 index 00000000..12665267 --- /dev/null +++ b/src/styles/HeaderStyle.tsx @@ -0,0 +1,18 @@ +import { StyleSheet } from "react-native"; +import Colors from "../constants/colors/Colors"; + +export const styles = StyleSheet.create({ + safeAreaContainer:{ + backgroundColor: Colors.Primary_Color + }, + container: { + padding: 15, + backgroundColor: Colors.Primary_Color, + justifyContent: 'flex-start', + alignItems: 'flex-start', + }, + logo: { + width: 45, + height: 45, + }, +}); \ No newline at end of file diff --git a/src/styles/LoaderStyle.tsx b/src/styles/LoaderStyle.tsx new file mode 100644 index 00000000..fbf21cf9 --- /dev/null +++ b/src/styles/LoaderStyle.tsx @@ -0,0 +1,23 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + alignItems: 'center', + flex: 1, + top: 0, + bottom: 0, + left: 0, + right: 0, + position: 'absolute', + zIndex: 1, + }, + loadingContainer: { + marginTop: 20, + justifyContent: 'center', + alignItems: 'center', + }, + loadingText: { + color: 'black', + }, +}); \ No newline at end of file diff --git a/src/styles/LoadingScreenStyle.tsx b/src/styles/LoadingScreenStyle.tsx new file mode 100644 index 00000000..daf96dd3 --- /dev/null +++ b/src/styles/LoadingScreenStyle.tsx @@ -0,0 +1,15 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + alignItems: 'center', + flex: 1, + top: 0, + bottom: 0, + left: 0, + right: 0, + position: 'absolute', + zIndex: 1, + }, +}); diff --git a/src/styles/ProgressBarStyle.tsx b/src/styles/ProgressBarStyle.tsx new file mode 100644 index 00000000..70c42e57 --- /dev/null +++ b/src/styles/ProgressBarStyle.tsx @@ -0,0 +1,48 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + // flex: 1, + height: 80, + backgroundColor: '#eee', + borderRadius: 10, + margin: 10, + padding: 10, + }, + bar: { + height: '30%', + backgroundColor: '#3498db', + borderRadius: 10, + alignItems: 'center', + }, + progressContainer: { + alignItems: 'center', + marginTop: 10, + }, + progressText: { + fontSize: 16, + fontWeight: 'bold', + color: 'black', + }, + buttonsContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + marginTop: 5, + textAlign: 'center', + }, + button: { + backgroundColor: '#2980b9', + borderRadius: 5, + // padding: 10, + height: 30, + width: 30, + borderWidth: 1, + borderColor: '#2980b9', + }, + buttonText: { + color: 'white', + fontSize: 20, + textAlign: 'center', + fontWeight: 'bold', + }, +}); diff --git a/src/styles/PushUpModalContentStyle.tsx b/src/styles/PushUpModalContentStyle.tsx new file mode 100644 index 00000000..5be66112 --- /dev/null +++ b/src/styles/PushUpModalContentStyle.tsx @@ -0,0 +1,52 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + centerMain: { + flex: 1, + justifyContent: 'center', + width: '100%', + borderRadius: 8, + paddingHorizontal: 10, + }, + content: { + // margin: 4, + // alignSelf: 'center', + }, + modalView: { + justifyContent: 'center', + marginHorizontal: 30, + backgroundColor: '#f2f0f0', + padding: 10, + borderWidth: 1, + marginTop: 10, + borderColor: '#F0F0F0', + borderRadius: 8, + }, + block: { + display: 'flex', + flexDirection: 'row', + marginTop: 8, + alignItems: 'flex-start', + }, + buttonBg: { + width: '100%', + backgroundColor: '#0034a5', + textAlign: 'center', + paddingVertical: 10, + borderRadius: 8, + marginTop: 10, + fontWeight: 'bold', + color: '#FFFFFF', + }, + textTitle: { + flex: 2, + color: '#000000', + flexWrap: 'wrap', + }, + dateText: { + fontSize: 24, + color: 'black', + fontWeight: 'bold', + textAlign: 'center', + }, +}); \ No newline at end of file diff --git a/src/styles/SearchBarStyle.tsx b/src/styles/SearchBarStyle.tsx new file mode 100644 index 00000000..47e2b499 --- /dev/null +++ b/src/styles/SearchBarStyle.tsx @@ -0,0 +1,24 @@ +import { StyleSheet } from "react-native"; + +export const styles = StyleSheet.create({ + container: { + marginTop: 40, + position: 'absolute', + top: 30, + width: 350, + left: 20, + zIndex: 99, + backgroundColor: 'white', + borderRadius: 20, + }, + formField: { + borderWidth: 1, + padding: 12, + paddingLeft: 20, + paddingRight: 20, + borderColor: '#888888', + fontSize: 18, + height: 50, + borderRadius: 20, + }, +}); \ No newline at end of file