production

lib/views/Dashboard/pickups/shipment_capture.dart

@@ -209,7 +209,7 @@ class _ShipmentCapturePageState extends State<ShipmentCapturePage> {
       _quoteError = quote.found
           ? null
           : 'No price is configured for this weight and route. '
-                'Call the hub before collecting.';
+                'Call your office before collecting.';
     });
   }
 
@@ -297,14 +297,22 @@ class _ShipmentCapturePageState extends State<ShipmentCapturePage> {
             Expanded(
               child: SingleChildScrollView(
                 physics: const BouncingScrollPhysics(),
-                padding: EdgeInsets.fromLTRB(16.w, 12.h, 16.w, 24.h),
+                // ── The bands carry the gutter, the page does not ──
+                //
+                // Every child below is full-bleed and pads its own content by
+                // [_bandPad]. The page used to hold a 16pt margin and give each
+                // card a border and a radius on top of it, which spent 32 of a
+                // 390pt phone's width on two strips of grey either side of a
+                // form whose fields are addresses. The ground showing between
+                // two bands separates them just as well and costs nothing.
+                padding: EdgeInsets.only(bottom: 24.h),
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     _journeyCard(),
-                    SizedBox(height: 14.h),
+                    SizedBox(height: MilerBand.gap),
                     _parcelCard(),
-                    SizedBox(height: 14.h),
+                    SizedBox(height: MilerBand.gap),
                     _quotePanel(),
                   ],
                 ),
@@ -360,13 +368,7 @@ class _ShipmentCapturePageState extends State<ShipmentCapturePage> {
   /// and it is the shape because it is read in one glance.
   /// ─────────────────────────────────────────────────────────────────────
   Widget _journeyCard() {
-    return Container(
-      padding: EdgeInsets.fromLTRB(14.w, 16.h, 14.w, 16.h),
-      decoration: BoxDecoration(
-        color: ColorConstants.pureSurface,
-        borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
-        border: Border.all(color: ColorConstants.borderSubtle, width: 1.2),
-      ),
+    return MilerBand(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
@@ -508,14 +510,14 @@ class _ShipmentCapturePageState extends State<ShipmentCapturePage> {
   /// One surface rather than a heading and three loose blocks, for the same
   /// reason as the journey above: these three answers are one description of
   /// one parcel, and the price is computed from all three together.
+  /// The inset a full-bleed band keeps around its content. The app's own, so
+  /// this page and the verification screen that hands off to it line up at the
+  /// same left margin. See [MilerBand].
+  double get _bandPad => MilerBand.pad;
+
   Widget _parcelCard() {
-    return Container(
-      padding: EdgeInsets.fromLTRB(14.w, 15.h, 14.w, 16.h),
-      decoration: BoxDecoration(
-        color: ColorConstants.pureSurface,
-        borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
-        border: Border.all(color: ColorConstants.borderSubtle, width: 1.2),
-      ),
+    return MilerBand(
+      padding: EdgeInsets.fromLTRB(_bandPad, 15.h, _bandPad, 16.h),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
@@ -588,21 +590,14 @@ class _ShipmentCapturePageState extends State<ShipmentCapturePage> {
     final quote = _quote;
     final priced = quote != null && !_quoting && _quoteError == null;
 
-    return Container(
-      width: double.infinity,
-      padding: EdgeInsets.fromLTRB(16.w, 16.h, 16.w, 16.h),
-      decoration: BoxDecoration(
-        color: priced
-            ? ColorConstants.acceptGreen.withValues(alpha: 0.06)
-            : ColorConstants.pureSurface,
-        borderRadius: BorderRadius.circular(DesignConstants.radiusXl),
-        border: Border.all(
-          color: priced
-              ? ColorConstants.acceptGreen.withValues(alpha: 0.28)
-              : ColorConstants.borderSubtle,
-          width: 1.2,
-        ),
-      ),
+    // A priced band goes pale green and takes the rail; an unpriced one stays
+    // white. Both fills are opaque colours rather than the accent laid over the
+    // page — see [ColorConstants.tint].
+    return MilerBand(
+      color: priced
+          ? ColorConstants.tint(ColorConstants.acceptGreen, 0.06)
+          : ColorConstants.pureSurface,
+      rail: priced ? ColorConstants.acceptGreen : null,
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [