From abe1c0847d7284f993c52308ca062f19a33606db Mon Sep 17 00:00:00 2001
From: Nikolaos Karaolidis <nick@karaolidis.com>
Date: Wed, 26 Jul 2023 10:14:01 +0300
Subject: [PATCH] Refactor styles

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
---
 src/app.tsx                                   | 11 ++-
 src/components/hideableHeader.tsx             | 13 ++-
 src/components/loadingView.tsx                | 20 ++--
 src/components/memes/memeTagSearchModal.tsx   |  5 +-
 src/components/memes/memeViewItem.tsx         | 16 +++-
 src/components/memes/memesHeader.tsx          | 24 +++--
 src/components/memes/memesList/memesList.tsx  | 14 +--
 .../memes/memesList/memesListItem.tsx         | 22 +++--
 src/components/tags/tagPreview.tsx            |  5 +-
 src/components/tags/tagsHeader.tsx            | 15 ++-
 src/screens/{ => editors}/addMeme.tsx         | 45 ++++-----
 src/screens/{ => editors}/addTag.tsx          | 37 +++-----
 src/screens/{ => editors}/editMeme.tsx        | 22 ++---
 src/screens/{ => editors}/editTag.tsx         | 22 ++---
 src/screens/editors/editorStyles.ts           | 34 +++++++
 src/screens/index.ts                          |  8 +-
 src/screens/memeView.tsx                      |  5 +-
 src/screens/memes.tsx                         | 46 +++++----
 src/screens/settings.tsx                      | 35 ++++---
 src/screens/tags.tsx                          | 71 +++++++-------
 src/screens/welcome.tsx                       | 24 ++---
 src/styles.tsx                                | 95 -------------------
 22 files changed, 261 insertions(+), 328 deletions(-)
 rename src/screens/{ => editors}/addMeme.tsx (83%)
 rename src/screens/{ => editors}/addTag.tsx (77%)
 rename src/screens/{ => editors}/editMeme.tsx (87%)
 rename src/screens/{ => editors}/editTag.tsx (80%)
 create mode 100644 src/screens/editors/editorStyles.ts
 delete mode 100644 src/styles.tsx

diff --git a/src/app.tsx b/src/app.tsx
index f44907a..783ee99 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { AppState, StatusBar, useColorScheme } from 'react-native';
+import { AppState, StatusBar, useColorScheme, StyleSheet } from 'react-native';
 import { PaperProvider } from 'react-native-paper';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { RealmProvider } from '@realm/react';
@@ -13,7 +13,12 @@ import NavigationContainer from './navigation';
 import { store, persistor, validateSettings } from './state';
 import { LoadingView } from './components';
 import { Welcome } from './screens';
