adding dark theme

serenity-kit · Jun 13, 2021 · cf44a8d · cf44a8d
1 parent 4191f15
commit cf44a8d
Show file tree

Hide file tree

Showing 35 changed files with 522 additions and 299 deletions.
diff --git a/app/App.tsx b/app/App.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Platform } from "react-native";
-import { StatusBar } from "expo-status-bar";
+import { AppearanceProvider, useColorScheme } from "react-native-appearance";
+import { StatusBar, StatusBarStyle } from "expo-status-bar";
 import App from "./src/App";
 
 const editorSource =
@@ -9,10 +10,14 @@ const editorSource =
     : { html: null };
 
 export default function Root() {
+  const isDark = useColorScheme() === "dark";
+  const style: StatusBarStyle = isDark ? "light" : "dark";
   return (
-    <>
-      <StatusBar style="dark" />
-      <App editorSource={editorSource} />
-    </>
+    <AppearanceProvider>
+      <>
+        <StatusBar style={style} />
+        <App editorSource={editorSource} />
+      </>
+    </AppearanceProvider>
   );
 }
diff --git a/app/app.config.js b/app/app.config.js
@@ -7,6 +7,7 @@ export default {
     version: "1.6.6",
     orientation: "portrait",
     icon: "./src/assets/icon.png",
+    userInterfaceStyle: "automatic",
     splash: {
       image: "./src/assets/splash.png",
       resizeMode: "contain",

diff --git a/app/package.json b/app/package.json
@@ -1,7 +1,7 @@
 {
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "API_URL=http://localhost:4000/graphql expo start",
+    "start": "API_URL=https://api.serenity.re/graphql expo start",
     "start:prod": "expo start",
     "eject": "expo eject",
     "test": "jest",
@@ -33,6 +33,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native-appearance": "^0.3.4",
     "react-native-elements": "^3.3.2",
     "react-native-gesture-handler": "~1.10.2",
     "react-native-get-random-values": "~1.7.0",

diff --git a/app/src/components/Navigation.tsx b/app/src/components/Navigation.tsx
@@ -1,15 +1,11 @@
 import React from "react";
-import { NavigationContainer } from "@react-navigation/native";
+import { NavigationContainer, Theme } from "@react-navigation/native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { createDrawerNavigator } from "@react-navigation/drawer";
 
 import { Icon, ThemeProvider } from "react-native-elements";
-import {
-  DefaultTheme,
-  Provider as PaperProvider,
-  configureFonts,
-} from "react-native-paper";
+import { Provider as PaperProvider } from "react-native-paper";
 import HomeScreen from "./screens/HomeScreen";
 import NoteScreen from "./screens/NoteScreen";
 import SettingsScreen from "./screens/SettingsScreen";
@@ -33,22 +29,30 @@ import useDevice from "../hooks/useDevice";
 import useUser from "../hooks/useUser";
 import fetchAllLicenseTokens from "../utils/server/fetchAllLicenseTokens";
 import { useClient } from "urql";
-import colors from "../styles/colors";
+import { legacyColors } from "../styles/legacyColors";
 import GoodbyeScreen from "./screens/GoodbyeScreen";
 import DebugScreen from "./screens/DebugScreen";
 import { sizes } from "../styles/fonts";
 import { Platform } from "react-native";
+import useCurrentTheme, { DerivedTheme } from "../hooks/useCurrentTheme";
+import { NoteStackParamsList } from "./NavigationTypes";
 
 const RootStack = createStackNavigator();
-const Stack = createStackNavigator();
+const Stack = createStackNavigator<NoteStackParamsList>();
 const Tab = createBottomTabNavigator();
 const Drawer = createDrawerNavigator();
 
-const theme = {
-  colors: {
-    primary: colors.text,
+const getHeaderOptions = (theme: DerivedTheme) => ({
+  headerTintColor: theme.colors.primary,
+  headerTitleStyle: {
+    color: theme.colors.text,
   },
-};
+  headerStyle: {
+    backgroundColor: theme.colors.background,
+    shadowColor: "transparent",
+    elevation: 0,
+  },
+});
 
 const fontConfig = {
   macos: {
@@ -71,30 +75,9 @@ const fontConfig = {
   },
 };
 
-const nativePaperTheme = {
-  ...DefaultTheme,
-  fonts: configureFonts(fontConfig),
-  colors: {
-    ...DefaultTheme.colors,
-    primary: colors.text,
-    accent: colors.textBrightest,
-  },
-};
-
-const headerOptions = {
-  headerTintColor: colors.primary,
-  headerTitleStyle: {
-    color: colors.text,
-  },
-  headerStyle: {
-    backgroundColor: colors.background,
-    shadowColor: "transparent",
-    borderBottomWidth: 0,
-    elevation: 0,
-  },
-};
-
 function Notes() {
+  const theme = useCurrentTheme();
+  const headerOptions = getHeaderOptions(theme);
   return (
     <Stack.Navigator screenOptions={headerOptions}>
       <Stack.Screen
@@ -123,6 +106,8 @@ function Notes() {
 }
 
 function Settings() {
+  const theme = useCurrentTheme();
+  const headerOptions = getHeaderOptions(theme);
   return (
     <Stack.Navigator screenOptions={headerOptions}>
       <Stack.Screen
@@ -155,6 +140,8 @@ function Settings() {
 }
 
 function Contacts() {
+  const theme = useCurrentTheme();
+  const headerOptions = getHeaderOptions(theme);
   return (
     <Stack.Navigator screenOptions={headerOptions}>
       <Stack.Screen
@@ -187,11 +174,13 @@ function Contacts() {
 }
 
 function MainApp() {
+  const theme = useCurrentTheme();
+
   return (
     <Tab.Navigator
       tabBarOptions={{
-        inactiveTintColor: colors.text,
-        activeTintColor: colors.primary,
+        inactiveTintColor: theme.colors.text,
+        activeTintColor: theme.colors.primary,
         style: {
           // // https://ethercreative.github.io/react-native-shadow-generator/
           shadowColor: "#000",
@@ -241,17 +230,18 @@ function MainApp() {
 }
 
 function MainAppMacos() {
+  const theme = useCurrentTheme();
   return (
     <Drawer.Navigator
       drawerType="permanent"
       drawerStyle={{
-        backgroundColor: colors.backgroundDesktopSidebar,
+        backgroundColor: legacyColors.backgroundDesktopSidebar,
         width: 200,
       }}
       drawerContentOptions={{
-        inactiveTintColor: colors.text,
-        activeTintColor: colors.primary,
-        activeBackgroundColor: colors.backgroundDesktopSidebar,
+        inactiveTintColor: theme.colors.text,
+        activeTintColor: theme.colors.primary,
+        activeBackgroundColor: legacyColors.backgroundDesktopSidebar,
         labelStyle: {
           fontSize: sizes.medium,
           marginTop: 3,
@@ -313,6 +303,7 @@ function MainAppMacos() {
 }
 
 export default function Navigation() {
+  const theme = useCurrentTheme();
   const deviceResult = useDevice();
   const userResult = useUser();
   const { encryptAndUploadAllRepositories } = useSync();
@@ -333,11 +324,13 @@ export default function Navigation() {
   if (deviceResult.type === "loading" || userResult.type === "loading")
     return null;
 
+  const headerOptions = getHeaderOptions(theme);
+
   return (
     <UtilsProvider value={{ encryptAndUploadAllRepositories }}>
-      <PaperProvider theme={nativePaperTheme}>
+      <PaperProvider theme={theme}>
         <ThemeProvider theme={theme}>
-          <NavigationContainer>
+          <NavigationContainer theme={(theme as any) as Theme}>
             <RootStack.Navigator
               screenOptions={headerOptions}
               initialRouteName={

diff --git a/app/src/components/NavigationTypes.tsx b/app/src/components/NavigationTypes.tsx
@@ -0,0 +1,18 @@
+import { StackNavigationProp } from "@react-navigation/stack";
+import { RouteProp } from "@react-navigation/native";
+
+export type NoteStackParamsList = {
+  Notes: undefined;
+  Note: {
+    id: string;
+    isNew: boolean;
+  };
+  AddCollaboratorToNote: { repositoryId: string };
+  NoteSettings: { id: string };
+  NoteCollaborator: { repositoryId: string; collaboratorId: string };
+};
+
+export type NoteStackProps<T extends keyof NoteStackParamsList> = {
+  navigation: StackNavigationProp<NoteStackParamsList, T>;
+  route: RouteProp<NoteStackParamsList, T>;
+};
diff --git a/app/src/components/screens/ContactsScreen.tsx b/app/src/components/screens/ContactsScreen.tsx
@@ -6,14 +6,14 @@ import usePrivateInfo from "../../hooks/usePrivateInfo";
 import useContactsAndContactInvitations from "../../hooks/useContactsAndContactInvitations";
 import ListItemButton from "../ui/ListItemButton";
 import ListItemLink from "../ui/ListItemLink";
-import colors from "../../styles/colors";
 import ListItemDivider from "../ui/ListItemDivider";
+import useCurrentTheme from "../../hooks/useCurrentTheme";
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     width: "100%",
-    backgroundColor: colors.background,
+    paddingTop: 16,
   },
   sectionTitle: {
     fontSize: 14,
@@ -22,6 +22,7 @@ const styles = StyleSheet.create({
 });
 
 export default function ContactsScreen({ navigation }) {
+  const theme = useCurrentTheme();
   const deviceResult = useDevice();
   const privateInfoResult = usePrivateInfo();
   // also converts accepted contactInvitations to contacts
@@ -69,7 +70,9 @@ export default function ContactsScreen({ navigation }) {
   }
 
   return (
-    <View style={styles.container}>
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.backdrop }]}
+    >
       <ListItemButton
         onPress={async () => {
           navigation.navigate("AcceptContactInvitationScreen");
@@ -113,14 +116,20 @@ export default function ContactsScreen({ navigation }) {
         renderSectionHeader={({ section: { title } }) => (
           <ListItem
             containerStyle={{
-              backgroundColor: colors.background,
+              backgroundColor: theme.colors.backdrop,
               paddingTop: 20,
               marginLeft: -10,
               marginRight: -10,
             }}
           >
             <ListItem.Content>
-              <ListItem.Title style={{ fontWeight: "500", paddingTop: 18 }}>
+              <ListItem.Title
+                style={{
+                  fontWeight: "500",
+                  paddingTop: 18,
+                  color: theme.colors.text,
+                }}
+              >
                 {title}
               </ListItem.Title>
             </ListItem.Content>
@@ -135,13 +144,14 @@ export default function ContactsScreen({ navigation }) {
                   borderRadius: 6,
                 }}
                 containerStyle={{
-                  borderColor: colors.divider,
+                  borderColor: theme.colors.accent,
                   borderWidth: StyleSheet.hairlineWidth,
                   borderRadius: 6,
+                  backgroundColor: theme.colors.background,
                 }}
               >
                 <ListItem.Content>
-                  <ListItem.Title style={{ color: colors.textBrightest }}>
+                  <ListItem.Title style={{ color: theme.colors.accent }}>
                     No confirmed contacts
                   </ListItem.Title>
                 </ListItem.Content>
@@ -155,13 +165,14 @@ export default function ContactsScreen({ navigation }) {
                   borderRadius: 6,
                 }}
                 containerStyle={{
-                  borderColor: colors.divider,
+                  backgroundColor: theme.colors.background,
+                  borderColor: theme.colors.accent,
                   borderWidth: StyleSheet.hairlineWidth,
                   borderRadius: 6,
                 }}
               >
                 <ListItem.Content>
-                  <ListItem.Title style={{ color: colors.textBrightest }}>
+                  <ListItem.Title style={{ color: theme.colors.accent }}>
                     No open invitations
                   </ListItem.Title>
                 </ListItem.Content>
@@ -182,7 +193,7 @@ export default function ContactsScreen({ navigation }) {
                       index === contactInvitations.length - 1 ? 6 : 0,
                   }}
                   containerStyle={{
-                    borderColor: colors.divider,
+                    borderColor: theme.colors.accent,
                     borderLeftWidth: StyleSheet.hairlineWidth,
                     borderRightWidth: StyleSheet.hairlineWidth,
                     borderTopLeftRadius: index === 0 ? 6 : 0,
@@ -209,7 +220,7 @@ export default function ContactsScreen({ navigation }) {
                     <Icon
                       name="alert-triangle"
                       type="feather"
-                      color={colors.error}
+                      color={theme.colors.error}
                       size={16}
                       style={{
                         display: "flex",
@@ -233,7 +244,7 @@ export default function ContactsScreen({ navigation }) {
                 borderBottomRightRadius: index === contacts.length - 1 ? 6 : 0,
               }}
               containerStyle={{
-                borderColor: colors.divider,
+                borderColor: theme.colors.accent,
                 borderLeftWidth: StyleSheet.hairlineWidth,
                 borderRightWidth: StyleSheet.hairlineWidth,
                 borderTopLeftRadius: index === 0 ? 6 : 0,
@@ -255,7 +266,7 @@ export default function ContactsScreen({ navigation }) {
                 <Icon
                   name="alert-triangle"
                   type="feather"
-                  color={colors.error}
+                  color={theme.colors.error}
                   size={16}
                   style={{
                     display: "flex",

diff --git a/app/src/components/screens/NoteCollaboratorScreen.tsx b/app/src/components/screens/NoteCollaboratorScreen.tsx
@@ -14,8 +14,12 @@ import usePrivateInfo from "../../hooks/usePrivateInfo";
 import ServerSyncInfo from "../ui/ServerSyncInfo";
 import ListWrapper from "../ui/ListWrapper";
 import OutlineButton from "../ui/OutlineButton";
+import { NoteStackProps } from "../NavigationTypes";
 
-export default function NoteSettingsScreen({ navigation, route }) {
+export default function NoteCollaboratorScreen({
+  navigation,
+  route,
+}: NoteStackProps<"NoteCollaborator">) {
   const repositoryResult = useRepository(route.params.repositoryId);
   const userResult = useUser();
   const deviceResult = useDevice();