From 5af6a1be2d32bf403f45e9012420dea8292cacd4 Mon Sep 17 00:00:00 2001
From: Rui Ying <git@ruiying.io>
Date: Sat, 10 Dec 2022 05:43:29 -0800
Subject: [PATCH] Update styles to match MD3

---
 patches/react-native-paper+4.12.5.patch | 44 -------------------
 patches/react-native-paper+5.0.1.patch  | 57 +++++++++++++++++++++++++
 src/App.tsx                             |  5 +--
 src/components/AssignmentCard.tsx       |  9 +---
 src/components/CardWrapper.tsx          |  3 +-
 src/components/CourseCard.tsx           |  6 +--
 src/components/Empty.tsx                |  4 +-
 src/components/FileCard.tsx             |  9 +---
 src/components/Filter.tsx               |  3 +-
 src/components/NoticeCard.tsx           |  9 +---
 src/components/TableCell.tsx            |  4 +-
 src/components/TextButton.tsx           | 10 +++--
 src/constants/Colors.ts                 |  6 +++
 src/screens/AssignmentSubmission.tsx    |  2 +-
 src/screens/FileDetail.tsx              |  4 +-
 src/screens/Search.tsx                  |  6 ++-
 16 files changed, 96 insertions(+), 85 deletions(-)
 delete mode 100644 patches/react-native-paper+4.12.5.patch
 create mode 100644 patches/react-native-paper+5.0.1.patch

diff --git a/patches/react-native-paper+4.12.5.patch b/patches/react-native-paper+4.12.5.patch
deleted file mode 100644
index b6000119..00000000
--- a/patches/react-native-paper+4.12.5.patch
+++ /dev/null
@@ -1,44 +0,0 @@
-diff --git a/node_modules/react-native-paper/src/components/Typography/Caption.tsx b/node_modules/react-native-paper/src/components/Typography/Caption.tsx
-index 4e679d7..9e498a0 100644
---- a/node_modules/react-native-paper/src/components/Typography/Caption.tsx
-+++ b/node_modules/react-native-paper/src/components/Typography/Caption.tsx
-@@ -44,6 +44,5 @@ const styles = StyleSheet.create({
-     fontSize: 12,
-     lineHeight: 20,
-     marginVertical: 2,
--    letterSpacing: 0.4,
-   },
- });
-diff --git a/node_modules/react-native-paper/src/components/Typography/Paragraph.tsx b/node_modules/react-native-paper/src/components/Typography/Paragraph.tsx
-index dbd0324..8663291 100644
---- a/node_modules/react-native-paper/src/components/Typography/Paragraph.tsx
-+++ b/node_modules/react-native-paper/src/components/Typography/Paragraph.tsx
-@@ -43,6 +43,5 @@ const styles = StyleSheet.create({
-     fontSize: 14,
-     lineHeight: 20,
-     marginVertical: 2,
--    letterSpacing: 0.25,
-   },
- });
-diff --git a/node_modules/react-native-paper/src/components/Typography/Subheading.tsx b/node_modules/react-native-paper/src/components/Typography/Subheading.tsx
-index 9f7fd08..d082cad 100644
---- a/node_modules/react-native-paper/src/components/Typography/Subheading.tsx
-+++ b/node_modules/react-native-paper/src/components/Typography/Subheading.tsx
-@@ -45,6 +45,5 @@ const styles = StyleSheet.create({
-     fontSize: 16,
-     lineHeight: 24,
-     marginVertical: 2,
--    letterSpacing: 0.5,
-   },
- });
-diff --git a/node_modules/react-native-paper/src/components/Typography/Title.tsx b/node_modules/react-native-paper/src/components/Typography/Title.tsx
-index da56eac..7513748 100644
---- a/node_modules/react-native-paper/src/components/Typography/Title.tsx
-+++ b/node_modules/react-native-paper/src/components/Typography/Title.tsx
-@@ -43,6 +43,5 @@ const styles = StyleSheet.create({
-     fontSize: 20,
-     lineHeight: 30,
-     marginVertical: 2,
--    letterSpacing: 0.15,
-   },
- });
diff --git a/patches/react-native-paper+5.0.1.patch b/patches/react-native-paper+5.0.1.patch
new file mode 100644
index 00000000..5de71982
--- /dev/null
+++ b/patches/react-native-paper+5.0.1.patch
@@ -0,0 +1,57 @@
+diff --git a/node_modules/react-native-paper/src/components/IconButton/IconButton.tsx b/node_modules/react-native-paper/src/components/IconButton/IconButton.tsx
+index 8809882..c7aae22 100644
+--- a/node_modules/react-native-paper/src/components/IconButton/IconButton.tsx
++++ b/node_modules/react-native-paper/src/components/IconButton/IconButton.tsx
+@@ -146,7 +146,7 @@ const IconButton = React.forwardRef<View, Props>(
+         customContainerColor,
+       });
+ 
+-    const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5;
++    const buttonSize = size * 1.5;
+ 
+     const borderStyles = {
+       borderWidth: isV3 && mode === 'outlined' && !selected ? 1 : 0,
+diff --git a/node_modules/react-native-paper/src/components/Typography/v2/Caption.tsx b/node_modules/react-native-paper/src/components/Typography/v2/Caption.tsx
+index 135e36a..48e122f 100644
+--- a/node_modules/react-native-paper/src/components/Typography/v2/Caption.tsx
++++ b/node_modules/react-native-paper/src/components/Typography/v2/Caption.tsx
+@@ -45,6 +45,5 @@ const styles = StyleSheet.create({
+     fontSize: 12,
+     lineHeight: 20,
+     marginVertical: 2,
+-    letterSpacing: 0.4,
+   },
+ });
+diff --git a/node_modules/react-native-paper/src/components/Typography/v2/Paragraph.tsx b/node_modules/react-native-paper/src/components/Typography/v2/Paragraph.tsx
+index 13b7d62..dec8598 100644
+--- a/node_modules/react-native-paper/src/components/Typography/v2/Paragraph.tsx
++++ b/node_modules/react-native-paper/src/components/Typography/v2/Paragraph.tsx
+@@ -44,6 +44,5 @@ const styles = StyleSheet.create({
+     fontSize: 14,
+     lineHeight: 20,
+     marginVertical: 2,
+-    letterSpacing: 0.25,
+   },
+ });
+diff --git a/node_modules/react-native-paper/src/components/Typography/v2/Subheading.tsx b/node_modules/react-native-paper/src/components/Typography/v2/Subheading.tsx
+index 37a1cad..aba08f8 100644
+--- a/node_modules/react-native-paper/src/components/Typography/v2/Subheading.tsx
++++ b/node_modules/react-native-paper/src/components/Typography/v2/Subheading.tsx
+@@ -45,6 +45,5 @@ const styles = StyleSheet.create({
+     fontSize: 16,
+     lineHeight: 24,
+     marginVertical: 2,
+-    letterSpacing: 0.5,
+   },
+ });
+diff --git a/node_modules/react-native-paper/src/components/Typography/v2/Title.tsx b/node_modules/react-native-paper/src/components/Typography/v2/Title.tsx
+index d8592b4..b110414 100644
+--- a/node_modules/react-native-paper/src/components/Typography/v2/Title.tsx
++++ b/node_modules/react-native-paper/src/components/Typography/v2/Title.tsx
+@@ -44,6 +44,5 @@ const styles = StyleSheet.create({
+     fontSize: 20,
+     lineHeight: 30,
+     marginVertical: 2,
+-    letterSpacing: 0.15,
+   },
+ });
diff --git a/src/App.tsx b/src/App.tsx
index 346aca4e..d27a2e5e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -27,7 +27,7 @@ import {
   useTheme,
   Provider as PaperProvider,
   DefaultTheme as PaperDefaultTheme,
-  DarkTheme as PaperDarkTheme,
+  MD3DarkTheme as PaperDarkTheme,
 } from 'react-native-paper';
 import codePush from 'react-native-code-push';
 import {Provider as StoreProvider} from 'react-redux';
