Refactor styles

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

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: [
             {