From 2e21a9fd33f43dd0f218697d198a5626fa7d3864 Mon Sep 17 00:00:00 2001 From: Rajarshee Chatterjee Date: Sat, 20 Mar 2021 08:55:32 +0530 Subject: [PATCH 1/6] UI improvements --- src/components/common/Appbar.js | 109 ++++++++++++++++-- .../common}/EmptyView.js | 6 +- src/screens/Browse/Browse.js | 4 +- src/screens/History/History.js | 16 ++- src/screens/Library/Library.js | 37 +++--- src/screens/Library/components/EmptyView.js | 52 --------- src/screens/More/About.js | 7 +- src/screens/More/More.js | 4 +- src/screens/More/Settings.js | 7 +- src/theme/theme.js | 4 + 10 files changed, 146 insertions(+), 100 deletions(-) rename src/{screens/History/components => components/common}/EmptyView.js (92%) delete mode 100644 src/screens/Library/components/EmptyView.js diff --git a/src/components/common/Appbar.js b/src/components/common/Appbar.js index f9f23edf3..7b81a9082 100644 --- a/src/components/common/Appbar.js +++ b/src/components/common/Appbar.js @@ -1,19 +1,112 @@ -import React from "react"; - -import { Appbar } from "react-native-paper"; +import React, { useRef } from "react"; +import { View, TextInput } from "react-native"; +import { + TouchableRipple, + IconButton, + Appbar as MaterialAppbar, +} from "react-native-paper"; +import Constants from "expo-constants"; import { useSelector } from "react-redux"; -export const CustomAppbar = ({ title, onBackAction }) => { +export const Appbar = ({ title, onBackAction }) => { const theme = useSelector((state) => state.themeReducer.theme); return ( - - {onBackAction && } - + {onBackAction && ( + + )} + - + + ); +}; + +export const SearchAppbar = ({ + searchLibraryNovels, + setSearchText, + searchText, + getLibraryNovels, +}) => { + const searchRef = useRef(null); + + const theme = useSelector((state) => state.themeReducer.theme); + + return ( + searchRef.current.focus()} + style={{ + marginTop: Constants.statusBarHeight + 4, + height: 50, + flexDirection: "row", + alignItems: "center", + paddingHorizontal: 16, + marginBottom: 8, + borderRadius: 8, + backgroundColor: theme.searchBarColor, + marginHorizontal: 12, + elevation: 2, + }} + > + + + + { + setSearchText(text); + searchLibraryNovels(text); + }} + defaultValue={searchText} + /> + + {searchText !== "" && ( + { + getLibraryNovels(); + setSearchText(""); + }} + /> + )} + console.log("Filter Button Pressed")} + /> + + ); }; diff --git a/src/screens/History/components/EmptyView.js b/src/components/common/EmptyView.js similarity index 92% rename from src/screens/History/components/EmptyView.js rename to src/components/common/EmptyView.js index 4c27be870..2dad8952d 100644 --- a/src/screens/History/components/EmptyView.js +++ b/src/components/common/EmptyView.js @@ -2,7 +2,7 @@ import React from "react"; import { StyleSheet, Text, View } from "react-native"; import { useSelector } from "react-redux"; -const EmptyView = () => { +const EmptyView = ({ icon, description }) => { const theme = useSelector((state) => state.themeReducer.theme); return ( @@ -15,7 +15,7 @@ const EmptyView = () => { }, ]} > - (˘･_･˘) + {icon} { }, ]} > - Nothing read recently. + {description} ); diff --git a/src/screens/Browse/Browse.js b/src/screens/Browse/Browse.js index 58e6e59d0..52bb7a86f 100644 --- a/src/screens/Browse/Browse.js +++ b/src/screens/Browse/Browse.js @@ -9,7 +9,7 @@ import { ActivityIndicator, } from "react-native"; import { TouchableRipple, Button } from "react-native-paper"; -import { CustomAppbar } from "../../components/common/Appbar"; +import { Appbar } from "../../components/common/Appbar"; import { useSelector } from "react-redux"; @@ -30,7 +30,7 @@ const Browse = ({ navigation }) => { return ( <> - + { const [loading, setLoading] = useState(true); @@ -49,7 +49,7 @@ const History = ({ navigation }) => { return ( <> - + { ]} > item.historyId.toString()} renderItem={renderHistoryCard} @@ -69,7 +68,14 @@ const History = ({ navigation }) => { /> ) } - ListEmptyComponent={!loading && } + ListEmptyComponent={ + !loading && ( + + ) + } /> diff --git a/src/screens/Library/Library.js b/src/screens/Library/Library.js index 2b33fa6df..1ccc1ca29 100644 --- a/src/screens/Library/Library.js +++ b/src/screens/Library/Library.js @@ -13,12 +13,13 @@ import { connect } from "react-redux"; import Appbar from "./components/Appbar"; import NovelCover from "../../components/common/NovelCover"; -import EmptyView from "./components/EmptyView"; +import EmptyView from "../../components/common/EmptyView"; import { getLibraryNovels, searchLibraryNovels, } from "../../redux/actions/library"; +import { SearchAppbar } from "../../components/common/Appbar"; const LibraryScreen = ({ navigation, @@ -30,13 +31,11 @@ const LibraryScreen = ({ }) => { const [refreshing, setRefreshing] = useState(false); - const [search, setSearch] = useState({ searching: false, searchText: "" }); - - const resetSearch = () => setSearch({ searching: false, searchText: "" }); + const [searchText, setSearchText] = useState(""); useFocusEffect( useCallback(() => { - resetSearch(); + setSearchText(""); getLibraryNovels(); }, []) ); @@ -59,18 +58,18 @@ const LibraryScreen = ({ return ( <> - + {loading ? ( } ListEmptyComponent={ - search.searchText === "" ? ( - - ) : ( + searchText !== "" ? ( - {`"${search.searchText}" not in library`} + {`"${searchText}" not in library`} + ) : ( + ) } /> @@ -137,9 +139,8 @@ const styles = StyleSheet.create({ padding: 4, }, emptySearch: { - fontWeight: "bold", - marginTop: 10, + marginTop: 8, textAlign: "center", - paddingHorizontal: 30, + paddingHorizontal: 16, }, }); diff --git a/src/screens/Library/components/EmptyView.js b/src/screens/Library/components/EmptyView.js deleted file mode 100644 index 4ee24872f..000000000 --- a/src/screens/Library/components/EmptyView.js +++ /dev/null @@ -1,52 +0,0 @@ -import React from "react"; -import { StyleSheet, Text, View } from "react-native"; -import { useSelector } from "react-redux"; - -const EmptyView = () => { - const theme = useSelector((state) => state.themeReducer.theme); - - return ( - - - Σ(ಠ_ಠ) - - - Your library is empty. Add series to your library from Browse. - - - ); -}; - -export default EmptyView; - -const styles = StyleSheet.create({ - emptyViewContainer: { - flex: 1, - justifyContent: "center", - alignItems: "center", - }, - emptyViewIcon: { - fontSize: 45, - fontWeight: "bold", - }, - emptyViewText: { - fontWeight: "bold", - marginTop: 10, - textAlign: "center", - paddingHorizontal: 30, - }, -}); diff --git a/src/screens/More/About.js b/src/screens/More/About.js index 74892b4df..c8c0446eb 100644 --- a/src/screens/More/About.js +++ b/src/screens/More/About.js @@ -2,7 +2,7 @@ import React from "react"; import * as Linking from "expo-linking"; import { List, Divider } from "react-native-paper"; -import { CustomAppbar } from "../../components/common/Appbar"; +import { Appbar } from "../../components/common/Appbar"; import { useSelector } from "react-redux"; @@ -11,10 +11,7 @@ const AboutScreen = ({ navigation }) => { return ( <> - navigation.goBack()} - /> + navigation.goBack()} /> { return ( <> - + - navigation.goBack()} - /> + navigation.goBack()} /> diff --git a/src/theme/theme.js b/src/theme/theme.js index 9d6279a69..2949a31c3 100644 --- a/src/theme/theme.js +++ b/src/theme/theme.js @@ -22,6 +22,7 @@ export const lightTheme = { textColorSecondaryDark: "rgba(0,0,0,0.54)", textColorHintDark: "rgba(0,0,0,0.38)", rippleColorDark: "#C2C2C2", + searchBarColor: "#FFFFFF", }; /** @@ -35,6 +36,7 @@ export const darkTheme = { textColorSecondaryDark: "rgba(255,255,255,0.7)", textColorHintDark: "rgba(255,255,255,0.5)", rippleColorDark: "rgba(255,255,255,0.2)", + searchBarColor: "#303135", }; /** @@ -48,6 +50,7 @@ export const amoledDarkTheme = { textColorSecondaryDark: "rgba(255,255,255,0.7)", textColorHintDark: "rgba(255,255,255,0.5)", rippleColorDark: "rgba(255,255,255,0.2)", + searchBarColor: "#1F1F1F", }; /** @@ -61,4 +64,5 @@ export const midnightDuskTheme = { textColorSecondaryDark: "rgba(255,255,255,0.7)", textColorHintDark: "rgba(255,255,255,0.5)", rippleColorDark: "rgba(255,255,255,0.2)", + searchBarColor: "#1F1F1F", }; From 9dab2eccaaccc5dc44081604ad211b2e2a4a2658 Mon Sep 17 00:00:00 2001 From: Rajarshee Chatterjee Date: Sat, 20 Mar 2021 11:53:18 +0530 Subject: [PATCH 2/6] Update ReadLightNovel extension UI --- src/components/common/Appbar.js | 63 +++++++--- src/components/common/NovelCover.js | 24 ++-- src/screens/Library/Library.js | 83 +++++++------ src/screens/Novel/components/BottomSheet.js | 2 + src/screens/Novel/components/NovelHeader.js | 2 +- .../readlightnovel/ReadLightNovel.js | 109 ++++-------------- 6 files changed, 121 insertions(+), 162 deletions(-) diff --git a/src/components/common/Appbar.js b/src/components/common/Appbar.js index 7b81a9082..4e7a3e502 100644 --- a/src/components/common/Appbar.js +++ b/src/components/common/Appbar.js @@ -1,5 +1,5 @@ import React, { useRef } from "react"; -import { View, TextInput } from "react-native"; +import { View, TextInput, StyleSheet } from "react-native"; import { TouchableRipple, IconButton, @@ -7,6 +7,7 @@ import { } from "react-native-paper"; import Constants from "expo-constants"; +import { useNavigation } from "@react-navigation/native"; import { useSelector } from "react-redux"; export const Appbar = ({ title, onBackAction }) => { @@ -28,31 +29,28 @@ export const Appbar = ({ title, onBackAction }) => { }; export const SearchAppbar = ({ - searchLibraryNovels, + placeholder, + getSearchResults, setSearchText, searchText, - getLibraryNovels, + getNovels, + setLoading, + screen, }) => { const searchRef = useRef(null); + const navigation = useNavigation(); + const theme = useSelector((state) => state.themeReducer.theme); return ( searchRef.current.focus()} - style={{ - marginTop: Constants.statusBarHeight + 4, - height: 50, - flexDirection: "row", - alignItems: "center", - paddingHorizontal: 16, - marginBottom: 8, - borderRadius: 8, - backgroundColor: theme.searchBarColor, - marginHorizontal: 12, - elevation: 2, - }} + style={[ + styles.searchAppbarContainer, + { backgroundColor: theme.searchBarColor }, + ]} > { + if (screen === "Extension") { + navigation.goBack(); + } + }} /> { setSearchText(text); - searchLibraryNovels(text); + if (screen === "Library") { + getSearchResults(text); + } + }} + onSubmitEditing={() => { + if (screen === "Extension") { + getSearchResults(searchText); + } }} defaultValue={searchText} /> @@ -90,7 +100,8 @@ export const SearchAppbar = ({ style={{ marginRight: 0 }} size={23} onPress={() => { - getLibraryNovels(); + setLoading?.(true); + getNovels(); setSearchText(""); }} /> @@ -110,3 +121,17 @@ export const SearchAppbar = ({ ); }; + +const styles = StyleSheet.create({ + searchAppbarContainer: { + marginTop: Constants.statusBarHeight + 4, + height: 50, + flexDirection: "row", + alignItems: "center", + paddingHorizontal: 16, + marginBottom: 8, + borderRadius: 8, + marginHorizontal: 12, + elevation: 2, + }, +}); diff --git a/src/components/common/NovelCover.js b/src/components/common/NovelCover.js index 42612ae55..bc71a8397 100644 --- a/src/components/common/NovelCover.js +++ b/src/components/common/NovelCover.js @@ -26,15 +26,13 @@ const NovelCover = ({ item, onPress, libraryStatus }) => { onPress={onPress} > <> - {item.novelCover ? ( + {item.novelCover && ( @@ -53,7 +51,7 @@ const NovelCover = ({ item, onPress, libraryStatus }) => { styles.title, { color: - theme.textColorPrimaryDark, + "rgba(255,255,255,1)", }, ]} > @@ -63,19 +61,16 @@ const NovelCover = ({ item, onPress, libraryStatus }) => { )} - ) : ( - - - Novel Cover Doesn't Exist - - )} {displayMode === 1 && ( {item.novelName} @@ -91,8 +86,7 @@ export default NovelCover; const styles = StyleSheet.create({ logo: { - height: 183, - borderRadius: 4, + height: 180, }, titleContainer: { flex: 1, diff --git a/src/screens/Library/Library.js b/src/screens/Library/Library.js index 1ccc1ca29..1d6251681 100644 --- a/src/screens/Library/Library.js +++ b/src/screens/Library/Library.js @@ -11,7 +11,6 @@ import { FlatList } from "react-native-gesture-handler"; import { useFocusEffect } from "@react-navigation/native"; import { connect } from "react-redux"; -import Appbar from "./components/Appbar"; import NovelCover from "../../components/common/NovelCover"; import EmptyView from "../../components/common/EmptyView"; @@ -65,10 +64,12 @@ const LibraryScreen = ({ ]} > {loading ? ( ) : ( - <> - item.novelUrl} - renderItem={({ item }) => ( - redirectToNovel(item)} + item.novelUrl} + renderItem={({ item }) => ( + redirectToNovel(item)} + /> + )} + refreshControl={ + + } + ListEmptyComponent={ + searchText !== "" ? ( + + {`"${searchText}" not in library`} + + ) : ( + - )} - refreshControl={ - - } - ListEmptyComponent={ - searchText !== "" ? ( - - {`"${searchText}" not in library`} - - ) : ( - - ) - } - /> - + ) + } + /> )} diff --git a/src/screens/Novel/components/BottomSheet.js b/src/screens/Novel/components/BottomSheet.js index 72b8b685b..492515a73 100644 --- a/src/screens/Novel/components/BottomSheet.js +++ b/src/screens/Novel/components/BottomSheet.js @@ -175,5 +175,7 @@ export const BottomSheet = ({ const styles = StyleSheet.create({ contentContainer: { flex: 1, + borderTopRightRadius: 8, + borderTopLeftRadius: 8, }, }); diff --git a/src/screens/Novel/components/NovelHeader.js b/src/screens/Novel/components/NovelHeader.js index 4544ef560..8d758ba11 100644 --- a/src/screens/Novel/components/NovelHeader.js +++ b/src/screens/Novel/components/NovelHeader.js @@ -150,7 +150,7 @@ const NovelInfoHeader = ({ backgroundColor: theme.colorDarkPrimaryDark, marginRight: 2, // borderColor: "rgba(255,255,255,0.121)", - // borderWidth: 1, + borderWidth: 0, justifyContent: "center", height: 30, alignItems: "center", diff --git a/src/screens/extensions/readlightnovel/ReadLightNovel.js b/src/screens/extensions/readlightnovel/ReadLightNovel.js index ef5632f2d..550e3030c 100644 --- a/src/screens/extensions/readlightnovel/ReadLightNovel.js +++ b/src/screens/extensions/readlightnovel/ReadLightNovel.js @@ -1,28 +1,23 @@ import React, { useEffect, useState } from "react"; import { StyleSheet, View, FlatList, ActivityIndicator } from "react-native"; -import { Appbar, Provider } from "react-native-paper"; +import { Provider } from "react-native-paper"; import NovelCover from "../../../components/common/NovelCover"; -import SearchBar from "../../../components/common/SearchBar"; +import { SearchAppbar } from "../../../components/common/Appbar"; import { useSelector } from "react-redux"; - -import * as SQLite from "expo-sqlite"; -const db = SQLite.openDatabase("lnreader.db"); +import EmptyView from "../../../components/common/EmptyView"; const ReadLightNovel = ({ navigation }) => { const theme = useSelector((state) => state.themeReducer.theme); + const library = useSelector((state) => state.libraryReducer.novels); const [loading, setLoading] = useState(true); const [novels, setNovels] = useState(); - const [libraryNovels, setlibraryNovels] = useState([]); - const [searchBar, setSearchBar] = useState(false); const [searchText, setSearchText] = useState(""); - const [searched, setSearched] = useState(false); - const getNovels = () => { fetch(`https://lnreader-extensions.herokuapp.com/api/2/novels/`) .then((response) => response.json()) @@ -44,95 +39,32 @@ const ReadLightNovel = ({ navigation }) => { }); }; - const getLibraryNovels = () => { - db.transaction((tx) => { - tx.executeSql( - "SELECT novelUrl FROM LibraryTable WHERE libraryStatus = 1 AND extensionId = 2", - null, - (tx, { rows: { _array } }) => { - setlibraryNovels(_array); - }, - (tx, error) => console.log(error) - ); - }); - }; - const checkIFInLibrary = (id) => { - return libraryNovels.some((obj) => obj.novelUrl === id); + return library.some((obj) => obj.novelUrl === id); }; useEffect(() => { getNovels(); - getLibraryNovels(); }, []); return ( - - {!searchBar ? ( - <> - navigation.goBack()} - /> - - - setSearchBar(true)} - /> - - - ) : ( - <> - { - if (searched) { - setLoading(true); - getNovels(); - } - setSearchBar(false); - setSearchText(""); - }} - color={theme.textColorPrimaryDark} - /> - setSearchText(text)} - onSubmitEditing={() => { - if (searchText !== "") { - getSearchResults(searchText); - setSearched(true); - } - }} - /> - {searchText !== "" && ( - { - setSearchText(""); - }} - color={theme.textColorPrimaryDark} - /> - )} - - )} - + + {loading ? ( { ) : ( { } /> )} + ListEmptyComponent={ + searchText !== "" && + novels.length === 0 && ( + + ) + } /> )} From c6884458a1aa24b0072412f781b31acd1ef987c8 Mon Sep 17 00:00:00 2001 From: Rajarshee Chatterjee Date: Sat, 20 Mar 2021 12:37:27 +0530 Subject: [PATCH 3/6] Update BoxNovel extension UI and refactor settings --- src/components/common/Appbar.js | 5 +- src/screens/More/Settings.js | 131 +++----------- src/screens/extensions/boxnovel/BoxNovel.js | 160 +++-------------- .../boxnovel/filters/BottomSheet.js | 164 ++++-------------- 4 files changed, 92 insertions(+), 368 deletions(-) diff --git a/src/components/common/Appbar.js b/src/components/common/Appbar.js index 4e7a3e502..29aaf45ce 100644 --- a/src/components/common/Appbar.js +++ b/src/components/common/Appbar.js @@ -36,6 +36,7 @@ export const SearchAppbar = ({ getNovels, setLoading, screen, + onFilter, }) => { const searchRef = useRef(null); @@ -111,11 +112,11 @@ export const SearchAppbar = ({ color={theme.textColorSecondaryDark} style={{ marginRight: 0 }} size={23} - disabled + disabled={typeof onFilter === "function" ? false : true} /** * TODO */ - onPress={() => console.log("Filter Button Pressed")} + onPress={() => onFilter?.()} /> diff --git a/src/screens/More/Settings.js b/src/screens/More/Settings.js index 7741150bb..d1d368786 100644 --- a/src/screens/More/Settings.js +++ b/src/screens/More/Settings.js @@ -26,19 +26,18 @@ const SettingsScreen = ({ displayMode, switchTheme, setDisplayMode, - setItemsPerRow, }) => { const label = { 0: "Compact", 1: "Comfortable", }; - const themes = { - 0: "AMOLED Dark Theme", - 1: "Light Theme", - 2: "Dark Theme", - 3: "Midnight Dusk Theme", - }; + const themes = [ + { themeCode: 0, themeName: "AMOLED Dark Theme", statusBar: "light" }, + { themeCode: 1, themeName: "Light Theme", statusBar: "dark" }, + { themeCode: 2, themeName: "Dark Theme", statusBar: "light" }, + { themeCode: 3, themeName: "Midnight Dusk Theme", statusBar: "light" }, + ]; const desciptionStyles = { color: theme.textColorSecondaryDark, @@ -46,21 +45,20 @@ const SettingsScreen = ({ const titleStyles = { color: theme.textColorPrimaryDark }; - // Display Mode Modal + /** + * Display Mode Modal + */ const [displayModalVisible, setDisplayModalVisible] = useState(false); const showDisplayModal = () => setDisplayModalVisible(true); const hideDisplayModal = () => setDisplayModalVisible(false); - // Theme Modal + /** + * Change Theme Modal + */ const [themeModalVisible, setthemeModalVisible] = useState(false); const showthemeModal = () => setthemeModalVisible(true); const hidethemeModal = () => setthemeModalVisible(false); - // Items Modal - const [itemsModalVisible, setitemsModalVisible] = useState(false); - const showitemsModal = () => setitemsModalVisible(true); - const hideitemsModal = () => setitemsModalVisible(false); - return ( navigation.goBack()} /> @@ -140,63 +138,6 @@ const SettingsScreen = ({ - {/* - - - setItemsPerRow(1)} - > - 1 - - setItemsPerRow(2)} - > - 2 - - setItemsPerRow(3)} - > - 3 - - setItemsPerRow(4)} - > - 4 - - - */} {/* @@ -241,38 +182,20 @@ const SettingsScreen = ({ borderRadius: 6, }} > - { - switchTheme(1); - setStatusBarStyle("dark"); - }} - /> - { - switchTheme(2); - setStatusBarStyle("light"); - }} - /> - { - switchTheme(0); - setStatusBarStyle("light"); - }} - /> - { - switchTheme(3); - setStatusBarStyle("light"); - }} - /> + {themes.map((item) => ( + { + switchTheme(item.themeCode); + setStatusBarStyle(item.statusBar); + }} + /> + ))} diff --git a/src/screens/extensions/boxnovel/BoxNovel.js b/src/screens/extensions/boxnovel/BoxNovel.js index 3f0adb006..c3c65cb02 100644 --- a/src/screens/extensions/boxnovel/BoxNovel.js +++ b/src/screens/extensions/boxnovel/BoxNovel.js @@ -1,70 +1,38 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useRef } from "react"; import { StyleSheet, View, FlatList, ActivityIndicator } from "react-native"; -import { Appbar, Provider, Portal } from "react-native-paper"; +import { Provider, Portal } from "react-native-paper"; import NovelCover from "../../../components/common/NovelCover"; -import SearchBar from "../../../components/common/SearchBar"; +import { SearchAppbar } from "../../../components/common/Appbar"; import { BottomSheet } from "./filters/BottomSheet"; import { useSelector } from "react-redux"; -import * as SQLite from "expo-sqlite"; -const db = SQLite.openDatabase("lnreader.db"); +const BoxNovel = ({ navigation }) => { + const theme = useSelector((state) => state.themeReducer.theme); + + const library = useSelector((state) => state.libraryReducer.novels); -const AllNovels = ({ navigation }) => { const [loading, setLoading] = useState(true); - const [loadingMore, setLoadingMore] = useState(false); const [novels, setNovels] = useState([]); - const [libraryNovels, setlibraryNovels] = useState([]); - const [sort, setSort] = useState("rating"); - const [pageNo, setPageNo] = useState(1); - const [searchBar, setSearchBar] = useState(false); const [searchText, setSearchText] = useState(""); - const [searched, setSearched] = useState(0); - - const theme = useSelector((state) => state.themeReducer.theme); + let bottomSheetRef = useRef(null); const getNovels = () => { fetch( - `https://lnreader-extensions.herokuapp.com/api/1/novels/${pageNo}/?o=${sort}` + `https://lnreader-extensions.herokuapp.com/api/1/novels/1/?o=${sort}` ) .then((response) => response.json()) .then((json) => { - setPageNo(pageNo + 1); - setNovels((novels) => novels.concat(json)); + setNovels(json); setLoading(false); }); }; - const getLibraryNovels = () => { - db.transaction((tx) => { - tx.executeSql( - "SELECT novelUrl FROM LibraryTable WHERE libraryStatus = 1 AND extensionId = 1", - null, - (tx, { rows: { _array } }) => { - setlibraryNovels(_array); - }, - (tx, error) => console.log(error) - ); - }); - }; - - const onEndReached = ({ - layoutMeasurement, - contentOffset, - contentSize, - }) => { - const paddingToBottom = 5; - return ( - layoutMeasurement.height + contentOffset.y >= - contentSize.height - paddingToBottom - ); - }; - const getSearchResults = (searchText) => { setLoading(true); fetch( @@ -78,92 +46,33 @@ const AllNovels = ({ navigation }) => { }; const checkIFInLibrary = (id) => { - return libraryNovels.some((obj) => obj.novelUrl === id); + return library.some((obj) => obj.novelUrl === id); }; useEffect(() => { - getLibraryNovels(); getNovels(); }, [sort]); - const sortNovels = () => { - setLoading(true); - if (searched) { - getSearchResults(); - } else { - getNovels(); - } - }; - return ( - - {!searchBar ? ( - <> - navigation.goBack()} - color={theme.textColorPrimaryDark} - /> - - - setSearchBar(true)} - color={theme.textColorPrimaryDark} - /> - _panel.show({ velocity: -1.5 })} - color={theme.textColorPrimaryDark} - /> - - ) : ( - <> - { - if (searched) { - setLoading(true); - setPageNo(1); - setNovels([]); - getNovels(); - } - setSearchBar(false); - setSearchText(""); - }} - color={theme.textColorPrimaryDark} - /> - setSearchText(text)} - onSubmitEditing={() => { - if (searchText !== "") { - setSort("rating"); - getSearchResults(searchText); - setSearched(true); - } - }} - /> - {searchText !== "" && ( - { - setSearchText(""); - }} - color={theme.textColorPrimaryDark} - /> - )} - - )} - + + bottomSheetRef.current.show({ velocity: -1.5 }) + } + /> {loading ? ( { data={novels} showsVerticalScrollIndicator={false} keyExtractor={(item) => item.novelUrl} - ListFooterComponent={() => - loadingMore && ( - - ) - } renderItem={({ item }) => ( { } /> )} - onScroll={({ nativeEvent }) => { - if (onEndReached(nativeEvent)) { - setLoadingMore(true); - getNovels(); - console.log("End Reached"); - } - }} /> )} (_panel = c)} + bottomSheetRef={bottomSheetRef} setSort={setSort} sort={sort} + setLoading={setLoading} /> ); }; -export default AllNovels; +export default BoxNovel; const styles = StyleSheet.create({ container: { flex: 1, - padding: 3, + padding: 4, }, contentContainer: { diff --git a/src/screens/extensions/boxnovel/filters/BottomSheet.js b/src/screens/extensions/boxnovel/filters/BottomSheet.js index fd83dd27c..b96cd18a9 100644 --- a/src/screens/extensions/boxnovel/filters/BottomSheet.js +++ b/src/screens/extensions/boxnovel/filters/BottomSheet.js @@ -5,14 +5,18 @@ import Bottomsheet from "rn-sliding-up-panel"; import { useSelector } from "react-redux"; -export const BottomSheet = ({ - bottomSheetRef, - setSort, - sort, - setRefreshing, -}) => { +export const BottomSheet = ({ bottomSheetRef, setSort, sort, setLoading }) => { const theme = useSelector((state) => state.themeReducer.theme); + const sorting = [ + { label: "Latest", sortFlag: "latest" }, + { label: "A-Z", sortFlag: "aplhabet" }, + { label: "Rating", sortFlag: "rating" }, + { label: "Trending", sortFlag: "trending" }, + { label: "Most Views", sortFlag: "views" }, + { label: "New", sortFlag: "new-manga" }, + ]; + return ( - - sort === "latest" && ( - - ) - } - title="Latest" - titleStyle={{ - fontSize: 15, - color: theme.textColorPrimaryDark, - }} - onPress={() => setSort("latest")} - /> - - sort === "alphabet" && ( - - ) - } - title="A-Z" - titleStyle={{ - fontSize: 15, - color: theme.textColorPrimaryDark, - }} - onPress={() => { - setSort("alphabet"); - setRefreshing(true); - }} - /> - - sort === "rating" && ( - - ) - } - title="Rating" - titleStyle={{ - fontSize: 15, - color: theme.textColorPrimaryDark, - }} - onPress={() => { - setSort("rating"); - setRefreshing(true); - }} - /> - - sort === "trending" && ( - - ) - } - title="Trending" - titleStyle={{ - fontSize: 15, - color: theme.textColorPrimaryDark, - }} - onPress={() => { - setSort("trending"); - setRefreshing(true); - }} - /> - - sort === "views" && ( - - ) - } - title="Most Views" - titleStyle={{ - fontSize: 15, - color: theme.textColorPrimaryDark, - }} - onPress={() => { - setSort("views"); - setRefreshing(true); - }} - /> - - sort === "new-manga" && ( - - ) - } - title="New" - titleStyle={{ - fontSize: 15, - color: theme.textColorPrimaryDark, - }} - onPress={() => { - setSort("new-manga"); - setRefreshing(true); - }} - /> + {sorting.map((item) => ( + + sort === item.sortFlag && ( + + ) + } + title={item.label} + titleStyle={{ + fontSize: 15, + color: theme.textColorPrimaryDark, + }} + onPress={() => { + setLoading(true); + setSort(item.sortFlag); + }} + /> + ))} From 14c994486c9c61a56cf037fa179521c7a449c66f Mon Sep 17 00:00:00 2001 From: Rajarshee Chatterjee Date: Sat, 20 Mar 2021 13:55:48 +0530 Subject: [PATCH 4/6] Create ExtensionCard --- src/redux/actions/extension.js | 11 ++ src/redux/actions/types.js | 2 + src/redux/reducers/extension.js | 19 +++ src/redux/store/configureStore.js | 8 +- src/screens/Browse/Browse.js | 146 ++++-------------- .../Browse/components/ExtensionCard.js | 91 +++++++++++ src/screens/More/Settings.js | 41 +++-- src/services/api.js | 16 +- 8 files changed, 191 insertions(+), 143 deletions(-) create mode 100644 src/redux/actions/extension.js create mode 100644 src/redux/reducers/extension.js create mode 100644 src/screens/Browse/components/ExtensionCard.js diff --git a/src/redux/actions/extension.js b/src/redux/actions/extension.js new file mode 100644 index 000000000..f85981bff --- /dev/null +++ b/src/redux/actions/extension.js @@ -0,0 +1,11 @@ +import { GET_EXTENSIONS } from "./types"; +import { fetchExtensionList } from "../../services/api"; + +export const getExtensions = () => async (dispatch) => { + const res = await fetchExtensionList(); + + dispatch({ + type: GET_EXTENSIONS, + payload: res, + }); +}; diff --git a/src/redux/actions/types.js b/src/redux/actions/types.js index 05ddb2977..25425fefa 100644 --- a/src/redux/actions/types.js +++ b/src/redux/actions/types.js @@ -5,3 +5,5 @@ export const GET_LIBRARY_NOVELS = "GET_LIBRARY_NOVELS"; export const SET_DISPLAY_MODE = "SET_DISPLAY_MODE"; export const SET_ITEMS_PER_ROW = "SET_ITEMS_PER_ROW"; + +export const GET_EXTENSIONS = "GET_EXTENSIONS"; diff --git a/src/redux/reducers/extension.js b/src/redux/reducers/extension.js new file mode 100644 index 000000000..49feeee35 --- /dev/null +++ b/src/redux/reducers/extension.js @@ -0,0 +1,19 @@ +import { GET_EXTENSIONS } from "../actions/types"; + +const initialState = { + extensions: [], + loading: true, +}; + +const libraryReducer = (state = initialState, action) => { + const { type, payload } = action; + + switch (type) { + case GET_EXTENSIONS: + return { extensions: payload, loading: false }; + default: + return state; + } +}; + +export default libraryReducer; diff --git a/src/redux/store/configureStore.js b/src/redux/store/configureStore.js index 0643b8609..12d7f82e6 100644 --- a/src/redux/store/configureStore.js +++ b/src/redux/store/configureStore.js @@ -6,6 +6,7 @@ import thunk from "redux-thunk"; import themeReducer from "../reducers/theme"; import settingsReducer from "../reducers/settings"; import libraryReducer from "../reducers/library"; +import extensionReducer from "../reducers/extension"; const persistConfig = { key: "root", @@ -14,7 +15,12 @@ const persistConfig = { const persistedReducer = persistReducer( persistConfig, - combineReducers({ themeReducer, settingsReducer, libraryReducer }) + combineReducers({ + themeReducer, + settingsReducer, + libraryReducer, + extensionReducer, + }) ); export const store = createStore(persistedReducer, applyMiddleware(thunk)); diff --git a/src/screens/Browse/Browse.js b/src/screens/Browse/Browse.js index 52bb7a86f..b5d47202a 100644 --- a/src/screens/Browse/Browse.js +++ b/src/screens/Browse/Browse.js @@ -1,31 +1,15 @@ -import React, { useEffect, useState } from "react"; - -import { - StyleSheet, - View, - Text, - FlatList, - Image, - ActivityIndicator, -} from "react-native"; -import { TouchableRipple, Button } from "react-native-paper"; +import React, { useEffect } from "react"; +import { StyleSheet, View, FlatList, ActivityIndicator } from "react-native"; import { Appbar } from "../../components/common/Appbar"; +import { connect } from "react-redux"; -import { useSelector } from "react-redux"; - -const Browse = ({ navigation }) => { - const theme = useSelector((state) => state.themeReducer.theme); +import { getExtensions } from "../../redux/actions/extension"; - const [loading, setLoading] = useState(true); - const [extensions, setExtensions] = useState(); +import ExtensionCard from "./components/ExtensionCard"; +const Browse = ({ theme, extensions, loading, getExtensions }) => { useEffect(() => { - fetch(`https://lnreader-extensions.herokuapp.com/api/`) - .then((response) => response.json()) - .then((json) => { - setExtensions(json); - setLoading(false); - }); + getExtensions(); }, []); return ( @@ -37,108 +21,36 @@ const Browse = ({ navigation }) => { { backgroundColor: theme.colorDarkPrimaryDark }, ]} > - {!loading ? ( - item.sourceId.toString()} - renderItem={({ item }) => ( - - navigation.navigate( - item.sourceName + "Stack" - ) - } - rippleColor={theme.rippleColorDark} - > - <> - - - - - {item.sourceName} - - - {item.sourceLanguage} - - - - - - - - - )} - /> - ) : ( - - - - )} + item.sourceId.toString()} + renderItem={({ item }) => } + ListEmptyComponent={ + loading && ( + + ) + } + /> ); }; -export default Browse; +const mapStateToProps = (state) => ({ + theme: state.themeReducer.theme, + extensions: state.extensionReducer.extensions, + loading: state.extensionReducer.loading, +}); + +export default connect(mapStateToProps, { getExtensions })(Browse); const styles = StyleSheet.create({ container: { flex: 1, - }, - sourceCard: { - paddingVertical: 10, - marginVertical: 5, - paddingHorizontal: 20, - borderRadius: 6, - flexDirection: "row", - alignItems: "center", + paddingHorizontal: 4, }, }); diff --git a/src/screens/Browse/components/ExtensionCard.js b/src/screens/Browse/components/ExtensionCard.js new file mode 100644 index 000000000..721560739 --- /dev/null +++ b/src/screens/Browse/components/ExtensionCard.js @@ -0,0 +1,91 @@ +import React from "react"; +import { View, Text, Image, StyleSheet } from "react-native"; +import { TouchableRipple, Button } from "react-native-paper"; + +import { useNavigation } from "@react-navigation/native"; +import { useSelector } from "react-redux"; + +const ExtensionCard = ({ item }) => { + const { sourceName, sourceCover, sourceLanguage } = item; + + const navigation = useNavigation(); + + const theme = useSelector((state) => state.themeReducer.theme); + + return ( + navigation.navigate(sourceName + "Stack")} + rippleColor={theme.rippleColorDark} + > + <> + + + + + {sourceName} + + + {sourceLanguage} + + + + + + + + + ); +}; + +export default ExtensionCard; + +const styles = StyleSheet.create({ + extensionCard: { + flexDirection: "row", + alignItems: "center", + marginVertical: 4, + paddingVertical: 8, + paddingHorizontal: 20, + borderRadius: 6, + }, + extensionIcon: { + width: 40, + height: 40, + borderRadius: 8, + }, + extensionDetails: { + flex: 1, + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + marginLeft: 16, + }, +}); diff --git a/src/screens/More/Settings.js b/src/screens/More/Settings.js index d1d368786..d53a1b430 100644 --- a/src/screens/More/Settings.js +++ b/src/screens/More/Settings.js @@ -27,16 +27,16 @@ const SettingsScreen = ({ switchTheme, setDisplayMode, }) => { - const label = { + const display = { 0: "Compact", 1: "Comfortable", }; const themes = [ - { themeCode: 0, themeName: "AMOLED Dark Theme", statusBar: "light" }, - { themeCode: 1, themeName: "Light Theme", statusBar: "dark" }, - { themeCode: 2, themeName: "Dark Theme", statusBar: "light" }, - { themeCode: 3, themeName: "Midnight Dusk Theme", statusBar: "light" }, + { themeCode: 0, label: "AMOLED Dark Theme", statusBar: "light" }, + { themeCode: 1, label: "Light Theme", statusBar: "dark" }, + { themeCode: 2, label: "Dark Theme", statusBar: "light" }, + { themeCode: 3, label: "Midnight Dusk Theme", statusBar: "light" }, ]; const desciptionStyles = { @@ -107,7 +107,7 @@ const SettingsScreen = ({ titleStyle={titleStyles} title="Display Mode" descriptionStyle={desciptionStyles} - description={label[displayMode]} + description={display[displayMode]} onPress={showDisplayModal} rippleColor={theme.rippleColorDark} /> @@ -122,20 +122,16 @@ const SettingsScreen = ({ borderRadius: 6, }} > - - setDisplayMode(1)} - /> - - - setDisplayMode(0)} - /> - + setDisplayMode(1)} + /> + setDisplayMode(0)} + /> {/* @@ -184,7 +180,8 @@ const SettingsScreen = ({ > {themes.map((item) => ( { const url = `https://lnreader-extensions.herokuapp.com/api/${extensionId}/novel/${novelUrl}${chapterUrl}`; - console.log( - `https://lnreader-extensions.herokuapp.com/api/${extensionId}/novel/${novelUrl}${chapterUrl}` - ); let res = await fetch(url); let chapter = await res.json(); return chapter; }; + +/** + * Fetch list of extensions + */ + +export const fetchExtensionList = async () => { + const url = `https://lnreader-extensions.herokuapp.com/api/`; + + let res = await fetch(url); + let extensions = await res.json(); + + return extensions; +}; From 20ad556039d436c96887cdb02dded3cee90e447d Mon Sep 17 00:00:00 2001 From: Rajarshee Chatterjee Date: Sat, 20 Mar 2021 13:58:51 +0530 Subject: [PATCH 5/6] Change theme variables --- src/components/common/Appbar.js | 16 +++--- src/components/common/EmptyView.js | 4 +- src/components/common/NovelCover.js | 4 +- src/components/settings/Checkbox.js | 8 +-- src/navigation/Router.js | 2 +- src/screens/Browse/Browse.js | 2 +- .../Browse/components/ExtensionCard.js | 6 +-- src/screens/Chapter/Chapter.js | 6 +-- src/screens/Chapter/components/BottomSheet.js | 4 +- src/screens/History/History.js | 2 +- src/screens/History/components/HistoryCard.js | 10 ++-- src/screens/Library/Library.js | 2 +- src/screens/Library/components/Appbar.js | 14 +++--- src/screens/More/About.js | 26 +++++----- src/screens/More/More.js | 6 +-- src/screens/More/Settings.js | 24 ++++----- src/screens/Novel/Novel.js | 6 +-- src/screens/Novel/components/BottomSheet.js | 18 +++---- src/screens/Novel/components/ChapterCard.js | 8 +-- src/screens/Novel/components/NovelHeader.js | 30 +++++------ src/screens/extensions/boxnovel/BoxNovel.js | 2 +- .../boxnovel/filters/BottomSheet.js | 4 +- .../readlightnovel/ReadLightNovel.js | 2 +- src/theme/theme.js | 50 +++++++++---------- 24 files changed, 126 insertions(+), 130 deletions(-) diff --git a/src/components/common/Appbar.js b/src/components/common/Appbar.js index 29aaf45ce..02ea8c934 100644 --- a/src/components/common/Appbar.js +++ b/src/components/common/Appbar.js @@ -14,15 +14,13 @@ export const Appbar = ({ title, onBackAction }) => { const theme = useSelector((state) => state.themeReducer.theme); return ( - + {onBackAction && ( )} ); @@ -63,7 +61,7 @@ export const SearchAppbar = ({ { @@ -76,10 +74,10 @@ export const SearchAppbar = ({ ref={searchRef} style={{ fontSize: 16, - color: theme.textColorSecondaryDark, + color: theme.textColorSecondary, }} placeholder={placeholder} - placeholderTextColor={theme.textColorSecondaryDark} + placeholderTextColor={theme.textColorSecondary} onChangeText={(text) => { setSearchText(text); if (screen === "Library") { @@ -97,7 +95,7 @@ export const SearchAppbar = ({ {searchText !== "" && ( { @@ -109,7 +107,7 @@ export const SearchAppbar = ({ )} { style={[ styles.emptyViewIcon, { - color: theme.textColorSecondaryDark, + color: theme.textColorSecondary, }, ]} > @@ -21,7 +21,7 @@ const EmptyView = ({ icon, description }) => { style={[ styles.emptyViewText, { - color: theme.textColorSecondaryDark, + color: theme.textColorSecondary, }, ]} > diff --git a/src/components/common/NovelCover.js b/src/components/common/NovelCover.js index bc71a8397..e02c035d8 100644 --- a/src/components/common/NovelCover.js +++ b/src/components/common/NovelCover.js @@ -21,7 +21,7 @@ const NovelCover = ({ item, onPress, libraryStatus }) => { @@ -68,7 +68,7 @@ const NovelCover = ({ item, onPress, libraryStatus }) => { style={[ styles.title, { - color: theme.textColorPrimaryDark, + color: theme.textColorPrimary, padding: 4, }, ]} diff --git a/src/components/settings/Checkbox.js b/src/components/settings/Checkbox.js index ea8ba16d0..835d3d2ec 100644 --- a/src/components/settings/Checkbox.js +++ b/src/components/settings/Checkbox.js @@ -13,10 +13,10 @@ export const DisplayCheckbox = ({ displayMode, onPress, value }) => { return ( @@ -29,10 +29,10 @@ export const ThemeCheckbox = ({ onPress, label, checked }) => { return ( diff --git a/src/navigation/Router.js b/src/navigation/Router.js index 937eb73ea..2f9d82823 100644 --- a/src/navigation/Router.js +++ b/src/navigation/Router.js @@ -64,7 +64,7 @@ const BottomNavigator = () => { return ( { { navigation.navigate(sourceName + "Stack")} - rippleColor={theme.rippleColorDark} + rippleColor={theme.rippleColor} > <> { @@ -38,7 +38,7 @@ const ExtensionCard = ({ item }) => { diff --git a/src/screens/Chapter/Chapter.js b/src/screens/Chapter/Chapter.js index 919d51525..8f7816774 100644 --- a/src/screens/Chapter/Chapter.js +++ b/src/screens/Chapter/Chapter.js @@ -193,7 +193,7 @@ const ChapterItem = ({ route, navigation }) => { /> {!loading && ( <> @@ -241,7 +241,7 @@ const ChapterItem = ({ route, navigation }) => { contentContainerStyle={[ styles.container, readerTheme === 1 && { - backgroundColor: theme.colorDarkPrimary, + backgroundColor: theme.colorPrimary, }, readerTheme === 2 && { backgroundColor: "white", @@ -277,7 +277,7 @@ const ChapterItem = ({ route, navigation }) => { fontSize: size, }, readerTheme === 1 - ? { color: theme.textColorSecondaryDark } + ? { color: theme.textColorSecondary } : { color: "black" }, size === 16 ? { lineHeight: 25 } diff --git a/src/screens/Chapter/components/BottomSheet.js b/src/screens/Chapter/components/BottomSheet.js index 4965911f0..7718c4132 100644 --- a/src/screens/Chapter/components/BottomSheet.js +++ b/src/screens/Chapter/components/BottomSheet.js @@ -48,7 +48,7 @@ const ChapterBottomSheet = ({ @@ -70,7 +70,7 @@ const ChapterBottomSheet = ({ /> diff --git a/src/screens/History/History.js b/src/screens/History/History.js index a2c0e1542..f88264bc6 100644 --- a/src/screens/History/History.js +++ b/src/screens/History/History.js @@ -53,7 +53,7 @@ const History = ({ navigation }) => { { return ( navigation.navigate("NovelItem", { @@ -34,7 +34,7 @@ const HistoryCard = ({ item, deleteHistory, navigation }) => { { { { navigation.navigate("ChapterItem", { diff --git a/src/screens/Library/Library.js b/src/screens/Library/Library.js index 1d6251681..daa60aa3d 100644 --- a/src/screens/Library/Library.js +++ b/src/screens/Library/Library.js @@ -60,7 +60,7 @@ const LibraryScreen = ({ + {!searching ? ( <> setSearch({ ...search, searching: true }) } - color={theme.textColorPrimaryDark} + color={theme.textColorPrimary} /> _panel.show({ velocity: -1.5 })} @@ -43,7 +43,7 @@ const LibraryAppbar = ({ setSearch({ searching: false, searchText: "" }); getLibraryNovels(); }} - color={theme.textColorPrimaryDark} + color={theme.textColorPrimary} size={24} /> )} diff --git a/src/screens/More/About.js b/src/screens/More/About.js index c8c0446eb..1446e96f8 100644 --- a/src/screens/More/About.js +++ b/src/screens/More/About.js @@ -16,38 +16,38 @@ const AboutScreen = ({ navigation }) => { style={{ flex: 1, marginTop: 0, - backgroundColor: theme.colorDarkPrimaryDark, + backgroundColor: theme.colorPrimaryDark, marginBottom: 0, }} > Linking.openURL( "https://github.com/rajarsheechatterjee/lnreader/commits/main" ) } - rippleColor={theme.rippleColorDark} + rippleColor={theme.rippleColor} /> @@ -55,11 +55,11 @@ const AboutScreen = ({ navigation }) => { "https://github.com/rajarsheechatterjee/lnreader" ) } - rippleColor={theme.rippleColorDark} + rippleColor={theme.rippleColor} /> { "https://github.com/rajarsheechatterjee/lnreader-extensions" ) } - rippleColor={theme.rippleColorDark} + rippleColor={theme.rippleColor} /> diff --git a/src/screens/More/More.js b/src/screens/More/More.js index f54f3d8e5..28765351e 100644 --- a/src/screens/More/More.js +++ b/src/screens/More/More.js @@ -16,13 +16,13 @@ const MoreScreen = ({ navigation }) => { ( { onPress={() => navigation.navigate("Settings")} /> ( navigation.goBack()} /> - + deleteNovelsNotInLibrary()} - rippleColor={theme.rippleColorDark} + rippleColor={theme.rippleColor} /> deleteHistory()} - rippleColor={theme.rippleColorDark} + rippleColor={theme.rippleColor} /> deleteDatabase()} /> */} @@ -165,14 +163,14 @@ const SettingsScreen = ({ descriptionStyle={desciptionStyles} description={themes[themeCode].label} onPress={showthemeModal} - rippleColor={theme.rippleColorDark} + rippleColor={theme.rippleColor} /> { { } /> diff --git a/src/screens/Novel/components/BottomSheet.js b/src/screens/Novel/components/BottomSheet.js index 492515a73..6c7c26e96 100644 --- a/src/screens/Novel/components/BottomSheet.js +++ b/src/screens/Novel/components/BottomSheet.js @@ -39,14 +39,14 @@ export const BottomSheet = ({ style={[ styles.contentContainer, { - backgroundColor: theme.colorDarkPrimary, + backgroundColor: theme.colorPrimary, }, ]} > @@ -77,7 +77,7 @@ export const BottomSheet = ({ /> Newest to oldest @@ -96,7 +96,7 @@ export const BottomSheet = ({ /> Oldest to newest @@ -108,7 +108,7 @@ export const BottomSheet = ({ filterChapters("")} /> - + Show all @@ -135,7 +135,7 @@ export const BottomSheet = ({ color={theme.colorAccentDark} onPress={() => filterChapters("AND `read`=1")} /> - + Show read chapters @@ -148,7 +148,7 @@ export const BottomSheet = ({ color={theme.colorAccentDark} onPress={() => filterChapters("AND `read`=0")} /> - + Show unread chapters @@ -163,7 +163,7 @@ export const BottomSheet = ({ color={theme.colorAccentDark} onPress={() => filterChapters("AND downloaded=1")} /> - + Show downloaded chapters diff --git a/src/screens/Novel/components/ChapterCard.js b/src/screens/Novel/components/ChapterCard.js index c494469a4..1f405d2c4 100644 --- a/src/screens/Novel/components/ChapterCard.js +++ b/src/screens/Novel/components/ChapterCard.js @@ -36,14 +36,14 @@ const ChapterCard = ({ chapterName: chapter.chapterName, }) } - rippleColor={theme.rippleColorDark} + rippleColor={theme.rippleColor} > <> @@ -55,7 +55,7 @@ const NovelInfoHeader = ({ style={styles.background} > @@ -73,7 +73,7 @@ const NovelInfoHeader = ({ style={[ styles.name, { - color: theme.textColorPrimaryDark, + color: theme.textColorPrimary, }, ]} > @@ -83,7 +83,7 @@ const NovelInfoHeader = ({ <> insertNovelInLib()} style={[ { - backgroundColor: theme.colorDarkPrimaryDark, + backgroundColor: theme.colorPrimaryDark, marginRight: 2, // borderColor: "rgba(255,255,255,0.121)", borderWidth: 0, @@ -165,7 +165,7 @@ const NovelInfoHeader = ({ ]} textStyle={{ fontWeight: "bold", - color: theme.textColorPrimaryDark, + color: theme.textColorPrimary, }} > {libraryStatus ? "In Library" : "Add to library"} @@ -202,7 +202,7 @@ const NovelInfoHeader = ({ > setMore(!more)} @@ -291,12 +291,12 @@ const NovelInfoHeader = ({ onPress={() => bottomSheetRef.current.show({ velocity: -1.5 }) } - rippleColor={theme.rippleColorDark} + rippleColor={theme.rippleColor} > <> @@ -332,7 +332,7 @@ const styles = StyleSheet.create({ }, background: { height: 285, - // backgroundColor: theme.colorDarkPrimaryDark, + // backgroundColor: theme.colorPrimaryDark, }, linearGradient: { // flex: 1, diff --git a/src/screens/extensions/boxnovel/BoxNovel.js b/src/screens/extensions/boxnovel/BoxNovel.js index c3c65cb02..2572f54a1 100644 --- a/src/screens/extensions/boxnovel/BoxNovel.js +++ b/src/screens/extensions/boxnovel/BoxNovel.js @@ -58,7 +58,7 @@ const BoxNovel = ({ navigation }) => { { style={[ styles.contentContainer, { - backgroundColor: theme.colorDarkPrimary, + backgroundColor: theme.colorPrimary, }, ]} > @@ -70,7 +70,7 @@ export const BottomSheet = ({ bottomSheetRef, setSort, sort, setLoading }) => { title={item.label} titleStyle={{ fontSize: 15, - color: theme.textColorPrimaryDark, + color: theme.textColorPrimary, }} onPress={() => { setLoading(true); diff --git a/src/screens/extensions/readlightnovel/ReadLightNovel.js b/src/screens/extensions/readlightnovel/ReadLightNovel.js index 550e3030c..7c930bf42 100644 --- a/src/screens/extensions/readlightnovel/ReadLightNovel.js +++ b/src/screens/extensions/readlightnovel/ReadLightNovel.js @@ -52,7 +52,7 @@ const ReadLightNovel = ({ navigation }) => { Date: Sat, 20 Mar 2021 14:13:21 +0530 Subject: [PATCH 6/6] Update version --- src/components/common/Appbar.js | 2 +- src/navigation/Router.js | 49 +++++++++++++++++---------------- src/screens/More/About.js | 4 +-- src/screens/More/Settings.js | 9 +++--- src/theme/theme.js | 2 +- 5 files changed, 34 insertions(+), 32 deletions(-) diff --git a/src/components/common/Appbar.js b/src/components/common/Appbar.js index 02ea8c934..e7f618c22 100644 --- a/src/components/common/Appbar.js +++ b/src/components/common/Appbar.js @@ -124,7 +124,7 @@ export const SearchAppbar = ({ const styles = StyleSheet.create({ searchAppbarContainer: { marginTop: Constants.statusBarHeight + 4, - height: 50, + height: 48, flexDirection: "row", alignItems: "center", paddingHorizontal: 16, diff --git a/src/navigation/Router.js b/src/navigation/Router.js index 2f9d82823..f12d8a559 100644 --- a/src/navigation/Router.js +++ b/src/navigation/Router.js @@ -4,6 +4,7 @@ import { TransitionPresets, } from "@react-navigation/stack"; import { createMaterialBottomTabNavigator } from "@react-navigation/material-bottom-tabs"; +import { Provider } from "react-native-paper"; import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"; @@ -139,29 +140,31 @@ const BottomNavigator = () => { const Router = () => { return ( - - - - - - - + + + + + + + + + ); }; diff --git a/src/screens/More/About.js b/src/screens/More/About.js index 1446e96f8..1b0cb8888 100644 --- a/src/screens/More/About.js +++ b/src/screens/More/About.js @@ -24,13 +24,13 @@ const AboutScreen = ({ navigation }) => { titleStyle={{ color: theme.textColorPrimary }} title="Version" descriptionStyle={{ color: theme.textColorSecondary }} - description="Stable 1.0.1" + description="Stable 1.0.3" /> setthemeModalVisible(false); return ( - + <> navigation.goBack()} /> {themes.map((item) => ( - + ); }; diff --git a/src/theme/theme.js b/src/theme/theme.js index eea32df5a..ea943e6a8 100644 --- a/src/theme/theme.js +++ b/src/theme/theme.js @@ -64,5 +64,5 @@ export const midnightDuskTheme = { textColorSecondary: "rgba(255,255,255,0.7)", textColorHintDark: "rgba(255,255,255,0.5)", rippleColor: "rgba(255,255,255,0.2)", - searchBarColor: "#1F1F1F", + searchBarColor: "#201F27", };