From a93630e1e90e8d741075884978c3e285ffbeb3af Mon Sep 17 00:00:00 2001
From: Nikolaos Karaolidis <nick@karaolidis.com>
Date: Sun, 9 Jul 2023 10:36:21 +0300
Subject: [PATCH] Fix minor details

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
---
 .env                           |  0
 .gitignore                     |  5 ++++-
 src/app.tsx                    |  5 +++--
 src/components/loadingView.tsx | 15 ++++-----------
 src/components/paddedView.tsx  |  7 +++++--
 5 files changed, 16 insertions(+), 16 deletions(-)
 delete mode 100644 .env

diff --git a/.env b/.env
deleted file mode 100644
index e69de29..0000000
diff --git a/.gitignore b/.gitignore
index 0cab2ac..bb53a01 100644
--- a/.gitignore
+++ b/.gitignore
@@ -62,5 +62,8 @@ yarn-error.log
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
 
-# testing
+# Testing
 /coverage
+
+# Environment variables
+.env
diff --git a/src/app.tsx b/src/app.tsx
index 2fd862e..4d72bcc 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -10,7 +10,8 @@ import { SettingsProvider } from './contexts/settings';
 
 function App(): JSX.Element {
   const colorScheme = Appearance.getColorScheme();
-  const theme = colorScheme === 'dark' ? lightTheme : darkTheme;
+  const isDarkMode = colorScheme === 'dark';
+  const theme = isDarkMode ? darkTheme : lightTheme;
 
   return (
     <RealmProvider schema={[Meme, Tag]}>
@@ -19,7 +20,7 @@ function App(): JSX.Element {
           <SafeAreaProvider>
             <StatusBar
               barStyle={
-                colorScheme === 'dark' ? 'dark-content' : 'light-content'
+                isDarkMode ? 'light-content' : 'dark-content'
               }
               backgroundColor={theme.colors.background}
             />
diff --git a/src/components/loadingView.tsx b/src/components/loadingView.tsx
index 3b21fe5..4d07df6 100644
--- a/src/components/loadingView.tsx
+++ b/src/components/loadingView.tsx
@@ -1,22 +1,15 @@
 import React from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { ActivityIndicator } from 'react-native';
 import { useTheme } from 'react-native-paper';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
+import PaddedView from './paddedView';
 
 const LoadingView = () => {
   const { colors } = useTheme();
 
   return (
-    <View style={[styles.container, { backgroundColor: colors.background }]}>
+    <PaddedView centered>
       <ActivityIndicator size="large" color={colors.primary} />
-    </View>
+    </PaddedView>
   );
 };
 
diff --git a/src/components/paddedView.tsx b/src/components/paddedView.tsx
index ee6b12d..f65c786 100644
--- a/src/components/paddedView.tsx
+++ b/src/components/paddedView.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { useTheme } from 'react-native-paper';
 
 const styles = StyleSheet.create({
   container: {
@@ -20,9 +21,11 @@ const PaddedView = ({
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   centered?: boolean;
-}): React.JSX.Element => {
+  }): React.JSX.Element => {
+  const { colors } = useTheme();
+
   return (
-    <View style={[styles.container, centered && styles.centered, style]}>
+    <View style={[styles.container, centered && styles.centered, { backgroundColor: colors.background }, style]}>
       {children}
     </View>
   );