Use navigation stack and tool bar

Author: itsmeichigo

WooCommerce/Classes/ViewRelated/Orders/Order Details/Shipping Labels/WooShipping Create Shipping Labels/WooShipping Hazmat Section/WooShippingHazmatDetailView.swift

@@ -12,48 +12,51 @@ struct WooShippingHazmatDetailView: View {
     }
 
     var body: some View {
-        ScrollView {
-            VStack(spacing: Constants.verticalSpacing) {
-                HStack {
-                    Button(Localization.cancel) {
-                        dismiss()
-                    }
-                    .padding(.top)
-                    Spacer()
-                }
+        NavigationStack {
+            ScrollView {
+                VStack(spacing: Constants.verticalSpacing) {
 
-                Text(Localization.title)
-                    .secondaryTitleStyle()
-                    .bold()
-                    .frame(maxWidth: .infinity, alignment: .leading)
+                    Text(Localization.title)
+                        .secondaryTitleStyle()
+                        .bold()
+                        .frame(maxWidth: .infinity, alignment: .leading)
 
-                Toggle(isOn: $isHazardous) {
-                    Text(Localization.toggleLabel)
-                }
+                    Toggle(isOn: $isHazardous) {
+                        Text(Localization.toggleLabel)
+                    }
 
-                Button(Localization.selectCategory) {
-                    // TODO: navigate to category list
-                }
-                .buttonStyle(PrimaryButtonStyle())
-                .renderedIf(isHazardous)
+                    Button(Localization.selectCategory) {
+                        // TODO: navigate to category list
+                    }
+                    .buttonStyle(PrimaryButtonStyle())
+                    .renderedIf(isHazardous)
 
-                Divider()
+                    Divider()
 
-                Text(Localization.detailLine1)
-                    .frame(maxWidth: .infinity, alignment: .leading)
-                Text(detailLine2AttributedString)
-                    .frame(maxWidth: .infinity, alignment: .leading)
-                Text(detailLine3AttributedString)
-                    .frame(maxWidth: .infinity, alignment: .leading)
+                    Text(Localization.detailLine1)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                    Text(detailLine2AttributedString)
+                        .frame(maxWidth: .infinity, alignment: .leading)
+                    Text(detailLine3AttributedString)
+                        .frame(maxWidth: .infinity, alignment: .leading)
 
-                Spacer()
+                    Spacer()
+                }
+                .environment(\.openURL, OpenURLAction { url in
+                    detailURL = url
+                    return .handled
+                })
+                .safariSheet(url: $detailURL)
+                .padding(.horizontal)
+                .toolbar {
+                    ToolbarItem(placement: .cancellationAction) {
+                        Button(Localization.cancel) {
+                            dismiss()
+                        }
+                    }
+                }
+                .toolbarBackground(Color.clear, for: .navigationBar)
             }
-            .environment(\.openURL, OpenURLAction { url in
-                detailURL = url
-                return .handled
-            })
-            .safariSheet(url: $detailURL)
-            .padding(.horizontal)
         }
     }
 }