Refactor styles

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

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

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={

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}

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>
           )}

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"