History and UI fixes

src/redux/history/history.reducer.js

@@ -26,7 +26,7 @@ const historyReducer = (state = initialState, action) => {
         //         ),
         //     };
         case CLEAR_HISTORY:
-            return { ...state, loading: [] };
+            return { ...state, loading: false, history: [] };
         default:
             return state;
     }

src/screens/Browse/components/SourceCard.js

@@ -16,7 +16,7 @@ const ExtensionCard = ({ item, theme, isPinned }) => {
         navigation.navigate("Extension", {
             sourceId: item.sourceId,
             sourceName: item.sourceName,
-            sourceUrl: item.url,
+            url: item.url,
         });
 
     return (

src/screens/History/History.js

@@ -93,10 +93,10 @@ const History = ({ navigation }) => {
                     paddingHorizontal: 16,
                 }}
                 data={searchText ? searchResults : history}
-                keyExtractor={(index) => index.toString()}
+                keyExtractor={(item, index) => item.date}
                 renderItem={({ item }) => (
                     <FlatList
-                        keyExtractor={(item, index) => index.toString()}
+                        keyExtractor={(item, index) => item.novelId.toString()}
                         data={item.novels}
                         renderItem={renderHistoryCard}
                         ListHeaderComponent={

src/screens/More/components/DisplayModeModal.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View, Text, Pressable } from "react-native";
 import { Portal, Modal, Checkbox } from "react-native-paper";
 import { setAppSettings } from "../../../redux/settings/settings.actions";
 
@@ -18,20 +18,39 @@ const DisplayModeModal = ({
 
     const renderCheckboxes = () => {
         return displayModes.map((mode) => (
-            <Checkbox.Item
+            <View
                 key={mode.displayMode}
-                label={mode.label}
-                labelStyle={{ color: theme.textColorPrimary }}
-                status={
-                    displayMode === mode.displayMode ? "checked" : "unchecked"
-                }
-                mode="ios"
-                uncheckedColor={theme.textColorSecondary}
-                color={theme.colorAccent}
-                onPress={() =>
-                    dispatch(setAppSettings("displayMode", mode.displayMode))
-                }
-            />
+                style={[
+                    {
+                        borderRadius: 8,
+                        overflow: "hidden",
+                        marginVertical: 4,
+                    },
+                    displayMode === mode.displayMode && {
+                        backgroundColor: theme.rippleColor,
+                    },
+                ]}
+            >
+                <Pressable
+                    android_ripple={{
+                        color: theme.rippleColor,
+                    }}
+                    style={{
+                        paddingHorizontal: 16,
+                        paddingVertical: 12,
+                        justifyContent: "space-between",
+                    }}
+                    onPress={() =>
+                        dispatch(
+                            setAppSettings("displayMode", mode.displayMode)
+                        )
+                    }
+                >
+                    <Text style={{ color: theme.textColorPrimary }}>
+                        {mode.label}
+                    </Text>
+                </Pressable>
+            </View>
         ));
     };
 

src/screens/More/components/GridSizeModal.js

@@ -46,17 +46,6 @@ const GridSizeModal = ({
                 >
                     {`${novelsPerRow} per row`}
                 </Text>
-                {/* <Slider
-                    style={styles.slider}
-                    value={novelsPerRow}
-                    minimumValue={1}
-                    maximumValue={5}
-                    step={1}
-                    minimumTrackTintColor={theme.colorAccent}
-                    maximumTrackTintColor="#000000"
-                    thumbTintColor={theme.colorAccent}
-                    onValueChange={(value) => dispatch(setNovelsPerRow(value))}
-                /> */}
                 <RadioButtonGroup
                     onValueChange={(value) => dispatch(setNovelsPerRow(value))}
                     value={novelsPerRow}

src/screens/More/components/ThemeModal.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
+import { Pressable, StyleSheet, View, Text } from "react-native";
 import { Portal, Modal, Checkbox } from "react-native-paper";
 
 import { setStatusBarStyle } from "expo-status-bar";
@@ -8,32 +8,53 @@ import ImmersiveMode from "react-native-immersive-mode";
 
 const ThemeModal = ({ themeModalVisible, hidethemeModal, dispatch, theme }) => {
     const themes = [
-        { id: 0, name: "AMOLED Dark", statusBar: "light" },
         { id: 1, name: "Light", statusBar: "dark" },
+        { id: 7, name: "Strawberry Daiquiri", statusBar: "dark" },
         { id: 2, name: "Dark", statusBar: "light" },
         { id: 3, name: "Midnight Dusk", statusBar: "light" },
-        { id: 4, name: "Lime", statusBar: "light" },
-        { id: 6, name: "Hot Pink", statusBar: "light" },
-        { id: 7, name: "Strawberry Daiquiri", statusBar: "dark" },
+        { id: 4, name: "Green Apple", statusBar: "light" },
         { id: 5, name: "Iris Blue", statusBar: "light" },
+        { id: 0, name: "AMOLED Dark", statusBar: "light" },
+        { id: 6, name: "AMOLED Hot Pink", statusBar: "light" },
     ];
 
-    const renderThemeCheckboxes = () =>
-        themes.map((item) => (
-            <Checkbox.Item
-                key={item.id}
-                label={item.name}
-                labelStyle={{ color: theme.textColorPrimary }}
-                status={theme.id === item.id ? "checked" : "unchecked"}
-                mode="ios"
-                color={theme.colorAccent}
+    const ThemeItem = ({ item }) => (
+        <View
+            style={[
+                {
+                    borderRadius: 8,
+                    overflow: "hidden",
+                    marginVertical: 4,
+                },
+                theme.id === item.id && {
+                    backgroundColor: theme.rippleColor,
+                },
+            ]}
+        >
+            <Pressable
+                android_ripple={{
+                    color: theme.rippleColor,
+                }}
+                style={{
+                    paddingHorizontal: 16,
+                    paddingVertical: 12,
+                    justifyContent: "space-between",
+                }}
                 onPress={() => {
                     dispatch(setAppTheme(item.id));
                     setStatusBarStyle(item.statusBar);
                     ImmersiveMode.setBarColor(item.colorPrimary);
                 }}
-            />
-        ));
+            >
+                <Text style={{ color: theme.textColorPrimary }}>
+                    {item.name}
+                </Text>
+            </Pressable>
+        </View>
+    );
+
+    const renderThemeCheckboxes = () =>
+        themes.map((item) => <ThemeItem item={item} key={item.id} />);
 
     return (
         <Portal>

src/screens/Updates/components/UpdatesItem.js

@@ -1,15 +1,13 @@
 import React from "react";
-import { View, Text, Image, StyleSheet } from "react-native";
+import { View, Text, StyleSheet, Pressable } from "react-native";
 import FastImage from "react-native-fast-image";
-import { TouchableRipple } from "react-native-paper";
 
 const UpdateCard = ({ item, theme, onPress }) => {
     return (
-        <TouchableRipple
+        <Pressable
             style={styles.updateCard}
             onPress={onPress}
-            rippleColor={theme.rippleColor}
-            borderless
+            android_ripple={{ color: theme.rippleColor }}
         >
             <>
                 <FastImage
@@ -41,7 +39,7 @@ const UpdateCard = ({ item, theme, onPress }) => {
                     </Text>
                 </View>
             </>
-        </TouchableRipple>
+        </Pressable>
     );
 };
 

src/theme/theme.js

@@ -23,7 +23,7 @@ export const lightTheme = {
     textColorPrimary: "#000000",
     textColorSecondary: "rgba(0,0,0,0.54)",
     textColorHint: "rgba(0,0,0,0.38)",
-    rippleColor: "rgba(0,0,0,0.06)",
+    rippleColor: "rgba(41,121,255,0.12)",
     searchBarColor: "#FFFFFF",
     menuColor: "#FFFFFF",
     dividerColor: "rgba(0,0,0,0.1)",
@@ -105,7 +105,7 @@ export const midnightDuskTheme = {
 
 export const limeTheme = {
     id: 4,
-    name: "Lime",
+    name: "Green Apple",
     colorPrimary: "#201F27",
     colorPrimaryDark: "#16151D",
     colorAccent: "#48E484",
@@ -128,7 +128,7 @@ export const limeTheme = {
 
 export const hotPinkTheme = {
     id: 6,
-    name: "Hot Pink",
+    name: "AMOLED Hot Pink",
     colorPrimary: "#000000",
     colorPrimaryDark: "#000000",
     colorAccent: "#FF3399",
@@ -177,7 +177,7 @@ export const irisBlueTheme = {
     textColorPrimary: "#FFFFFF",
     textColorSecondary: "rgba(255,255,255,0.7)",
     textColorHint: "rgba(255,255,255,0.5)",
-    rippleColor: "rgba(255,255,255,0.06)",
+    rippleColor: "rgba(0,173,181,0.12)",
     searchBarColor: "#393e46",
     menuColor: "#393e46",
     filterColor: "#FFEB3B",