-import styles from './styles';
+
+const appStyles = StyleSheet.create({
+  gestureHandler: {
+    flex: 1,
+  },
+});
 
 const App = () => {
   const [showWelcome, setShowWelcome] = useState(false);
@@ -49,7 +54,7 @@ const App = () => {
           persistor={persistor}
           onBeforeLift={onBeforeLift}>
           <RealmProvider schema={[Meme, Tag]}>
-            <GestureHandlerRootView style={styles.flex}>
+            <GestureHandlerRootView style={appStyles.gestureHandler}>
               <SafeAreaProvider>
                 <StatusBar
                   barStyle={isDarkMode ? 'light-content' : 'dark-content'}
diff --git a/src/components/hideableHeader.tsx b/src/components/hideableHeader.tsx
index 2bc0e1a..2713edd 100644
--- a/src/components/hideableHeader.tsx
+++ b/src/components/hideableHeader.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react';
 import { Animated, StyleSheet } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import { useDeviceOrientation } from '@react-native-community/hooks';
-import styles from '../styles';
 
 const hideableHeaderStyles = StyleSheet.create({
   headerView: {
@@ -11,6 +10,13 @@ const hideableHeaderStyles = StyleSheet.create({
     left: 0,
     right: 0,
     zIndex: 1,
+    paddingHorizontal: '4%',
+  },
+  headerViewPortrait: {
+    paddingTop: '4%',
+  },
+  headerViewLandscape: {
+    paddingTop: '2%',
   },
 });
 
@@ -38,8 +44,9 @@ const HideableHeader = ({
     <Animated.View
       style={[
         hideableHeaderStyles.headerView,
-        orientation === 'portrait' ? styles.paddingTop : styles.smallPaddingTop,
-        styles.paddingHorizontal,
+        orientation === 'portrait'
+          ? hideableHeaderStyles.headerViewPortrait
+          : hideableHeaderStyles.headerViewLandscape,
         {
           transform: [
             {
diff --git a/src/components/loadingView.tsx b/src/components/loadingView.tsx
index 8139e2d..1967e42 100644
--- a/src/components/loadingView.tsx
+++ b/src/components/loadingView.tsx
@@ -1,19 +1,23 @@
 import React from 'react';
-import { ActivityIndicator, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useTheme } from 'react-native-paper';
-import styles from '../styles';
+
+const loadingViewStyles = StyleSheet.create({
+  view: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+});
 
 const LoadingView = () => {
   const { colors } = useTheme();
 
   return (
     <View
-      style={[
-        styles.center,
-        styles.flex,
-        styles.fullSize,
-        { backgroundColor: colors.background },
-      ]}>
+      style={[loadingViewStyles.view, { backgroundColor: colors.background }]}>
       <ActivityIndicator size="large" color={colors.primary} />
     </View>
   );
diff --git a/src/components/memes/memeTagSearchModal.tsx b/src/components/memes/memeTagSearchModal.tsx
index 9a73b22..de60300 100644
--- a/src/components/memes/memeTagSearchModal.tsx
+++ b/src/components/memes/memeTagSearchModal.tsx
@@ -7,7 +7,6 @@ import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { TAG_SORT, tagSortQuery } from '../../types';
 import { TagChip } from '../tags';
 import { Tag } from '../../database';
-import styles from '../../styles';
 import { validateTagName } from '../../utilities';
 
 const memeTagSearchModalStyles = StyleSheet.create({
@@ -17,6 +16,7 @@ const memeTagSearchModalStyles = StyleSheet.create({
     padding: 10,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
+    width: '100%',
   },
   searchbar: {
     marginBottom: 12,
@@ -97,11 +97,10 @@ const MemeTagSearchModal = ({
       <Modal
         visible={visible}
         contentContainerStyle={[
+          memeTagSearchModalStyles.modal,
           {
             backgroundColor: colors.surface,
           },
-          styles.fullWidth,
-          memeTagSearchModalStyles.modal,
         ]}
         onDismiss={() => setVisible(false)}>
         <Searchbar
diff --git a/src/components/memes/memeViewItem.tsx b/src/components/memes/memeViewItem.tsx
index dad282e..2b54d4a 100644
--- a/src/components/memes/memeViewItem.tsx
+++ b/src/components/memes/memeViewItem.tsx
@@ -1,11 +1,17 @@
 import React from 'react';
 import { ImageZoom } from '@likashefqet/react-native-image-zoom';
-import { Meme } from '../../database';
-import { View } from 'react-native';
-import styles from '../../styles';
-import LoadingView from '../loadingView';
+import { StyleSheet, View } from 'react-native';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
+import LoadingView from '../loadingView';
+import { Meme } from '../../database';
+
+const memeViewItemStyles = StyleSheet.create({
+  view: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
 
 const MemeViewItem = ({ meme }: { meme: Meme }) => {
   const { height, width } = useSafeAreaFrame();
@@ -15,7 +21,7 @@ const MemeViewItem = ({ meme }: { meme: Meme }) => {
   if (loading || error || !dimensions) return <LoadingView />;
 
   return (
-    <View style={[{ width, height }, styles.center]}>
+    <View style={[{ width, height }, memeViewItemStyles.view]}>
       <ImageZoom
         source={{ uri: meme.uri }}
         style={
diff --git a/src/components/memes/memesHeader.tsx b/src/components/memes/memesHeader.tsx
index 579c906..87c3af9 100644
--- a/src/components/memes/memesHeader.tsx
+++ b/src/components/memes/memesHeader.tsx
@@ -19,14 +19,23 @@ import {
   toggleMemesFavoritesOnly,
   toggleMemesSortDirection,
 } from '../../state';
-import styles from '../../styles';
 import { MEME_SORT, SORT_DIRECTION } from '../../types';
 import { getSortIcon, getViewIcon } from '../../utilities';
 
 const memesHeaderStyles = StyleSheet.create({
   buttonView: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     height: 50,
   },
+  buttonSection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  sortButton: {
+    flexDirection: 'row-reverse',
+  },
 });
 
 const MemesHeader = ({
@@ -78,13 +87,8 @@ const MemesHeader = ({
         value={search}
         onChangeText={setSearch}
       />
-      <View
-        style={[
-          styles.flexRowSpaceBetween,
-          styles.alignCenter,
-          memesHeaderStyles.buttonView,
-        ]}>
-        <View style={[styles.flexRow, styles.alignCenter]}>
+      <View style={memesHeaderStyles.buttonView}>
+        <View style={memesHeaderStyles.buttonSection}>
           <Menu
             visible={sortMenuVisible}
             onDismiss={() => setSortMenuVisible(false)}
@@ -92,7 +96,7 @@ const MemesHeader = ({
               <Button
                 onPress={() => setSortMenuVisible(true)}
                 icon={getSortIcon(sort, sortDirection)}
-                contentStyle={styles.flexRowReverse}
+                contentStyle={memesHeaderStyles.sortButton}
                 compact>
                 Sort By: {sort}
               </Button>
@@ -112,7 +116,7 @@ const MemesHeader = ({
             })}
           </Menu>
         </View>
-        <View style={[styles.flexRow, styles.alignCenter]}>
+        <View style={memesHeaderStyles.buttonSection}>
           <IconButton
             icon={getViewIcon(view)}
             iconColor={colors.primary}
diff --git a/src/components/memes/memesList/memesList.tsx b/src/components/memes/memesList/memesList.tsx
index d1b6766..6440ed6 100644
--- a/src/components/memes/memesList/memesList.tsx
+++ b/src/components/memes/memesList/memesList.tsx
@@ -12,7 +12,6 @@ import { Meme } from '../../../database';
 import { RootState } from '../../../state';
 import { VIEW } from '../../../types';
 import { getFlashListItemHeight } from '../../../utilities';
-import styles from '../../../styles';
 import MemesMasonryItem from './memesMasonryItem';
 import MemesGridItem from './memesGridItem';
 import MemesListItem from './memesListItem';
@@ -22,6 +21,7 @@ const sharedMemesListStyles = StyleSheet.create({
     paddingBottom: 100,
   },
   helperText: {
+    textAlign: 'center',
     marginVertical: 15,
   },
 });
@@ -89,9 +89,7 @@ const MemesList = ({
             ...memesMasonryListStyles.flashList,
           }}
           ListEmptyComponent={() => (
-            <HelperText
-              type={'info'}
-              style={[sharedMemesListStyles.helperText, styles.centerText]}>
+            <HelperText type={'info'} style={sharedMemesListStyles.helperText}>
               No memes found
             </HelperText>
           )}
@@ -119,9 +117,7 @@ const MemesList = ({
             ...memesGridListStyles.flashList,
           }}
           ListEmptyComponent={() => (
-            <HelperText
-              type={'info'}
-              style={[sharedMemesListStyles.helperText, styles.centerText]}>
+            <HelperText type={'info'} style={sharedMemesListStyles.helperText}>
               No memes found
             </HelperText>
           )}
@@ -149,9 +145,7 @@ const MemesList = ({
             ...memesListListStyles.flashList,
           }}
           ListEmptyComponent={() => (
-            <HelperText
-              type={'info'}
-              style={[sharedMemesListStyles.helperText, styles.centerText]}>
+            <HelperText type={'info'} style={sharedMemesListStyles.helperText}>
               No memes found
             </HelperText>
           )}
diff --git a/src/components/memes/memesList/memesListItem.tsx b/src/components/memes/memesList/memesListItem.tsx
index afe38c6..2b53900 100644
--- a/src/components/memes/memesList/memesListItem.tsx
+++ b/src/components/memes/memesList/memesListItem.tsx
@@ -4,10 +4,10 @@ import { Text, TouchableRipple } from 'react-native-paper';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { useImageDimensions } from '@react-native-community/hooks';
 import { Meme } from '../../../database';
-import styles from '../../../styles';
 
 const memesListItemStyles = StyleSheet.create({
   view: {
+    flexDirection: 'row',
     paddingVertical: 10,
   },
   image: {
@@ -16,12 +16,17 @@ const memesListItemStyles = StyleSheet.create({
     borderRadius: 5,
   },
   detailsView: {
+    flexDirection: 'column',
     marginLeft: 10,
   },
   text: {
     marginRight: 5,
     marginBottom: 5,
   },
+  tagsView: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
 });
 
 const MemesListItem = ({
@@ -42,13 +47,12 @@ const MemesListItem = ({
   return (
     <TouchableRipple
       onPress={() => focusMeme(index)}
-      style={[memesListItemStyles.view, styles.flexRow]}>
+      style={memesListItemStyles.view}>
       <>
         <Image source={{ uri: meme.uri }} style={memesListItemStyles.image} />
         <View
           style={[
             memesListItemStyles.detailsView,
-            styles.flexColumn,
             {
               width: width * 0.92 - 75 - 10,
             },
@@ -56,13 +60,11 @@ const MemesListItem = ({
           <Text variant="titleMedium" style={memesListItemStyles.text}>
             {meme.title}
           </Text>
-          <View style={styles.flexRow}>
-            <Text variant="labelSmall" style={memesListItemStyles.text}>
-              {meme.dateModified.toLocaleDateString()} • {meme.size / 1000}
-              KB
-            </Text>
-          </View>
-          <View style={[styles.flexRow, styles.flexWrap]}>
+          <Text variant="labelSmall" style={memesListItemStyles.text}>
+            {meme.dateModified.toLocaleDateString()} • {meme.size / 1000}
+            KB
+          </Text>
+          <View style={memesListItemStyles.tagsView}>
             {meme.tags.map(tag => (
               <Text
                 variant="labelMedium"
diff --git a/src/components/tags/tagPreview.tsx b/src/components/tags/tagPreview.tsx
index c5cacc0..e099948 100644
--- a/src/components/tags/tagPreview.tsx
+++ b/src/components/tags/tagPreview.tsx
@@ -2,11 +2,12 @@ import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 import { Chip, useTheme } from 'react-native-paper';
-import styles from '../../styles';
 import { getContrastColor } from '../../utilities';
 
 const tagPreviewStyles = StyleSheet.create({
   view: {
+    flexDirection: 'row',
+    justifyContent: 'center',
     margin: '10%',
   },
   chip: {
@@ -33,7 +34,7 @@ const TagPreview = ({ name, color }: { name: string; color: string }) => {
   const contrastColor = getContrastColor(color);
 
   return (
-    <View style={[styles.justifyCenter, styles.flexRow, tagPreviewStyles.view]}>
+    <View style={tagPreviewStyles.view}>
       <Chip
         icon={() => {
           return <FontAwesome5 name="tag" size={14} color={contrastColor} />;
diff --git a/src/components/tags/tagsHeader.tsx b/src/components/tags/tagsHeader.tsx
index ee9f388..918cca7 100644
--- a/src/components/tags/tagsHeader.tsx
+++ b/src/components/tags/tagsHeader.tsx
@@ -1,7 +1,6 @@
 import React, { ComponentProps, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Button, Divider, Menu, Searchbar } from 'react-native-paper';
-import styles from '../../styles';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   RootState,
@@ -14,8 +13,13 @@ import { getSortIcon } from '../../utilities';
 
 const tagsHeaderStyles = StyleSheet.create({
   buttonView: {
+    alignItems: 'center',
+    flexDirection: 'row',
     height: 50,
   },
+  sortButton: {
+    flexDirection: 'row-reverse',
+  },
 });
 
 const TagsHeader = ({
@@ -57,12 +61,7 @@ const TagsHeader = ({
           setSearch(value);
         }}
       />
-      <View
-        style={[
-          styles.flexRow,
-          styles.alignCenter,
-          tagsHeaderStyles.buttonView,
-        ]}>
+      <View style={tagsHeaderStyles.buttonView}>
         <Menu
           visible={sortMenuVisible}
           onDismiss={() => setSortMenuVisible(false)}
@@ -70,7 +69,7 @@ const TagsHeader = ({
             <Button
               onPress={() => setSortMenuVisible(true)}
               icon={getSortIcon(sort, sortDirection)}
-              contentStyle={styles.flexRowReverse}
+              contentStyle={tagsHeaderStyles.sortButton}
               compact>
               Sort By: {sort}
             </Button>
diff --git a/src/screens/addMeme.tsx b/src/screens/editors/addMeme.tsx
similarity index 83%
rename from src/screens/addMeme.tsx
rename to src/screens/editors/addMeme.tsx
index 92d3abe..032976d 100644
--- a/src/screens/addMeme.tsx
+++ b/src/screens/editors/addMeme.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useRef, useState } from 'react';
 import { Appbar, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { useRealm } from '@realm/react';
 import { BSON } from 'realm';
@@ -13,23 +13,16 @@ import {
   DocumentPickerResponse,
   pickSingle,
 } from 'react-native-document-picker';
-import styles from '../styles';
-import { ROUTE, RootStackParamList } from '../types';
-import { Meme, Tag } from '../database';
-import { RootState } from '../state';
-import { allowedMimeTypes, getMemeType, validateMemeTitle } from '../utilities';
-import { MemeEditor } from '../components';
-
-const addMemeStyles = StyleSheet.create({
-  saveAndAddButton: {
-    flex: 1,
-    marginRight: 5,
-  },
-  saveButton: {
-    flex: 1,
-    marginLeft: 5,
-  },
-});
+import { ROUTE, RootStackParamList } from '../../types';
+import { Meme, Tag } from '../../database';
+import { RootState } from '../../state';
+import {
+  allowedMimeTypes,
+  getMemeType,
+  validateMemeTitle,
+} from '../../utilities';
+import { MemeEditor } from '../../components';
+import editorStyles from './editorStyles';
 
 const AddMeme = ({
   route,
@@ -104,15 +97,13 @@ const AddMeme = ({
       </Appbar.Header>
       <ScrollView
         contentContainerStyle={[
+          editorStyles.scrollView,
           orientation === 'portrait'
-            ? styles.paddingVertical
-            : styles.smallPaddingVertical,
-          styles.paddingHorizontal,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
           { backgroundColor: colors.background },
         ]}>
-        <View style={[styles.flex, styles.justifyStart]}>
+        <View style={editorStyles.editorView}>
           <MemeEditor
             memeUri={memeUri}
             memeTitle={memeTitle}
@@ -121,7 +112,7 @@ const AddMeme = ({
             setMemeTags={setMemeTags}
           />
         </View>
-        <View style={[styles.flexRow, styles.fullWidth]}>
+        <View style={editorStyles.saveButtonView}>
           <Button
             mode="contained-tonal"
             icon="plus"
@@ -139,7 +130,7 @@ const AddMeme = ({
             }}
             disabled={!memeTitle.valid || isSaving || isSavingAndAddingAnother}
             loading={isSavingAndAddingAnother}
-            style={addMemeStyles.saveAndAddButton}>
+            style={editorStyles.saveAndAddButton}>
             Save & Add
           </Button>
           <Button
@@ -153,7 +144,7 @@ const AddMeme = ({
             }}
             disabled={!memeTitle.valid || isSaving || isSavingAndAddingAnother}
             loading={isSaving}
-            style={addMemeStyles.saveButton}>
+            style={editorStyles.saveButton}>
             Save
           </Button>
         </View>
diff --git a/src/screens/addTag.tsx b/src/screens/editors/addTag.tsx
similarity index 77%
rename from src/screens/addTag.tsx
rename to src/screens/editors/addTag.tsx
index cd91e92..9716b23 100644
--- a/src/screens/addTag.tsx
+++ b/src/screens/editors/addTag.tsx
@@ -1,28 +1,17 @@
 import React, { useCallback, useState } from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { Appbar, Button, useTheme } from 'react-native-paper';
 import { useNavigation } from '@react-navigation/native';
 import { useRealm } from '@realm/react';
 import { useDeviceOrientation } from '@react-native-community/hooks';
-import styles from '../styles';
 import {
   generateRandomColor,
   validateColor,
   validateTagName,
-} from '../utilities';
-import { Tag } from '../database';
-import { TagEditor } from '../components';
-
-const addTagStyles = StyleSheet.create({
-  saveAndAddButton: {
-    flex: 1,
-    marginRight: 5,
-  },
-  saveButton: {
-    flex: 1,
-    marginLeft: 5,
-  },
-});
+} from '../../utilities';
+import { Tag } from '../../database';
+import { TagEditor } from '../../components';
+import editorStyles from './editorStyles';
 
 const AddTag = () => {
   const { goBack } = useNavigation();
@@ -57,15 +46,13 @@ const AddTag = () => {
       </Appbar.Header>
       <ScrollView
         contentContainerStyle={[
+          editorStyles.scrollView,
           orientation === 'portrait'
-            ? styles.paddingVertical
-            : styles.smallPaddingVertical,
-          styles.paddingHorizontal,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
           { backgroundColor: colors.background },
         ]}>
-        <View style={[styles.flex, styles.justifyStart]}>
+        <View style={editorStyles.editorView}>
           <TagEditor
             tagName={tagName}
             setTagName={setTagName}
@@ -73,7 +60,7 @@ const AddTag = () => {
             setTagColor={setTagColor}
           />
         </View>
-        <View style={[styles.flexRow, styles.fullWidth]}>
+        <View style={editorStyles.saveButtonView}>
           <Button
             mode="contained-tonal"
             icon="plus"
@@ -86,7 +73,7 @@ const AddTag = () => {
             }}
             disabled={!tagName.valid || isSavingAndAddingAnother}
             loading={isSavingAndAddingAnother}
-            style={addTagStyles.saveAndAddButton}>
+            style={editorStyles.saveAndAddButton}>
             Save & Add
           </Button>
           <Button
@@ -97,7 +84,7 @@ const AddTag = () => {
               goBack();
             }}
             disabled={!tagName.valid || isSavingAndAddingAnother}
-            style={addTagStyles.saveButton}>
+            style={editorStyles.saveButton}>
             Save
           </Button>
         </View>
diff --git a/src/screens/editMeme.tsx b/src/screens/editors/editMeme.tsx
similarity index 87%
rename from src/screens/editMeme.tsx
rename to src/screens/editors/editMeme.tsx
index 0dc3d43..3c69f8c 100644
--- a/src/screens/editMeme.tsx
+++ b/src/screens/editors/editMeme.tsx
@@ -6,11 +6,11 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { useObject, useRealm } from '@realm/react';
 import { useDeviceOrientation } from '@react-native-community/hooks';
 import { BSON } from 'realm';
-import styles from '../styles';
-import { RootStackParamList, ROUTE } from '../types';
-import { Tag, Meme } from '../database';
-import { deleteMeme, favoriteMeme, validateMemeTitle } from '../utilities';
-import { MemeEditor } from '../components';
+import { RootStackParamList, ROUTE } from '../../types';
+import { Tag, Meme } from '../../database';
+import { deleteMeme, favoriteMeme, validateMemeTitle } from '../../utilities';
+import { MemeEditor } from '../../components';
+import editorStyles from './editorStyles';
 
 const EditMeme = ({
   route,
@@ -80,15 +80,13 @@ const EditMeme = ({
       </Appbar.Header>
       <ScrollView
         contentContainerStyle={[
+          editorStyles.scrollView,
           orientation === 'portrait'
-            ? styles.paddingVertical
-            : styles.smallPaddingVertical,
-          styles.paddingHorizontal,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
           { backgroundColor: colors.background },
         ]}>
-        <View style={[styles.flex, styles.justifyStart]}>
+        <View style={editorStyles.editorView}>
           <MemeEditor
             memeUri={meme.uri}
             memeTitle={memeTitle}
@@ -97,7 +95,7 @@ const EditMeme = ({
             setMemeTags={setMemeTags}
           />
         </View>
-        <View style={[styles.flex, styles.justifyEnd]}>
+        <View style={editorStyles.saveButtonView}>
           <Button
             mode="contained"
             icon="floppy"
diff --git a/src/screens/editTag.tsx b/src/screens/editors/editTag.tsx
similarity index 80%
rename from src/screens/editTag.tsx
rename to src/screens/editors/editTag.tsx
index c0f25fa..6d350fb 100644
--- a/src/screens/editTag.tsx
+++ b/src/screens/editors/editTag.tsx
@@ -6,11 +6,11 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { BSON } from 'realm';
 import { useObject, useRealm } from '@realm/react';
 import { useDeviceOrientation } from '@react-native-community/hooks';
-import { TagEditor } from '../components';
-import styles from '../styles';
-import { ROUTE, RootStackParamList } from '../types';
-import { Tag } from '../database';
-import { deleteTag, validateColor, validateTagName } from '../utilities';
+import { TagEditor } from '../../components';
+import { ROUTE, RootStackParamList } from '../../types';
+import { Tag } from '../../database';
+import { deleteTag, validateColor, validateTagName } from '../../utilities';
+import editorStyles from './editorStyles';
 
 const EditTag = ({
   route,
@@ -52,16 +52,14 @@ const EditTag = ({
       </Appbar.Header>
       <ScrollView
         contentContainerStyle={[
+          editorStyles.scrollView,
           orientation === 'portrait'
-            ? styles.paddingVertical
-            : styles.smallPaddingVertical,
-          styles.paddingHorizontal,
-          styles.flexGrow,
-          styles.flexColumnSpaceBetween,
+            ? editorStyles.scrollViewPortrait
+            : editorStyles.scrollViewLandscape,
           { backgroundColor: colors.background },
         ]}
         nestedScrollEnabled>
-        <View style={[styles.flex, styles.justifyStart]}>
+        <View style={editorStyles.editorView}>
           <TagEditor
             tagName={tagName}
             setTagName={setTagName}
@@ -69,7 +67,7 @@ const EditTag = ({
             setTagColor={setTagColor}
           />
         </View>
-        <View style={[styles.flex, styles.justifyEnd]}>
+        <View style={editorStyles.saveButtonView}>
           <Button
             mode="contained"
             icon="floppy"
diff --git a/src/screens/editors/editorStyles.ts b/src/screens/editors/editorStyles.ts
new file mode 100644
index 0000000..78f0fbe
--- /dev/null
+++ b/src/screens/editors/editorStyles.ts
@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+
+const editorStyles = StyleSheet.create({
+  scrollView: {
+    flexGrow: 1,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    paddingHorizontal: '4%',
+  },
+  scrollViewPortrait: {
+    paddingVertical: '4%',
+  },
+  scrollViewLandscape: {
+    paddingVertical: '2%',
+  },
+  editorView: {
+    flex: 1,
+    justifyContent: 'flex-start',
+  },
+  saveButtonView: {
+    flexDirection: 'row',
+    width: '100%',
+  },
+  saveAndAddButton: {
+    flex: 1,
+    marginRight: 5,
+  },
+  saveButton: {
+    flex: 1,
+    marginLeft: 5,
+  },
+});
+
+export default editorStyles;
diff --git a/src/screens/index.ts b/src/screens/index.ts
index 8904357..57a3627 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -1,7 +1,7 @@
-export { default as AddMeme } from './addMeme';
-export { default as AddTag } from './addTag';
-export { default as EditMeme } from './editMeme';
-export { default as EditTag } from './editTag';
+export { default as AddMeme } from './editors/addMeme';
+export { default as AddTag } from './editors/addTag';
+export { default as EditMeme } from './editors/editMeme';
+export { default as EditTag } from './editors/editTag';
 export { default as Memes } from './memes';
 export { default as MemeView } from './memeView';
 export { default as Settings } from './settings';
diff --git a/src/screens/memeView.tsx b/src/screens/memeView.tsx
index 2bf4aee..a01feed 100644
--- a/src/screens/memeView.tsx
+++ b/src/screens/memeView.tsx
@@ -17,7 +17,6 @@ import {
   shareMeme,
 } from '../utilities';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
-import styles from '../styles';
 
 const memeViewStyles = StyleSheet.create({
   // eslint-disable-next-line react-native/no-color-literals
@@ -36,6 +35,8 @@ const memeViewStyles = StyleSheet.create({
     left: 0,
     right: 0,
     backgroundColor: 'transparent',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
   },
   snackbar: {
     marginBottom: 64,
@@ -88,7 +89,7 @@ const MemeView = ({
         showsHorizontalScrollIndicator={false}
         renderItem={({ item: meme }) => <MemeViewItem meme={meme} />}
       />
-      <Appbar style={[styles.flexRowSpaceEvenly, memeViewStyles.footer]}>
+      <Appbar style={memeViewStyles.footer}>
         <Appbar.Action
           icon={memes[index].isFavorite ? 'heart' : 'heart-outline'}
           onPress={() => favoriteMeme(realm, memes[index])}
diff --git a/src/screens/memes.tsx b/src/screens/memes.tsx
index 4ef3f15..e42dfe4 100644
--- a/src/screens/memes.tsx
+++ b/src/screens/memes.tsx
@@ -3,6 +3,7 @@ import {
   BackHandler,
   NativeScrollEvent,
   NativeSyntheticEvent,
+  StyleSheet,
   View,
   useWindowDimensions,
 } from 'react-native';
@@ -16,13 +17,20 @@ import {
   useNavigation,
 } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import styles from '../styles';
 import { ROUTE, SORT_DIRECTION, memesSortQuery } from '../types';
 import { RootState, setNavVisible } from '../state';
 import { Meme } from '../database';
 import { HideableHeader, MemesHeader, MemesList } from '../components';
 import { useDeviceOrientation } from '@react-native-community/hooks';
 
+const memesStyles = StyleSheet.create({
+  listView: {
+    paddingHorizontal: '4%',
+    width: '100%',
+    height: '100%',
+  },
+});
+
 const Memes = () => {
   const { colors } = useTheme();
   const { navigate } =
@@ -128,12 +136,7 @@ const Memes = () => {
   );
 
   return (
-    <View
-      style={[
-        styles.paddingHorizontal,
-        styles.fullSize,
-        { backgroundColor: colors.background },
-      ]}>
+    <>
       <HideableHeader visible={navVisisble}>
         <MemesHeader
           search={search}
@@ -146,19 +149,22 @@ const Memes = () => {
           }}
         />
       </HideableHeader>
-      <MemesList
-        memes={memes}
-        flashListRef={flashListRef}
-        flashListPadding={flashListPadding}
-        handleScroll={handleScroll}
-        focusMeme={(index: number) => {
-          navigate(ROUTE.MEME_VIEW, {
-            ids: memes.map(meme => meme.id.toHexString()),
-            index,
-          });
-        }}
-      />
-    </View>
+      <View
+        style={[memesStyles.listView, { backgroundColor: colors.background }]}>
+        <MemesList
+          memes={memes}
+          flashListRef={flashListRef}
+          flashListPadding={flashListPadding}
+          handleScroll={handleScroll}
+          focusMeme={(index: number) => {
+            navigate(ROUTE.MEME_VIEW, {
+              ids: memes.map(meme => meme.id.toHexString()),
+              index,
+            });
+          }}
+        />
+      </View>
+    </>
   );
 };
 
diff --git a/src/screens/settings.tsx b/src/screens/settings.tsx
index a030d94..038c52f 100644
--- a/src/screens/settings.tsx
+++ b/src/screens/settings.tsx
@@ -13,8 +13,6 @@ import {
 import { openDocumentTree } from 'react-native-scoped-storage';
 import { useDispatch, useSelector } from 'react-redux';
 import type {} from 'redux-thunk/extend-redux';
-import { useDeviceOrientation } from '@react-native-community/hooks';
-import styles from '../styles';
 import {
   RootState,
   setGridColumns,
@@ -24,17 +22,28 @@ import {
 } from '../state';
 
 const settingsStyles = StyleSheet.create({
+  scrollView: {
+    paddingHorizontal: '4%',
+  },
   snackbar: {
     marginBottom: 90,
   },
   marginBottom: {
     marginBottom: 15,
   },
+  columnSegmentedButtons: {
+    marginBottom: 15,
+    paddingHorizontal: '2%',
+  },
+  hideMediaSwitch: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: '2%',
+  },
 });
 
 const Settings = () => {
   const { colors } = useTheme();
-  const orientation = useDeviceOrientation();
   const noMedia = useSelector((state: RootState) => state.settings.noMedia);
   const masonryColumns = useSelector(
     (state: RootState) => state.settings.masonryColumns,
@@ -60,19 +69,12 @@ const Settings = () => {
     <>
       <ScrollView
         contentContainerStyle={[
-          orientation === 'portrait'
-            ? styles.paddingTop
-            : styles.smallPaddingTop,
-          styles.paddingHorizontal,
+          settingsStyles.scrollView,
           { backgroundColor: colors.background },
         ]}>
         <List.Section>
           <List.Subheader>Views</List.Subheader>
-          <Text
-            style={[
-              settingsStyles.marginBottom,
-              styles.smallPaddingHorizontal,
-            ]}>
+          <Text style={settingsStyles.columnSegmentedButtons}>
             Masonry Columns
           </Text>
           <SegmentedButtons
@@ -90,11 +92,7 @@ const Settings = () => {
             ]}
             style={settingsStyles.marginBottom}
           />
-          <Text
-            style={[
-              settingsStyles.marginBottom,
-              styles.smallPaddingHorizontal,
-            ]}>
+          <Text style={settingsStyles.columnSegmentedButtons}>
             Grid Columns
           </Text>
           <SegmentedButtons
@@ -123,8 +121,7 @@ const Settings = () => {
             }}>
             Change External Storage Path
           </Button>
-          <View
-            style={[styles.flexRowSpaceBetween, styles.smallPaddingHorizontal]}>
+          <View style={settingsStyles.hideMediaSwitch}>
             <Text>Hide media from gallery</Text>
             <Switch
               value={noMedia}
diff --git a/src/screens/tags.tsx b/src/screens/tags.tsx
index c9d9514..e14be26 100644
--- a/src/screens/tags.tsx
+++ b/src/screens/tags.tsx
@@ -15,16 +15,21 @@ import { useDeviceOrientation } from '@react-native-community/hooks';
 import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import { HideableHeader, TagRow, TagsHeader } from '../components';
 import { Tag } from '../database';
-import styles from '../styles';
 import { RootState, setNavVisible } from '../state';
 import { SORT_DIRECTION, tagSortQuery } from '../types';
 
 const tagsStyles = StyleSheet.create({
+  listView: {
+    paddingHorizontal: '4%',
+    width: '100%',
+    height: '100%',
+  },
   flashList: {
     paddingBottom: 100,
   },
   helperText: {
     marginVertical: 15,
+    textAlign: 'center',
   },
 });
 
@@ -104,12 +109,7 @@ const Tags = () => {
   );
 
   return (
-    <View
-      style={[
-        styles.paddingHorizontal,
-        styles.fullSize,
-        { backgroundColor: colors.background },
-      ]}>
+    <>
       <HideableHeader visible={navVisisble}>
         <TagsHeader
           search={search}
@@ -119,34 +119,35 @@ const Tags = () => {
           }}
         />
       </HideableHeader>
-      <FlashList
-        ref={flashListRef}
-        data={tags}
-        estimatedItemSize={50}
-        estimatedListSize={{
-          height,
-          width: width * 0.92,
-        }}
-        showsVerticalScrollIndicator={false}
-        renderItem={({ item: tag }) => <TagRow tag={tag} />}
-        contentContainerStyle={{
-          paddingTop:
-            flashListPadding +
-            height * (orientation === 'portrait' ? 0.02 : 0.04),
-          ...tagsStyles.flashList,
-        }}
-        ItemSeparatorComponent={() => <Divider />}
-        ListEmptyComponent={() => (
-          <HelperText
-            type={'info'}
-            style={[tagsStyles.helperText, styles.centerText]}>
-            No tags found
-          </HelperText>
-        )}
-        onScroll={handleScroll}
-        fadingEdgeLength={100}
-      />
-    </View>
+      <View
+        style={[tagsStyles.listView, { backgroundColor: colors.background }]}>
+        <FlashList
+          ref={flashListRef}
+          data={tags}
+          estimatedItemSize={50}
+          estimatedListSize={{
+            height,
+            width: width * 0.92,
+          }}
+          showsVerticalScrollIndicator={false}
+          renderItem={({ item: tag }) => <TagRow tag={tag} />}
+          contentContainerStyle={{
+            paddingTop:
+              flashListPadding +
+              height * (orientation === 'portrait' ? 0.02 : 0.04),
+            ...tagsStyles.flashList,
+          }}
+          ItemSeparatorComponent={() => <Divider />}
+          ListEmptyComponent={() => (
+            <HelperText type={'info'} style={tagsStyles.helperText}>
+              No tags found
+            </HelperText>
+          )}
+          onScroll={handleScroll}
+          fadingEdgeLength={100}
+        />
+      </View>
+    </>
   );
 };
 
diff --git a/src/screens/welcome.tsx b/src/screens/welcome.tsx
index 071b679..e96816a 100644
--- a/src/screens/welcome.tsx
+++ b/src/screens/welcome.tsx
@@ -3,14 +3,19 @@ import { StyleSheet, View } from 'react-native';
 import { Button, Text, useTheme } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 import { openDocumentTree } from 'react-native-scoped-storage';
-import { useDeviceOrientation } from '@react-native-community/hooks';
-import styles from '../styles';
 import { noOp } from '../utilities';
 import { setStorageUri } from '../state';
 
 const welcomeStyles = StyleSheet.create({
+  view: {
+    paddingHorizontal: '4%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+  },
   text: {
     marginBottom: 30,
+    textAlign: 'center',
   },
   button: {
     marginBottom: 100,
@@ -19,7 +24,6 @@ const welcomeStyles = StyleSheet.create({
 
 const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
   const { colors } = useTheme();
-  const orientation = useDeviceOrientation();
   const dispatch = useDispatch();
 
   const selectStorageLocation = async () => {
@@ -30,18 +34,8 @@ const Welcome = ({ onWelcomeComplete }: { onWelcomeComplete: () => void }) => {
   };
 
   return (
-    <View
-      style={[
-        orientation === 'portrait' ? styles.paddingTop : styles.smallPaddingTop,
-        styles.paddingHorizontal,
-        styles.center,
-        styles.flex,
-        styles.fullSize,
-        { backgroundColor: colors.background },
-      ]}>
-      <Text
-        variant="displayMedium"
-        style={[welcomeStyles.text, styles.centerText]}>
+    <View style={[welcomeStyles.view, { backgroundColor: colors.background }]}>
+      <Text variant="displayMedium" style={welcomeStyles.text}>
         Welcome to Terminally Online!
       </Text>
       <Button
diff --git a/src/styles.tsx b/src/styles.tsx
deleted file mode 100644
index 665e8c7..0000000
--- a/src/styles.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  smallPadding: {
-    padding: '2%',
-  },
-  smallPaddingHorizontal: {
-    paddingHorizontal: '2%',
-  },
-  smallPaddingVertical: {
-    paddingVertical: '2%',
-  },
-  smallPaddingTop: {
-    paddingTop: '2%',
-  },
-  padding: {
-    padding: '4%',
-  },
-  paddingHorizontal: {
-    paddingHorizontal: '4%',
-  },
-  paddingVertical: {
-    paddingVertical: '4%',
-  },
-  paddingTop: {
-    paddingTop: '4%',
-  },
-  center: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  alignCenter: {
-    alignItems: 'center',
-  },
-  justifyCenter: {
-    justifyContent: 'center',
-  },
-  centerText: {
-    textAlign: 'center',
-  },
-  centerSelf: {
-    alignSelf: 'center',
-  },
-  flex: {
-    flex: 1,
-  },
-  flexGrow: {
-    flexGrow: 1,
-  },
-  flexShrink: {
-    flexShrink: 1,
-  },
-  flexRow: {
-    flexDirection: 'row',
-  },
-  flexRowSpaceBetween: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  flexRowSpaceEvenly: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-  flexColumn: {
-    flexDirection: 'column',
-  },
-  flexColumnSpaceBetween: {
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-  },
-  flexRowReverse: {
-    flexDirection: 'row-reverse',
-  },
-  flexWrap: {
-    flexWrap: 'wrap',
-  },
-  justifyStart: {
-    justifyContent: 'flex-start',
-  },
-  justifyEnd: {
-    justifyContent: 'flex-end',
-  },
-  fullWidth: {
-    width: '100%',
-  },
-  fullHeight: {
-    height: '100%',
-  },
-  fullSize: {
-    width: '100%',
-    height: '100%',
-  },
-});
-
-export default styles;