Use compact mode for the logo on short viewports

duckduckgo · Oct 9, 2024 · 6df0763 · 6df0763
1 parent f3e969b
commit 6df0763
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/DuckDuckGo/HomePage/View/AddressBarTextFieldView.swift b/DuckDuckGo/HomePage/View/AddressBarTextFieldView.swift
@@ -53,16 +53,20 @@ struct BigSearchBox: View {
     enum Const {
         static let searchBoxHeight = 40.0
         static let logoHeight = 96.0
+        static let compactLogoHeight = 64.0
         static let spacing = 24.0
         static let logoSpacing = 12.0
         static let wordmarkHeight = 22.0
 
         static let totalHeight = searchBoxHeight + logoHeight + logoSpacing + wordmarkHeight + spacing
+        static let compactHeight = searchBoxHeight + compactLogoHeight + spacing
     }
 
+    let isCompact: Bool
     let usesFixedColorScheme: Bool
 
-    init(usesFixedColorScheme: Bool = true) {
+    init(isCompact: Bool, usesFixedColorScheme: Bool = true) {
+        self.isCompact = isCompact
         self.usesFixedColorScheme = usesFixedColorScheme
     }
 
@@ -75,11 +79,20 @@ struct BigSearchBox: View {
 
     @ViewBuilder
     func logo() -> some View {
-        VStack(spacing: Const.logoSpacing) {
-            Image(nsImage: .onboardingDax)
-                .resizable()
-                .frame(width: Const.logoHeight, height: Const.logoHeight)
-            Image(nsImage: .duckDuckGoWordmark)
+        if isCompact {
+            HStack(spacing: Const.logoSpacing) {
+                Image(nsImage: .onboardingDax)
+                    .resizable()
+                    .frame(width: Const.compactLogoHeight, height: Const.compactLogoHeight)
+                Image(nsImage: .duckDuckGoWordmark)
+            }
+        } else {
+            VStack(spacing: Const.logoSpacing) {
+                Image(nsImage: .onboardingDax)
+                    .resizable()
+                    .frame(width: Const.logoHeight, height: Const.logoHeight)
+                Image(nsImage: .duckDuckGoWordmark)
+            }
         }
     }
 

diff --git a/DuckDuckGo/HomePage/View/BurnerHomePageView.swift b/DuckDuckGo/HomePage/View/BurnerHomePageView.swift
@@ -69,7 +69,7 @@ extension HomePage.Views {
 
                             Group {
                                 if addressBarModel.shouldShowAddressBar {
-                                    BigSearchBox(usesFixedColorScheme: false)
+                                    BigSearchBox(isCompact: false, usesFixedColorScheme: false)
                                 }
 
                                 ZStack {

diff --git a/DuckDuckGo/HomePage/View/HomePageView.swift b/DuckDuckGo/HomePage/View/HomePageView.swift
@@ -134,7 +134,7 @@ extension HomePage.Views {
                             Spacer(minLength: 40)
 
                             if addressBarModel.shouldShowAddressBar {
-                                BigSearchBox()
+                                BigSearchBox(isCompact: isCompactSearchBar(with: geometryProxy))
                                     .id(Const.searchBarIdentifier)
                             }
 
@@ -151,7 +151,7 @@ extension HomePage.Views {
                                 .visibility(model.isRecentActivityVisible ? .visible : .gone)
                             Spacer(minLength: 40)
                         }
-                        .frame(height: totalHeight)
+                        .frame(height: totalHeight(with: geometryProxy))
 
                         VStack(spacing: 0) {
                             remoteMessage()
@@ -179,7 +179,7 @@ extension HomePage.Views {
                             }
 
                         if addressBarModel.shouldShowAddressBar {
-                            BigSearchBox()
+                            BigSearchBox(isCompact: isCompactSearchBar(with: geometryProxy))
                                 .id(Const.searchBarIdentifier)
                         }
 
@@ -201,13 +201,17 @@ extension HomePage.Views {
             }
             .frame(maxWidth: .infinity)
             .if(shouldCenterContent(with: geometryProxy)) { view in
-                view.frame(height: max(geometryProxy.size.height, totalHeight))
+                view.frame(height: max(geometryProxy.size.height, totalHeight(with: geometryProxy)))
             }
         }
 
-        private var totalHeight: CGFloat {
+        func isCompactSearchBar(with geometry: GeometryProxy) -> Bool {
+            return geometry.size.height < 650
+        }
+
+        private func totalHeight(with geometry: GeometryProxy) -> CGFloat {
             let spacers = 40.0 * 2
-            var height = BigSearchBox.Const.totalHeight + spacers
+            var height = (isCompactSearchBar(with: geometry) ? BigSearchBox.Const.compactHeight : BigSearchBox.Const.totalHeight) + spacers
             if model.isContinueSetUpAvailable && model.isContinueSetUpVisible {
                 height += continueSetUpModel.isMoreOrLessButtonNeeded ? 208 : 184
                 height += 32 + continueSetUpCardsTopPadding
@@ -393,7 +397,7 @@ extension HomePage.Views.RootView {
             return false
         }
         if activeRemoteMessageModel.shouldShowRemoteMessage {
-            return geometry.size.height > totalHeight + 2 * remoteMessageHeight
+            return geometry.size.height > totalHeight(with: geometry) + 2 * remoteMessageHeight
         }
         return true
     }