diff --git a/assets/fonts/Lora-VariableFont_wght.ttf b/assets/fonts/Lora-VariableFont_wght.ttf new file mode 100644 index 00000000..b23ce749 Binary files /dev/null and b/assets/fonts/Lora-VariableFont_wght.ttf differ diff --git a/assets/fonts/NotoSans-Bold.ttf b/assets/fonts/NotoSans-Bold.ttf deleted file mode 100644 index 54ad879b..00000000 Binary files a/assets/fonts/NotoSans-Bold.ttf and /dev/null differ diff --git a/assets/fonts/Nunito-Regular.ttf b/assets/fonts/Nunito-Regular.ttf new file mode 100644 index 00000000..c8c90b7c Binary files /dev/null and b/assets/fonts/Nunito-Regular.ttf differ diff --git a/assets/fonts/productsans_regular.ttf b/assets/fonts/productsans_regular.ttf deleted file mode 100644 index e2c69c3f..00000000 Binary files a/assets/fonts/productsans_regular.ttf and /dev/null differ diff --git a/src/components/Appbar.js b/src/components/Appbar.js index 45b86b4e..4285d04f 100644 --- a/src/components/Appbar.js +++ b/src/components/Appbar.js @@ -29,104 +29,6 @@ export const Appbar = ({ title, onBackAction, style, children }) => { ); }; -export const SearchAppbar = ({ - placeholder, - getSearchResults, - setSearchText, - searchText, - getNovels, - setLoading, - screen, - openWebView, -}) => { - const searchRef = useRef(null); - - const navigation = useNavigation(); - - const theme = useSelector((state) => state.settingsReducer.theme); - - return ( - searchRef.current.focus()} - style={[ - styles.searchAppbarContainer, - { backgroundColor: theme.searchBarColor }, - ]} - > - - - {screen === "Library" ? ( - - ) : ( - navigation.goBack()} - /> - )} - { - setSearchText(text); - if (screen === "Library") { - getSearchResults(text); - } - }} - onSubmitEditing={() => { - if (screen === "Extension") { - getSearchResults(searchText); - } - }} - defaultValue={searchText} - /> - - {searchText !== "" && ( - { - setLoading?.(true); - getNovels(); - setSearchText(""); - }} - /> - )} - {openWebView && ( - - )} - - - ); -}; - const styles = StyleSheet.create({ searchAppbarContainer: { marginTop: Constants.statusBarHeight + 8, diff --git a/src/components/List.js b/src/components/List.js index fc5ac4e1..98f54b23 100644 --- a/src/components/List.js +++ b/src/components/List.js @@ -1,19 +1,19 @@ import React from "react"; import { StyleSheet, View } from "react-native"; -import { List, Divider as PaperDivider } from "react-native-paper"; +import { List as PaperList, Divider as PaperDivider } from "react-native-paper"; import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"; const ListSection = ({ children }) => ( - {children} + {children} ); const ListSubHeader = ({ children, theme }) => ( - {children} - + ); const ListItem = ({ @@ -27,7 +27,7 @@ const ListItem = ({ titleStyle, style, }) => ( - ( {icon && ( - ( ); const InfoItem = ({ title, icon, theme }) => ( - icon && ( - ( /> ); -export { ListSection, ListSubHeader, ListItem, Divider, InfoItem }; +const Icon = ({ icon, theme }) => ( + +); + +export const List = { + Section: ListSection, + SubHeader: ListSubHeader, + Item: ListItem, + Divider, + InfoItem, + Icon, +}; const styles = StyleSheet.create({ listSection: { diff --git a/src/redux/settings/settings.reducer.js b/src/redux/settings/settings.reducer.js index ba1ea64b..e9579ea6 100644 --- a/src/redux/settings/settings.reducer.js +++ b/src/redux/settings/settings.reducer.js @@ -8,7 +8,6 @@ import { SET_AMOLED_MODE, } from "./settings.types"; import { - amoledDarkTheme, lightTheme, darkTheme, midnightDuskTheme, @@ -18,10 +17,10 @@ import { takoTheme, yinYangTheme, springBlossomTheme, + colorsAmoled, } from "../../theme/theme"; const themes = { - 0: amoledDarkTheme, 1: lightTheme, 2: darkTheme, 3: midnightDuskTheme, @@ -106,7 +105,7 @@ const settingsReducer = (state = initialState, action) => { ...state, theme: payload.val ? { - ...themes[0], + ...colorsAmoled, colorAccent: state.theme.colorAccent, rippleColor: state.theme.rippleColor, colorButtonText: state.theme.colorButtonText, diff --git a/src/screens/Chapter/Chapter.js b/src/screens/Chapter/Chapter.js index 45791bf1..98934ba5 100644 --- a/src/screens/Chapter/Chapter.js +++ b/src/screens/Chapter/Chapter.js @@ -422,7 +422,6 @@ const styles = StyleSheet.create({ textAlign: "center", textAlignVertical: "center", alignSelf: "center", - fontFamily: "noto-sans", fontWeight: "bold", zIndex: 1, }, diff --git a/src/screens/Chapter/TextToComponent.js b/src/screens/Chapter/TextToComponent.js index f99fe18a..d5609266 100644 --- a/src/screens/Chapter/TextToComponent.js +++ b/src/screens/Chapter/TextToComponent.js @@ -1,8 +1,7 @@ -import React, { memo, useCallback, useEffect } from "react"; +import React, { memo } from "react"; import { Text, View } from "react-native"; import FitImage from "react-native-fit-image"; -import { showToast } from "../../hooks/showToast"; const getHeadingSize = (size) => { const headings = { @@ -20,13 +19,7 @@ const getHeadingSize = (size) => { const Header = ({ size, text, textStyle, textSelectable, textSize }) => ( {text} diff --git a/src/screens/Chapter/components/ReaderSheet.js b/src/screens/Chapter/components/ReaderSheet.js index 0f501340..6eadbe9b 100644 --- a/src/screens/Chapter/components/ReaderSheet.js +++ b/src/screens/Chapter/components/ReaderSheet.js @@ -1,5 +1,12 @@ import React, { useState } from "react"; -import { StyleSheet, View, Text, Dimensions, Pressable } from "react-native"; +import { + StyleSheet, + View, + Text, + Dimensions, + Pressable, + ScrollView, +} from "react-native"; import Slider from "@react-native-community/slider"; import { ToggleButton, IconButton, Menu, Switch } from "react-native-paper"; @@ -31,13 +38,17 @@ const ReaderSheet = ({ {title} ); - const textColor = { - 1: "rgba(255,255,255,0.7)", - 2: "#111111", - 3: "#593100", - 4: "#CCCCCC", - 5: "#CCCCCC", - }; + const presetThemes = [ + { value: 2, backgroundColor: "#f5f5fa", textColor: "#111111" }, + { value: 3, backgroundColor: "#F7DFC6", textColor: "#593100" }, + { value: 6, backgroundColor: "#dce5e2", textColor: "#000000" }, + { value: 4, backgroundColor: "#292832", textColor: "#CCCCCC" }, + { + value: 1, + backgroundColor: "#000000", + textColor: "rgba(255,255,255,0.7)", + }, + ]; return ( - - - { - dispatch( - setReaderSettings( - "theme", - value ?? reader.theme - ) - ); - dispatch( - setReaderSettings( - "textColor", - textColor[value] ?? reader.textColor - ) - ); - }} - value={reader.theme} - > - - {/* */} - - - - - + + + + {presetThemes.map((item) => ( + { + dispatch( + setReaderSettings( + "theme", + item.value + ) + ); + dispatch( + setReaderSettings( + "textColor", + item.textColor + ) + ); + }} + /> + ))} + + ))} diff --git a/src/screens/Chapter/readerStyleController.js b/src/screens/Chapter/readerStyleController.js index 3693fa49..1a8ba040 100644 --- a/src/screens/Chapter/readerStyleController.js +++ b/src/screens/Chapter/readerStyleController.js @@ -5,6 +5,7 @@ export const readerBackground = (val) => { 3: "#F7DFC6", 4: "#292832", 5: "#2B2C30", + 6: "#dce5e2", }; return backgroundColor[val] || val; @@ -17,6 +18,7 @@ export const readerTextColor = (val) => { 3: "#593100", 4: "#CCCCCC", 5: "#CCCCCC", + 6: "#000000", }; return textColor[val] || val; diff --git a/src/screens/More/About.js b/src/screens/More/About.js index c3ed98c9..d9297452 100644 --- a/src/screens/More/About.js +++ b/src/screens/More/About.js @@ -5,67 +5,61 @@ import * as Linking from "expo-linking"; import { Appbar } from "../../components/Appbar"; import { useSelector } from "react-redux"; -import { Divider, ListItem, ListSection } from "../../components/List"; +import { List } from "../../components/List"; +import { ScreenContainer } from "../../components/Common"; +import { MoreHeader } from "./components/MoreHeader"; +import { IconButton } from "react-native-paper"; const AboutScreen = ({ navigation }) => { const theme = useSelector((state) => state.settingsReducer.theme); return ( - <> - navigation.goBack()} /> - - - - - - Linking.openURL( - "https://github.com/LNReader/lnreader/commits/main" - ) - } - theme={theme} - /> - - - Linking.openURL("https://discord.gg/QdcWN4MD63") - } - theme={theme} - /> - - Linking.openURL( - "https://github.com/LNReader/lnreader" - ) - } - theme={theme} - /> - - Linking.openURL( - "https://github.com/LNReader/lnreader-sources" - ) - } - theme={theme} - /> - - - + + + + + + Linking.openURL( + "https://github.com/LNReader/lnreader/releases/tag/v1.1.2" + ) + } + theme={theme} + /> + + + Linking.openURL("https://discord.gg/QdcWN4MD63") + } + theme={theme} + /> + + Linking.openURL("https://github.com/LNReader/lnreader") + } + theme={theme} + /> + + Linking.openURL( + "https://github.com/LNReader/lnreader-sources" + ) + } + theme={theme} + /> + + ); }; diff --git a/src/screens/More/AdvancedSettings.js b/src/screens/More/AdvancedSettings.js index 7de3ac01..1bda81e6 100644 --- a/src/screens/More/AdvancedSettings.js +++ b/src/screens/More/AdvancedSettings.js @@ -3,7 +3,7 @@ import { useDispatch } from "react-redux"; import { Appbar } from "../../components/Appbar"; import { ScreenContainer } from "../../components/Common"; -import { ListItem, ListSection, ListSubHeader } from "../../components/List"; +import { List } from "../../components/List"; import { useTheme } from "../../hooks/reduxHooks"; @@ -24,15 +24,15 @@ const AdvancedSettings = ({ navigation }) => { return ( navigation.goBack()} /> - - Data - + Data + - + { title="Backup" onBackAction={() => navigation.goBack()} /> - - Backup - + Backup + - dispatch(restoreLibraryAction())} theme={theme} /> - - + ); diff --git a/src/screens/More/GeneralSettings.js b/src/screens/More/GeneralSettings.js index cdd9f00d..292b5e6c 100644 --- a/src/screens/More/GeneralSettings.js +++ b/src/screens/More/GeneralSettings.js @@ -2,12 +2,7 @@ import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { Appbar } from "../../components/Appbar"; -import { - Divider, - ListItem, - ListSection, - ListSubHeader, -} from "../../components/List"; +import { List } from "../../components/List"; import { ScreenContainer } from "../../components/Common"; import { useSettings, useTheme } from "../../hooks/reduxHooks"; @@ -95,22 +90,22 @@ const GenralSettings = ({ navigation }) => { - - Display - + Display + - - - Library + + Library { } theme={theme} /> - Auto-download + + Auto-download { } theme={theme} /> - Theme - + + Theme + - { theme={theme} /> )} - + { const theme = useTheme(); @@ -20,119 +22,91 @@ const MoreScreen = ({ navigation }) => { }; return ( - <> - - - - - - - - - - - - - - Incognito Mode - - - Pauses reading history - - + + + + + + + + + Incognito Mode + + + Pauses reading history + - - + + + + + 0 && + downloadQueue.length + " remaining" + } + icon="progress-download" + onPress={() => + navigation.navigate("MoreStack", { + screen: "DownloadQueue", + }) + } + theme={theme} + /> + + navigation.navigate("MoreStack", { + screen: "Downloads", + }) + } + theme={theme} + /> + + + navigation.navigate("MoreStack", { + screen: "SettingsStack", + }) + } + theme={theme} + /> - 0 && - downloadQueue.length + " remaining" - } - icon="progress-download" - onPress={() => - navigation.navigate("MoreStack", { - screen: "DownloadQueue", - }) - } - theme={theme} - /> - - navigation.navigate("MoreStack", { - screen: "Downloads", - }) - } - theme={theme} - /> - - - navigation.navigate("MoreStack", { - screen: "SettingsStack", - }) - } - theme={theme} - /> - - - navigation.navigate("MoreStack", { - screen: "About", - }) - } - theme={theme} - /> - - - + + navigation.navigate("MoreStack", { + screen: "About", + }) + } + theme={theme} + /> + + ); }; diff --git a/src/screens/More/ReaderSettings.js b/src/screens/More/ReaderSettings.js index c6758f29..7bd9326f 100644 --- a/src/screens/More/ReaderSettings.js +++ b/src/screens/More/ReaderSettings.js @@ -6,7 +6,7 @@ import { useDispatch } from "react-redux"; import { Appbar } from "../../components/Appbar"; import ColorPickerModal from "../../components/ColorPickerModal"; import { Row, ScreenContainer } from "../../components/Common"; -import { ListItem, ListSection, ListSubHeader } from "../../components/List"; +import { List } from "../../components/List"; import { useReaderSettings, useTheme } from "../../hooks/reduxHooks"; import { setReaderSettings } from "../../redux/settings/settings.actions"; @@ -124,8 +124,8 @@ const ReaderSettings = ({ navigation }) => { sit amet. - - Preset + + Preset { - Reader - + Reader + { iconColor={readerBackground(reader.theme)} right="circle" /> - { } right="circle" /> - Text + + + Text { - + { backgroundColor: theme.colorPrimaryDark, }} > - @@ -28,7 +28,7 @@ const SettingsScreen = ({ navigation }) => { } theme={theme} /> - @@ -38,7 +38,7 @@ const SettingsScreen = ({ navigation }) => { } theme={theme} /> - @@ -48,7 +48,7 @@ const SettingsScreen = ({ navigation }) => { } theme={theme} /> - @@ -58,7 +58,7 @@ const SettingsScreen = ({ navigation }) => { } theme={theme} /> - diff --git a/src/screens/More/TrackerSettings.js b/src/screens/More/TrackerSettings.js index 5367524c..34948c75 100644 --- a/src/screens/More/TrackerSettings.js +++ b/src/screens/More/TrackerSettings.js @@ -11,12 +11,7 @@ import { import { Appbar } from "../../components/Appbar"; import { useSelector, useDispatch } from "react-redux"; -import { - Divider, - ListItem, - ListSection, - ListSubHeader, -} from "../../components/List"; +import { List } from "../../components/List"; import { removeTracker, setTracker } from "../../redux/tracker/tracker.actions"; const TrackerScreen = ({ navigation }) => { @@ -39,9 +34,9 @@ const TrackerScreen = ({ navigation }) => { paddingVertical: 8, }} > - - Services - + Services + { if (tracker) { @@ -82,10 +77,10 @@ const TrackerScreen = ({ navigation }) => { {tracker && tracker.expires_in < new Date(Date.now()) && ( <> - + Settings - - + { const res = malTokenWatcher(tracker); @@ -95,7 +90,7 @@ const TrackerScreen = ({ navigation }) => { /> )} - + ( + <> + + + + + + + +); + +const styles = StyleSheet.create({ + logoContainer: { + paddingTop: 8, + paddingBottom: 24, + alignItems: "center", + elevation: 4, + }, + logo: { + height: 80, + width: 80, + }, +}); diff --git a/src/services/utils/constants.js b/src/services/utils/constants.js index aea0f9c8..9ec5d2c1 100644 --- a/src/services/utils/constants.js +++ b/src/services/utils/constants.js @@ -1,12 +1,13 @@ export const fonts = [ { fontFamily: "", name: "Original" }, + { fontFamily: "lora", name: "Lora" }, + { fontFamily: "nunito", name: "Nunito" }, + { fontFamily: "noto-sans", name: "Noto Sans" }, + { fontFamily: "open-sans", name: "Open Sans" }, { fontFamily: "arbutus-slab", name: "Arbutus Slab" }, { fontFamily: "domine", name: "Domine" }, { fontFamily: "lato", name: "Lato" }, - { fontFamily: "noto-sans", name: "Noto Sans" }, - { fontFamily: "open-sans", name: "Open Sans" }, { fontFamily: "pt-serif", name: "PT Serif" }, - { fontFamily: "productsans-regular", name: "Product Sans" }, ]; export const dateFormat = { diff --git a/src/theme/colors.js b/src/theme/colors.js index 6adeaab9..0aea6fec 100644 --- a/src/theme/colors.js +++ b/src/theme/colors.js @@ -63,8 +63,8 @@ const PrimaryColors = { colorPrimaryDark: "#222831", }, tako: { - colorPrimary: "#484861", - colorPrimaryDark: "#2C2C3B", + colorPrimary: "#2A2A3C", + colorPrimaryDark: "#21212E", }, springBlossom: { colorPrimary: "#efe3f3", @@ -72,10 +72,16 @@ const PrimaryColors = { }, }; +const DividerColors = { + LIGHT: "rgba(0,0,0,0.12)", + DARK: "rgba(255,255,255,0.12)", +}; + export { AccentColors, RippleColors, StatusBarStyle, TextColors, PrimaryColors, + DividerColors, }; diff --git a/src/theme/fonts.js b/src/theme/fonts.js index 2f98ba3a..3b6ef649 100644 --- a/src/theme/fonts.js +++ b/src/theme/fonts.js @@ -8,8 +8,8 @@ export const fonts = { domine: require("../../assets/fonts/Domine-VariableFont_wght.ttf"), lato: require("../../assets/fonts/Lato-Regular.ttf"), "noto-sans": require("../../assets/fonts/NotoSans-Regular.ttf"), - "noto-sans-bold": require("../../assets/fonts/NotoSans-Bold.ttf"), "open-sans": require("../../assets/fonts/OpenSans-Regular.ttf"), "pt-serif": require("../../assets/fonts/PTSerif-Regular.ttf"), - "productsans-regular": require("../../assets/fonts/productsans_regular.ttf"), + lora: require("../../assets/fonts/Lora-VariableFont_wght.ttf"), + nunito: require("../../assets/fonts/Nunito-Regular.ttf"), }; diff --git a/src/theme/theme.js b/src/theme/theme.js index a2dfc5c7..79bcd821 100644 --- a/src/theme/theme.js +++ b/src/theme/theme.js @@ -1,5 +1,6 @@ import { AccentColors, + DividerColors, PrimaryColors, RippleColors, StatusBarStyle, @@ -18,7 +19,7 @@ export const lightTheme = { rippleColor: RippleColors.default, searchBarColor: "#FFFFFF", menuColor: "#FFFFFF", - dividerColor: "rgba(0,0,0,0.1)", + dividerColor: DividerColors.LIGHT, filterColor: "#FFC107", colorDisabled: "rgba(220,220,220,255)", colorButtonText: "#FFFFFF", @@ -38,31 +39,12 @@ export const darkTheme = { searchBarColor: "#303135", menuColor: "#242529", filterColor: "#FFEB3B", - dividerColor: "rgba(255,255,255,0.1)", + dividerColor: DividerColors.DARK, colorDisabled: "rgba(57,57,57,255)", colorButtonText: "#FFFFFF", statusBar: StatusBarStyle.LIGHT, }; -/** - * Amoled Dark - */ -export const amoledDarkTheme = { - id: 0, - name: "AMOLED Dark", - ...PrimaryColors.amoled, - colorAccent: AccentColors.defaultDark, - rippleColor: RippleColors.default, - searchBarColor: "#1F1F1F", - menuColor: "#242529", - filterColor: "#FFEB3B", - dividerColor: "rgba(255,255,255,0.15)", - colorDisabled: "rgba(33,33,33,255)", - colorButtonText: "#FFFFFF", - statusBar: StatusBarStyle.LIGHT, - ...TextColors.dark, -}; - /** * Midnight Dusk */ @@ -75,7 +57,7 @@ export const midnightDuskTheme = { searchBarColor: "#201F27", menuColor: "#201F27", filterColor: "#FFEB3B", - dividerColor: "rgba(255,255,255,0.1)", + dividerColor: DividerColors.DARK, colorDisabled: "rgba(57,57,57,255)", colorButtonText: "#FFFFFF", statusBar: StatusBarStyle.LIGHT, @@ -96,32 +78,12 @@ export const greenAppleTheme = { searchBarColor: "#303135", menuColor: "#242529", filterColor: "#FFEB3B", - dividerColor: "rgba(255,255,255,0.1)", + dividerColor: DividerColors.DARK, colorDisabled: "rgba(57,57,57,255)", colorButtonText: "#000000", statusBar: StatusBarStyle.LIGHT, }; -/** - * Hot Pink Theme - */ - -export const hotPinkTheme = { - id: 6, - name: "AMOLED Hot Pink", - ...PrimaryColors.amoled, - ...TextColors.dark, - colorAccent: AccentColors.hotPink, - rippleColor: RippleColors.hotPink, - searchBarColor: "#1F1F1F", - menuColor: "#242529", - filterColor: "#FFEB3B", - dividerColor: "rgba(255,255,255,0.15)", - colorDisabled: "rgba(33,33,33,255)", - colorButtonText: "#FFFFFF", - statusBar: StatusBarStyle.LIGHT, -}; - /** * Strawberry Daiquiri */ @@ -135,7 +97,7 @@ export const strawberryDaiquiri = { searchBarColor: "#303135", menuColor: "#242529", filterColor: "#FFEB3B", - dividerColor: "rgba(255,255,255,0.1)", + dividerColor: DividerColors.DARK, colorDisabled: "rgba(57,57,57,255)", colorButtonText: "#FFFFFF", statusBar: StatusBarStyle.LIGHT, @@ -152,7 +114,7 @@ export const irisBlueTheme = { searchBarColor: "#393e46", menuColor: "#393e46", filterColor: "#FFEB3B", - dividerColor: "rgba(255,255,255,0.1)", + dividerColor: DividerColors.DARK, colorDisabled: "#393e46", colorButtonText: "#16151D", statusBar: StatusBarStyle.LIGHT, @@ -168,12 +130,12 @@ export const takoTheme = { ...PrimaryColors.tako, colorAccent: AccentColors.tako, rippleColor: RippleColors.tako, - searchBarColor: "#484861", + searchBarColor: "#2A2A3C", menuColor: "#484861", filterColor: "#FFEB3B", - dividerColor: "rgba(255,255,255,0.1)", + dividerColor: DividerColors.DARK, colorDisabled: "#484861", - colorButtonText: "#2C2C3B", + colorButtonText: "#000000", statusBar: StatusBarStyle.LIGHT, ...TextColors.dark, }; @@ -191,7 +153,7 @@ export const yinYangTheme = { searchBarColor: "#484861", menuColor: "#484861", filterColor: "#FFEB3B", - dividerColor: "rgba(255,255,255,0.1)", + dividerColor: DividerColors.DARK, colorDisabled: "#484861", colorButtonText: "#000000", statusBar: StatusBarStyle.LIGHT, @@ -210,9 +172,21 @@ export const springBlossomTheme = { rippleColor: RippleColors.springBlossom, searchBarColor: PrimaryColors.springBlossom.colorPrimary, menuColor: "#FFFFFF", - dividerColor: "rgba(0,0,0,0.1)", + dividerColor: DividerColors.LIGHT, filterColor: "#FFC107", colorDisabled: PrimaryColors.springBlossom.colorPrimary, colorButtonText: "#FFFFFF", statusBar: StatusBarStyle.DARK, }; + +export const colorsAmoled = { + ...PrimaryColors.amoled, + ...TextColors.dark, + statusBar: StatusBarStyle.LIGHT, + searchBarColor: "#1F1F1F", + menuColor: "#242529", + filterColor: "#FFEB3B", + dividerColor: "rgba(255,255,255,0.15)", + colorDisabled: "rgba(33,33,33,255)", + colorButtonText: "#FFFFFF", +};