From 561e69e0f000f517f002f19dd1aac974a5444fcf Mon Sep 17 00:00:00 2001
From: Suherdy Yacob <suherdy.yacob@mapan.co.id>
Date: Sun, 14 Jun 2026 11:17:29 +0700
Subject: [PATCH] style: display branch distance prominently under the title
 with brand color and near_me icon for improved readability

---
 lib/screens/branches_screen.dart | 67 ++++++++++++++------------------
 1 file changed, 29 insertions(+), 38 deletions(-)

diff --git a/lib/screens/branches_screen.dart b/lib/screens/branches_screen.dart
index 3ae4dbe..d033cdd 100644
--- a/lib/screens/branches_screen.dart
+++ b/lib/screens/branches_screen.dart
@@ -3,8 +3,6 @@ import 'package:flutter/material.dart';
 import 'package:geolocator/geolocator.dart';
 import 'package:url_launcher/url_launcher.dart';
 import '../services/odoo_service.dart';
-import '../theme/app_theme.dart';
-
 class BranchesScreen extends StatefulWidget {
   const BranchesScreen({super.key});
 
@@ -260,48 +258,41 @@ class _BranchesScreenState extends State<BranchesScreen> {
                                   child: Icon(Icons.storefront,
                                       color: colorScheme.secondary),
                                 ),
-                                title: Row(
-                                  children: [
-                                    Expanded(
-                                      child: Text(
-                                        branch['name'] ?? 'Mapan Branch',
-                                        style: theme
-                                            .textTheme
-                                            .titleMedium
-                                            ?.copyWith(
-                                              fontFamily: 'serif',
-                                              fontWeight: FontWeight.bold,
-                                            ),
+                                title: Text(
+                                  branch['name'] ?? 'Mapan Branch',
+                                  style: theme
+                                      .textTheme
+                                      .titleMedium
+                                      ?.copyWith(
+                                        fontFamily: 'serif',
+                                        fontWeight: FontWeight.bold,
                                       ),
-                                    ),
-                                    if (distanceLabel.isNotEmpty)
-                                      Container(
-                                        margin: const EdgeInsets.only(left: 8),
-                                        padding: const EdgeInsets.symmetric(
-                                            horizontal: 8, vertical: 3),
-                                        decoration: BoxDecoration(
-                                          color: colorScheme.secondaryContainer,
-                                          borderRadius: BorderRadius.circular(12),
-                                        ),
-                                        child: Text(
-                                          distanceLabel,
-                                          style: theme
-                                              .textTheme
-                                              .labelLarge
-                                              ?.copyWith(
-                                                color: colorScheme.onSecondaryContainer,
-                                                fontSize: 10,
-                                                fontWeight: FontWeight.bold,
-                                              ),
-                                        ),
-                                      ),
-                                  ],
                                 ),
                                 subtitle: Padding(
-                                  padding: const EdgeInsets.only(top: 8.0),
+                                  padding: const EdgeInsets.only(top: 6.0),
                                   child: Column(
                                     crossAxisAlignment: CrossAxisAlignment.start,
                                     children: [
+                                      if (distanceLabel.isNotEmpty) ...[
+                                        Row(
+                                          children: [
+                                            Icon(
+                                              Icons.near_me_rounded,
+                                              size: 14,
+                                              color: colorScheme.primary,
+                                            ),
+                                            const SizedBox(width: 4),
+                                            Text(
+                                              '$distanceLabel away',
+                                              style: theme.textTheme.bodyMedium?.copyWith(
+                                                    color: colorScheme.primary,
+                                                    fontWeight: FontWeight.bold,
+                                                  ),
+                                            ),
+                                          ],
+                                        ),
+                                        const SizedBox(height: 6),
+                                      ],
                                       Text(
                                         addressParts.isEmpty
                                             ? 'No address specified'