ui fixes

lib/common/widgets/button.dart

@@ -17,8 +17,9 @@ class ButtonWidget extends StatelessWidget {
   final double? buttonHeight;
   final bool hideTextOnLoading;
   final double? fontSize;
-  const ButtonWidget(
+  final bool columnShapeOnLoading;
-      {super.key,
+  const ButtonWidget({
+    super.key,
     required this.onTap,
     required this.title,
     this.color,
@@ -30,7 +31,9 @@ class ButtonWidget extends StatelessWidget {
     this.buttonHeight,
     this.fontSize,
     this.textColor,
-      this.isLoading = false});
+    this.isLoading = false,
+    this.columnShapeOnLoading = false,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -52,7 +55,31 @@ class ButtonWidget extends StatelessWidget {
             ])
           : isLoading!
               //wrap (Loader with visibility instead of repeating it)
-              ? Row(
+              ? (columnShapeOnLoading)
+                  ? Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        Visibility(
+                          visible: !((isLoading != null) &&
+                              hideTextOnLoading &&
+                              isLoading!),
+                          child: BoldTextWidget(
+                            title,
+                            fontSize: fontSize,
+                            textAlign: TextAlign.center,
+                            color: textColor ?? Colors.white,
+                          ).paddingSymmetric(horizontal: 20),
+                        ),
+                        SizedBox(
+                          width: 20,
+                          height: 20,
+                          child: CircularProgressIndicator(
+                            color: loaderColor ?? Colors.white,
+                          ),
+                        ),
+                      ],
+                    )
+                  : Row(
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: [
                         Visibility(

lib/core/localization/localization.dart

@@ -4,6 +4,7 @@ class PagesTranslations implements Translations {
   @override
   Map<String, Map<String, String>> get keys => {
         'en': {
+          'cancel_appointment': 'Cancel Appointment',
           'appointment_canceling': 'Appontiment Canceling',
           'are_you_sure_?': 'Are You Sure?',
           'appointment_canceled_successfully':
@@ -195,6 +196,7 @@ class PagesTranslations implements Translations {
               'Enter your email to reset your password please \n We will send verification code to your Email.',
         },
         'ar': {
+          'cancel_appointment': 'إلغاء الموعد',
           'appointment_canceling': 'إلغاء الموعد',
           'are_you_sure_?': 'هل أنت متأكد؟',
           'appointment_canceled_successfully': 'تم إلغاء الموعد بنجاح',

lib/features/card/presentation_layer/widgets/appointment_details.dart

@@ -99,7 +99,7 @@ class AppointmentDetails extends StatelessWidget {
           Obx(() {
             return ButtonWidget(
               isLoading: homeController.appointmentCancelingState.loading,
-              width: 250,
+              width: 125,
               onTap: () async {
                 bool cancel = false;
                 await showDialog(
@@ -121,7 +121,7 @@ class AppointmentDetails extends StatelessWidget {
                           child: Column(
                             children: [
                               const SizedBox(
-                                height: 56,
+                                height: 72,
                               ),
                               RegularTextWidget(
                                 'are_you_sure_?'.tr,
@@ -129,7 +129,7 @@ class AppointmentDetails extends StatelessWidget {
                                 textAlign: TextAlign.center,
                               ),
                               const SizedBox(
-                                height: 24,
+                                height: 64,
                               ),
                               SizedBox(
                                 width: 300,
@@ -169,7 +169,8 @@ class AppointmentDetails extends StatelessWidget {
                   });
                 }
               },
-              title: 'cancel'.tr,
+              hideTextOnLoading: true,
+              title: 'cancel_appointment'.tr,
               color: AppColors.redColor,
             );
           }),