Skip to content

Commit

Permalink
Themes (Memmy-App#116)
Browse files Browse the repository at this point in the history
* prepare for theme support

* some basic themes

* theme selection

* set correct statusbar color, show alert

* fix crash
  • Loading branch information
gkasdorf authored Jun 22, 2023
1 parent 72b2ada commit 833df33
Show file tree
Hide file tree
Showing 38 changed files with 684 additions and 155 deletions.
35 changes: 5 additions & 30 deletions App.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
/* eslint-disable react/jsx-filename-extension */
/* eslint-disable global-require */
import { StatusBar } from "expo-status-bar";
import { Provider } from "react-redux";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { NativeBaseProvider } from "native-base";
import { ActionSheetProvider } from "@expo/react-native-action-sheet";
import React, { useState } from "react";
import React from "react";

import { useFonts } from "expo-font";
import { ErrorBoundary } from "react-error-boundary";
import { Alert } from "react-native";
import Stack from "./Stack";
import darkTheme from "./theme/theme";
import store from "./store";
import { writeToLog } from "./helpers/LogHelper";
import MemmyErrorView from "./components/ui/Loading/MemmyErrorView";
import Start from "./Start";

export default function App() {
const [fontsLoaded] = useFonts({
Expand Down Expand Up @@ -47,26 +39,9 @@ export default function App() {
import("./ReactotronConfig").then(() => console.log("Reactotron Enabled."));
}

const logError = (e, info) => {
writeToLog(e.toString());
writeToLog(
info && info.componentStack ? info.componentStack.toString() : "No stack."
);
};

return (
<NativeBaseProvider theme={darkTheme}>
<ErrorBoundary onError={logError} FallbackComponent={MemmyErrorView}>
{/* eslint-disable-next-line react/style-prop-object */}
<StatusBar style="light" />
<Provider store={store}>
<GestureHandlerRootView style={{ flex: 1 }}>
<ActionSheetProvider>
<Stack />
</ActionSheetProvider>
</GestureHandlerRootView>
</Provider>
</ErrorBoundary>
</NativeBaseProvider>
<Provider store={store}>
<Start />
</Provider>
);
}
35 changes: 17 additions & 18 deletions Stack.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,16 @@ import LoadingView from "./components/ui/Loading/LoadingView";
const FeedStack = createNativeStackNavigator();

function FeedStackScreen() {
const theme = useTheme();

return (
<FeedStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#1c1917",
backgroundColor: theme.colors.app.nativeHeader,
},
headerTitleStyle: {
color: "white",
color: theme.colors.app.primaryText,
},
}}
>
Expand Down Expand Up @@ -98,14 +100,15 @@ function FeedStackScreen() {
const ProfileStack = createNativeStackNavigator();

function ProfileStackScreen() {
const theme = useTheme();
return (
<ProfileStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#1c1917",
backgroundColor: theme.colors.app.nativeHeader,
},
headerTitleStyle: {
color: "white",
color: theme.colors.app.primaryText,
},
}}
>
Expand Down Expand Up @@ -139,10 +142,10 @@ function SearchStackScreen() {
<SearchStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: theme.colors.app.header,
backgroundColor: theme.colors.app.nativeHeader,
},
headerTitleStyle: {
color: theme.colors.app.headerTitle,
color: theme.colors.app.nativeHeaderTitle,
},
}}
>
Expand Down Expand Up @@ -204,14 +207,16 @@ function SearchStackScreen() {
const SettingsStack = createNativeStackNavigator();

function SettingsStackScreen() {
const theme = useTheme();

return (
<SettingsStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: "#1c1917",
backgroundColor: theme.colors.app.nativeHeader,
},
headerTitleStyle: {
color: "white",
color: theme.colors.app.primaryText,
},
}}
>
Expand Down Expand Up @@ -243,11 +248,13 @@ function SettingsStackScreen() {
const Tab = createBottomTabNavigator();

function Tabs() {
const theme = useTheme();

return (
<Tab.Navigator
screenOptions={{
tabBarStyle: {
backgroundColor: "#1c1917",
backgroundColor: theme.colors.app.nativeHeader,
},
tabBarLabel: "Feed",
}}
Expand Down Expand Up @@ -305,21 +312,13 @@ function Stack() {

const accounts = useAppSelector(selectAccounts);
const accountsLoaded = useAppSelector(selectAccountsLoaded);
const [loaded, setLoaded] = useState(false);
const dispatch = useAppDispatch();

if (!loaded) {
dispatch(loadSettings());
dispatch(loadAccounts());
setLoaded(true);
}

return (
<NavigationContainer theme={DarkTheme}>
<MainStack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: theme.colors.screen[900],
backgroundColor: theme.colors.app.nativeHeader,
},
}}
>
Expand Down
76 changes: 76 additions & 0 deletions Start.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React, { useEffect, useState } from "react";
import { NativeBaseProvider } from "native-base";
import { ErrorBoundary } from "react-error-boundary";
import { StatusBar } from "expo-status-bar";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { ActionSheetProvider } from "@expo/react-native-action-sheet";
import MemmyErrorView from "./components/ui/Loading/MemmyErrorView";
import Stack from "./Stack";
import { writeToLog } from "./helpers/LogHelper";
import { useAppDispatch, useAppSelector } from "./store";
import { loadSettings } from "./slices/settings/settingsActions";
import { loadAccounts } from "./slices/accounts/accountsActions";
import { selectAccountsLoaded } from "./slices/accounts/accountsSlice";
import { selectSettings } from "./slices/settings/settingsSlice";
import { brownTheme, darkTheme, lightTheme, purpleTheme } from "./theme/theme";

const logError = (e, info) => {
writeToLog(e.toString());
writeToLog(
info && info.componentStack ? info.componentStack.toString() : "No stack."
);
};

function Start() {
const [loaded, setLoaded] = useState(false);
const dispatch = useAppDispatch();
const accountsLoaded = useAppSelector(selectAccountsLoaded);
const { theme } = useAppSelector(selectSettings);
const [selectedTheme, setSelectedTheme] = useState<any>(brownTheme);

useEffect(() => {
switch (theme) {
case "Light":
setSelectedTheme(lightTheme);
break;
case "Dark":
setSelectedTheme(darkTheme);
break;
case "Purple":
setSelectedTheme(purpleTheme);
break;
case "Brown":
setSelectedTheme(brownTheme);
break;
default:
setSelectedTheme(brownTheme);
break;
}
}, [theme]);

if (!loaded) {
dispatch(loadSettings());
dispatch(loadAccounts());
setLoaded(true);
}

if (!accountsLoaded) {
return null;
}

return (
<NativeBaseProvider theme={selectedTheme}>
<ErrorBoundary onError={logError} FallbackComponent={MemmyErrorView}>
{/* eslint-disable-next-line react/style-prop-object */}
<StatusBar style={selectedTheme === "Light" ? "light" : "dark"} />
<GestureHandlerRootView style={{ flex: 1 }}>
<ActionSheetProvider>
<Stack />
</ActionSheetProvider>
</GestureHandlerRootView>
</ErrorBoundary>
</NativeBaseProvider>
);
}

export default Start;
2 changes: 1 addition & 1 deletion components/screens/onboarding/AddAccountScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ function AddAccountScreen() {

return (
<KeyboardAwareScrollView
style={{ backgroundColor: theme.colors.screen[800] }}
style={{ backgroundColor: theme.colors.app.backgroundSecondary }}
>
<LoadingModal loading={loading} />

Expand Down
2 changes: 1 addition & 1 deletion components/screens/onboarding/CreateAccountScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ function CreateAccountScreen() {

return (
<KeyboardAwareScrollView
style={{ backgroundColor: theme.colors.screen[800] }}
style={{ backgroundColor: theme.colors.app.backgroundSecondary }}
>
<LoadingModal loading={loading} />
<VStack flex={1} pt={10} mb={5} space="md" justifyContent="center">
Expand Down
2 changes: 1 addition & 1 deletion components/screens/onboarding/OnboardingIndexScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function OnboardingScreen({
return (
<VStack
flex={1}
backgroundColor={theme.colors.screen[800]}
backgroundColor={theme.colors.app.backgroundSecondary}
justifyContent="center"
alignItems="center"
space="md"
Expand Down
12 changes: 7 additions & 5 deletions components/screens/post/NewCommentScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,20 +70,23 @@ function NewCommentScreen({
return (
<>
<KeyboardAwareScrollView
style={{ backgroundColor: theme.colors.screen[800] }}
style={{ backgroundColor: theme.colors.app.backgroundSecondary }}
>
<View
flex={1}
flexDirection="column"
backgroundColor="screen.800"
backgroundColor={theme.colors.app.backgroundSecondary}
justifyContent="space-between"
>
<TextInput
multiline
autoCapitalize="sentences"
style={[
styles.input,
{ backgroundColor: theme.colors.screen["700"] },
{
backgroundColor: theme.colors.app.backgroundTricondary,
color: theme.colors.app.primaryText,
},
]}
numberOfLines={20}
value={newComment.content}
Expand Down Expand Up @@ -135,7 +138,7 @@ function NewCommentScreen({
</HStack>
<HStack space={1} alignItems="center">
<Icon as={Ionicons} name="time-outline" />
<Text color="gray.500">
<Text color={theme.colors.app.secondaryText}>
{moment(
responseTo.post
? responseTo.post.post.published
Expand Down Expand Up @@ -183,7 +186,6 @@ const styles = StyleSheet.create({
paddingTop: 15,
height: 200,
fontSize: 16,
color: "#fff",
},
});

Expand Down
15 changes: 7 additions & 8 deletions components/screens/post/NewPostScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -131,9 +131,9 @@ function NewPostScreen({
return (
<>
<KeyboardAwareScrollView
style={{ backgroundColor: theme.colors.screen[800] }}
style={{ backgroundColor: theme.colors.app.backgroundSecondary }}
>
<VStack flex={1} backgroundColor="screen.800">
<VStack flex={1} backgroundColor={theme.colors.app.backgroundSecondary}>
<TableView>
<Section header="POST INFO">
<CCell
Expand All @@ -144,7 +144,7 @@ function NewPostScreen({
flex: 1,
color: theme.colors.lightText,
}}
placeholderTextColor={theme.colors.screen["400"]}
placeholderTextColor={theme.colors.app.iconColor}
placeholder="Title"
value={form.name}
onChangeText={(text) => onFormChange("name", text)}
Expand All @@ -165,9 +165,9 @@ function NewPostScreen({
style={{
fontSize: 16,
flex: 1,
color: theme.colors.lightText,
color: theme.colors.app.primaryText,
}}
placeholderTextColor={theme.colors.screen["400"]}
placeholderTextColor={theme.colors.app.iconColor}
placeholder="Link"
value={form.url}
onChangeText={(text) => onFormChange("url", text)}
Expand All @@ -191,11 +191,11 @@ function NewPostScreen({
<TextInput
multiline
placeholder="Type away!"
placeholderTextColor={theme.colors.screen["400"]}
placeholderTextColor={theme.colors.app.iconColor}
autoCapitalize="sentences"
style={[
styles.input,
{ backgroundColor: theme.colors.screen["700"] },
{ backgroundColor: theme.colors.app.backgroundTricondary },
]}
numberOfLines={20}
value={form.body}
Expand Down Expand Up @@ -227,7 +227,6 @@ const styles = StyleSheet.create({
paddingTop: 15,
height: 200,
fontSize: 16,
color: "#fff",
},
});

Expand Down
2 changes: 1 addition & 1 deletion components/screens/post/PostActionBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ function PostActionBar({ post }: { post: UsePost }) {
}
onPress={post.doBookmark}
backgroundColor={
post.bookmarked ? colors.green[500] : colors.screen[800]
post.bookmarked ? colors.green[500] : colors.app.backgroundSecondary
}
padding={2}
/>
Expand Down
3 changes: 2 additions & 1 deletion components/screens/post/PostBody.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ interface PostBodyProps {

function PostBody({ post }: PostBodyProps) {
const { blurNsfw } = useAppSelector(selectSettings);
const theme = useTheme();

const linkInfo = getLinkInfo(post.post.url);
const showLink =
Expand Down Expand Up @@ -61,7 +62,7 @@ function PostBody({ post }: PostBodyProps) {
<Icon
as={Ionicons}
name="alert-circle"
color="white"
color={theme.colors.app.primaryText}
size={16}
/>
<Text fontSize="xl">NSFW</Text>
Expand Down
Loading

0 comments on commit 833df33

Please sign in to comment.