[FE] Preferences & Calibration (#312)

<!--
  Thanks for contributing!

Provide a description of your changes below and a general summary in the
title

Please look at the following checklist to ensure that your PR can be
accepted quickly:
-->

## Jira Ticket
[SP-1707](https://syncrow.atlassian.net/browse/SP-1707)

## Description

fix UI  like in figma

## Type of Change

<!--- Put an `x` in all the boxes that apply: -->

- [ ] ✨ New feature (non-breaking change which adds functionality)
- [x] 🛠️ Bug fix (non-breaking change which fixes an issue)
- [ ] ❌ Breaking change (fix or feature that would cause existing
functionality to change)
- [ ] 🧹 Code refactor
- [ ] ✅ Build configuration change
- [ ] 📝 Documentation
- [ ] 🗑️ Chore 


[SP-1707]:
https://syncrow.atlassian.net/browse/SP-1707?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

lib/pages/device_managment/curtain_module/widgets/accurate_calibrating_dialog.dart

@@ -23,8 +23,8 @@ class AccurteCalibratingDialog extends StatelessWidget {
         body: const NormalTextBodyForDialog(
           title: '',
           step1:
-              '1. Click Close Button to make the Curtain run to Full Close and Position.',
+              'Click Close Button to make the Curtain run to Full Close and Position.',
-          step2: '2. click Next to complete the Calibration.',
+          step2: 'click Next to complete the Calibration.',
         ),
         leftOnTap: () => Navigator.of(parentContext).pop(),
         rightOnTap: () {

lib/pages/device_managment/curtain_module/widgets/accurate_calibration_dialog.dart

@@ -20,8 +20,8 @@ class AccurateCalibrationDialog extends StatelessWidget {
         title: 'Accurate Calibration',
         body: const NormalTextBodyForDialog(
           title: 'Prepare Calibration:',
-          step1: '1. Run The Curtain to the Fully Open Position,and pause.',
+          step1: 'Run The Curtain to the Fully Open Position,and pause.',
-          step2: '2. click Next to Start accurate calibration.',
+          step2: 'click Next to Start accurate calibration.',
         ),
         leftOnTap: () => Navigator.of(parentContext).pop(),
         rightOnTap: () {

lib/pages/device_managment/curtain_module/widgets/accurate_dialog_widget.dart

@@ -17,32 +17,38 @@ class AccurateDialogWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      height: 300,
+      height: 250,
-      width: 400,
+      width: 500,
+      child: Column(
+        children: [
+          Expanded(
             child: Column(
               children: [
                 Padding(
                   padding: const EdgeInsets.all(10),
                   child: Text(
                     title,
-              style: const TextStyle(
+                    style: TextStyle(
                       fontSize: 24,
                       fontWeight: FontWeight.bold,
-                color: ColorsManager.blueColor,
+                      color: ColorsManager.dialogBlueTitle,
                     ),
                   ),
                 ),
-          const SizedBox(height: 5),
                 const Divider(
-            indent: 10,
+                  indent: 60,
-            endIndent: 10,
+                  endIndent: 60,
                 ),
-          Padding(
+              ],
-            padding: const EdgeInsets.all(10),
+            ),
+          ),
+          Expanded(
             child: body,
           ),
-          const SizedBox(height: 20),
+          Expanded(
-          const Spacer(),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
                 const Divider(),
                 Row(
                   children: [
@@ -50,7 +56,7 @@ class AccurateDialogWidget extends StatelessWidget {
                       child: InkWell(
                         onTap: leftOnTap,
                         child: Container(
-                    height: 60,
+                          height: 40,
                           alignment: Alignment.center,
                           decoration: const BoxDecoration(
                             border: Border(
@@ -70,7 +76,7 @@ class AccurateDialogWidget extends StatelessWidget {
                       child: InkWell(
                         onTap: rightOnTap,
                         child: Container(
-                    height: 60,
+                          height: 40,
                           alignment: Alignment.center,
                           decoration: const BoxDecoration(
                             border: Border(
@@ -92,6 +98,9 @@ class AccurateDialogWidget extends StatelessWidget {
                 )
               ],
             ),
+          )
+        ],
+      ),
     );
   }
 }

lib/pages/device_managment/curtain_module/widgets/calibrate_completed_dialog.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_web/pages/device_managment/curtain_module/bloc/curtain_module_bloc.dart';
 import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
 
 class CalibrateCompletedDialog extends StatelessWidget {
   final BuildContext parentContext;
@@ -21,14 +23,17 @@ class CalibrateCompletedDialog extends StatelessWidget {
         width: 400,
         child: Column(
           children: [
-            const Padding(
+            Expanded(
-              padding: EdgeInsets.all(10),
+              child: Column(
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.all(10),
                     child: Text(
                       'Calibration Completed',
                       style: TextStyle(
                         fontSize: 24,
                         fontWeight: FontWeight.bold,
-                  color: ColorsManager.blueColor,
+                        color: ColorsManager.dialogBlueTitle,
                       ),
                     ),
                   ),
@@ -37,12 +42,16 @@ class CalibrateCompletedDialog extends StatelessWidget {
                     indent: 10,
                     endIndent: 10,
                   ),
-            const Icon(
+                ],
-              Icons.check_circle,
-              size: 100,
-              color: ColorsManager.blueColor,
               ),
-            const Spacer(),
+            ),
+            Expanded(
+              child: SvgPicture.asset(Assets.completedDoneIcon),
+            ),
+            Expanded(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
                   const Divider(
                     indent: 10,
                     endIndent: 10,
@@ -71,6 +80,9 @@ class CalibrateCompletedDialog extends StatelessWidget {
                   )
                 ],
               ),
+            )
+          ],
+        ),
       ),
     );
   }

lib/pages/device_managment/curtain_module/widgets/normal_text_body_for_dialog.dart

@@ -15,28 +15,72 @@ class NormalTextBodyForDialog extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return Padding(
+      padding: EdgeInsetsGeometry.only(left: 15),
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-        Text(
+          if (title.isEmpty)
+            const SizedBox()
+          else
+            Expanded(
+              child: Text(
                 title,
                 style: const TextStyle(
                   color: ColorsManager.grayColor,
+                  fontSize: 17,
                 ),
               ),
-        Text(
+            ),
+          Expanded(
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const SizedBox(
+                  width: 10,
+                ),
+                const Text('1. ',
+                    style: TextStyle(
+                      color: ColorsManager.grayColor,
+                      fontSize: 17,
+                    )),
+                SizedBox(
+                  width: 450,
+                  child: Text(
                     step1,
                     style: const TextStyle(
                       color: ColorsManager.grayColor,
+                      fontSize: 17,
                     ),
                   ),
+                ),
+              ],
+            ),
+          ),
+          Expanded(
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const SizedBox(
+                  width: 10,
+                ),
+                const Text('2. ',
+                    style: TextStyle(
+                      color: ColorsManager.grayColor,
+                      fontSize: 17,
+                    )),
                 Text(
                   step2,
                   style: const TextStyle(
                     color: ColorsManager.grayColor,
+                    fontSize: 17,
+                  ),
+                ),
+              ],
             ),
           )
         ],
+      ),
     );
   }
 }

lib/pages/device_managment/curtain_module/widgets/number_input_textfield.dart

@@ -19,7 +19,7 @@ class NumberInputField extends StatelessWidget {
         contentPadding: EdgeInsets.zero,
       ),
       style: const TextStyle(
-        fontSize: 20,
+        fontSize: 15,
         color: ColorsManager.blackColor,
       ),
     );

lib/pages/device_managment/curtain_module/widgets/pref_revers_card_widget.dart

@@ -18,7 +18,7 @@ class PrefReversCardWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return DefaultContainer(
-      padding: const EdgeInsets.all(12),
+      padding: const EdgeInsets.all(18),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         mainAxisAlignment: MainAxisAlignment.spaceBetween,

lib/pages/device_managment/curtain_module/widgets/prefrences_dialog.dart

@@ -23,12 +23,12 @@ class CurtainModulePrefrencesDialog extends StatelessWidget {
   Widget build(_) {
     return AlertDialog(
       backgroundColor: ColorsManager.CircleImageBackground,
-      contentPadding: const EdgeInsets.all(30),
+      contentPadding: const EdgeInsets.all(20),
-      title: const Center(
+      title: Center(
           child: Text(
         'Preferences',
         style: TextStyle(
-          color: ColorsManager.blueColor,
+          color: ColorsManager.dialogBlueTitle,
           fontSize: 24,
           fontWeight: FontWeight.bold,
         ),

lib/pages/device_managment/curtain_module/widgets/quick_calibrating_dialog.dart

@@ -69,14 +69,23 @@ class _QuickCalibratingDialogState extends State<QuickCalibratingDialog> {
         body: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            const Text(
+            const Expanded(
-              '1. please Enter the Travel Time:',
+              child: Align(
-              style: TextStyle(color: ColorsManager.grayBorder),
+                alignment: Alignment.center,
+                child: Padding(
+                  padding: EdgeInsets.only(right: 75),
+                  child: Text(
+                    '1.please Enter the Travel Time:',
+                    style: TextStyle(color: ColorsManager.lightGrayColor),
                   ),
-            const SizedBox(height: 10),
+                ),
-            Container(
+              ),
-              width: 150,
+            ),
-              height: 40,
+            Expanded(
+              child: Align(
+                alignment: Alignment.center,
+                child: Container(
+                  width: 110,
                   padding: const EdgeInsets.all(5),
                   decoration: BoxDecoration(
                     color: ColorsManager.whiteColors,
@@ -88,12 +97,12 @@ class _QuickCalibratingDialogState extends State<QuickCalibratingDialog> {
                       Expanded(
                         child: NumberInputField(controller: _controller),
                       ),
-                  const Expanded(
+                      Expanded(
                         child: Text(
                           'seconds',
                           style: TextStyle(
-                        fontSize: 15,
+                            fontSize: 12,
-                        color: ColorsManager.blueColor,
+                            color: ColorsManager.dialogBlueTitle,
                             fontWeight: FontWeight.bold,
                           ),
                         ),
@@ -101,8 +110,11 @@ class _QuickCalibratingDialogState extends State<QuickCalibratingDialog> {
                     ],
                   ),
                 ),
+              ),
+            ),
             if (_errorText != null)
-              Padding(
+              Expanded(
+                child: Padding(
                   padding: const EdgeInsets.only(top: 8.0),
                   child: Text(
                     _errorText!,
@@ -112,6 +124,16 @@ class _QuickCalibratingDialogState extends State<QuickCalibratingDialog> {
                     ),
                   ),
                 ),
+              ),
+            const Expanded(
+              child: Align(
+                alignment: Alignment.center,
+                child: Text(
+                  '2.click Next to Complete the calibration',
+                  style: TextStyle(color: ColorsManager.lightGrayColor),
+                ),
+              ),
+            )
           ],
         ),
         leftOnTap: () => Navigator.of(widget.parentContext).pop(),

lib/pages/device_managment/curtain_module/widgets/quick_calibration_dialog.dart

@@ -23,8 +23,8 @@ class QuickCalibrationDialog extends StatelessWidget {
         body: const NormalTextBodyForDialog(
           title: 'Prepare Calibration:',
           step1:
-              '1. Confirm that the curtain is in the fully closed and suspended state.',
+              'Confirm that the curtain is in the fully closed and suspended state.',
-          step2: '2. click Next to Start calibration.',
+          step2: 'click Next to Start calibration.',
         ),
         leftOnTap: () => Navigator.of(parentContext).pop(),
         rightOnTap: () {

lib/utils/color_manager.dart

@@ -84,6 +84,4 @@ abstract class ColorsManager {
   static const Color minBlue = Color(0xFF93AAFD);
   static const Color minBlueDot = Color(0xFF023DFE);
   static const Color grey25 = Color(0xFFF9F9F9);
-    
-
 }

lib/utils/constants/assets.dart

@@ -394,6 +394,7 @@ class Assets {
   static const String emptyBox = 'assets/icons/empty_box.png';
   static const String completeProcessIcon =
       'assets/icons/compleate_process_icon.svg';
+  static const String completedDoneIcon = 'assets/images/completed_done.svg';
   static const String currentProcessIcon =
       'assets/icons/current_process_icon.svg';
   static const String uncomplete_ProcessIcon =
@@ -505,5 +506,6 @@ class Assets {
   static const String aqiAirQuality = 'assets/icons/aqi_air_quality.svg';
   static const String temperatureAqiSidebar = 'assets/icons/thermometer.svg';
   static const String humidityAqiSidebar = 'assets/icons/humidity.svg';
-  static const String autocadOccupancyImage = 'assets/images/autocad_occupancy_image.png';
+  static const String autocadOccupancyImage =
+      'assets/images/autocad_occupancy_image.png';
 }