Refactor styles

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

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}