diff --git a/lib/screens/main_screen.dart b/lib/screens/main_screen.dart index 8c8c4f0..f48e2db 100644 --- a/lib/screens/main_screen.dart +++ b/lib/screens/main_screen.dart @@ -1,3 +1,4 @@ +import 'package:coda_project/screens/user_settings_screen.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import '../widgets/app_background.dart'; @@ -42,16 +43,25 @@ class _MainPageState extends State { child: SafeArea( child: Column( children: [ - SettingsBar( - selectedIndex: _settingsIndex, - onTap: (index) { - setState(() { - _settingsIndex = index; - }); - }, - showBackButton: false, - iconPaths: _settingsIconPaths, - ), + SettingsBar( + selectedIndex: _settingsIndex, + onTap: (index) { + setState(() { + _settingsIndex = index; + }); + + // 🟢 If user clicked the first icon (user.svg), open settings screen + if (index == 0) { + Navigator.push( + context, + MaterialPageRoute(builder: (_) => const UserSettingsScreen()), + ); + } + }, + showBackButton: false, + iconPaths: _settingsIconPaths, +), + // Main content area Expanded( diff --git a/lib/screens/user_settings_screen.dart b/lib/screens/user_settings_screen.dart index d32fb2b..6d39f04 100644 --- a/lib/screens/user_settings_screen.dart +++ b/lib/screens/user_settings_screen.dart @@ -1,5 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; +import '../widgets/app_background.dart'; +import '../widgets/settings_bar.dart'; class UserSettingsScreen extends StatelessWidget { const UserSettingsScreen({super.key}); @@ -8,181 +10,232 @@ class UserSettingsScreen extends StatelessWidget { Widget build(BuildContext context) { return Directionality( textDirection: TextDirection.rtl, - child: Stack( - children: [ - // ⭐ You already have your app background + settings bar outside this widget - - // -------------------- WHITE CARD -------------------- - Positioned( - top: 140, - left: 20, - right: 20, - child: Container( - padding: const EdgeInsets.only(top: 70, bottom: 25), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(16), - boxShadow: const [ - BoxShadow( - color: Color(0x33000000), - blurRadius: 12, - offset: Offset(0, 5), + child: Scaffold( + body: AppBackground( + child: SafeArea( + child: Column( + children: [ + /// -------------------- SETTINGS BAR -------------------- + Directionality( + textDirection: TextDirection.ltr, // KEEP LOGO LEFT, BACK RIGHT + child: SettingsBar( + selectedIndex: 0, + onTap: (_) {}, + showBackButton: true, + onBackTap: () => Navigator.pop(context), + iconPaths: const [], ), - ], - ), - child: Column( - children: [ - // -------------------- EMPLOYEE NAME -------------------- - Text( - "اسم الموظف", - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.w700, - color: Colors.black, - fontFamily: "AbdEriady", - ), + ), + + const SizedBox(height: 10), + + /// -------------------- PAGE TITLE -------------------- + const Text( + "الإعدادات", + style: TextStyle( + fontSize: 26, + color: Colors.white, + fontWeight: FontWeight.bold, ), + ), - const SizedBox(height: 6), + const SizedBox(height: 20), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - "تغيير كلمة المرور", - style: TextStyle( - fontSize: 12, - color: Colors.grey[700], - ), - ), - const SizedBox(width: 4), - SvgPicture.asset( - "assets/images/edit.svg", - width: 16, - height: 16, - ) - ], - ), - - const SizedBox(height: 25), - - // -------------------- NOTIFICATION TOGGLE -------------------- - Padding( - padding: const EdgeInsets.symmetric(horizontal: 18), - child: Row( + /// -------------------- FORM CONTAINER -------------------- + Expanded( + child: Center( + child: Stack( + clipBehavior: Clip.none, children: [ - Switch( - value: true, - activeColor: const Color(0xFF177046), - inactiveTrackColor: Colors.grey[400], - onChanged: (value) {}, - ), - const Spacer(), - Text( - "الإشعارات", - style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, + /// Outer border container + Container( + width: MediaQuery.of(context).size.width * 0.85, + decoration: BoxDecoration( + color: const Color(0xFFEEFFFA), // LIGHT GREEN FIXED + borderRadius: BorderRadius.circular(28), + border: Border.all( + color: const Color(0xDD00C28E), + width: 1, + ), + boxShadow: const [ + BoxShadow( + color: Colors.black26, + blurRadius: 8, + offset: Offset(0, 4), + ), + ], + ), + padding: const EdgeInsets.symmetric( + horizontal: 18, + vertical: 40, + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + const SizedBox(height: 55), + + /// -------------------- USER NAME -------------------- + const Center( + child: Text( + "اسم الموظف", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: Colors.black87, + ), + ), + ), + + const SizedBox(height: 4), + + GestureDetector( + onTap: () {}, + child: Center( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + const Text( + "تغيير كلمة المرور", + style: TextStyle( + fontSize: 13, + color: Colors.black54, + ), + ), + const SizedBox(width: 4), + SvgPicture.asset( + "assets/images/edit.svg", + width: 16, + height: 16, + ), + ], + ), + ), + ), + + const SizedBox(height: 18), + + /// -------------------- NOTIFICATION SWITCH -------------------- + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Switch( + value: true, + activeColor: const Color(0xFF177046), + inactiveThumbColor: Colors.black, + onChanged: (v) {}, + ), + + /// RTL – text on right, icon on left + Row( + children: [ + const Text( + "الإشعارات", + style: TextStyle( + fontSize: 16, + color: Colors.black87, + ), + ), + const SizedBox(width: 8), + SvgPicture.asset( + "assets/images/notification.svg", + width: 22, + ), + ], + ), + ], + ), + + _buildDivider(), + + _buildSettingsRow( + label: "عن الشركة", + icon: "assets/images/info.svg", + onTap: () {}, + ), + + _buildDivider(), + + _buildSettingsRow( + label: "تسجيل خروج", + icon: "assets/images/logout.svg", + onTap: () {}, + ), + + _buildDivider(), + + _buildSettingsRow( + label: "إجازات الموظفين", + icon: "assets/images/holiday.svg", + onTap: () {}, + ), + ], ), ), - const SizedBox(width: 8), - SvgPicture.asset( - "assets/images/bell.svg", - width: 20, - height: 20, + + /// -------------------- USER AVATAR -------------------- + Positioned( + top: -45, + left: 0, + right: 0, + child: Center( + child: Container( + width: 105, + height: 105, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: const Color(0xFFE1E1E1), + border: Border.all( + color: const Color(0xFF177046), + width: 6, + ), + ), + ), + ), ), ], ), ), - - _divider(), - - // -------------------- ABOUT COMPANY -------------------- - _settingsTile( - label: "عن الشركة", - iconPath: "assets/images/info.svg", - ), - - _divider(), - - // -------------------- LOGOUT -------------------- - _settingsTile( - label: "تسجيل خروج", - iconPath: "assets/images/logout.svg", - ), - - _divider(), - - // -------------------- EMPLOYEE LEAVES -------------------- - _settingsTile( - label: "إجازات الموظفين", - iconPath: "assets/images/leaves.svg", - ), - ], - ), + ), + ], ), ), - - // -------------------- PROFILE IMAGE -------------------- - Positioned( - top: 90, - left: 0, - right: 0, - child: Center( - child: Container( - width: 120, - height: 120, - padding: const EdgeInsets.all(6), - decoration: BoxDecoration( - color: const Color(0xFF177046), - shape: BoxShape.circle, - ), - child: Container( - decoration: const BoxDecoration( - shape: BoxShape.circle, - color: Color(0xFFD9D9D9), // placeholder profile - ), - ), - ), - ), - ), - ], + ), ), ); } - // Divider line styled like design - Widget _divider() { + // Divider line + Widget _buildDivider() { return Container( - margin: const EdgeInsets.symmetric(vertical: 12), - height: 1, width: double.infinity, - color: const Color(0xFFD1D1D1), + margin: const EdgeInsets.symmetric(vertical: 12), + height: 1.2, + color: const Color(0xFFB5DECC), ); } - // Settings row tile - Widget _settingsTile({ + // RTL Settings row (text right, icon left) + Widget _buildSettingsRow({ required String label, - required String iconPath, + required String icon, + required VoidCallback onTap, }) { - return Padding( - padding: const EdgeInsets.symmetric(horizontal: 18), + return GestureDetector( + onTap: onTap, child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ + /// ICON on LEFT — RTL + SvgPicture.asset(icon, width: 22), + + /// TEXT on RIGHT — RTL Text( label, style: const TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, + fontSize: 16, + color: Colors.black87, ), ), - const Spacer(), - SvgPicture.asset( - iconPath, - width: 20, - height: 20, - ), ], ), );