auth form is finished

lib/screens/auth_screen.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import '../widgets/app_background.dart';
 import '../widgets/auth_form.dart';
-import '../widgets/onboarding_button.dart';
 
 class AuthScreen extends StatelessWidget {
   const AuthScreen({super.key});
@@ -9,15 +8,26 @@ class AuthScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      resizeToAvoidBottomInset: true,
       body: AppBackground(
-        child: Center(
+        child: SafeArea(
-          child: Text(
+          child: Column(
-            "Auth Screen",
+            children: [
-            style: TextStyle(
+              const SizedBox(height: 60),
-              color: Colors.white,
+              // Logo
-              fontSize: 26,
+              Center(
-              fontWeight: FontWeight.bold,
+                child: Image.asset("assets/images/logo2.png", width: 200),
               ),
+              // const SizedBox(height: 15),
+              // Form - taking remaining space and centered
+              Expanded(
+                child: Center(
+                  child: SingleChildScrollView(
+                    child: const AuthForm(),
+                  ),
+                ),
+              ),
+            ],
           ),
         ),
       ),

lib/widgets/auth_form.dart

@@ -1,136 +1,174 @@
 import 'package:flutter/material.dart';
+import 'onboarding_button.dart';
 
 class AuthForm extends StatefulWidget {
-  const AuthForm({super.key, required this.onSubmit});
+  final VoidCallback? onSubmit;
 
-  final VoidCallback onSubmit;
+  const AuthForm({super.key, this.onSubmit});
 
   @override
   State<AuthForm> createState() => _AuthFormState();
 }
 
 class _AuthFormState extends State<AuthForm> {
-
   bool _obscure = true;
+
   @override
   Widget build(BuildContext context) {
     return Directionality(
       textDirection: TextDirection.rtl,
-      child: Container(
+      child: Stack(
-        margin: const EdgeInsets.symmetric(horizontal: 28),
+        alignment: Alignment.center,
-        padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 26),
+        children: [
+          // Border container - decorative element behind the form
+          Container(
+            width: 360,
+            constraints: const BoxConstraints(
+              minHeight: 500,
+              maxHeight: 580,   // Allows shrinking when keyboard opens
+            ),
             decoration: BoxDecoration(
-          color: const Color(0xA6F4FFFD), // Light mint white
+              color: Colors.transparent,
-          borderRadius: BorderRadius.circular(26),
+              borderRadius: BorderRadius.circular(32),
-          boxShadow: [
+              border: Border.all(
+                color: const Color(0xDD00C28E),
+                width: 1,
+              ),
+            ),
+          ),
+          
+          // Main form container
+          Container(
+            width: 340,
+            padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 38),
+            decoration: BoxDecoration(
+              color: const Color(0xFFEEFFFA),
+              borderRadius: BorderRadius.circular(28),
+              boxShadow: const [
                 BoxShadow(
-              color: const Color(0x803EFECB), // green glow shadow
+                  color: Colors.black26,
-              blurRadius: 35,
+                  blurRadius: 10,
-              spreadRadius: -5,
+                  offset: Offset(0, 5),
                 ),
               ],
-
-          border: Border.all(
-            color: const Color(0xFF3EFECB), // Dark border
-            width: 2,
-          ),
             ),
             child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
               mainAxisSize: MainAxisSize.min,
               children: [
-            // main lable
+                /// Title
-            const Text(
+                const Center(
+                  child: Text(
                     "تسجيل دخول",
                     style: TextStyle(
                       fontSize: 24,
-                fontWeight: FontWeight.w700,
+                      fontWeight: FontWeight.bold,
-                color: Color(0xFF00382A),
-              ),
-            ),
-
-            const SizedBox(height: 24),
-            //lable
-            const Text(
-              "اسم المستخدم",
-              style: TextStyle(fontSize: 16, color: Colors.black87
-              ),
-            ),
-    
-            const SizedBox(height: 6),
-
-            //username field
-            Container(
-              decoration: BoxDecoration(
-                color: const Color(0xDEDEDEDE),
-                borderRadius: BorderRadius.circular(7),
-                boxShadow: [
-                  BoxShadow(
-                    color: Colors.black26,
-                    blurRadius: 4,
-                    offset: Offset(0, 2),
-                  ),
-                ],
-              ),
-              child: const TextField(
-                decoration: InputDecoration(
-                  hintText: "اسم المستخدم",
-                  border: InputBorder.none,
-                  contentPadding: EdgeInsets.symmetric(
-                    horizontal: 16,
-                    vertical: 12,
-                  ),
-                ),
-              ),
-            ),
-
-            const SizedBox(height: 22),
-
-            /// PASSWORD LABEL
-            const Text(
-              "كلمة المرور",
-              style: TextStyle(
-                fontSize: 15,
                       color: Colors.black87,
                     ),
                   ),
+                ),
+
+                const SizedBox(height: 34),
+
+                /// Username Label
+                const Align(
+                  alignment: Alignment.centerRight,
+                  child: Text(
+                    "اسم المستخدم",
+                    style: TextStyle(
+                      fontSize: 16,
+                      color: Colors.black87,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 8),
+
+                _buildField(
+                  hint: "اسم المستخدم",
+                  obscure: false,
+                ),
+
+                const SizedBox(height: 30),
+
+                /// Password Label
+                const Align(
+                  alignment: Alignment.centerRight,
+                  child: Text(
+                    "كلمة المرور",
+                    style: TextStyle(
+                      fontSize: 16,
+                      color: Colors.black87,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 8),
+
+                _buildField(
+                  hint: "كلمة المرور",
+                  obscure: _obscure,
+                  hasEye: true,
+                ),
+
+                const SizedBox(height: 100),  // Restored original spacing
+
+                Center(
+                  child: OnboardingButton(
+                    text: "تسجيل دخول",
+                    backgroundColor: const Color.fromARGB(239, 35, 87, 74),
+                    onPressed: widget.onSubmit,
                     
                     
-            /// PASSWORD FIELD
+                  ),
-            Container(
+                  
+                ),
+
+                const SizedBox(height: 40),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildField({
+    required String hint,
+    required bool obscure,
+    bool hasEye = false,
+  }) {
+    return Container(
       decoration: BoxDecoration(
-                color: const Color(0xFFE3E3E3),
+        color: const Color(0xDEDEDEDE),
-                borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(7),
-                boxShadow: [
+        boxShadow: const [
           BoxShadow(
             color: Colors.black26,
-                    blurRadius: 4,
+            blurRadius: 6,
             offset: Offset(0, 2),
           ),
         ],
       ),
       child: TextField(
-                obscureText: _obscure,
+        obscureText: obscure,
+        textAlign: TextAlign.right,
+        style: const TextStyle(fontSize: 16),
         decoration: InputDecoration(
-                  hintText: "كلمة المرور",
+          hintText: hint,
+          hintStyle: const TextStyle(color: Colors.black54),
           border: InputBorder.none,
-                  contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+          contentPadding:
-
+              const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
-                  suffixIcon: IconButton(
+          suffixIcon: hasEye
+              ? IconButton(
                   icon: Icon(
-                      _obscure ? Icons.visibility : Icons.visibility_off,
+                    obscure ? Icons.visibility_off : Icons.visibility,
                     color: Colors.black54,
                   ),
                   onPressed: () {
-                      setState(() => _obscure = !_obscure);
+                    setState(() => _obscure = !obscure);
                   },
-                  ),
+                )
-                ),
+              : null,
-              ),
-            ),
-
-            const SizedBox(height: 26),
-
-          ],
         ),
       ),
     );

lib/widgets/onboarding_button.dart

@@ -3,27 +3,49 @@ import 'package:flutter/material.dart';
 class OnboardingButton extends StatelessWidget {
   final String text;
   final VoidCallback? onPressed;
+  final Color backgroundColor;
 
-  const OnboardingButton({super.key, required this.text, this.onPressed});
+  const OnboardingButton({
+    super.key,
+    required this.text,
+    this.onPressed,
+    this.backgroundColor = const Color(0xFF2D2D2D),
+  });
 
   @override
   Widget build(BuildContext context) {
-    return ElevatedButton(
+    return Container(
-      onPressed: onPressed ?? () {},
+      decoration: BoxDecoration(
+        boxShadow: [
+          BoxShadow(
+            color: const Color.fromARGB(59, 59, 59, 59),
+            spreadRadius: 1,
+            blurRadius: 14,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: ElevatedButton(
+        onPressed: onPressed,
         style: ElevatedButton.styleFrom(
-        backgroundColor: const Color(0xFF2D2D2D),
+          backgroundColor: backgroundColor,
           foregroundColor: Colors.white,
+          disabledForegroundColor: Colors.white,
+          disabledBackgroundColor: backgroundColor,
           padding: const EdgeInsets.symmetric(horizontal: 80, vertical: 10),
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
+          shape: RoundedRectangleBorder(
-        elevation: 0,
+            borderRadius: BorderRadius.circular(16),
+          ),
+          elevation: 8, // Increased elevation for more prominent shadow
+          shadowColor: const Color(0x47000000), // More defined shadow color
         ),
         child: Text(
           text,
           style: const TextStyle(
-          fontFamily: 'AbdElRady',
             color: Colors.white,
             fontSize: 20,
-          fontWeight: FontWeight.w700,
+            fontWeight: FontWeight.w600,
+          ),
         ),
       ),
     );

pubspec.lock

@@ -81,14 +81,6 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.2"
-  cupertino_icons:
-    dependency: "direct main"
-    description:
-      name: cupertino_icons
-      sha256: ba631d1c7f7bef6b729a622b7b752645a2d076dba9976925b8f25725a30e1ee6
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.0.8"
   fake_async:
     dependency: transitive
     description:

pubspec.yaml

@@ -10,7 +10,6 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-  cupertino_icons: ^1.0.8
   flutter_svg: ^2.0.9
 
 dev_dependencies: