Merge pull request #519 from pennlabs/anli/03-23-tweak-dining-menu-he…

…ader Tweak dining menu header design
pennlabs · Mar 23, 2024 · f110cbe · f110cbe
2 parents f18670a + fbb7c8c
commit f110cbe
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 16 deletions.
diff --git a/PennMobile/Dining/SwiftUI/Views/Venue/Detail View/DiningVenueDetailMenuView.swift b/PennMobile/Dining/SwiftUI/Views/Venue/Detail View/DiningVenueDetailMenuView.swift
@@ -73,9 +73,11 @@ struct DiningVenueDetailMenuView: View {
                 }
                 DatePicker("", selection: $menuDate, in: Date()...Date().add(minutes: 8640), displayedComponents: .date)
             }
+            .padding(.horizontal)
 
             Section {
                 DiningStationRowStack(selectedStation: $selectedStation, currentMenu: $currentMenu, parentScrollOffset: $parentScrollOffset, parentScrollProxy: parentScrollProxy)
+                    .padding(.horizontal)
             } header: {
                 VStack {
                     DiningMenuViewHeader(diningMenu: $currentMenu, selectedStation: $selectedStation)

diff --git a/PennMobile/Dining/SwiftUI/Views/Venue/Detail View/DiningVenueDetailView.swift b/PennMobile/Dining/SwiftUI/Views/Venue/Detail View/DiningVenueDetailView.swift
@@ -87,6 +87,7 @@ struct DiningVenueDetailView: View {
                                 WebView(url: URL(string: DiningVenue.menuUrlDict[venue.id] ?? "https://university-of-pennsylvania.cafebonappetit.com/")!)
                             }
                         }
+                        .padding(.horizontal)
 
                         Divider()
 
@@ -96,12 +97,14 @@ struct DiningVenueDetailView: View {
                                                           parentScrollOffset: $contentOffset)
                             } else if self.pickerIndex == 1 {
                                 DiningVenueDetailHoursView(for: venue)
+                                    .padding(.horizontal)
                             } else {
                                 DiningVenueDetailLocationView(for: venue, screenHeight: fullGeo.size.width)
+                                    .padding(.horizontal)
                             }
                             Spacer()
                         }.frame(minHeight: fullGeo.size.height - 80)
-                    }.padding(.horizontal)
+                    }
                     .background(GeometryReader { geometry in
                         Color.clear
                             .preference(key: ScrollOffsetPreferenceKey.self, value: geometry.frame(in: .named("scroll")).origin)
@@ -126,6 +129,7 @@ struct DiningVenueDetailView: View {
                 .onAppear {
                     FirebaseAnalyticsManager.shared.trackScreen("Venue Detail View")
                 }
+                .coordinateSpace(name: "DiningVenueDetailView")
             }
         }
     }

diff --git a/PennMobile/Dining/SwiftUI/Views/Venue/Detail View/MenuDisclosureGroup.swift b/PennMobile/Dining/SwiftUI/Views/Venue/Detail View/MenuDisclosureGroup.swift
@@ -16,42 +16,50 @@ struct DiningMenuViewHeader: View {
     @State var internalSelection: DiningStation?
 
     var body: some View {
-        VStack {
-            Rectangle()
-                .foregroundStyle(.secondary)
-                .frame(height: 1)
-            ScrollViewReader { proxy in
+        ScrollViewReader { proxy in
+            VStack(spacing: 0) {
                 ScrollView(.horizontal, showsIndicators: false) {
-                    HStack(spacing: 30) {
+                    HStack(spacing: 36) {
                         ForEach(diningMenu?.stations ?? [], id: \.horizUID) { diningStation in
                             Text(diningStation.name.uppercased())
                                 .bold(selectedStation != nil && selectedStation == diningStation)
                                 //.underline(selectedStation != nil && selectedStation == diningStation)
                                 .foregroundStyle((selectedStation != nil && selectedStation == diningStation) ? .primary : .secondary)
                                 .font(.callout)
-                                .padding(3)
                                 .onTapGesture {
                                     withAnimation {
                                         internalSelection = diningStation
                                     }
                                 }
-                    }.onChange(of: internalSelection) { new in
+                        }
+                    }
+                    .onChange(of: internalSelection) { new in
                         if let newStation = new {
                             withAnimation {
-                                proxy.scrollTo(newStation.horizUID, anchor: .leading)
+                                proxy.scrollTo(newStation.horizUID, anchor: .center)
                             }
                         }
                         selectedStation = internalSelection
 
-                        }
                     }
+                    .padding(.horizontal)
                 }
-                .padding(.vertical, 2)
+                .padding(.vertical, 11)
+
+                Rectangle()
+                    .foregroundStyle(.quaternary)
+                    .frame(height: 1)
             }
-            Rectangle()
-                .foregroundStyle(.secondary)
-                .frame(height: 1)
-        }.background(Color(.systemBackground))
+            .background {
+                GeometryReader { geometry in
+                    if geometry.frame(in: .named("DiningVenueDetailView")).minY < 1 {
+                        Rectangle().fill(Material.bar)
+                    } else {
+                        Color.clear
+                    }
+                }
+            }
+        }
             .onAppear {
                 internalSelection = selectedStation
             }