diff --git a/src/components/ColorPickerModal/ColorPickerModal.tsx b/src/components/ColorPickerModal/ColorPickerModal.tsx index 51723c34..8e9b2aeb 100644 --- a/src/components/ColorPickerModal/ColorPickerModal.tsx +++ b/src/components/ColorPickerModal/ColorPickerModal.tsx @@ -1,10 +1,9 @@ import React, { useState } from 'react'; import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native'; -import { Portal, TextInput } from 'react-native-paper'; -import { Button, Modal } from '@components'; +import { TextInput } from 'react-native-paper'; +import { Dialog } from '@components'; import { ThemeColors } from '../../theme/types'; -import { Row } from '@components/Common'; import { getString } from '@strings/translations'; interface ColorPickerModalProps { @@ -78,14 +77,12 @@ const ColorPickerModal: React.FC = ({ ]; return ( - - - - {title} - - {showAccentColors ? ( + + {title} + {showAccentColors ? ( + item} @@ -104,7 +101,9 @@ const ColorPickerModal: React.FC = ({ )} /> - ) : null} + + ) : null} + = ({ error={Boolean(error)} /> {error} - - - - - - - ); -}; +}) => ( + +); export default ClearHistoryDialog; - -const styles = StyleSheet.create({ - button: { - marginLeft: 4, - }, - container: { - borderRadius: 28, - margin: 20, - }, - title: { - fontSize: 16, - letterSpacing: 0, - }, -}); diff --git a/src/screens/more/DownloadsScreen.tsx b/src/screens/more/DownloadsScreen.tsx index a5dc597f..a314f7b3 100644 --- a/src/screens/more/DownloadsScreen.tsx +++ b/src/screens/more/DownloadsScreen.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { FlatList, StyleSheet } from 'react-native'; import { Appbar as MaterialAppbar } from 'react-native-paper'; @@ -139,7 +139,6 @@ const Downloads = ({ navigation }: DownloadsScreenProps) => { setChapters([]); hideDialog(); }} - theme={theme} /> ); diff --git a/src/screens/more/components/RemoveDownloadsDialog.tsx b/src/screens/more/components/RemoveDownloadsDialog.tsx index b9d0f56d..361c0e9c 100644 --- a/src/screens/more/components/RemoveDownloadsDialog.tsx +++ b/src/screens/more/components/RemoveDownloadsDialog.tsx @@ -1,61 +1,25 @@ -import React from 'react'; - -import { Button } from '@components'; -import { Dialog, overlay, Portal } from 'react-native-paper'; -import { ThemeColors } from '@theme/types'; +import { ConfirmationDialog } from '@components'; import { getString } from '@strings/translations'; -import { StyleSheet } from 'react-native'; interface RemoveDownloadsDialogProps { dialogVisible: boolean; hideDialog: () => void; - theme: ThemeColors; onSubmit: () => void; } const RemoveDownloadsDialog = ({ dialogVisible, hideDialog, - theme, onSubmit, -}: RemoveDownloadsDialogProps) => { - return ( - - - - {getString('downloadScreen.removeDownloadsWarning')} - - - - - - - - ); -}; +}: RemoveDownloadsDialogProps) => ( + +); export default RemoveDownloadsDialog; - -const styles = StyleSheet.create({ - fontSize: { - letterSpacing: 0, - fontSize: 16, - }, - borderRadius: { borderRadius: 6 }, -}); diff --git a/src/screens/novel/components/DownloadCustomChapterModal.tsx b/src/screens/novel/components/DownloadCustomChapterModal.tsx index 1848952f..7f3b5231 100644 --- a/src/screens/novel/components/DownloadCustomChapterModal.tsx +++ b/src/screens/novel/components/DownloadCustomChapterModal.tsx @@ -1,11 +1,11 @@ -import React, { useState } from 'react'; -import { StyleSheet, Text, View, TextInput } from 'react-native'; +import { useState } from 'react'; +import { StyleSheet, View, TextInput } from 'react-native'; -import { Button, IconButton, Portal } from 'react-native-paper'; +import { IconButton } from 'react-native-paper'; import { ThemeColors } from '@theme/types'; import { ChapterInfo, NovelInfo } from '@database/types'; import { getString } from '@strings/translations'; -import { Modal } from '@components'; +import { Dialog } from '@components'; interface DownloadCustomChapterModalProps { theme: ThemeColors; @@ -48,25 +48,33 @@ const DownloadCustomChapterModal = ({ }; return ( - - - - {getString('novelScreen.download.customAmount')} - + + + {getString('novelScreen.download.customAmount')} + + text > 9 && setText(prevState => prevState - 10)} + onPress={() => { + if (text > 9) { + setText(prevState => prevState - 10); + } + }} /> text > 0 && setText(prevState => prevState - 1)} + onPress={() => { + if (text > 0) { + setText(prevState => prevState - 1); + } + }} /> setText(prevState => prevState + 10)} /> - - - + /> + + ); }; export default DownloadCustomChapterModal; const styles = StyleSheet.create({ - errorText: { - color: '#FF0033', - paddingTop: 8, - }, - modalTitle: { - fontSize: 16, - marginBottom: 16, - }, row: { flexDirection: 'row', justifyContent: 'center' }, marginHorizontal: { marginHorizontal: 4 }, }); diff --git a/src/screens/novel/components/EditInfoModal.tsx b/src/screens/novel/components/EditInfoModal.tsx index 3980b766..cf34b16c 100644 --- a/src/screens/novel/components/EditInfoModal.tsx +++ b/src/screens/novel/components/EditInfoModal.tsx @@ -9,11 +9,11 @@ import { } from 'react-native'; import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons'; -import { Portal, TextInput } from 'react-native-paper'; +import { TextInput } from 'react-native-paper'; import { updateNovelInfo } from '@database/queries/NovelQueries'; import { getString } from '@strings/translations'; -import { Button, Modal } from '@components'; +import { Dialog } from '@components'; import { ThemeColors } from '@theme/types'; import { NovelInfo } from '@database/types'; import { NovelStatus } from '@plugins/types'; @@ -28,7 +28,6 @@ interface EditInfoModalProps { } // --- Dynamic style helpers --- -const getModalTitleColor = (theme: ThemeColors) => ({ color: theme.onSurface }); const getStatusLabelColor = (theme: ThemeColors) => ({ color: theme.onSurfaceVariant, }); @@ -41,8 +40,6 @@ const getStatusChipText = (selected: boolean, theme: ThemeColors) => ({ color: selected ? theme.primary : theme.onSurfaceVariant, }); const getGenreListStyle = () => styles.genreList; -const getButtonRowStyle = () => styles.buttonRow; -const getFlex1 = () => styles.flex1; // --- Main Component --- const EditInfoModal = ({ @@ -70,156 +67,162 @@ const EditInfoModal = ({ const status = Object.values(NovelStatus); return ( - - - - {getString('novelScreen.edit.info')} - - - - {getString('novelScreen.edit.status')} - - - {status.map((item, index) => ( - - setNovelInfo({ ...novel, status: item })} + + {getString('novelScreen.edit.info')} + + + + + {getString('novelScreen.edit.status')} + + + {status.map((item, index) => ( + - setNovelInfo({ ...novel, status: item })} > - {translateNovelStatus(item)} - - - - ))} - - - setNovelInfo({ ...novel, name: text })} - dense - style={styles.inputWrapper} - /> - setNovelInfo({ ...novel, author: text })} - dense - style={styles.inputWrapper} - /> - setNovelInfo({ ...novel, artist: text })} - dense - style={styles.inputWrapper} - /> - setNovelInfo({ ...novel, summary: text })} - theme={{ colors: { ...theme } }} - dense - style={styles.inputWrapper} - /> - - setNewGenre(text)} - onSubmitEditing={() => { - const newGenreTrimmed = newGenre.trim(); - - if (newGenreTrimmed === '') { - return; - } - - setNovelInfo(prevVal => ({ - ...prevVal, - genres: novelInfo.genres - ? `${novelInfo.genres},` + newGenreTrimmed - : newGenreTrimmed, - })); - setNewGenre(''); - }} - theme={{ colors: { ...theme } }} - dense - style={styles.inputWrapper} - /> - - {novelInfo.genres !== undefined && novelInfo.genres !== '' ? ( - 'novelTag' + index} - renderItem={({ item }) => ( - removeTag(item)}> - {item} - - )} - showsHorizontalScrollIndicator={false} + + {translateNovelStatus(item)} + + + + ))} + + + setNovelInfo({ ...novel, name: text })} + dense + style={styles.inputWrapper} /> - ) : null} - - - - - - - - + theme={{ colors: { ...theme } }} + dense + style={styles.inputWrapper} + /> + + {novelInfo.genres !== undefined && novelInfo.genres !== '' ? ( + 'novelTag' + index} + renderItem={({ item }) => ( + removeTag(item)}> + {item} + + )} + showsHorizontalScrollIndicator={false} + /> + ) : null} + + + + { + setNovelInfo(initialNovelInfo); + updateNovelInfo(initialNovelInfo); + }} + /> + + { + setNovel(novelInfo); + updateNovelInfo(novelInfo); + hideModal(); + }} + /> + + ); }; @@ -268,9 +271,8 @@ const styles = StyleSheet.create({ fontSize: 14, marginBottom: 12, }, - modalTitle: { - fontSize: 24, - marginBottom: 16, + formContent: { + paddingHorizontal: 24, }, statusRow: { marginVertical: 8, @@ -291,12 +293,6 @@ const styles = StyleSheet.create({ genreList: { marginVertical: 8, }, - buttonRow: { - flexDirection: 'row', - }, - flex1: { - flex: 1, - }, genreChipContainer: { flex: 1, flexDirection: 'row', diff --git a/src/screens/novel/components/ExportEpubModal.tsx b/src/screens/novel/components/ExportEpubModal.tsx index e41d9732..08c3271c 100644 --- a/src/screens/novel/components/ExportEpubModal.tsx +++ b/src/screens/novel/components/ExportEpubModal.tsx @@ -1,9 +1,9 @@ import React, { useState } from 'react'; import { StyleSheet, View } from 'react-native'; -import { TextInput, Text } from 'react-native-paper'; +import { TextInput } from 'react-native-paper'; import { openDocumentTree } from 'react-native-saf-x'; -import { Button, List, Modal, SwitchItem } from '@components'; +import { Dialog, List, SwitchItem } from '@components'; import { useBoolean } from '@hooks'; import { getString } from '@strings/translations'; @@ -93,11 +93,11 @@ const ExportEpubModal: React.FC = ({ }; return ( - - - - {getString('novelScreen.exportEpubModal.title')} - + + + {getString('novelScreen.exportEpubModal.title')} + + = ({ /> } /> - - + + - {!exportAll.value && ( + {!exportAll.value ? ( = ({ style={styles.rangeInput} /> - )} + ) : null} = ({ onPress={useCustomJS.toggle} theme={theme} /> - - - - - - - + + Chapters + + + + + + {getString('common.cancel')} + + + {getString('common.save')} + + + ); }; -export default SetTrackChaptersDialog; +const SetTrackChaptersDialog: React.FC = ({ + visible, + ...props +}) => (visible ? : null); -const styles = StyleSheet.create({ - buttonContainer: { - flexDirection: 'row', - justifyContent: 'flex-end', - gap: 8, - marginTop: 16, - }, -}); +export default SetTrackChaptersDialog; diff --git a/src/screens/novel/components/Tracker/SetTrackScoreDialog.tsx b/src/screens/novel/components/Tracker/SetTrackScoreDialog.tsx index 92bb2b16..f76f1457 100644 --- a/src/screens/novel/components/Tracker/SetTrackScoreDialog.tsx +++ b/src/screens/novel/components/Tracker/SetTrackScoreDialog.tsx @@ -1,7 +1,6 @@ -import React, { useEffect, useMemo, useState } from 'react'; -import { StyleSheet, View } from 'react-native'; +import React, { useMemo, useState } from 'react'; -import { Button, DialogTitle, Modal } from '@components'; +import { Dialog } from '@components'; import { getString } from '@strings/translations'; import { AniListScoreSelector, @@ -11,21 +10,16 @@ import { } from './ScoreSelectors'; import { TrackScoreDialogProps } from './types'; -const SetTrackScoreDialog: React.FC = ({ +type SetTrackScoreDialogContentProps = Omit; + +const SetTrackScoreDialogContent: React.FC = ({ tracker, trackItem, - visible, onDismiss, onUpdateScore, }) => { const [selectedScore, setSelectedScore] = useState(trackItem.score); - useEffect(() => { - if (visible) { - setSelectedScore(trackItem.score); - } - }, [visible, trackItem.score]); - const handleSave = () => { onUpdateScore(selectedScore); onDismiss(); @@ -67,24 +61,28 @@ const SetTrackScoreDialog: React.FC = ({ }, [tracker, trackItem, selectedScore]); return ( - - - {ScoreSelector} - - - - - + + Score + {tracker.name === 'Kitsu' || tracker.name === 'AniList' ? ( + {ScoreSelector} + ) : ( + {ScoreSelector} + )} + + + {getString('common.cancel')} + + + {getString('common.save')} + + + ); }; -export default SetTrackScoreDialog; +const SetTrackScoreDialog: React.FC = ({ + visible, + ...props +}) => (visible ? : null); -const styles = StyleSheet.create({ - buttonContainer: { - flexDirection: 'row', - justifyContent: 'flex-end', - gap: 8, - marginTop: 16, - }, -}); +export default SetTrackScoreDialog; diff --git a/src/screens/novel/components/Tracker/SetTrackStatusDialog.tsx b/src/screens/novel/components/Tracker/SetTrackStatusDialog.tsx index 25d308b7..a218ca04 100644 --- a/src/screens/novel/components/Tracker/SetTrackStatusDialog.tsx +++ b/src/screens/novel/components/Tracker/SetTrackStatusDialog.tsx @@ -1,7 +1,6 @@ -import React, { useEffect, useState } from 'react'; -import { StyleSheet, View } from 'react-native'; +import React, { useState } from 'react'; -import { Button, DialogTitle, Modal } from '@components'; +import { Dialog } from '@components'; import { RadioButton, RadioButtonGroup } from '@components/RadioButton'; import { useTheme } from '@hooks/persisted'; import { getString } from '@strings/translations'; @@ -9,21 +8,14 @@ import { UserListStatus } from '@services/Trackers'; import { STATUS_LABELS } from './constants'; import { TrackStatusDialogProps } from './types'; -const SetTrackStatusDialog: React.FC = ({ - trackItem, - visible, - onDismiss, - onUpdateStatus, -}) => { +type SetTrackStatusDialogContentProps = Omit; + +const SetTrackStatusDialogContent: React.FC< + SetTrackStatusDialogContentProps +> = ({ trackItem, onDismiss, onUpdateStatus }) => { const theme = useTheme(); const [selectedStatus, setSelectedStatus] = useState(trackItem.status); - useEffect(() => { - if (visible) { - setSelectedStatus(trackItem.status); - } - }, [visible, trackItem.status]); - const handleSave = () => { onUpdateStatus(selectedStatus); onDismiss(); @@ -34,31 +26,33 @@ const SetTrackStatusDialog: React.FC = ({ }; return ( - - - - {Object.entries(STATUS_LABELS).map(([key, label]) => ( - - ))} - - - - - - + + Status + + + {Object.entries(STATUS_LABELS).map(([key, label]) => ( + + ))} + + + + + {getString('common.cancel')} + + + {getString('common.save')} + + + ); }; -export default SetTrackStatusDialog; +const SetTrackStatusDialog: React.FC = ({ + visible, + ...props +}) => (visible ? : null); -const styles = StyleSheet.create({ - buttonContainer: { - flexDirection: 'row', - justifyContent: 'flex-end', - gap: 8, - marginTop: 16, - }, -}); +export default SetTrackStatusDialog; diff --git a/src/screens/novel/components/Tracker/TrackSearchDialog.tsx b/src/screens/novel/components/Tracker/TrackSearchDialog.tsx index 26764364..6e9378a1 100644 --- a/src/screens/novel/components/Tracker/TrackSearchDialog.tsx +++ b/src/screens/novel/components/Tracker/TrackSearchDialog.tsx @@ -1,10 +1,10 @@ import React, { useCallback, useEffect, useState } from 'react'; -import { ActivityIndicator, Image, StyleSheet, Text, View } from 'react-native'; +import { ActivityIndicator, Image, StyleSheet, Text } from 'react-native'; import { ScrollView } from 'react-native-gesture-handler'; import { TextInput, TouchableRipple } from 'react-native-paper'; import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons'; -import { Button, Modal } from '@components'; +import { Dialog } from '@components'; import { getTracker, useTheme } from '@hooks/persisted'; import { getString } from '@strings/translations'; import { SearchResult } from '@services/Trackers'; @@ -118,63 +118,59 @@ const TrackSearchDialog: React.FC = ({ ); return ( - - - } - /> - - {loading ? ( - - ) : ( - searchResults.map(renderSearchResultCard) - )} - - - - - - - - - + + {tracker.name} + + + } + /> + + + + {loading ? ( + + ) : ( + searchResults.map(renderSearchResultCard) + )} + + + + + + + + ); }; export default TrackSearchDialog; const styles = StyleSheet.create({ - actionButtons: { - flexDirection: 'row', - }, - buttonContainer: { - flexDirection: 'row', - justifyContent: 'space-between', - marginTop: 30, - }, checkIcon: { position: 'absolute', right: 8, diff --git a/src/screens/reader/components/ReaderBottomSheet/TTSTab.tsx b/src/screens/reader/components/ReaderBottomSheet/TTSTab.tsx index d3642373..ffcf5a9c 100644 --- a/src/screens/reader/components/ReaderBottomSheet/TTSTab.tsx +++ b/src/screens/reader/components/ReaderBottomSheet/TTSTab.tsx @@ -1,11 +1,5 @@ import React, { useEffect, useState, useCallback, useMemo } from 'react'; -import { - View, - StyleSheet, - Text, - ScrollView, - TouchableOpacity, -} from 'react-native'; +import { Pressable, View, StyleSheet, Text, ScrollView } from 'react-native'; import { BottomSheetScrollView } from '@gorhom/bottom-sheet'; import Slider from '@react-native-community/slider'; import { getAvailableVoicesAsync, Voice } from 'expo-speech'; @@ -16,8 +10,8 @@ import { useChapterReaderSettings, } from '@hooks/persisted'; import { getString } from '@strings/translations'; -import { List, Button } from '@components/index'; -import { Portal, Modal, Chip } from 'react-native-paper'; +import { Dialog, List, Button } from '@components/index'; +import { Chip } from 'react-native-paper'; import ReaderSheetPreferenceItem from './ReaderSheetPreferenceItem'; interface VoicePickerModalProps { @@ -85,28 +79,19 @@ const VoicePickerModal: React.FC = ({ }); }; - useEffect(() => { - // Reset to system language when modal opens - if (visible) { - setSelectedLanguages([]); - } - }, [visible]); + const handleDismiss = () => { + setSelectedLanguages([]); + onDismiss(); + }; return ( - - - - Select Voice - - - {/* Language Filter */} + + Select Voice + Filter by language: @@ -144,8 +129,8 @@ const VoicePickerModal: React.FC = ({ })} - - {/* Voice List */} + + {filteredVoices.length === 0 ? ( = ({ ) : ( filteredVoices.map((voice: Voice, index: number) => ( - = ({ ]} onPress={() => { onSelect(voice); - onDismiss(); + handleDismiss(); }} > @@ -174,7 +159,7 @@ const VoicePickerModal: React.FC = ({ > {voice.name} - {voice.language && ( + {voice.language ? ( = ({ > {voice.language} - )} + ) : null} - {currentVoice?.identifier === voice.identifier && ( + {currentVoice?.identifier === voice.identifier ? ( ✓ - )} - + ) : null} + )) )} - - - )} - ListEmptyComponent={emptyComponent} - /> + + item.id} + renderItem={({ item }) => ( + + )} + ListEmptyComponent={emptyComponent} + /> + - )} - ListEmptyComponent={emptyComponent} - /> + + item + '_' + index} + renderItem={({ item }) => ( + + )} + ListEmptyComponent={emptyComponent} + /> + + - + ); }; diff --git a/src/screens/settings/SettingsReaderScreen/Modals/FontPickerModal.tsx b/src/screens/settings/SettingsReaderScreen/Modals/FontPickerModal.tsx index 65cf32ee..2fae77a8 100644 --- a/src/screens/settings/SettingsReaderScreen/Modals/FontPickerModal.tsx +++ b/src/screens/settings/SettingsReaderScreen/Modals/FontPickerModal.tsx @@ -1,12 +1,11 @@ import React from 'react'; -import { Portal } from 'react-native-paper'; -import { RadioButton } from '@components/RadioButton/RadioButton'; +import { Dialog, RadioButton } from '@components'; import { useChapterReaderSettings, useTheme } from '@hooks/persisted'; import { readerFonts } from '@utils/constants/readerConstants'; -import { Modal } from '@components'; +import { getString } from '@strings/translations'; interface FontPickerModalProps { visible: boolean; @@ -23,8 +22,11 @@ const FontPickerModal: React.FC = ({ const { setChapterReaderSettings } = useChapterReaderSettings(); return ( - - + + + {getString('readerScreen.bottomSheet.fontStyle')} + + {readerFonts.map(item => ( = ({ theme={theme} /> ))} - - + + + + {getString('common.ok')} + + + ); }; diff --git a/src/screens/settings/SettingsReaderScreen/Modals/VoicePickerModal.tsx b/src/screens/settings/SettingsReaderScreen/Modals/VoicePickerModal.tsx index 04488588..dd534bab 100644 --- a/src/screens/settings/SettingsReaderScreen/Modals/VoicePickerModal.tsx +++ b/src/screens/settings/SettingsReaderScreen/Modals/VoicePickerModal.tsx @@ -1,13 +1,13 @@ -import React, { useState } from 'react'; +import React, { useMemo, useState } from 'react'; -import { Portal, TextInput, ActivityIndicator } from 'react-native-paper'; -import { RadioButton } from '@components/RadioButton/RadioButton'; +import { TextInput, ActivityIndicator } from 'react-native-paper'; +import { Dialog, RadioButton } from '@components'; import { useChapterReaderSettings, useTheme } from '@hooks/persisted'; import { Voice } from 'expo-speech'; import { LegendList } from '@legendapp/list/react-native'; -import { Modal } from '@components'; import { StyleSheet } from 'react-native'; +import { getString } from '@strings/translations'; interface VoicePickerModalProps { visible: boolean; @@ -21,40 +21,38 @@ const VoicePickerModal: React.FC = ({ voices, }) => { const theme = useTheme(); - const [searchedVoices, setSearchedVoices] = useState([]); const [searchText, setSearchText] = useState(''); const { setChapterReaderSettings, tts } = useChapterReaderSettings(); + const filteredVoices = useMemo(() => { + const normalizedSearch = searchText.toLocaleLowerCase(); + return normalizedSearch + ? voices.filter(voice => + voice.name.toLocaleLowerCase().includes(normalizedSearch), + ) + : voices; + }, [searchText, voices]); return ( - - + + Select voice + + + + { - setSearchText(text); - setSearchedVoices( - voices.filter(voice => - voice.name - .toLocaleLowerCase() - .includes(text.toLocaleLowerCase()), - ), - ); - }} - value={searchText} - placeholder="Search voice" - /> - } - ListHeaderComponentStyle={styles.paddingHorizontal} - data={searchText ? searchedVoices : voices} + data={filteredVoices} extraData={tts?.voice} renderItem={({ item }) => ( = ({ /> } /> - - + + + + {getString('common.ok')} + + + ); }; @@ -91,6 +94,8 @@ const styles = StyleSheet.create({ containerStyle: { flex: 1, }, - paddingHorizontal: { paddingHorizontal: 12 }, + list: { + flex: 1, + }, marginTop: { marginTop: 16 }, }); diff --git a/src/screens/settings/SettingsReaderScreen/tabs/AdvancedTab.tsx b/src/screens/settings/SettingsReaderScreen/tabs/AdvancedTab.tsx index 1240b09f..75940bd4 100644 --- a/src/screens/settings/SettingsReaderScreen/tabs/AdvancedTab.tsx +++ b/src/screens/settings/SettingsReaderScreen/tabs/AdvancedTab.tsx @@ -8,10 +8,10 @@ import { Platform, } from 'react-native'; import { BottomSheetScrollView } from '@gorhom/bottom-sheet'; -import { TextInput, Portal } from 'react-native-paper'; +import { TextInput } from 'react-native-paper'; import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons'; import * as DocumentPicker from 'expo-document-picker'; -import NativeFile from '@modules/native-file' +import NativeFile from '@modules/native-file'; import { useTheme, useChapterReaderSettings } from '@hooks/persisted'; import { getString } from '@strings/translations'; import { ThemeColors } from '@theme/types'; @@ -275,23 +275,20 @@ if (title) { - {/* Confirmation Dialogs */} - - - - + + ); }; diff --git a/src/screens/settings/SettingsRepositoryScreen/components/AddRepositoryModal.tsx b/src/screens/settings/SettingsRepositoryScreen/components/AddRepositoryModal.tsx index cdb31a43..c96bc880 100644 --- a/src/screens/settings/SettingsRepositoryScreen/components/AddRepositoryModal.tsx +++ b/src/screens/settings/SettingsRepositoryScreen/components/AddRepositoryModal.tsx @@ -1,8 +1,7 @@ import React, { useState } from 'react'; -import { StyleSheet, Text, View } from 'react-native'; -import { Portal, TextInput } from 'react-native-paper'; +import { TextInput } from 'react-native-paper'; -import { Button, Modal } from '@components/index'; +import { Dialog } from '@components/index'; import { Repository } from '@database/types'; import { useTheme } from '@hooks/persisted'; @@ -26,11 +25,11 @@ const AddRepositoryModal: React.FC = ({ const [repositoryUrl, setRepositoryUrl] = useState(repository?.url || ''); return ( - - - - {repository ? 'Edit repository' : 'Add repository'} - + + + {repository ? 'Edit repository' : 'Add repository'} + + = ({ underlineColor={theme.outline} theme={{ colors: { ...theme } }} /> - - - - - - - + { + removeTracker(logoutTrackerName as any); + hideModal(); + }} + onDismiss={hideModal} + /> + @@ -376,20 +350,6 @@ const styles = StyleSheet.create({ screenPadding: { paddingVertical: 8, }, - modalText: { - fontSize: 18, - }, - modalButtonRow: { - flexDirection: 'row', - justifyContent: 'flex-end', - }, - modalButton: { - marginTop: 30, - }, - modalButtonLabel: { - letterSpacing: 0, - textTransform: 'none', - }, logoContainer: { paddingLeft: 16, justifyContent: 'center', diff --git a/src/screens/settings/components/ConnectionModal.tsx b/src/screens/settings/components/ConnectionModal.tsx index 845a1805..ff6ba0d8 100644 --- a/src/screens/settings/components/ConnectionModal.tsx +++ b/src/screens/settings/components/ConnectionModal.tsx @@ -1,8 +1,7 @@ -import { Button, Modal } from '@components'; +import { Dialog } from '@components'; import { getString } from '@strings/translations'; import { ThemeColors } from '@theme/types'; import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; import { TextInput } from 'react-native-paper'; interface ConnectionModalProps { @@ -29,50 +28,42 @@ const ConnectionModal: React.FC = ({ setPort, }) => { return ( - - - {title} - - - - - - - - - + + + + + + ); }; export default TrackerLoginDialog; const styles = StyleSheet.create({ - container: { - padding: 8, - }, - title: { - fontSize: 24, - marginBottom: 24, - fontWeight: '500', - }, input: { height: 48, borderWidth: 1, @@ -152,16 +133,4 @@ const styles = StyleSheet.create({ marginBottom: 16, marginTop: -8, }, - buttonRow: { - flexDirection: 'row', - justifyContent: 'flex-end', - marginTop: 8, - }, - button: { - marginLeft: 8, - }, - buttonLabel: { - letterSpacing: 0, - textTransform: 'none', - }, }); diff --git a/src/theme/types/index.ts b/src/theme/types/index.ts index eec0a863..9bcc2a08 100644 --- a/src/theme/types/index.ts +++ b/src/theme/types/index.ts @@ -38,6 +38,7 @@ export interface MD3ThemeType { export interface ThemeColors extends MD3ThemeType { rippleColor?: string; + surfaceContainerHigh?: string; surface2?: string; overlay3?: string; surfaceReader?: string;