First overhaul of search screen

src/components/App.tsx

@@ -7,13 +7,29 @@ import store, { persistedStore } from 'store';
 import {
     NavigationContainer,
     DefaultTheme,
-    DarkTheme,
+    DarkTheme as BaseDarkTheme,
 } from '@react-navigation/native';
 import { useColorScheme } from 'react-native';
 import { ColorSchemeContext, themes } from './Colors';
 import DownloadManager from './DownloadManager';
 // import ErrorReportingAlert from 'utility/ErrorReportingAlert';
 
+const LightTheme = {
+    ...DefaultTheme,
+    colors: {
+        ...DefaultTheme.colors,
+        background: themes.light.view.backgroundColor,
+    }
+};
+
+const DarkTheme = {
+    ...BaseDarkTheme,
+    colors: {
+        ...BaseDarkTheme.colors,
+        background: themes.light.view.backgroundColor,
+    }
+};
+
 export default function App(): JSX.Element {
     const colorScheme = useColorScheme();
     // const colorScheme = 'dark';
@@ -41,7 +57,9 @@ export default function App(): JSX.Element {
         <Provider store={store}>
             <PersistGate loading={null} persistor={persistedStore}>
                 <ColorSchemeContext.Provider value={theme}>
-                    <NavigationContainer theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+                    <NavigationContainer
+                        theme={colorScheme === 'dark' ? DarkTheme : LightTheme}
+                    >
                         <Routes />
                         <DownloadManager />
                     </NavigationContainer>

src/components/Colors.tsx

@@ -48,13 +48,9 @@ function generateStyles(scheme: ColorSchemeName) {
             backgroundColor: scheme === 'dark' ? '#161616' : '#eee',
         },
         input: {
-            backgroundColor: scheme === 'dark' ? '#161616' : '#e6e6e6',
+            backgroundColor: scheme === 'dark' ? '#161616' : '#f3f3f3',
             color: scheme === 'dark' ? '#fff' : '#000',
         },
-        sectionHeading: {
-            backgroundColor: scheme === 'dark' ? '#111' : '#eee',
-            borderColor: scheme === 'dark' ? '#333' : '#ddd',
-        },
         stackHeader: {
             color: scheme === 'dark' ? 'white' : 'black'
         },

src/components/Input.tsx

@@ -4,6 +4,7 @@ const Input = styled.TextInput`
     margin: 10px 0;
     border-radius: 8px;
     padding: 15px;
+    padding-left: 40px;
 `;
 
 export default Input;

src/components/ListButton.tsx

@@ -1,30 +1,24 @@
 import React, { useCallback, useState } from 'react';
 import { TouchableOpacityProps } from 'react-native';
 import ChevronRight from 'assets/icons/chevron-right.svg';
-import styled, { css } from 'styled-components/native';
+import styled from 'styled-components/native';
 import { THEME_COLOR } from 'CONSTANTS';
 import useDefaultStyles from './Colors';
 
 const BUTTON_SIZE = 14;
 
 const Container = styled.Pressable<{ active?: boolean }>`
-    padding: 18px 20px;
-    border-bottom-width: 1px;
+    padding: 14px 16px;
+    border-radius: 8px;
+    margin: 4px 8px;
     flex-direction: row;
     justify-content: space-between;
-
-    ${props => props.active && css`
-        background-color: ${THEME_COLOR};
-    `}
+    align-items: center;
 `;
 
 const Label = styled.Text<{ active?: boolean }>`
     color: ${THEME_COLOR};
     font-size: 16px;
-
-    ${props => props.active && css`
-        color: white;
-    `}
 `;
 
 const ListButton: React.FC<TouchableOpacityProps> = ({ children, ...props }) => {
@@ -34,16 +28,17 @@ const ListButton: React.FC<TouchableOpacityProps> = ({ children, ...props }) =>
     const handlePressOut = useCallback(() => setPressed(false), []);
 
     return (
-        // @ts-expect-error styled-components has outdated react-native typings
         <Container
             {...props}
             onPressIn={handlePressIn}
             onPressOut={handlePressOut}
-            style={defaultStyles.border}
-            active={isPressed}
+            style={[
+                defaultStyles.border,
+                isPressed ? defaultStyles.activeBackground : undefined
+            ]}
         >
-            <Label active={isPressed}>{children}</Label>
-            <ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill={isPressed ? '#fff' : THEME_COLOR} />
+            <Label>{children}</Label>
+            <ChevronRight width={BUTTON_SIZE} height={BUTTON_SIZE} fill={THEME_COLOR} />
         </Container>
     );
 };