added fonts, fixed alignment, and responsivness for the web

lib/main.dart

@@ -45,6 +45,7 @@ class MyApp extends StatelessWidget {
           ),
 
           theme: ThemeData(
+            fontFamily: 'Aftika',
             textTheme: const TextTheme(
               bodySmall: TextStyle(
                   fontSize: 13,
@@ -61,7 +62,43 @@ class MyApp extends StatelessWidget {
               ),
             ),
             colorScheme: ColorScheme.fromSeed(
-                seedColor: Colors.deepPurple), // Set up color scheme
+              seedColor: ColorsManager.blueColor,
+              primary: ColorsManager.blueColor, // Checked state color
+              onSurface: Colors.grey.shade400, // Unchecked state color
+            ),
+            switchTheme: SwitchThemeData(
+              thumbColor: MaterialStateProperty.resolveWith((states) {
+                if (states.contains(MaterialState.selected)) {
+                  return ColorsManager
+                      .blueColor; // Color of the switch knob when selected
+                }
+                return ColorsManager
+                    .whiteColors; // Color of the switch knob when not selected
+              }),
+              trackColor: MaterialStateProperty.resolveWith((states) {
+                if (states.contains(MaterialState.selected)) {
+                  return ColorsManager.blueColor
+                      .withOpacity(0.5); // Track color when selected
+                }
+                return ColorsManager
+                    .whiteColors; // Track color when not selected
+              }),
+            ),
+            checkboxTheme: CheckboxThemeData(
+              fillColor: MaterialStateProperty.resolveWith((states) {
+                if (states.contains(MaterialState.selected)) {
+                  return ColorsManager.blueColor; // Checked state color
+                }
+                return Colors.grey.shade200; // Unchecked state color
+              }),
+              checkColor: MaterialStateProperty.all(
+                  Colors.white), // The color of the checkmark
+              side:
+                  BorderSide(color: ColorsManager.whiteColors), // Border color
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(4), // Border radius
+              ),
+            ),
             useMaterial3: true, // Enable Material 3
           ),
           home: isLoggedIn == 'Success' ? const HomePage() : const LoginPage(),

lib/pages/common/filter/filter_widget.dart

@@ -35,7 +35,9 @@ class FilterWidget extends StatelessWidget {
               decoration: BoxDecoration(
                 color: ColorsManager.boxColor,
                 border: Border.all(
-                  color: isSelected ? Colors.blue : Colors.transparent,
+                  color: isSelected
+                      ? ColorsManager.blueColor.withOpacity(0.8)
+                      : Colors.transparent,
                   width: 2.0,
                 ),
                 borderRadius: _getBorderRadius(index),
@@ -45,7 +47,9 @@ class FilterWidget extends StatelessWidget {
                 child: Text(
                   tabs[index],
                   style: TextStyle(
-                    color: isSelected ? Colors.blue : Colors.black,
+                    color: isSelected
+                        ? ColorsManager.blueColor.withOpacity(0.8)
+                        : Colors.black,
                   ),
                 ),
               ),

lib/pages/common/text_field/custom_web_textfield.dart

@@ -10,6 +10,7 @@ class CustomWebTextField extends StatelessWidget {
     required this.controller,
     this.description,
     this.validator,
+    this.hintText,
   });
 
   final bool isRequired;
@@ -17,6 +18,7 @@ class CustomWebTextField extends StatelessWidget {
   final String? description;
   final TextEditingController? controller;
   final String? Function(String?)? validator;
+  final String? hintText;
 
   @override
   Widget build(BuildContext context) {
@@ -81,7 +83,7 @@ class CustomWebTextField extends StatelessWidget {
                 errorStyle:
                     const TextStyle(height: 0), // Hide the error text space
 
-                hintText: 'Please enter'),
+                hintText: hintText ?? 'Please enter'),
           ),
         ),
       ],

lib/pages/device_managment/all_devices/view/device_managment_page.dart

@@ -3,8 +3,9 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/bloc/device_managment_bloc.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/widgets/device_managment_body.dart';
 import 'package:syncrow_web/web_layout/web_scaffold.dart';
