Beta

package.json

@@ -24,6 +24,7 @@
     "expo": "~40.0.0",
     "expo-app-loading": "^1.0.1",
     "expo-font": "~8.4.0",
+    "expo-linear-gradient": "~8.4.0",
     "expo-web-browser": "~8.6.0",
     "nanoid": "^3.1.20",
     "react": "16.13.1",

src/components/About/DependencyList.tsx

@@ -8,12 +8,8 @@ const DependencyList = ({
   navigation,
 }: Pick<Props, "navigation">): JSX.Element => {
   return (
-    <List.Section
-      style={{ marginTop: 20 }}
-      accessibilityComponentType=""
-      accessibilityTraits=""
-    >
-      <Divider accessibilityComponentType="" accessibilityTraits="" />
+    <List.Section style={{ marginTop: 20 }}>
+      <Divider />
       <List.Item
         title="Expo"
         description="Used for app packaging and distribution."
@@ -25,10 +21,8 @@ const DependencyList = ({
           />
         )}
         onPress={() => openBrowserAsync("https://expo.io/")}
-        accessibilityComponentType=""
-        accessibilityTraits=""
       />
-      <Divider accessibilityComponentType="" accessibilityTraits="" />
+      <Divider />
       <List.Item
         title="React Native"
         description="A framework for building native apps."
@@ -40,10 +34,8 @@ const DependencyList = ({
           />
         )}
         onPress={() => openBrowserAsync("https://reactnative.dev/")}
-        accessibilityComponentType=""
-        accessibilityTraits=""
       />
-      <Divider accessibilityComponentType="" accessibilityTraits="" />
+      <Divider />
       <List.Item
         title="React Native Paper"
         description="Collection of customizable components."
@@ -55,10 +47,8 @@ const DependencyList = ({
           />
         )}
         onPress={() => openBrowserAsync("https://reactnativepaper.com/")}
-        accessibilityComponentType=""
-        accessibilityTraits=""
       />
-      <Divider accessibilityComponentType="" accessibilityTraits="" />
+      <Divider />
       <List.Item
         title="Full list"
         description="A list of all the open source libraries being used."
@@ -70,10 +60,8 @@ const DependencyList = ({
           />
         )}
         onPress={() => navigation.navigate("Dependencies")}
-        accessibilityComponentType=""
-        accessibilityTraits=""
       />
-      <Divider accessibilityComponentType="" accessibilityTraits="" />
+      <Divider />
     </List.Section>
   );
 };

src/components/DarkModeSwitch.tsx

@@ -31,8 +31,6 @@ const DarkModeSwitch = (props: Props): JSX.Element => {
           return !prev;
         })
       }
-      accessibilityComponentType=""
-      accessibilityTraits=""
     />
   );
 };

src/components/Dependencies/LicensesListItem.tsx

@@ -48,12 +48,8 @@ const LicensesListItem = ({
       description={`${version} • ${licenses} • ${username}`}
       style={{ margin: 5, ...style }}
       onPress={() => onPress(repository)}
-      accessibilityComponentType=""
-      accessibilityTraits=""
       left={(props) => (
         <Avatar.Image
-          accessibilityComponentType=""
-          accessibilityTraits=""
           {...props}
           style={{ ...styles.avatar, ...props.style, ...leftStyle }}
           source={{ uri: image }}

src/components/Home/SubjectCard.tsx

@@ -70,6 +70,19 @@ const SubjectCard = ({ index, cardProps }: SubjectCardProps): JSX.Element => {
   const setSubject = (val: Subject) => {
     setScores((prev) => {
       const newScores = prev.scores;
+
+      if (
+        val === "Link Modules" &&
+        newScores[index].subject !== "Link Modules"
+      ) {
+        setGrade("M");
+      } else if (
+        val !== "Link Modules" &&
+        newScores[index].subject === "Link Modules"
+      ) {
+        setGrade("H3");
+      }
+
       newScores[index].subject = val;
       newScores[index].points = gradeToPoints(newScores[index].grade, val);
       return { ...prev, scores: [...newScores] };

src/components/Home/TotalPoints.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect } from "react";
 import { View } from "react-native";
 import { Text } from "react-native-paper";
 import ScoresContext from "../../contexts/ScoresContext";
@@ -19,11 +19,12 @@ const TotalPoints = (): JSX.Element => {
       style={{
         flexDirection: "row",
         justifyContent: "space-evenly",
-        width: "90%",
+        alignItems: "center",
+        width: "80%",
       }}
     >
-      <Text style={{ marginRight: "80%" }}>Total</Text>
-      <Text>{totalPoints}</Text>
+      <Text style={{ marginRight: "80%", fontSize: 20 }}>Total</Text>
+      <Text style={{ fontSize: 24 }}>{totalPoints}</Text>
     </View>
   );
 };

src/screens/About.tsx

@@ -46,8 +46,6 @@ export default function About({ navigation }: Props): JSX.Element {
 
                 elevation: 5,
               }}
-              accessibilityComponentType=""
-              accessibilityTraits=""
             />
           </TouchableOpacity>
           <Title>Hi, I&apos;m Peter!</Title>

src/screens/Home.tsx

@@ -1,17 +1,20 @@
 import React, { useContext } from "react";
 import { ScrollView, View } from "react-native";
 
-import { IconButton } from "react-native-paper";
+import { IconButton, useTheme } from "react-native-paper";
 import SubjectCard from "../components/Home/SubjectCard";
 import TotalPoints from "../components/Home/TotalPoints";
 import ScoresContext from "../contexts/ScoresContext";
+import { CustomTheme } from "../themes/BrandTheme";
 import { HomeProps as Props } from "../utils/StackTypes";
 
 export default function Home({ navigation }: Props): JSX.Element {
   const {
     data: { scores },
   } = useContext(ScoresContext);
 
+  const { colors } = useTheme() as CustomTheme;
+
   React.useLayoutEffect(() => {
     navigation.setOptions({
       headerRight: () => (
@@ -27,24 +30,32 @@ export default function Home({ navigation }: Props): JSX.Element {
     <View
       style={{
         alignItems: "center",
+        backgroundColor: colors.card,
+        height: "100%",
       }}
     >
       <ScrollView
         style={{
-          height: "70%",
+          height: "90%",
           width: "100%",
           padding: 18,
           paddingTop: 9,
-          marginBottom: 20,
+          backgroundColor: colors.background,
         }}
       >
         {scores.map(({ id }, index) => {
-          return (
-            <SubjectCard key={id} id={id} index={index} />
-          ); /* This won't work if multiple of the same subject is used as key */
+          return <SubjectCard key={id} id={id} index={index} />;
         })}
       </ScrollView>
-      <View style={{ backgroundColor: "purple" }}>
+      <View
+        style={{
+          width: "100%",
+          paddingTop: 20,
+          paddingBottom: 20,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
         <TotalPoints />
       </View>
     </View>

src/screens/Settings.tsx

@@ -16,24 +16,16 @@ export default function Settings({ navigation }: Props): JSX.Element {
         <IconButton
           icon="information-outline"
           onPress={() => navigation.navigate("About")}
-          accessibilityComponentType=""
-          accessibilityTraits=""
         />
       ),
     });
   }, [navigation]);
 
   return (
     <ScrollView>
-      <List.Section
-        style={{ marginBottom: -8, marginTop: 0 }}
-        accessibilityComponentType=""
-        accessibilityTraits=""
-      >
+      <List.Section style={{ marginBottom: -8, marginTop: 0 }}>
         <List.Item
           title="Dark mode"
-          accessibilityComponentType=""
-          accessibilityTraits=""
           right={(props) => (
             <DarkModeSwitch {...props} color={colors.primary} />
           )}