From a6f29f1835017719fe9fb964c9ab5827ba8e7032 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 7 Jun 2024 12:20:35 -0700
Subject: [PATCH] adjust flex

---
 src/screens/Login/ScreenTransition.tsx        | 11 ++++++++--
 src/screens/StarterPack/Wizard/StepFeeds.tsx  | 22 +++++++++++--------
 .../StarterPack/Wizard/StepProfiles.tsx       | 22 +++++++++++--------
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/src/screens/Login/ScreenTransition.tsx b/src/screens/Login/ScreenTransition.tsx
index ab0a223678..6fad266802 100644
--- a/src/screens/Login/ScreenTransition.tsx
+++ b/src/screens/Login/ScreenTransition.tsx
@@ -1,9 +1,16 @@
 import React from 'react'
+import {StyleProp, ViewStyle} from 'react-native'
 import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated'
 
-export function ScreenTransition({children}: {children: React.ReactNode}) {
+export function ScreenTransition({
+  style,
+  children,
+}: {
+  style?: StyleProp<ViewStyle>
+  children: React.ReactNode
+}) {
   return (
-    <Animated.View entering={FadeInRight} exiting={FadeOutLeft}>
+    <Animated.View style={style} entering={FadeInRight} exiting={FadeOutLeft}>
       {children}
     </Animated.View>
   )
diff --git a/src/screens/StarterPack/Wizard/StepFeeds.tsx b/src/screens/StarterPack/Wizard/StepFeeds.tsx
index ffce0f6341..b184fe825a 100644
--- a/src/screens/StarterPack/Wizard/StepFeeds.tsx
+++ b/src/screens/StarterPack/Wizard/StepFeeds.tsx
@@ -12,7 +12,7 @@ import {SearchInput} from 'view/com/util/forms/SearchInput'
 import {List} from 'view/com/util/List'
 import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Loader} from '#/components/Loader'
 import {WizardFeedCard} from '#/components/StarterPack/Wizard/WizardFeedCard'
 
@@ -21,6 +21,7 @@ function keyExtractor(item: GeneratorView) {
 }
 
 export function StepFeeds() {
+  const t = useTheme()
   const [state, dispatch] = useWizardState()
   const [query, setQuery] = useState('')
 
@@ -54,14 +55,16 @@ export function StepFeeds() {
   }
 
   return (
-    <ScreenTransition>
-      <View style={[a.my_sm, a.px_md, {height: 40}]}>
-        <SearchInput
-          query={query}
-          onChangeQuery={onChangeQuery}
-          onPressCancelSearch={() => setQuery('')}
-          onSubmitQuery={() => {}}
-        />
+    <ScreenTransition style={[a.flex_1]}>
+      <View style={[a.border_b, t.atoms.border_contrast_medium]}>
+        <View style={[a.my_sm, a.px_md, {height: 40}]}>
+          <SearchInput
+            query={query}
+            onChangeQuery={onChangeQuery}
+            onPressCancelSearch={() => setQuery('')}
+            onSubmitQuery={() => {}}
+          />
+        </View>
       </View>
       <List
         data={query ? searchedFeeds : popularFeeds}
@@ -72,6 +75,7 @@ export function StepFeeds() {
         renderScrollComponent={props => <KeyboardAwareScrollView {...props} />}
         containWeb={true}
         sideBorders={false}
+        style={{flex: 1}}
         ListEmptyComponent={
           <View style={[a.flex_1, a.align_center, a.mt_lg]}>
             <Loader size="lg" />
diff --git a/src/screens/StarterPack/Wizard/StepProfiles.tsx b/src/screens/StarterPack/Wizard/StepProfiles.tsx
index 1a4ef65103..e957cf8df8 100644
--- a/src/screens/StarterPack/Wizard/StepProfiles.tsx
+++ b/src/screens/StarterPack/Wizard/StepProfiles.tsx
@@ -10,7 +10,7 @@ import {SearchInput} from 'view/com/util/forms/SearchInput'
 import {List} from 'view/com/util/List'
 import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Loader} from '#/components/Loader'
 import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardProfileCard'
 
@@ -19,6 +19,7 @@ function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic) {
 }
 
 export function StepProfiles() {
+  const t = useTheme()
   const [state, dispatch] = useWizardState()
   const [query, setQuery] = useState('')
 
@@ -43,14 +44,16 @@ export function StepProfiles() {
   }
 
   return (
-    <ScreenTransition>
-      <View style={[a.my_sm, a.px_md, {height: 40}]}>
-        <SearchInput
-          query={query}
-          onChangeQuery={setQuery}
-          onPressCancelSearch={() => setQuery('')}
-          onSubmitQuery={() => {}}
-        />
+    <ScreenTransition style={[a.flex_1]}>
+      <View style={[a.border_b, t.atoms.border_contrast_medium]}>
+        <View style={[a.my_sm, a.px_md, {height: 40}]}>
+          <SearchInput
+            query={query}
+            onChangeQuery={setQuery}
+            onPressCancelSearch={() => setQuery('')}
+            onSubmitQuery={() => {}}
+          />
+        </View>
       </View>
       <List
         data={query ? results : follows}
@@ -61,6 +64,7 @@ export function StepProfiles() {
         renderScrollComponent={props => <KeyboardAwareScrollView {...props} />}
         containWeb={true}
         sideBorders={false}
+        style={[a.flex_1]}
         ListEmptyComponent={
           <View style={[a.flex_1, a.align_center, a.mt_lg]}>
             <Loader size="lg" />