+import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 
-class DeviceManagementPage extends StatelessWidget {
+class DeviceManagementPage extends StatelessWidget with HelperResponsiveLayout {
   const DeviceManagementPage({super.key});
 
   @override
@@ -16,7 +17,7 @@ class DeviceManagementPage extends StatelessWidget {
           'Device Management',
           style: Theme.of(context).textTheme.headlineLarge,
         ),
-        enableMenuSideba: true,
+        enableMenuSideba: isLargeScreenSize(context),
         scaffoldBody: BlocBuilder<DeviceManagementBloc, DeviceManagementState>(
           builder: (context, state) {
             if (state is DeviceManagementLoading) {

lib/pages/device_managment/all_devices/widgets/device_managment_body.dart

@@ -41,7 +41,6 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
           lowBatteryCount = state.lowBatteryCount;
         }
 
-        // Create tab labels with counts
         final tabs = [
           'All (${devices.length})',
           'Online ($onlineCount)',
@@ -50,7 +49,9 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
         ];
 
         return Container(
-          padding: const EdgeInsets.all(30),
+          padding: isLargeScreenSize(context)
+              ? const EdgeInsets.all(30)
+              : const EdgeInsets.all(15),
           height: context.screenHeight,
           width: context.screenWidth,
           child: Column(
@@ -66,16 +67,12 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                       .add(SelectedFilterChanged(index));
                 },
               ),
-              const SizedBox(
+              const SizedBox(height: 20),
-                height: 20,
-              ),
               const DeviceSearchFilters(),
-              const SizedBox(
+              const SizedBox(height: 12),
-                height: 12,
-              ),
               Container(
                 height: 43,
-                width: 100,
+                width: isSmallScreenSize(context) ? double.infinity : 100,
                 decoration: containerDecoration,
                 child: Center(
                   child: DefaultButton(
@@ -95,9 +92,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
                   ),
                 ),
               ),
-              const SizedBox(
+              const SizedBox(height: 12),
-                height: 12,
-              ),
               Expanded(
                 child: DynamicTable(
                   cellDecoration: containerDecoration,

lib/pages/device_managment/shared/device_control_dialog.dart

@@ -29,15 +29,41 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Center(
+                Row(
-                  child: Text(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    device.categoryName ?? 'Device Control',
+                  children: [
-                    style: TextStyle(
+                    const SizedBox(),
-                      fontWeight: FontWeight.bold,
+                    Text(
-                      fontSize: 22,
+                      device.categoryName ?? 'Device Control',
-                      color: ColorsManager.dialogBlueTitle,
+                      style: TextStyle(
+                        fontWeight: FontWeight.bold,
+                        fontSize: 22,
+                        color: ColorsManager.dialogBlueTitle,
+                      ),
                     ),
-                  ),
+                    Container(
+                      width: 25,
+                      decoration: BoxDecoration(
+                        color: Colors.transparent,
+                        shape: BoxShape.circle,
+                        border: Border.all(
+                          color: Colors.grey,
+                          width: 1.0,
+                        ),
+                      ),
+                      child: IconButton(
+                        padding: EdgeInsets.all(1),
+                        icon: const Icon(
+                          Icons.close,
+                          color: Colors.grey,
+                          size: 18,
+                        ),
+                        onPressed: () {
+                          Navigator.of(context).pop();
+                        },
+                      ),
+                    ),
+                  ],
                 ),
                 const SizedBox(height: 20),
                 _buildDeviceInfoSection(),
@@ -56,7 +82,7 @@ class DeviceControlDialog extends StatelessWidget with RouteControlsBasedCode {
 
   Widget _buildDeviceInfoSection() {
     return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 50),
+      padding: const EdgeInsets.symmetric(vertical: 25, horizontal: 50),
       child: Table(
         children: [
           TableRow(

lib/pages/home/view/home_card.dart

@@ -18,15 +18,17 @@ class HomeCard extends StatelessWidget {
   });
   @override
   Widget build(BuildContext context) {
-    bool evenNumbers = index % 2 == 0;
+    // bool evenNumbers = index % 2 == 0;
     return InkWell(
       onTap: active ? onTap : null,
       child: Container(
         padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
         decoration: BoxDecoration(
-          color: evenNumbers && active
+          color:
-              ? ColorsManager.blueColor.withOpacity(0.8)
+              // evenNumbers && active
-              : (active
+              //     ? ColorsManager.blueColor.withOpacity(0.8)
+              //     :
+              (active
                   ? ColorsManager.blueColor
                   : ColorsManager.blueColor.withOpacity(0.2)),
           borderRadius: BorderRadius.circular(30),

lib/services/devices_mang_api.dart

@@ -93,4 +93,7 @@ class DevicesManagementApi {
     );
     return response;
   }
+
+  //https://syncrow-dev.azurewebsites.net/device/report-logs/7e97c359-e822-4507-ac1f-e0ff96b0ca29?code=factory_reset
+  
 }

lib/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart

@@ -7,10 +7,10 @@ mixin HelperResponsiveLayout {
 
   bool isMediumScreenSize(BuildContext context) {
     return MediaQuery.of(context).size.width >= 700 &&
-        MediaQuery.of(context).size.width < 1300;
+        MediaQuery.of(context).size.width < 1400;
   }
 
   bool isLargeScreenSize(BuildContext context) {
-    return MediaQuery.of(context).size.width >= 1300;
+    return MediaQuery.of(context).size.width >= 1400;
   }
 }

lib/web_layout/menu_sidebar.dart

@@ -1,59 +1,75 @@
 import 'package:flutter/material.dart';
-import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/pages/common/text_field/custom_web_textfield.dart';
-import 'package:syncrow_web/utils/style.dart';
+import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 
-class MenuSidebar extends StatelessWidget {
+class MenuSidebar extends StatelessWidget with HelperResponsiveLayout {
   const MenuSidebar({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Expanded(
+    return LayoutBuilder(
-      child: Container(
+      builder: (context, constraints) {
-        decoration: const BoxDecoration(
+        double sidebarWidth;
-          shape: BoxShape.rectangle,
+
-          boxShadow: [
+        if (isLargeScreenSize(context)) {
-            BoxShadow(
+          sidebarWidth = 250;
-              color: Colors.black26,
+        } else if (isMediumScreenSize(context)) {
-              offset: Offset(4, 0),
+          sidebarWidth = 230;
-              blurRadius: 10,
+        } else {
-            )
+          sidebarWidth = 200;
-          ],
+        }
-          color: ColorsManager.whiteColors,
+
-        ),
+        return Container(
-        width: 200,
+          width: sidebarWidth,
-        child: Padding(
+          decoration: const BoxDecoration(
-          padding: const EdgeInsets.all(15.0),
+            shape: BoxShape.rectangle,
-          child: Column(
+            boxShadow: [
-            children: [
+              BoxShadow(
-              Row(
+                color: Colors.black26,
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                offset: Offset(4, 0),
-                children: [
+                blurRadius: 10,
-                  const Text(
-                    'Community',
-                    style: TextStyle(fontSize: 20),
-                  ),
-                  CircleAvatar(
-                    backgroundColor: Colors.grey.shade200,
-                    child: IconButton(
-                        color: ColorsManager.onSecondaryColor,
-                        onPressed: () {},
-                        icon: const Icon(Icons.add)),
-                  )
-                ],
-              ),
-              const SizedBox(
-                height: 20,
-              ),
-              TextFormField(
-                  controller: TextEditingController(),
-                  decoration: textBoxDecoration(suffixIcon: true)),
-              Container(
-                height: 100,
               )
             ],
+            color: Colors.white,
           ),
-        ),
+          child: Padding(
-      ),
+            padding: const EdgeInsets.all(15.0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    const Text(
+                      'Community',
+                      style: TextStyle(fontSize: 20),
+                    ),
+                    CircleAvatar(
+                      backgroundColor: Colors.grey.shade200,
+                      child: IconButton(
+                        color: Colors.grey,
+                        onPressed: () {},
+                        icon: const Icon(Icons.add),
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 20),
+                SizedBox(
+                  height: 100,
+                  child: CustomWebTextField(
+                    isRequired: false,
+                    textFieldName: '',
+                    controller: TextEditingController(),
+                    hintText: 'Search...',
+                  ),
+                ),
+                const Spacer(),
+              ],
+            ),
+          ),
+        );
+      },
     );
   }
 }

lib/web_layout/web_scaffold.dart

@@ -1,10 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 import 'package:syncrow_web/web_layout/web_app_bar.dart';
 import 'menu_sidebar.dart';
 
-class WebScaffold extends StatelessWidget {
+class WebScaffold extends StatelessWidget with HelperResponsiveLayout {
   final bool enableMenuSideba;
   final Widget? appBarTitle;
   final List<Widget>? appBarBody;
@@ -17,6 +18,7 @@ class WebScaffold extends StatelessWidget {
       this.enableMenuSideba = true});
   @override
   Widget build(BuildContext context) {
+    final isSmall = isSmallScreenSize(context);
     return Scaffold(
         body: Stack(
       children: [
@@ -43,7 +45,7 @@ class WebScaffold extends StatelessWidget {
             Expanded(
               child: Row(
                 children: [
-                  if (enableMenuSideba) const MenuSidebar(),
+                  if (enableMenuSideba && !isSmall) const MenuSidebar(),
                   Expanded(flex: 5, child: scaffoldBody!)
                 ],
               ),

pubspec.yaml

@@ -86,17 +86,13 @@ flutter:
   # "family" key with the font family name, and a "fonts" key with a
   # list giving the asset and other descriptors for the font. For
   # example:
-  # fonts:
+  fonts:
-  #   - family: Schyler
+    - family: Aftika
-  #     fonts:
+      fonts:
-  #       - asset: fonts/Schyler-Regular.ttf
+        - asset: assets/fonts/fonnts.com-AftikaBlack.ttf
-  #       - asset: fonts/Schyler-Italic.ttf
+        - asset: assets/fonts/fonnts.com-AftikaBold.ttf
-  #         style: italic
+        - asset: assets/fonts/fonnts.com-AftikaRegular.ttf
-  #   - family: Trajan Pro
+
-  #     fonts:
+  
-  #       - asset: fonts/TrajanPro.ttf
-  #       - asset: fonts/TrajanPro_Bold.ttf
-  #         weight: 700
-  #
   # For details regarding fonts from package dependencies,
   # see https://flutter.dev/custom-fonts/#from-packages