diff --git a/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift b/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift index aa98ab456..4cfe091dd 100644 --- a/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift +++ b/apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift @@ -121,12 +121,11 @@ private let enableGrid = UIDevice.isIPad || FeatureFlag.enableGridCardsOnPhone @EnvironmentObject var dataService: DataService @Binding var prefersListLayout: Bool @State private var showLabelsSheet = false - @State private var isSearching = false @ObservedObject var viewModel: HomeFeedViewModel var body: some View { VStack(spacing: 0) { - SearchBar(searchTerm: $viewModel.searchTerm, isSearching: $isSearching) + SearchBar(searchTerm: $viewModel.searchTerm) ZStack(alignment: .bottom) { ScrollView(.horizontal, showsIndicators: false) { diff --git a/apple/OmnivoreKit/Sources/Views/SearchBar.swift b/apple/OmnivoreKit/Sources/Views/SearchBar.swift index e7edd548d..81edaa3c6 100644 --- a/apple/OmnivoreKit/Sources/Views/SearchBar.swift +++ b/apple/OmnivoreKit/Sources/Views/SearchBar.swift @@ -2,39 +2,52 @@ import SwiftUI public struct SearchBar: View { @Binding var searchTerm: String - @Binding var isSearching: Bool + @FocusState private var isFocused: Bool public init( - searchTerm: Binding, - isSearching: Binding + searchTerm: Binding ) { self._searchTerm = searchTerm - self._isSearching = isSearching } public var body: some View { HStack(spacing: 0) { TextField("Search", text: $searchTerm) - .padding(.vertical, 8) - .padding(.horizontal, 8) + .padding(7) + .padding(.horizontal, 25) .background(Color(.systemGray6)) .cornerRadius(8) - .padding(.horizontal, 10) - .onTapGesture { - self.isSearching = true - } + .focused($isFocused) + .overlay( + HStack { + Image(systemName: "magnifyingglass") + .foregroundColor(.gray) + .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading) + .padding(.leading, 10) - if isSearching { - Button( - action: { - self.isSearching = false - self.searchTerm = "" - self.hideKeyboard() - }, - label: { Image(systemName: "xmark.circle").foregroundColor(.appGrayTextContrast) } + if self.searchTerm != "" { + Button(action: { + self.searchTerm = "" + self.isFocused = false + }) { + Image(systemName: "multiply.circle.fill") + .foregroundColor(.gray) + .padding(.trailing, 8) + } + } + } ) - .padding(.trailing) - .transition(.opacity) + .padding(.horizontal, 10) + + if isFocused { + Button(action: { + self.isFocused = false + self.searchTerm = "" + }) { + Text("Cancel") + } + .padding(.trailing, 10) + .transition(.move(edge: .trailing)) } } }