@@ -607,7 +607,7 @@ const BrandPaperDefaultTheme: typeof PaperDefaultTheme = {
   colors: {
     ...PaperDefaultTheme.colors,
     primary: '#9c27b0',
-    accent: '#9c27b0',
+    surface: '#ffffff',
   },
 };
 const BrandPaperDarkTheme: typeof PaperDarkTheme = {
@@ -615,7 +615,6 @@ const BrandPaperDarkTheme: typeof PaperDarkTheme = {
   colors: {
     ...PaperDarkTheme.colors,
     primary: '#bb86fc',
-    accent: '#bb86fc',
   },
 };
 
diff --git a/src/components/AssignmentCard.tsx b/src/components/AssignmentCard.tsx
index 71880e4e..27245864 100644
--- a/src/components/AssignmentCard.tsx
+++ b/src/components/AssignmentCard.tsx
@@ -1,12 +1,6 @@
 import {memo} from 'react';
 import {StyleSheet, View} from 'react-native';
-import {
-  Caption,
-  Paragraph,
-  Title,
-  Colors,
-  Subheading,
-} from 'react-native-paper';
+import {Caption, Paragraph, Title, Subheading} from 'react-native-paper';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import dayjs from 'dayjs';
@@ -15,6 +9,7 @@ import {Assignment} from 'data/types/state';
 import {removeTags} from 'helpers/html';
 import {getLocale} from 'helpers/i18n';
 import CardWrapper, {CardWrapperProps} from 'components/CardWrapper';
+import Colors from 'constants/Colors';
 
 export interface AssignmentCardProps extends CardWrapperProps {
   data: Assignment;
diff --git a/src/components/CardWrapper.tsx b/src/components/CardWrapper.tsx
index 74a3d627..d5c559cb 100644
--- a/src/components/CardWrapper.tsx
+++ b/src/components/CardWrapper.tsx
@@ -1,9 +1,10 @@
 import {PropsWithChildren, useRef} from 'react';
 import {View, StyleSheet} from 'react-native';
-import {TouchableRipple, Colors, useTheme, Checkbox} from 'react-native-paper';
+import {TouchableRipple, useTheme, Checkbox} from 'react-native-paper';
 import Interactable from 'react-native-interactable';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import Colors from 'constants/Colors';
 
 export interface CardWrapperProps {
   fav?: boolean;
diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index 205c6500..7e8a5d65 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -36,17 +36,17 @@ const CourseCard: React.FC<React.PropsWithChildren<CourseCardProps>> = ({
         </View>
         <View style={styles.countSections}>
           <View style={styles.section}>
-            <Icon name="notifications" color={theme.colors.placeholder} />
+            <Icon name="notifications" color={theme.colors.outline} />
             <Caption style={styles.sectionText}>{unreadNoticeCount}</Caption>
           </View>
           <View style={styles.section}>
-            <Icon name="event" color={theme.colors.placeholder} />
+            <Icon name="event" color={theme.colors.outline} />
             <Caption style={styles.sectionText}>
               {unfinishedAssignmentCount}
             </Caption>
           </View>
           <View style={styles.section}>
-            <Icon name="folder" color={theme.colors.placeholder} />
+            <Icon name="folder" color={theme.colors.outline} />
             <Caption style={styles.sectionText}>{unreadFileCount}</Caption>
           </View>
         </View>
diff --git a/src/components/Empty.tsx b/src/components/Empty.tsx
index dc22a460..54822c8e 100644
--- a/src/components/Empty.tsx
+++ b/src/components/Empty.tsx
@@ -12,10 +12,10 @@ const Empty: React.FC<React.PropsWithChildren<unknown>> = () => {
       <Icon
         style={Styles.spacey1}
         name="check-circle"
-        color={theme.colors.placeholder}
+        color={theme.colors.outline}
         size={56}
       />
-      <Text style={[Styles.spacey1, {color: theme.colors.placeholder}]}>
+      <Text style={[Styles.spacey1, {color: theme.colors.outline}]}>
         {t('empty')}
       </Text>
     </View>
diff --git a/src/components/FileCard.tsx b/src/components/FileCard.tsx
index 69dee8b4..b95d361a 100644
--- a/src/components/FileCard.tsx
+++ b/src/components/FileCard.tsx
@@ -1,15 +1,10 @@
 import {memo} from 'react';
 import {StyleSheet, View} from 'react-native';
-import {
-  Caption,
-  Paragraph,
-  Title,
-  Colors,
-  Subheading,
-} from 'react-native-paper';
+import {Caption, Paragraph, Title, Subheading} from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import dayjs from 'dayjs';
 import Styles from 'constants/Styles';
+import Colors from 'constants/Colors';
 import {File} from 'data/types/state';
 import {removeTags} from 'helpers/html';
 import CardWrapper, {CardWrapperProps} from './CardWrapper';
diff --git a/src/components/Filter.tsx b/src/components/Filter.tsx
index 70a1d577..0291c2ad 100644
--- a/src/components/Filter.tsx
+++ b/src/components/Filter.tsx
@@ -1,6 +1,6 @@
 import {memo, useCallback, useEffect, useState} from 'react';
 import {LayoutChangeEvent, Platform, StyleSheet, View} from 'react-native';
-import {Badge, Colors, Divider, List, Surface, Text} from 'react-native-paper';
+import {Badge, Divider, List, Surface, Text} from 'react-native-paper';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -9,6 +9,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import {t} from 'helpers/i18n';
+import Colors from 'constants/Colors';
 
 export type FilterSelection =
   | 'all'
diff --git a/src/components/NoticeCard.tsx b/src/components/NoticeCard.tsx
index c985cf9e..a98edd29 100644
--- a/src/components/NoticeCard.tsx
+++ b/src/components/NoticeCard.tsx
@@ -1,15 +1,10 @@
 import {memo} from 'react';
 import {StyleSheet, View} from 'react-native';
-import {
-  Caption,
-  Paragraph,
-  Title,
-  Colors,
-  Subheading,
-} from 'react-native-paper';
+import {Caption, Paragraph, Title, Subheading} from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import dayjs from 'dayjs';
 import Styles from 'constants/Styles';
+import Colors from 'constants/Colors';
 import {Notice} from 'data/types/state';
 import {removeTags} from 'helpers/html';
 import CardWrapper, {CardWrapperProps} from './CardWrapper';
diff --git a/src/components/TableCell.tsx b/src/components/TableCell.tsx
index 8e12c5e1..c178f539 100644
--- a/src/components/TableCell.tsx
+++ b/src/components/TableCell.tsx
@@ -79,7 +79,7 @@ const TableCell: React.FC<React.PropsWithChildren<TableCellProps>> = ({
               style={styles.icon}
               name={iconName}
               size={21}
-              color={theme.colors.text}
+              color={theme.colors.onSurface}
             />
             {badge && (
               <Badge
@@ -111,7 +111,7 @@ const TableCell: React.FC<React.PropsWithChildren<TableCellProps>> = ({
         {type === 'input' ? (
           <TextInput
             keyboardType="number-pad"
-            style={[styles.input, {color: theme.colors.text}]}
+            style={[styles.input, {color: theme.colors.onSurface}]}
             value={inputValue}
             onChangeText={onInputValueChange}
           />
diff --git a/src/components/TextButton.tsx b/src/components/TextButton.tsx
index 56cf46a2..2b20b6d9 100644
--- a/src/components/TextButton.tsx
+++ b/src/components/TextButton.tsx
@@ -1,5 +1,5 @@
-import {TextProps, TouchableOpacity, TouchableOpacityProps} from 'react-native';
-import {Text, useTheme} from 'react-native-paper';
+import {TouchableOpacity, TouchableOpacityProps} from 'react-native';
+import {Text, TextProps, useTheme} from 'react-native-paper';
 import Styles from 'constants/Styles';
 
 export interface TextButtonProps extends TextProps {
@@ -26,7 +26,11 @@ const TextButton: React.FC<React.PropsWithChildren<TextButtonProps>> = ({
       disabled={disabled}>
       <Text
         style={[
-          {color: disabled ? theme.colors.disabled : theme.colors.primary},
+          {
+            color: disabled
+              ? theme.colors.surfaceDisabled
+              : theme.colors.primary,
+          },
           style,
         ]}
         numberOfLines={1}
diff --git a/src/constants/Colors.ts b/src/constants/Colors.ts
index 59743ce8..a5c7f3e4 100644
--- a/src/constants/Colors.ts
+++ b/src/constants/Colors.ts
@@ -13,4 +13,10 @@ const theme =
 export default {
   plainTheme,
   theme,
+  red500: '#f44336',
+  blue500: '#2196f3',
+  green500: '#4caf50',
+  orange500: '#ff9800',
+  yellow500: '#ffeb3b',
+  grey500: '#9e9e9e',
 };
diff --git a/src/screens/AssignmentSubmission.tsx b/src/screens/AssignmentSubmission.tsx
index 1a3113a6..14febedf 100644
--- a/src/screens/AssignmentSubmission.tsx
+++ b/src/screens/AssignmentSubmission.tsx
@@ -215,7 +215,7 @@ const AssignmentSubmission: React.FC<
                 attachmentResult || removeAttachment
                   ? {
                       textDecorationLine: 'line-through',
-                      color: theme.colors.disabled,
+                      color: theme.colors.surfaceDisabled,
                     }
                   : undefined
               }
diff --git a/src/screens/FileDetail.tsx b/src/screens/FileDetail.tsx
index 46c5697e..e940b66d 100644
--- a/src/screens/FileDetail.tsx
+++ b/src/screens/FileDetail.tsx
@@ -142,10 +142,10 @@ const FileDetail: React.FC<
           <Icon
             style={Styles.spacey1}
             name="error"
-            color={theme.colors.placeholder}
+            color={theme.colors.outline}
             size={56}
           />
-          <Text style={[Styles.spacey1, {color: theme.colors.placeholder}]}>
+          <Text style={[Styles.spacey1, {color: theme.colors.outline}]}>
             {t('fileDownloadFailed')}
           </Text>
         </View>
diff --git a/src/screens/Search.tsx b/src/screens/Search.tsx
index 838b7eca..ab8acb6c 100644
--- a/src/screens/Search.tsx
+++ b/src/screens/Search.tsx
@@ -49,7 +49,9 @@ const Search: React.FC<
     <SafeArea>
       <View style={Styles.flex1}>
         <Searchbar
-          style={styles.searchBar}
+          style={[styles.searchBar, {backgroundColor: theme.colors.surface}]}
+          elevation={0}
+          placeholderTextColor={theme.colors.outline}
           placeholder={t('searchPlaceholder')}
           onChangeText={setSearchQuery}
           value={searchQuery}
@@ -102,7 +104,7 @@ const Search: React.FC<
                   style={[
                     styles.header,
                     {
-                      color: theme.colors.placeholder,
+                      color: theme.colors.outline,
                       backgroundColor: theme.dark
                         ? 'black'
                         : theme.colors.background,