Implement material you

App.js

@@ -4,13 +4,18 @@ import { NavigationContainer } from "@react-navigation/native";
 import TabScreen from "./src/screens/TabScreen";
 import WatchScreen from "./src/screens/WatchScreen";
 import SelectScreen from "./src/screens/SelectScreen";
-import { Provider as PaperProvider, useTheme } from "react-native-paper";
 import GeneralSettingsScreen from "./src/screens/GeneralSettingsScreen";
 import AboutScreen from "./src/screens/AboutScreen";
 import LoadingScreen from "./src/screens/LoadingScreen";
 import { Storage } from "./src/components/Storage";
 import StartupScreen from "./src/screens/StartupScreen";
 import WeCimaExtractionScreen from "./src/screens/WeCimaExtractionScreen";
+import { getPaletteSync } from "@assembless/react-native-material-you";
+import {
+	Provider as PaperProvider,
+	useTheme,
+	MD3DarkTheme as DefaultTheme,
+} from "react-native-paper";
 
 const Stack = createNativeStackNavigator();
 
@@ -72,8 +77,23 @@ const MyStack = () => {
 };
 
 const App = () => {
+	const palette = getPaletteSync();
+
+	const theme = {
+		...DefaultTheme,
+		colors: {
+			...DefaultTheme.colors,
+			primary: palette.system_accent1[5],
+			background: "black",
+			elevation: {
+				level4: palette.system_accent1[4] + "3C",
+			},
+			secondaryContainer: palette.system_accent1[4] + "3C",
+		},
+	};
+
 	return (
-		<PaperProvider>
+		<PaperProvider theme={theme}>
 			<NavigationContainer>
 				<MyStack />
 			</NavigationContainer>

android/app/build.gradle

@@ -108,8 +108,8 @@ android {
         applicationId "com.n00nedev.nofasel"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 19
-        versionName "1.1.19"
+        versionCode 20
+        versionName "1.2.0"
     }
 
     splits {

package.json

@@ -10,6 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@assembless/react-native-material-you": "^1.0.0-beta.4",
     "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-community/hooks": "^3.0.0",
     "@react-navigation/native": "^6.1.6",

src/components/DefaultSettingsButton.js

@@ -11,20 +11,21 @@ const DefaultSettingsButton = ({ label, onPress, iconName, fontSize = 18 }) => {
 			onPress={onPress}
 			style={({ pressed }) => [
 				{
-					backgroundColor: pressed ? (theme.dark ? "#3a3b3c" : "#ddd") : null,
+					backgroundColor: pressed ? "#111" : null,
 				},
 				{
 					flexDirection: "row",
 					padding: 25,
 					alignItems: "center",
 				},
 			]}>
-			<Icon name={iconName} size={26} color={theme.dark ? "white" : "black"} />
+			<Icon name={iconName} size={26} color={theme.colors.primary} />
 			<Text
 				style={{
 					fontSize: fontSize,
 					paddingHorizontal: 25,
 					fontWeight: "bold",
+					color: theme.colors.primary,
 				}}>
 				{label}
 			</Text>

src/screens/GeneralSettingsScreen.js

@@ -19,27 +19,25 @@ const GeneralSettingsScreen = ({ navigation }) => {
 			style={{
 				backgroundColor: theme.colors.background,
 				flex: 1,
-			}}
-		>
+			}}>
 			<Pressable
 				onPress={toggleUseProxy}
 				style={({ pressed }) => [
 					{
-						backgroundColor: pressed ? (theme.dark ? "#3a3b3c" : "#ddd") : null,
+						backgroundColor: pressed ? "111" : null,
 					},
 					{
 						flexDirection: "row",
 						justifyContent: "space-between",
 						padding: 25,
 					},
-				]}
-			>
+				]}>
 				<Text
 					style={{
 						fontSize: 18,
 						fontWeight: "bold",
-					}}
-				>
+						color: theme.colors.primary,
+					}}>
 					Use Proxy for Akwam
 				</Text>
 				<Switch value={useProxy} onValueChange={toggleUseProxy} />

src/screens/SearchScreen.js

@@ -10,14 +10,16 @@ import ContentCard from "../components/ContentCard";
 import { Storage } from "../components/Storage";
 import { SafeAreaView } from "react-native-safe-area-context";
 import ReactNativeBlobUtil from "react-native-blob-util";
+import { getPaletteSync } from "@assembless/react-native-material-you";
 
 const SearchScreen = ({ navigation }) => {
 	const provider = Storage.getString("provider");
 	const common = require("../data/common.json");
 	const genres = provider == "fasel" ? common.genresFasel : common.genresHdw;
-	const theme = useTheme();
 	let allContentPath = ReactNativeBlobUtil.fs.dirs.DocumentDir;
 	let featuredContentPath = ReactNativeBlobUtil.fs.dirs.DocumentDir;
+	const theme = useTheme();
+	const palette = getPaletteSync();
 
 	const [searchText, setSearchText] = useState("");
 	const [allData, setAllData] = useState(null);
@@ -123,12 +125,21 @@ const SearchScreen = ({ navigation }) => {
 						<TextInput
 							placeholder="Search"
 							mode="flat"
-							style={styles.searchBarStyle}
-							left={<TextInput.Icon icon="magnify" color="grey" />}
+							style={{
+								...styles.searchBarStyle,
+								backgroundColor: palette.system_accent1[4] + "3C",
+							}}
+							left={
+								<TextInput.Icon
+									icon="magnify"
+									iconColor={palette.system_accent1[6]}
+								/>
+							}
 							underlineColor="transparent"
 							activeUnderlineColor="transparent"
 							cursorColor="black"
 							onChangeText={text => setSearchText(text)}
+							placeholderTextColor={palette.system_accent1[4]}
 						/>
 						<Icon
 							name="sliders"
@@ -213,7 +224,7 @@ const SearchScreen = ({ navigation }) => {
 						ref={bottomSheetRef}
 						closeOnDragDown={true}
 						closeOnPressMask={true}
-						height={800}
+						height={Dimensions.get("window").height * 0.9}
 						customStyles={{
 							wrapper: {
 								backgroundColor: "rgba(0, 0, 0, 0.75)",

src/screens/SelectScreen.js

@@ -342,6 +342,7 @@ const SelectScreen = ({ navigation, route }) => {
 						style={{
 							flexDirection: "row",
 							justifyContent: "space-between",
+							width: Dimensions.get("window").width,
 						}}>
 						<View>
 							<Text style={{ fontSize: 26, margin: 10, fontWeight: "bold" }}>

src/screens/TabScreen.js

@@ -8,8 +8,10 @@ import { BottomNavigation } from "react-native-paper";
 import CentredActivityIndicator from "../components/CentredActivityIndicator";
 import ReactNativeBlobUtil from "react-native-blob-util";
 import EntireSeasonDownloadScreen from "./EntireSeasonDownloadScreen";
+import { getPaletteSync } from "@assembless/react-native-material-you";
 
 const TabScreen = ({ navigation }) => {
+	const palette = getPaletteSync();
 	let progress = 0;
 	const provider = Storage.getString("provider");
 	const common = require("../data/common.json");
@@ -133,6 +135,7 @@ const TabScreen = ({ navigation }) => {
 				onIndexChange={setIndex}
 				renderScene={renderScene}
 				shifting={true}
+				activeColor={palette.system_accent1[5]}
 			/>
 		);
 	} else {

src/screens/WeCimaExtractionScreen.js

@@ -43,6 +43,7 @@ const WeCimaExtractionScreen = ({ route }) => {
 				{Object.entries(qualities).map(quality => {
 					return (
 						<Button
+							key={quality[0]}
 							mode="outlined"
 							style={{ marginTop: 10, borderWidth: 0 }}
 							labelStyle={{ fontSize: 18, padding: 10 }}

yarn.lock

@@ -10,6 +10,11 @@
     "@jridgewell/gen-mapping" "^0.1.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@assembless/react-native-material-you@^1.0.0-beta.4":
+  "integrity" "sha512-sgQZPu4Qzc6xfbbIpWcujh6F2Ibx0aJdge9ajQTA1N2BknNny8mDnLOMNycXKaXlk1+sjcNv+oe/h48iElSfLg=="
+  "resolved" "https://registry.npmjs.org/@assembless/react-native-material-you/-/react-native-material-you-1.0.0-beta.4.tgz"
+  "version" "1.0.0-beta.4"
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.18.6":
   "integrity" "sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q=="
   "resolved" "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz"