From bb57d0cb2eb95b036c6786eeecc0bbbbf8aa6544 Mon Sep 17 00:00:00 2001
From: Faris Armoush <farmoush@uba.com.jo>
Date: Sun, 11 May 2025 12:11:50 +0300
Subject: [PATCH] Enahnced `PowerClampEnergyDataDeviceDropdown` design and made
 it a dropdown.

---
 ...wer_clamp_energy_data_device_dropdown.dart | 59 ++++++++++++-------
 1 file changed, 39 insertions(+), 20 deletions(-)

diff --git a/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_device_dropdown.dart b/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_device_dropdown.dart
index 20540328..be9ce98d 100644
--- a/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_device_dropdown.dart
+++ b/lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_device_dropdown.dart
@@ -1,36 +1,55 @@
 import 'package:flutter/material.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
 
 class PowerClampEnergyDataDeviceDropdown extends StatelessWidget {
   const PowerClampEnergyDataDeviceDropdown({super.key});
 
-  static final _color = ColorsManager.blackColor.withValues(alpha: 0.8);
-
   @override
   Widget build(BuildContext context) {
-    return TextButton(
-      style: TextButton.styleFrom(
-        foregroundColor: _color,
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(16),
-          side: const BorderSide(
-            color: ColorsManager.greyColor,
-            width: 1,
-          ),
-        ),
-        backgroundColor: ColorsManager.transparentColor,
-        padding: const EdgeInsets.symmetric(
-          horizontal: 32,
-          vertical: 16,
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(
+          color: ColorsManager.greyColor,
+          width: 1,
         ),
       ),
-      child: const Text(
-        'Device 1',
-        style: TextStyle(
+      child: DropdownButton<String>(
+        value: 'Device 1',
+        isDense: true,
+        borderRadius: BorderRadius.circular(16),
+        dropdownColor: ColorsManager.whiteColors,
+        underline: const SizedBox.shrink(),
+        icon: const RotatedBox(
+          quarterTurns: 1,
+          child: Icon(Icons.chevron_right, size: 16),
+        ),
+        style: context.textTheme.labelSmall?.copyWith(
+          color: ColorsManager.textPrimaryColor,
           fontWeight: FontWeight.w700,
+          fontSize: 14,
         ),
+        padding: const EdgeInsetsDirectional.symmetric(
+          horizontal: 20,
+          vertical: 2,
+        ),
+        items: [
+          for (var i = 1; i < 10; i++)
+            DropdownMenuItem(
+              value: 'Device $i',
+              child: Text(
+                'Device $i',
+                style: context.textTheme.labelSmall?.copyWith(
+                  color: ColorsManager.textPrimaryColor,
+                  fontWeight: FontWeight.w700,
+                  fontSize: 14,
+                ),
+              ),
+            ),
+        ],
+        onChanged: (value) {},
       ),
-      onPressed: () {},
     );
   }
 }