feat: Improve design of search nav bar and refactor (#81)

src/components/Header.spec.tsx

@@ -4,7 +4,7 @@ import Header from './Header';
 import { Share } from 'react-native';
 
 jest.mock('react-native/Libraries/Share/Share', () => ({ share: jest.fn() }));
-jest.mock('./share.png', () => ({ uri: '' }));
+jest.mock('./images/share.png', () => ({ uri: '' }));
 
 test('it renders header correctly', () => {
   const { getByTestId, queryByTestId } = render(<Header>My Title</Header>);

src/components/Header.tsx

@@ -36,7 +36,7 @@ const Header: React.FC<Props> = ({ children, shareContent }) => {
           }}
         >
           <Image
-            source={require('./share.png')}
+            source={require('./images/share.png')}
             resizeMode="contain"
             style={styles.shareIcon}
           />

src/components/NetworkLogger.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
-import { View, StyleSheet, BackHandler, Share } from 'react-native';
+import { View, StyleSheet, BackHandler, Share, Text } from 'react-native';
 import logger from '../loggerSingleton';
 import NetworkRequestInfo from '../NetworkRequestInfo';
 import { Theme, ThemeContext, ThemeName } from '../theme';
@@ -76,8 +76,7 @@ const NetworkLogger: React.FC<Props> = ({ theme = 'light', sort = 'desc' }) => {
 
   const getHar = useCallback(async () => {
     const har = await createHar(logger.getRequests());
-
-    Share.share({
+    await Share.share({
       message: JSON.stringify(har),
     });
   }, []);
@@ -123,15 +122,22 @@ const NetworkLogger: React.FC<Props> = ({ theme = 'light', sort = 'desc' }) => {
           {mounted && !logger.enabled && !requests.length ? (
             <Unmounted />
           ) : (
-            <RequestList
-              requestsInfo={requestsInfo}
-              options={options}
-              showDetails={showDetails && !!request}
-              onPressItem={(id) => {
-                setRequest(requests.find((r) => r.id === id));
-                setShowDetails(true);
-              }}
-            />
+            <>
+              {paused && (
+                <View style={styles.pausedBanner}>
+                  <Text>Paused</Text>
+                </View>
+              )}
+              <RequestList
+                requestsInfo={requestsInfo}
+                options={options}
+                showDetails={showDetails && !!request}
+                onPressItem={(id) => {
+                  setRequest(requests.find((r) => r.id === id));
+                  setShowDetails(true);
+                }}
+              />
+            </>
           )}
         </View>
       </View>
@@ -146,6 +152,11 @@ const styles = StyleSheet.create({
   hidden: {
     flex: 0,
   },
+  pausedBanner: {
+    backgroundColor: '#ff7c7c',
+    padding: 10,
+    alignItems: 'center',
+  },
 });
 
 export default NetworkLogger;

src/components/Options.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import {
+  View,
+  Image,
+  StyleSheet,
+  Modal,
+  Text,
+  TouchableWithoutFeedback,
+  TouchableOpacity,
+} from 'react-native';
+
+import Button from './Button';
+import { Theme, useThemedStyles } from '../theme';
+
+interface Props {
+  options: { text: string; onPress: () => Promise<void> | void }[];
+}
+
+const Options: React.FC<Props> = ({ options }) => {
+  const styles = useThemedStyles(themedStyles);
+  const [openOptions, setOpenOptions] = useState(false);
+
+  return (
+    <>
+      <TouchableOpacity
+        style={styles.menu}
+        onPress={() => setOpenOptions(true)}
+      >
+        <Image
+          source={require('./images/more.png')}
+          resizeMode="contain"
+          style={[styles.icon, styles.iconButton]}
+        />
+      </TouchableOpacity>
+      <Modal
+        visible={openOptions}
+        animationType="fade"
+        transparent={true}
+        onDismiss={() => setOpenOptions(false)}
+        onRequestClose={() => setOpenOptions(false)}
+      >
+        <View style={styles.modalRoot}>
+          <TouchableWithoutFeedback onPress={() => setOpenOptions(false)}>
+            <View style={styles.backdrop} />
+          </TouchableWithoutFeedback>
+          <View style={styles.modalContent}>
+            <Text style={styles.title}>Options</Text>
+            {options.map(({ text, onPress }) => (
+              <Button
+                key={text}
+                onPress={async () => {
+                  await onPress();
+                  setOpenOptions(false);
+                }}
+              >
+                {text}
+              </Button>
+            ))}
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+};
+
+const themedStyles = (theme: Theme) =>
+  StyleSheet.create({
+    modalRoot: {
+      ...StyleSheet.absoluteFillObject,
+      justifyContent: 'center',
+      alignItems: 'center',
+      flex: 1,
+    },
+    modalContent: {
+      borderRadius: 8,
+      padding: 16,
+      maxWidth: '100%',
+      backgroundColor: 'white',
+    },
+    backdrop: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+    iconButton: {
+      tintColor: theme.colors.text,
+      width: 30,
+    },
+    icon: {
+      width: 20,
+      height: 20,
+      marginRight: 10,
+      alignSelf: 'center',
+      tintColor: theme.colors.muted,
+    },
+    menu: { alignSelf: 'center' },
+    title: {
+      fontSize: 20,
+      paddingBottom: 10,
+      fontWeight: 'bold',
+      textAlign: 'center',
+    },
+  });
+
+export default Options;

src/components/SearchBar.tsx

@@ -1,34 +1,23 @@
 import React from 'react';
-import {
-  View,
-  Image,
-  TextInput,
-  StyleSheet,
-  Modal,
-  Text,
-  TouchableWithoutFeedback,
-  TouchableOpacity,
-} from 'react-native';
-
-import Button from './Button';
+import { View, Image, TextInput, StyleSheet } from 'react-native';
 import { Theme, useThemedStyles, useTheme } from '../theme';
+import Options from './Options';
 
 interface Props {
   value: string;
   onChangeText(text: string): void;
-  options: { text: string; onPress: () => void }[];
+  options: { text: string; onPress: () => Promise<void> | void }[];
 }
 
 const SearchBar: React.FC<Props> = ({ options, value, onChangeText }) => {
   const styles = useThemedStyles(themedStyles);
   const theme = useTheme();
-  const [openOptions, setOpenOptions] = React.useState(false);
 
   return (
     <View style={styles.searchContainer}>
       <View style={styles.searchBar}>
         <Image
-          source={require('./search.png')}
+          source={require('./images/search.png')}
           resizeMode="contain"
           style={styles.icon}
         />
@@ -41,37 +30,7 @@ const SearchBar: React.FC<Props> = ({ options, value, onChangeText }) => {
           placeholderTextColor={theme.colors.muted}
         />
       </View>
-      <TouchableOpacity
-        style={styles.menu}
-        onPress={() => setOpenOptions((prev) => !prev)}
-      >
-        <Image
-          source={require('./more.png')}
-          resizeMode="contain"
-          style={styles.icon}
-        />
-      </TouchableOpacity>
-      <Modal
-        visible={openOptions}
-        animationType="fade"
-        transparent={true}
-        onDismiss={() => setOpenOptions(false)}
-        onRequestClose={() => setOpenOptions(false)}
-      >
-        <View style={styles.modalRoot}>
-          <TouchableWithoutFeedback onPress={() => setOpenOptions(false)}>
-            <View style={styles.backdrop} />
-          </TouchableWithoutFeedback>
-          <View style={styles.modalContent}>
-            <Text style={styles.title}>Options</Text>
-            {options.map(({ text, onPress }) => (
-              <Button key={text} onPress={onPress}>
-                {text}
-              </Button>
-            ))}
-          </View>
-        </View>
-      </Modal>
+      <Options options={options} />
     </View>
   );
 };
@@ -85,20 +44,9 @@ const themedStyles = (theme: Theme) =>
       margin: 5,
       borderWidth: 1,
       borderColor: theme.colors.muted,
-      borderRadius: 20,
+      borderRadius: 10,
       flex: 1,
-    },
-    modalRoot: {
-      ...StyleSheet.absoluteFillObject,
-      justifyContent: 'center',
-      alignItems: 'center',
-      flex: 1,
-    },
-    modalContent: {
-      borderRadius: 8,
-      padding: 16,
-      maxWidth: '100%',
-      backgroundColor: 'white',
+      paddingVertical: 5,
     },
     backdrop: {
       ...StyleSheet.absoluteFillObject,
@@ -109,6 +57,7 @@ const themedStyles = (theme: Theme) =>
       height: 20,
       marginRight: 10,
       alignSelf: 'center',
+      tintColor: theme.colors.muted,
     },
     textInputSearch: {
       height: 30,