fixed some login design bug in table and desktop

lib/core/constants/assets.dart

@@ -6,6 +6,7 @@ class AssetsManager {
 
   // login page
   static const logo = 'assets/pngs/logo.png';
+  static const webLoginImage = 'assets/pngs/web_login_image.png';
   static const userIcon = 'assets/svgs/user_icon.svg';
   static const passwordIcon = 'assets/svgs/password_icon.svg';
   static const passwordVisibility = 'assets/svgs/password_visibility.svg';

lib/core/theme/colors.dart

@@ -128,4 +128,5 @@ class AppColors {
   static const Color lightBlue = Color(0xFFe8ecfc);
   static const Color cyanAqua = Color(0xFFd6f4f8);
   static const Color cyanTeal = Color(0xFF24A6B4);
+  static const Color white = Color(0xFFFFFFFF);
 }

lib/views/login/pages/login_desktop_page.dart

@@ -20,68 +20,90 @@ class LoginDesktopPage extends StatelessWidget {
       body: Center(
         child: SingleChildScrollView(
           padding: EdgeInsets.symmetric(horizontal: 24.0.w()),
-          child: SizedBox(
+          child: Row(
-            width: 526,
+            mainAxisAlignment: MainAxisAlignment.spaceAround,
-            child: Consumer<AuthViewModel>(
+            children: [
-              builder: (context, viewModel, _) {
+              SizedBox(
-                return Column(
+                width: 526,
-                  mainAxisSize: MainAxisSize.min,
+                child: Consumer<AuthViewModel>(
-                  children: [
+                  builder: (context, viewModel, _) {
-                    LoginLogo(width: 190.0.w(), height: 88.0.h()),
+                    return Column(
-                    SizedBox(height: 32.0.h()),
+                      mainAxisSize: MainAxisSize.min,
-                    const LoginTitle(),
+                      children: [
-                    SizedBox(height: 32.0.h()),
+                        LoginLogo(width: 190.0.w(), height: 88.0.h()),
+                        SizedBox(height: 32.0.h()),
+                        const LoginTitle(),
+                        SizedBox(height: 32.0.h()),
+                        LoginTextField(
+                          controller: viewModel.usernameController,
+                          focusNode: viewModel.usernameFocus,
+                          label: AppStrings.usernameLabel,
+                          iconPath: AssetsManager.userIcon,
+                          fieldHeight: 60.0.h(),
+                          borderRedus: 12,
+                          prefixIconPadding: 7.0.w(),
+                        ),
+                        SizedBox(height: 16.0.h()),
+                        LoginTextField(
+                          controller: viewModel.passwordController,
+                          focusNode: viewModel.passwordFocus,
+                          label: AppStrings.passwordLabel,
+                          iconPath: AssetsManager.passwordIcon,
+                          prefixIconPadding: 7.0.w(),
+                          isPassword: true,
+                          obscureText: viewModel.obscurePassword,
+                          fieldHeight: 60.0.h(),
+                          onToggleVisibility:
+                              viewModel.togglePasswordVisibility,
+                          borderRedus: 12,
+                        ),
+                        SizedBox(height: 32.0.h()),
 
-                    LoginTextField(
+                        if (viewModel.isLoading)
-                      controller: viewModel.usernameController,
+                          BaseButton(
-                      focusNode: viewModel.usernameFocus,
+                            isEnabled: false,
-                      label: AppStrings.usernameLabel,
+                            onPressed: null,
-                      iconPath: AssetsManager.userIcon,
+                            isLoading: true,
-                      fieldHeight: 60.0.h(),
+                          )
-                      borderRedus: 4.0.w(),
+                        else
-                      prefixIconPadding: 4.0.w(),
+                          BaseButton(
-                    ),
+                            isEnabled: viewModel.isLoginEnabled,
-                    SizedBox(height: 16.0.h()),
+                            onPressed:
-
+                                viewModel.isLoginEnabled
-                    LoginTextField(
+                                    ? () async {
-                      controller: viewModel.passwordController,
+                                      await viewModel.login();
-                      focusNode: viewModel.passwordFocus,
+                                      if (viewModel.loggedInUser != null) {
-                      label: AppStrings.passwordLabel,
+                                        HomeRouteData().go(context);
-                      iconPath: AssetsManager.passwordIcon,
+                                      } else if (viewModel.errorMessage !=
-                      prefixIconPadding: 4.0.w(),
+                                          null) {
-                      isPassword: true,
+                                        ScaffoldMessenger.of(
-                      obscureText: viewModel.obscurePassword,
+                                          context,
-                      fieldHeight: 60.0.h(),
+                                        ).showSnackBar(
-                      onToggleVisibility: viewModel.togglePasswordVisibility,
+                                          SnackBar(
-                      borderRedus: 4.0.w(),
+                                            content: Text(
-                    ),
+                                              viewModel.errorMessage!,
-                    SizedBox(height: 32.0.h()),
+                                            ),
-
+                                          ),
-                    if (viewModel.isLoading)
+                                        );
-                      const CircularProgressIndicator()
+                                      }
-                    else
+                                    }
-                      BaseButton(
+                                    : null,
-                        isEnabled: viewModel.isLoginEnabled,
+                          ),
-                        onPressed:
+                      ],
-                            viewModel.isLoginEnabled
+                    );
-                                ? () async {
+                  },
-                                  await viewModel.login();
+                ),
-                                  if (viewModel.loggedInUser != null) {
+              ),
-                                    HomeRouteData().go(context);
+              Padding(
-                                  } else if (viewModel.errorMessage != null) {
+                padding: EdgeInsets.symmetric(vertical: 20.0.h()),
-                                    ScaffoldMessenger.of(context).showSnackBar(
+                child: Image.asset(
-                                      SnackBar(
+                  AssetsManager.webLoginImage,
-                                        content: Text(viewModel.errorMessage!),
+                  width: 796.0.w(),
-                                      ),
+                  height: 944.0.h(),
-                                    );
+                  fit: BoxFit.fitHeight,
-                                  }
+                ),
-                                }
+              ),
-                                : null,
+            ],
-                      ),
-                  ],
-                );
-              },
-            ),
           ),
         ),
       ),

lib/views/login/pages/login_mobile_page.dart

@@ -51,7 +51,11 @@ class LoginMobilePage extends StatelessWidget {
                   SizedBox(height: 32.0.h()),
 
                   if (viewModel.isLoading)
-                    const CircularProgressIndicator()
+                    BaseButton(
+                        isEnabled: false,
+                        onPressed: null,
+                        isLoading: true,
+                      )
                   else
                     BaseButton(
                       isEnabled: viewModel.isLoginEnabled,

lib/views/login/pages/login_tablet_page.dart

@@ -38,7 +38,7 @@ class LoginTabletPage extends StatelessWidget {
                       label: AppStrings.usernameLabel,
                       iconPath: AssetsManager.userIcon,
                       fieldHeight: 60.0.h(),
-                      borderRedus: 4.0.w(),
+                      borderRedus: 12,
                       prefixIconPadding: 4.0.w(),
                     ),
                     SizedBox(height: 16.0.h()),
@@ -53,12 +53,16 @@ class LoginTabletPage extends StatelessWidget {
                       obscureText: viewModel.obscurePassword,
                       fieldHeight: 60.0.h(),
                       onToggleVisibility: viewModel.togglePasswordVisibility,
-                      borderRedus: 4.0.w(),
+                      borderRedus: 12,
                     ),
                     SizedBox(height: 32.0.h()),
 
                     if (viewModel.isLoading)
-                      const CircularProgressIndicator()
+                      BaseButton(
+                        isEnabled: false,
+                        onPressed: null,
+                        isLoading: true,
+                      )
                     else
                       BaseButton(
                         isEnabled: viewModel.isLoginEnabled,

lib/views/login/widgets/login_button.dart

@@ -15,6 +15,7 @@ class BaseButton extends StatelessWidget {
   final double? borderRadius;
   final double? elevation;
   final double? width;
+  final bool isLoading;
 
   const BaseButton({
     required this.isEnabled,
@@ -27,39 +28,59 @@ class BaseButton extends StatelessWidget {
     this.borderRadius,
     this.elevation,
     this.width,
+    this.isLoading = false,
     super.key,
   });
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
+    return isLoading
-      width: width ?? double.infinity,
+        ? Container(
-      height: 55.0.h(),
+          width: double.infinity,
-      child: ElevatedButton(
+          height: 55.0.h(),
-        onPressed: isEnabled ? onPressed : null,
+          decoration: BoxDecoration(
-        style: ElevatedButton.styleFrom(
+            color: AppColors.mainBlue,
-          backgroundColor:
+            borderRadius: BorderRadius.circular(28.0.w()),
-              backgroundColor ??
+          ),
-              (isEnabled ? AppColors.mainBlue : AppColors.backgroundColor),
+          child: Center(
-          foregroundColor: textColor ?? AppColors.backgroundColor,
+            child: SizedBox(
-          elevation: elevation ?? 0,
+              width: 30.0.w(),
-          shape: RoundedRectangleBorder(
+              height: 30.0.w(),
-            borderRadius: BorderRadius.circular(borderRadius ?? 28.0.w()),
+              child: CircularProgressIndicator(
-            side: BorderSide(
+                strokeWidth: 4.0,
-              color: borderColor ?? Colors.transparent,
+                color: AppColors.white,
-              width: borderWidth ?? 0,
+              ),
             ),
           ),
-        ),
+        )
-        child: Text(
+        : SizedBox(
-          text ?? AppStrings.loginButton,
+          width: width ?? double.infinity,
-          style: TextStyle(
+          height: 55.0.h(),
-            fontSize: 16.0.sp(),
+          child: ElevatedButton(
-            fontWeight: FontWeight.bold,
+            onPressed: isEnabled ? onPressed : null,
-            color: textColor ?? AppColors.backgroundColor,
+            style: ElevatedButton.styleFrom(
+              backgroundColor:
+                  backgroundColor ??
+                  (isEnabled ? AppColors.mainBlue : AppColors.backgroundColor),
+              foregroundColor: textColor ?? AppColors.backgroundColor,
+              elevation: elevation ?? 0,
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(borderRadius ?? 28.0.w()),
+                side: BorderSide(
+                  color: borderColor ?? Colors.transparent,
+                  width: borderWidth ?? 0,
+                ),
+              ),
+            ),
+            child: Text(
+              text ?? AppStrings.loginButton,
+              style: TextStyle(
+                fontSize: 16.0.sp(),
+                fontWeight: FontWeight.bold,
+                color: textColor ?? AppColors.backgroundColor,
+              ),
+            ),
           ),
-        ),
+        );
-      ),
-    );
   }
 }

pubspec.lock

@@ -17,6 +17,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "7.7.1"
+  archive:
+    dependency: transitive
+    description:
+      name: archive
+      sha256: "2fde1607386ab523f7a36bb3e7edb43bd58e6edaf2ffb29d8a6d578b297fdbbd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.7"
   args:
     dependency: transitive
     description:
@@ -145,6 +153,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.19.1"
+  color:
+    dependency: transitive
+    description:
+      name: color
+      sha256: ddcdf1b3badd7008233f5acffaf20ca9f5dc2cd0172b75f68f24526a5f5725cb
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
   convert:
     dependency: transitive
     description:
@@ -177,6 +193,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.1.1"
+  dartx:
+    dependency: transitive
+    description:
+      name: dartx
+      sha256: "8b25435617027257d43e6508b5fe061012880ddfdaa75a71d607c3de2a13d244"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
   dio:
     dependency: "direct main"
     description:
@@ -230,6 +254,22 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_gen_core:
+    dependency: transitive
+    description:
+      name: flutter_gen_core
+      sha256: eda54fdc5de08e7eeea663eb8442aafc8660b5a13fda4e0c9e572c64e50195fb
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.11.0"
+  flutter_gen_runner:
+    dependency: "direct dev"
+    description:
+      name: flutter_gen_runner
+      sha256: "669bf8b7a9b4acbdcb7fcc5e12bf638aca19acedf43341714cbca3bf3a219521"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.11.0"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -312,6 +352,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.3.2"
+  hashcodes:
+    dependency: transitive
+    description:
+      name: hashcodes
+      sha256: "80f9410a5b3c8e110c4b7604546034749259f5d6dcca63e0d3c17c9258f1a651"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.0"
   http:
     dependency: transitive
     description:
@@ -336,6 +384,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.1.2"
+  image:
+    dependency: transitive
+    description:
+      name: image
+      sha256: "4e973fcf4caae1a4be2fa0a13157aa38a8f9cb049db6529aa00b4d71abc4d928"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.4"
+  image_size_getter:
+    dependency: transitive
+    description:
+      name: image_size_getter
+      sha256: "7c26937e0ae341ca558b7556591fd0cc456fcc454583b7cb665d2f03e93e590f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
   io:
     dependency: transitive
     description:
@@ -536,6 +600,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.5.1"
+  posix:
+    dependency: transitive
+    description:
+      name: posix
+      sha256: "6323a5b0fa688b6a010df4905a56b00181479e6d10534cecfecede2aa55add61"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.0.3"
   provider:
     dependency: "direct main"
     description:
@@ -709,6 +781,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.7.4"
+  time:
+    dependency: transitive
+    description:
+      name: time
+      sha256: "370572cf5d1e58adcb3e354c47515da3f7469dac3a95b447117e728e7be6f461"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.5"
   timing:
     dependency: transitive
     description: