open-lab/lnreader
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor

Browse Source
This commit is contained in:
Rajarshee Chatterjee
2021-07-19 09:32:48 +05:30
parent db86b707e7
commit b695f57ef4
24 changed files with 354 additions and 497 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/fonts/Lora-VariableFont_wght.ttf
BIN
View File
Binary file not shown.
assets/fonts/NotoSans-Bold.ttf
BIN
View File
Binary file not shown.
assets/fonts/Nunito-Regular.ttf
BIN
View File
Binary file not shown.
assets/fonts/productsans_regular.ttf
BIN
View File
Binary file not shown.
src/components/Appbar.js
-98
View File
@@ -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 (
<TouchableRipple
borderless
onPress={() => searchRef.current.focus()}
style={[
styles.searchAppbarContainer,
{ backgroundColor: theme.searchBarColor },
]}
>
<View
style={{
flex: 1,
flexDirection: "row",
justifyContent: "space-between",
}}
>
<View style={{ flex: 1, flexDirection: "row" }}>
{screen === "Library" ? (
<IconButton
icon="magnify"
color={theme.textColorSecondary}
style={{ marginLeft: 0 }}
size={23}
/>
) : (
<IconButton
icon="arrow-left"
color={theme.textColorSecondary}
style={{ marginLeft: 0 }}
size={23}
onPress={() => navigation.goBack()}
/>
)}
<TextInput
ref={searchRef}
style={{
fontSize: 16,
color: theme.textColorSecondary,
}}
placeholder={placeholder}
placeholderTextColor={theme.textColorSecondary}
onChangeText={(text) => {
setSearchText(text);
if (screen === "Library") {
getSearchResults(text);
}
}}
onSubmitEditing={() => {
if (screen === "Extension") {
getSearchResults(searchText);
}
}}
defaultValue={searchText}
/>
</View>
{searchText !== "" && (
<IconButton
icon="close"
color={theme.textColorSecondary}
style={{ marginRight: 0 }}
size={23}
onPress={() => {
setLoading?.(true);
getNovels();
setSearchText("");
}}
/>
)}
{openWebView && (
<IconButton
icon="earth"
color={theme.textColorSecondary}
style={{ marginRight: 0 }}
size={23}
onPress={openWebView}
/>
)}
</View>
</TouchableRipple>
);
};
const styles = StyleSheet.create({
searchAppbarContainer: {
marginTop: Constants.statusBarHeight + 8,
src/components/List.js
+24 -9
View File
@@ -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 }) => (
<List.Section style={styles.listSection}>{children}</List.Section>
<PaperList.Section style={styles.listSection}>{children}</PaperList.Section>
);
const ListSubHeader = ({ children, theme }) => (
<List.Subheader
<PaperList.Subheader
style={[styles.listSubHeader, { color: theme.colorAccent }]}
>
{children}
</List.Subheader>
</PaperList.Subheader>
);
const ListItem = ({
@@ -27,7 +27,7 @@ const ListItem = ({
titleStyle,
style,
}) => (
<List.Item
<PaperList.Item
title={title}
style={style}
titleStyle={[{ color: theme.textColorPrimary }, titleStyle]}
@@ -37,7 +37,7 @@ const ListItem = ({
left={() => (
<View style={{ justifyContent: "center" }}>
{icon && (
<List.Icon
<PaperList.Icon
color={theme.colorAccent}
icon={icon}
style={{
@@ -67,13 +67,13 @@ const Divider = ({ theme }) => (
);
const InfoItem = ({ title, icon, theme }) => (
<List.Item
<PaperList.Item
title={title}
titleStyle={{ color: theme.textColorSecondary, fontSize: 14 }}
titleNumberOfLines={5}
left={() =>
icon && (
<List.Icon
<PaperList.Icon
color={theme.textColorSecondary}
icon={icon}
style={{ marginVertical: 0 }}
@@ -83,7 +83,22 @@ const InfoItem = ({ title, icon, theme }) => (
/>
);
export { ListSection, ListSubHeader, ListItem, Divider, InfoItem };
const Icon = ({ icon, theme }) => (
<PaperList.Icon
color={theme.colorAccent}
icon={icon}
style={{ margin: 0 }}
/>
);
export const List = {
Section: ListSection,
SubHeader: ListSubHeader,
Item: ListItem,
Divider,
InfoItem,
Icon,
};
const styles = StyleSheet.create({
listSection: {
src/redux/settings/settings.reducer.js
+2 -3
View File
@@ -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,
src/screens/Chapter/Chapter.js
-1
View File
@@ -422,7 +422,6 @@ const styles = StyleSheet.create({
textAlign: "center",
textAlignVertical: "center",
alignSelf: "center",
fontFamily: "noto-sans",
fontWeight: "bold",
zIndex: 1,
},
src/screens/Chapter/TextToComponent.js
+2 -9
View File
@@ -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
style={[
textStyle,
{
fontSize: textSize + getHeadingSize(size),
fontWeight: "bold",
},
]}
style={[textStyle, { fontSize: textSize + getHeadingSize(size) }]}
selectable={textSelectable}
>
{text}
src/screens/Chapter/components/ReaderSheet.js
+58 -90
View File
@@ -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 = ({
<Text style={styles.title}>{title}</Text>
);
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 (
<Bottomsheet
@@ -91,88 +102,44 @@ const ReaderSheet = ({
paddingVertical: 8,
}}
>
<ReaderSettingTitle title="Reader Theme" />
<Row>
<ToggleButton.Row
onValueChange={(value) => {
dispatch(
setReaderSettings(
"theme",
value ?? reader.theme
)
);
dispatch(
setReaderSettings(
"textColor",
textColor[value] ?? reader.textColor
)
);
}}
value={reader.theme}
>
<ToggleButton
icon={reader.theme === 1 && "check"}
color="rgba(255,255,255,0.7)"
value={1}
style={{
backgroundColor: "#000000",
marginHorizontal: 10,
borderWidth: 0,
borderRadius: 50,
borderTopRightRadius: 50,
borderBottomRightRadius: 50,
}}
/>
{/* <ToggleButton
icon={reader.theme === 5 && "check"}
color="#CCCCCC"
value={5}
style={{
backgroundColor: "#2B2C30",
marginHorizontal: 10,
borderWidth: 0,
borderRadius: 50,
borderTopRightRadius: 50,
borderBottomRightRadius: 50,
}}
/> */}
<ToggleButton
icon={reader.theme === 4 && "check"}
color="#CCCCCC"
value={4}
style={{
backgroundColor: "#292832",
marginHorizontal: 10,
borderWidth: 0,
borderRadius: 50,
borderTopRightRadius: 50,
borderBottomRightRadius: 50,
}}
/>
<ToggleButton
icon={reader.theme === 2 && "check"}
color="#111111"
value={2}
style={{
backgroundColor: "#FFFFFF",
marginHorizontal: 10,
borderRadius: 50,
}}
/>
<ToggleButton
icon={reader.theme === 3 && "check"}
color="#593100"
value={3}
style={{
backgroundColor: "#F7DFC6",
marginHorizontal: 10,
borderRadius: 50,
borderTopLeftRadius: 50,
borderBottomLeftRadius: 50,
}}
/>
</ToggleButton.Row>
</Row>
<ReaderSettingTitle title="Color" />
<View style={{ marginLeft: 16 }}>
<ScrollView horizontal={true}>
{presetThemes.map((item) => (
<ToggleButton
icon={
reader.theme === item.value &&
"check"
}
color={item.textColor}
value={item.value}
style={{
backgroundColor:
item.backgroundColor,
marginHorizontal: 10,
borderWidth: 0,
borderRadius: 50,
borderTopStartRadius: 50,
borderBottomStartRadius: 50,
}}
onPress={() => {
dispatch(
setReaderSettings(
"theme",
item.value
)
);
dispatch(
setReaderSettings(
"textColor",
item.textColor
)
);
}}
/>
))}
</ScrollView>
</View>
</Row>
<Row
style={{
@@ -400,6 +367,7 @@ const ReaderSheet = ({
style={{ backgroundColor: theme.menuColor }}
titleStyle={{
color: theme.textColorPrimary,
fontFamily: font.fontFamily,
}}
/>
))}
src/screens/Chapter/readerStyleController.js
+2
View File
@@ -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;
src/screens/More/About.js
+50 -56
View File
@@ -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 (
<>
<Appbar title="About" onBackAction={() => navigation.goBack()} />
<View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
<ListSection>
<ListItem
title="Version"
description="Stable 1.1.2"
theme={theme}
/>
<ListItem
title="Build Time"
description="17-07-21 08:00 AM"
theme={theme}
/>
<ListItem
title="What's new"
onPress={() =>
Linking.openURL(
"https://github.com/LNReader/lnreader/commits/main"
)
}
theme={theme}
/>
<Divider theme={theme} />
<ListItem
title="Discord"
description="https://discord.gg/QdcWN4MD63"
onPress={() =>
Linking.openURL("https://discord.gg/QdcWN4MD63")
}
theme={theme}
/>
<ListItem
title="Github"
description="https://github.com/LNReader/lnreader"
onPress={() =>
Linking.openURL(
"https://github.com/LNReader/lnreader"
)
}
theme={theme}
/>
<ListItem
title="Sources"
description="https://github.com/LNReader/lnreader-sources"
onPress={() =>
Linking.openURL(
"https://github.com/LNReader/lnreader-sources"
)
}
theme={theme}
/>
</ListSection>
</View>
</>
<ScreenContainer theme={theme}>
<MoreHeader title="About" navigation={navigation} theme={theme} />
<List.Section>
<List.Item
title="Version"
description="Stable 1.1.2 (17/07/21 08:00 AM)"
theme={theme}
/>
<List.Item
title="What's new"
onPress={() =>
Linking.openURL(
"https://github.com/LNReader/lnreader/releases/tag/v1.1.2"
)
}
theme={theme}
/>
<List.Divider theme={theme} />
<List.Item
title="Discord"
description="https://discord.gg/QdcWN4MD63"
onPress={() =>
Linking.openURL("https://discord.gg/QdcWN4MD63")
}
theme={theme}
/>
<List.Item
title="Github"
description="https://github.com/LNReader/lnreader"
onPress={() =>
Linking.openURL("https://github.com/LNReader/lnreader")
}
theme={theme}
/>
<List.Item
title="Sources"
description="https://github.com/LNReader/lnreader-sources"
onPress={() =>
Linking.openURL(
"https://github.com/LNReader/lnreader-sources"
)
}
theme={theme}
/>
</List.Section>
</ScreenContainer>
);
};
src/screens/More/AdvancedSettings.js
+5 -5
View File
@@ -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 (
<ScreenContainer theme={theme}>
<Appbar title="Advanced" onBackAction={() => navigation.goBack()} />
<ListSection>
<ListSubHeader theme={theme}>Data</ListSubHeader>
<ListItem
<List.Section>
<List.SubHeader theme={theme}>Data</List.SubHeader>
<List.Item
title="Clear database"
description="Delete history for novels not in your library"
onPress={showClearDatabaseDialog}
theme={theme}
/>
</ListSection>
</List.Section>
<Portal>
<Dialog
visible={clearDatabaseDialog}
src/screens/More/BackupSettings.js
+7 -12
View File
@@ -2,12 +2,7 @@ import React from "react";
import { useDispatch } from "react-redux";
import { Appbar } from "../../components/Appbar";
import {
InfoItem,
ListItem,
ListSection,
ListSubHeader,
} from "../../components/List";
import { List } from "../../components/List";
import { ScreenContainer } from "../../components/Common";
import { useTheme } from "../../hooks/reduxHooks";
@@ -25,27 +20,27 @@ const BackupSettings = ({ navigation }) => {
title="Backup"
onBackAction={() => navigation.goBack()}
/>
<ListSection>
<ListSubHeader theme={theme}>Backup</ListSubHeader>
<ListItem
<List.Section>
<List.SubHeader theme={theme}>Backup</List.SubHeader>
<List.Item
title="Create backup"
description="Can be used to restore current library"
onPress={createBackup}
theme={theme}
/>
<ListItem
<List.Item
title="Restore backup"
description="Restore library from backup file"
onPress={() => dispatch(restoreLibraryAction())}
theme={theme}
/>
<InfoItem
<List.InfoItem
title="Create backup may not work on devices with Android 9 or lower."
icon="information-outline"
description="Restore library from backup file"
theme={theme}
/>
</ListSection>
</List.Section>
</ScreenContainer>
</>
);
src/screens/More/GeneralSettings.js
+15 -17
View File
@@ -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 }) => {
<ScreenContainer theme={theme}>
<Appbar title="General" onBackAction={navigation.goBack} />
<ScrollView>
<ListSection>
<ListSubHeader theme={theme}>Display</ListSubHeader>
<ListItem
<List.Section>
<List.SubHeader theme={theme}>Display</List.SubHeader>
<List.Item
title="Display Mode"
description={displayModeLabel(displayMode)}
onPress={showDisplayModal}
theme={theme}
/>
<ListItem
<List.Item
title="Items per row in library"
description={`${novelsPerRow} items per row`}
onPress={showGridSizeModal}
theme={theme}
/>
<Divider theme={theme} />
<ListSubHeader theme={theme}>Library</ListSubHeader>
<List.Divider theme={theme} />
<List.SubHeader theme={theme}>Library</List.SubHeader>
<SwitchSetting
label="Update library on launch"
value={updateLibraryOnLaunch}
@@ -124,7 +119,8 @@ const GenralSettings = ({ navigation }) => {
}
theme={theme}
/>
<ListSubHeader theme={theme}>Auto-download</ListSubHeader>
<List.Divider theme={theme} />
<List.SubHeader theme={theme}>Auto-download</List.SubHeader>
<SwitchSetting
label="Download new chapters"
value={downloadNewChapters}
@@ -138,14 +134,16 @@ const GenralSettings = ({ navigation }) => {
}
theme={theme}
/>
<ListSubHeader theme={theme}>Theme</ListSubHeader>
<ListItem
<List.Divider theme={theme} />
<List.SubHeader theme={theme}>Theme</List.SubHeader>
<List.Item
title="Theme"
description={theme.name}
onPress={showthemeModal}
theme={theme}
/>
<ListItem
<List.Item
title="Accent Color"
description={theme.colorAccent.toUpperCase()}
onPress={showAccentColorModal}
@@ -174,7 +172,7 @@ const GenralSettings = ({ navigation }) => {
theme={theme}
/>
)}
</ListSection>
</List.Section>
</ScrollView>
<DisplayModeModal
displayMode={displayMode}
src/screens/More/More.js
+87 -113
View File
@@ -1,13 +1,15 @@
import React from "react";
import { StyleSheet, View, Image, Pressable, Text } from "react-native";
import { List, Switch } from "react-native-paper";
import { Switch } from "react-native-paper";
import { useDispatch, useSelector } from "react-redux";
import { Appbar } from "../../components/Appbar";
import { Divider, ListItem, ListSection } from "../../components/List";
import { ScreenContainer } from "../../components/Common";
import { List } from "../../components/List";
import { useSettings, useTheme } from "../../hooks/reduxHooks";
import { setAppSettings } from "../../redux/settings/settings.actions";
import { MoreHeader } from "./components/MoreHeader";
const MoreScreen = ({ navigation }) => {
const theme = useTheme();
@@ -20,119 +22,91 @@ const MoreScreen = ({ navigation }) => {
};
return (
<>
<Appbar title="More" style={{ elevation: 0 }} />
<View style={{ flex: 1, backgroundColor: theme.colorPrimaryDark }}>
<View style={{ overflow: "hidden", paddingBottom: 4 }}>
<View
style={{
paddingTop: 10,
paddingBottom: 25,
alignItems: "center",
backgroundColor: theme.colorPrimary,
elevation: 4,
}}
>
<Image
source={require("../../../assets/logo.png")}
style={{
height: 80,
width: 80,
tintColor: theme.textColorPrimary,
}}
/>
</View>
</View>
<ListSection>
<Pressable
android_ripple={{ color: theme.rippleColor }}
style={{
paddingHorizontal: 16,
paddingVertical: 12,
flexDirection: "row",
justifyContent: "space-between",
}}
onPress={enableIncognitoMode}
>
<View style={{ flexDirection: "row" }}>
<List.Icon
color={theme.colorAccent}
icon="incognito"
style={{ margin: 0 }}
/>
<View style={{ marginLeft: 16 }}>
<Text
style={{
color: theme.textColorPrimary,
fontSize: 16,
}}
>
Incognito Mode
</Text>
<Text
style={{ color: theme.textColorSecondary }}
>
Pauses reading history
</Text>
</View>
<ScreenContainer theme={theme}>
<MoreHeader title="More" navigation={navigation} theme={theme} />
<List.Section>
<Pressable
android_ripple={{ color: theme.rippleColor }}
style={{
paddingHorizontal: 16,
paddingVertical: 12,
flexDirection: "row",
justifyContent: "space-between",
}}
onPress={enableIncognitoMode}
>
<View style={{ flexDirection: "row" }}>
<List.Icon theme={theme} icon="incognito" />
<View style={{ marginLeft: 16 }}>
<Text
style={{
color: theme.textColorPrimary,
fontSize: 16,
}}
>
Incognito Mode
</Text>
<Text style={{ color: theme.textColorSecondary }}>
Pauses reading history
</Text>
</View>
<Switch
value={incognitoMode}
onValueChange={enableIncognitoMode}
color={theme.colorAccent}
style={{ marginRight: 8 }}
/>
</Pressable>
</View>
<Switch
value={incognitoMode}
onValueChange={enableIncognitoMode}
color={theme.colorAccent}
style={{ marginRight: 8 }}
/>
</Pressable>
<List.Divider theme={theme} />
<List.Item
title="Download queue"
description={
downloadQueue.length > 0 &&
downloadQueue.length + " remaining"
}
icon="progress-download"
onPress={() =>
navigation.navigate("MoreStack", {
screen: "DownloadQueue",
})
}
theme={theme}
/>
<List.Item
title="Downloads"
icon="folder-download"
onPress={() =>
navigation.navigate("MoreStack", {
screen: "Downloads",
})
}
theme={theme}
/>
<List.Divider theme={theme} />
<List.Item
title="Settings"
icon="cog-outline"
onPress={() =>
navigation.navigate("MoreStack", {
screen: "SettingsStack",
})
}
theme={theme}
/>
<ListItem
title="Download queue"
description={
downloadQueue.length > 0 &&
downloadQueue.length + " remaining"
}
icon="progress-download"
onPress={() =>
navigation.navigate("MoreStack", {
screen: "DownloadQueue",
})
}
theme={theme}
/>
<ListItem
title="Downloads"
icon="folder-download"
onPress={() =>
navigation.navigate("MoreStack", {
screen: "Downloads",
})
}
theme={theme}
/>
<ListItem
title="Settings"
icon="cog-outline"
onPress={() =>
navigation.navigate("MoreStack", {
screen: "SettingsStack",
})
}
theme={theme}
/>
<ListItem
title="About"
icon="information-outline"
onPress={() =>
navigation.navigate("MoreStack", {
screen: "About",
})
}
theme={theme}
/>
</ListSection>
</View>
</>
<List.Item
title="About"
icon="information-outline"
onPress={() =>
navigation.navigate("MoreStack", {
screen: "About",
})
}
theme={theme}
/>
</List.Section>
</ScreenContainer>
);
};
src/screens/More/ReaderSettings.js
+11 -8
View File
@@ -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.
</Text>
</View>
<ListSection>
<ListSubHeader theme={theme}>Preset</ListSubHeader>
<List.Section>
<List.SubHeader theme={theme}>Preset</List.SubHeader>
<Pressable
android_ripple={{ color: theme.rippleColor }}
style={styles.pressableListItem}
@@ -169,8 +169,9 @@ const ReaderSettings = ({ navigation }) => {
</Row>
</ScrollView>
</Pressable>
<ListSubHeader theme={theme}>Reader</ListSubHeader>
<ListItem
<List.Divider theme={theme} />
<List.SubHeader theme={theme}>Reader</List.SubHeader>
<List.Item
title="Background Color"
description={readerBackground(
reader.theme
@@ -180,7 +181,7 @@ const ReaderSettings = ({ navigation }) => {
iconColor={readerBackground(reader.theme)}
right="circle"
/>
<ListItem
<List.Item
title="Text Color"
description={
reader.textColor.toUpperCase() ||
@@ -193,7 +194,9 @@ const ReaderSettings = ({ navigation }) => {
}
right="circle"
/>
<ListSubHeader theme={theme}>Text</ListSubHeader>
<List.Divider theme={theme} />
<List.SubHeader theme={theme}>Text</List.SubHeader>
<Pressable
android_ripple={{ color: theme.rippleColor }}
style={styles.pressableListItem}
@@ -242,7 +245,7 @@ const ReaderSettings = ({ navigation }) => {
</ToggleButton.Row>
</Row>
</Pressable>
</ListSection>
</List.Section>
</ScrollView>
<ColorPickerModal
title="Reader background color"
src/screens/More/Settings.js
+6 -6
View File
@@ -2,7 +2,7 @@ import React from "react";
import { View } from "react-native";
import { Appbar } from "../../components/Appbar";
import { ListItem } from "../../components/List";
import { List } from "../../components/List";
import { useTheme } from "../../hooks/reduxHooks";
@@ -18,7 +18,7 @@ const SettingsScreen = ({ navigation }) => {
backgroundColor: theme.colorPrimaryDark,
}}
>
<ListItem
<List.Item
title="General"
icon="tune"
onPress={() =>
@@ -28,7 +28,7 @@ const SettingsScreen = ({ navigation }) => {
}
theme={theme}
/>
<ListItem
<List.Item
title="Reader"
icon="book-open-outline"
onPress={() =>
@@ -38,7 +38,7 @@ const SettingsScreen = ({ navigation }) => {
}
theme={theme}
/>
<ListItem
<List.Item
title="Tracking"
icon="sync"
onPress={() =>
@@ -48,7 +48,7 @@ const SettingsScreen = ({ navigation }) => {
}
theme={theme}
/>
<ListItem
<List.Item
title="Backup"
icon="cloud-upload-outline"
onPress={() =>
@@ -58,7 +58,7 @@ const SettingsScreen = ({ navigation }) => {
}
theme={theme}
/>
<ListItem
<List.Item
title="Advanced"
icon="code-tags"
onPress={() =>
src/screens/More/TrackerSettings.js
+8 -13
View File
@@ -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,
}}
>
<ListSection>
<ListSubHeader theme={theme}>Services</ListSubHeader>
<ListItem
<List.Section>
<List.SubHeader theme={theme}>Services</List.SubHeader>
<List.Item
title="MyAnimeList"
onPress={async () => {
if (tracker) {
@@ -82,10 +77,10 @@ const TrackerScreen = ({ navigation }) => {
{tracker && tracker.expires_in < new Date(Date.now()) && (
<>
<Divider theme={theme} />
<ListSubHeader theme={theme}>
<List.SubHeader theme={theme}>
Settings
</ListSubHeader>
<ListItem
</List.SubHeader>
<List.Item
title="Revalidate MyAnimeList"
onPress={() => {
const res = malTokenWatcher(tracker);
@@ -95,7 +90,7 @@ const TrackerScreen = ({ navigation }) => {
/>
</>
)}
</ListSection>
</List.Section>
<Portal>
<Modal
src/screens/More/components/MoreHeader.js
+39
View File
@@ -0,0 +1,39 @@
import React from "react";
import { Image, StyleSheet, View } from "react-native";
import { Appbar } from "../../../components/Appbar";
export const MoreHeader = ({ title, navigation, theme }) => (
<>
<Appbar
title={title}
onBackAction={navigation.goBack}
style={{ elevation: 0 }}
/>
<View style={{ overflow: "hidden", paddingBottom: 4 }}>
<View
style={[
styles.logoContainer,
{ backgroundColor: theme.colorPrimary },
]}
>
<Image
source={require("../../../../assets/logo.png")}
style={[styles.logo, { tintColor: theme.textColorPrimary }]}
/>
</View>
</View>
</>
);
const styles = StyleSheet.create({
logoContainer: {
paddingTop: 8,
paddingBottom: 24,
alignItems: "center",
elevation: 4,
},
logo: {
height: 80,
width: 80,
},
});
src/services/utils/constants.js
+4 -3
View File
@@ -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 = {
src/theme/colors.js
+8 -2
View File
@@ -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,
};
src/theme/fonts.js
+2 -2
View File
@@ -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"),
};
src/theme/theme.js
+24 -50
View File
@@ -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",
};