feat: Added AppBackground and applied to SearchView

xramos · Apr 25, 2024 · 2187994 · 2187994
1 parent 6240941
commit 2187994
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 16 deletions.
diff --git a/MyComics/MyComics.xcodeproj/project.pbxproj b/MyComics/MyComics.xcodeproj/project.pbxproj
@@ -35,6 +35,7 @@
 		DA15FFF92BBD62E800513DD7 /* ServerImageModelUnitTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = DA15FFF82BBD62E800513DD7 /* ServerImageModelUnitTests.swift */; };
 		DA15FFFB2BBD640200513DD7 /* ServerPowerUnitTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = DA15FFFA2BBD640200513DD7 /* ServerPowerUnitTests.swift */; };
 		DA15FFFD2BBD643B00513DD7 /* CharacterUnitTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = DA15FFFC2BBD643B00513DD7 /* CharacterUnitTests.swift */; };
+		DA51ADBE2BD95AAC000E51EA /* AppBackground.swift in Sources */ = {isa = PBXBuildFile; fileRef = DA51ADBD2BD95AAC000E51EA /* AppBackground.swift */; };
 		DAC47E752BD6A4AF00FD0CE9 /* Value.swift in Sources */ = {isa = PBXBuildFile; fileRef = DAC47E732BD6A4AF00FD0CE9 /* Value.swift */; };
 		DAC47E762BD6A4AF00FD0CE9 /* Colors.swift in Sources */ = {isa = PBXBuildFile; fileRef = DAC47E742BD6A4AF00FD0CE9 /* Colors.swift */; };
 		DAD60F6A2BC3EBF7001ED57A /* Tab.swift in Sources */ = {isa = PBXBuildFile; fileRef = DAD60F692BC3EBF7001ED57A /* Tab.swift */; };
@@ -118,6 +119,7 @@
 		DA15FFFA2BBD640200513DD7 /* ServerPowerUnitTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ServerPowerUnitTests.swift; sourceTree = "<group>"; };
 		DA15FFFC2BBD643B00513DD7 /* CharacterUnitTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CharacterUnitTests.swift; sourceTree = "<group>"; };
 		DA15FFFF2BBD665400513DD7 /* Repository.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Repository.swift; sourceTree = "<group>"; };
+		DA51ADBD2BD95AAC000E51EA /* AppBackground.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppBackground.swift; sourceTree = "<group>"; };
 		DAC47E732BD6A4AF00FD0CE9 /* Value.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Value.swift; sourceTree = "<group>"; };
 		DAC47E742BD6A4AF00FD0CE9 /* Colors.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = Colors.swift; sourceTree = "<group>"; };
 		DAD60F692BC3EBF7001ED57A /* Tab.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Tab.swift; sourceTree = "<group>"; };
@@ -446,6 +448,7 @@
 			children = (
 				DAD60F822BC3F73B001ED57A /* CharacterListView.swift */,
 				DAD60F8B2BC42CD3001ED57A /* CharacterImageView.swift */,
+				DA51ADBD2BD95AAC000E51EA /* AppBackground.swift */,
 			);
 			path = Views;
 			sourceTree = "<group>";
@@ -638,6 +641,7 @@
 				DAD60F9C2BC43252001ED57A /* Model.xcdatamodeld in Sources */,
 				DAD60F9E2BC43478001ED57A /* DBPower.swift in Sources */,
 				DAD60F8E2BC42EC2001ED57A /* FavoritesViewModel.swift in Sources */,
+				DA51ADBE2BD95AAC000E51EA /* AppBackground.swift in Sources */,
 				DAD60F992BC43220001ED57A /* DBImage.swift in Sources */,
 				DA15FFEC2BBD61AD00513DD7 /* Gender.swift in Sources */,
 				DA15FFE62BBD606E00513DD7 /* ServerOrigin.swift in Sources */,

diff --git a/MyComics/MyComics/Scenes/Preview/PreviewView.swift b/MyComics/MyComics/Scenes/Preview/PreviewView.swift
@@ -11,17 +11,18 @@ struct PreviewView: View {
 
     var body: some View {
 
-        ZStack {
+        VStack {
 
-            LinearGradient(colors: [Colors.primary, Color.black],
+            /*LinearGradient(colors: [Colors.primary, Color.secondary],
                            startPoint: .top,
                            endPoint: .bottom)
-            .ignoresSafeArea()
+            .ignoresSafeArea()*/
 
             Text("My Comics")
                 .font(.largeTitle)
                 .foregroundStyle(.white)
         }
+        .appBackground()
     }
 }
 

diff --git a/MyComics/MyComics/Scenes/Search/SearchView.swift b/MyComics/MyComics/Scenes/Search/SearchView.swift
@@ -17,26 +17,30 @@ struct SearchView: View {
 
         VStack {
 
-            searchCharacterView
-
-            Divider()
-
-            if viewModel.showProgressView {
+            VStack {
+
+                searchCharacterView
 
-                ProgressView()
+                if viewModel.showProgressView {
+
+                    ProgressView()
+                }
+
+                charactersListView
             }
-
-            charactersListView
+            .padding(.top, Value.padding)
+            .padding([.leading, .trailing], Value.paddingLarge)
         }
-        .padding(.top, Value.padding)
-        .padding([.leading, .trailing], Value.paddingLarge)
+        .appBackground()
     }
 
     @ViewBuilder
     var searchCharacterView: some View {
 
         HStack(spacing: Value.padding) {
 
+            Spacer().frame(width: 5)
+
             TextField(viewModel.localization.textLabel, text: $searchText)
 
             if !searchText.isEmpty {
@@ -59,7 +63,12 @@ struct SearchView: View {
                     viewModel.search(searchInput: searchText)
                 }
             }
+
+            Spacer().frame(width: 5)
         }
+        .padding([.top, .bottom], Value.paddingLarge)
+        .background(Colors.neutral)
+        .clipShape(RoundedRectangle(cornerRadius: Value.cornerRadius, style: .continuous))
     }
 
     @ViewBuilder

diff --git a/MyComics/MyComics/Theme/Colors.swift b/MyComics/MyComics/Theme/Colors.swift
@@ -11,4 +11,6 @@ struct Colors {
 
     static let primary = Color(red: 1, green: 44/255, blue: 93/255) // #FF2C5DA7
     static let secondary = Color(red: 1, green: 190/255, blue: 0) // #FFBE0034
+
+    static let neutral = Color(red: 222/255, green: 222/255, blue: 222/255)
 }
diff --git a/MyComics/MyComics/Views/AppBackground.swift b/MyComics/MyComics/Views/AppBackground.swift
@@ -0,0 +1,50 @@
+//
+//  AppBackground.swift
+//  MyComics
+//
+//  Created by Xavier Ramos on 24/4/24.
+//
+
+import SwiftUI
+
+struct AppBackground<Content: View>: View {
+
+    let content: Content
+
+    init(@ViewBuilder content: @escaping () -> Content) {
+        self.content = content()
+    }
+
+    var body: some View {
+
+        ZStack {
+
+            Rectangle()
+                .fill(LinearGradient(colors: [Colors.primary, Color.secondary],
+                                     startPoint: .top,
+                                     endPoint: .bottom))
+                .ignoresSafeArea()
+
+            content
+        }
+    }
+}
+
+struct AppBackgroundModifier: ViewModifier {
+
+    func body(content: Content) -> some View {
+
+        AppBackground {
+
+            content
+        }
+    }
+}
+
+extension View {
+
+    func appBackground() -> some View {
+
+        self.modifier(AppBackgroundModifier())
+    }
+}
diff --git a/MyComics/MyComics/Views/CharacterImageView.swift b/MyComics/MyComics/Views/CharacterImageView.swift
@@ -26,6 +26,7 @@ struct CharacterImageView: View {
                     if let image = phase.image {
 
                         image.resizable()
+                            .scaledToFit()
                             .aspectRatio(contentMode: .fit)
 
                     } else if phase.error != nil {

diff --git a/MyComics/MyComics/Views/CharacterListView.swift b/MyComics/MyComics/Views/CharacterListView.swift
@@ -27,7 +27,6 @@ struct CharacterListView: View {
 
                 CharacterImageView(imageString: image)
                     .frame(width: Value.width, height: Value.height)
-                    .clipShape(RoundedRectangle(cornerRadius: Value.cornerRadius, style: .circular))
 
                 VStack(alignment: .leading) {
 
@@ -40,9 +39,10 @@ struct CharacterListView: View {
 
                 Spacer()
             }
-
-            Divider()
+            .background(Colors.neutral)
+            .clipShape(RoundedRectangle(cornerRadius: Value.cornerRadius, style: .continuous))
         }
+        .padding(.bottom, 5)
     }
 }