diff --git a/assets/icons/search_icon.svg b/assets/icons/search_icon.svg new file mode 100644 index 00000000..009efd91 --- /dev/null +++ b/assets/icons/search_icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/bookable_space_switch_activation_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/bookable_space_switch_activation_widget.dart index d819ca26..738a2ecc 100644 --- a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/bookable_space_switch_activation_widget.dart +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/bookable_space_switch_activation_widget.dart @@ -47,7 +47,7 @@ class BookableSpaceSwitchActivationWidget extends StatelessWidget { return ColorsManager.whiteColors; }), value: space.spaceConfig!.availability, - activeTrackColor: ColorsManager.blueColor, + activeTrackColor: ColorsManager.dialogBlueTitle, inactiveTrackColor: ColorsManager.grayBorder, thumbColor: WidgetStateProperty.resolveWith( (Set states) { diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/booking_period_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/booking_period_widget.dart index 439bda04..f81e1c8c 100644 --- a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/booking_period_widget.dart +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/booking_period_widget.dart @@ -32,12 +32,22 @@ class BookingPeriodWidget extends StatelessWidget { const Text('Booking Period'), ], ), + const SizedBox( + height: 5, + ), Container( - width: 300, + width: 230, decoration: BoxDecoration( - borderRadius: BorderRadius.circular(12), - color: ColorsManager.graysColor, - ), + borderRadius: BorderRadius.circular(8), + color: ColorsManager.circleRolesBackground, + boxShadow: [ + BoxShadow( + offset: Offset.zero, + blurRadius: 4, + spreadRadius: 0, + color: ColorsManager.timePickerColor.withValues(alpha: 0.15), + ) + ]), child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ @@ -83,9 +93,13 @@ class BookingPeriodWidget extends StatelessWidget { } }, ), + const SizedBox( + width: 10, + ), const Icon( Icons.arrow_right_alt, color: ColorsManager.grayColor, + size: 13, ), TimePickerWidget( title: editingBookableSpace == null @@ -128,8 +142,11 @@ class BookingPeriodWidget extends StatelessWidget { } }, ), + const SizedBox( + width: 15, + ), Container( - width: 50, + width: 30, height: 32, decoration: const BoxDecoration( borderRadius: BorderRadius.only( @@ -140,7 +157,7 @@ class BookingPeriodWidget extends StatelessWidget { alignment: Alignment.center, child: SvgPicture.asset( Assets.clockIcon, - height: 15, + height: 18, color: ColorsManager.blackColor.withValues(alpha: 0.4), ), ) diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/check_box_space_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/check_box_space_widget.dart index e37c8e0e..6fdb0b0d 100644 --- a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/check_box_space_widget.dart +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/check_box_space_widget.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart'; import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/setup_bookable_spaces_bloc/setup_bookable_spaces_bloc.dart'; +import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/custom_checkbox_widget.dart'; import 'package:syncrow_web/utils/color_manager.dart'; class CheckBoxSpaceWidget extends StatelessWidget { @@ -32,7 +33,7 @@ class CheckBoxSpaceWidget extends StatelessWidget { _ => false, }; - return Checkbox( + return CustomCheckboxWidget( value: isChecked, onChanged: (value) { final bloc = context.read(); @@ -47,7 +48,7 @@ class CheckBoxSpaceWidget extends StatelessWidget { ); }, ), - const SizedBox(width: 5), + const SizedBox(width: 15), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -55,15 +56,17 @@ class CheckBoxSpaceWidget extends StatelessWidget { Text( nonBookableSpace.spaceName, style: const TextStyle( - fontWeight: FontWeight.bold, - color: ColorsManager.textGray, + fontWeight: FontWeight.w700, + fontSize: 12, + color: ColorsManager.titleGray, ), ), Text( nonBookableSpace.spaceVirtualAddress, style: const TextStyle( - fontSize: 12, - color: ColorsManager.textGray, + fontWeight: FontWeight.w400, + fontSize: 10, + color: ColorsManager.titleGray, ), ), ], diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/custom_checkbox_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/custom_checkbox_widget.dart new file mode 100644 index 00000000..35e600e8 --- /dev/null +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/custom_checkbox_widget.dart @@ -0,0 +1,53 @@ +import 'package:flutter/material.dart'; +import 'package:syncrow_web/utils/color_manager.dart'; + +class CustomCheckboxWidget extends StatelessWidget { + final bool value; + final ValueChanged onChanged; + final double? outHeight; + final double? outWidth; + final double? iconSize; + const CustomCheckboxWidget({ + super.key, + required this.value, + required this.onChanged, + this.outWidth, + this.outHeight, + this.iconSize, + }); + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () => onChanged(!value), + child: Container( + width: outWidth ?? 17, + height: outHeight ?? 17, + decoration: BoxDecoration( + color: value ? Colors.white : ColorsManager.checkBoxFillColor, + border: value + ? Border.all(color: ColorsManager.secondaryColor, width: 1) + : Border.all(color: ColorsManager.checkBoxBorderGray, width: 1), + borderRadius: BorderRadius.circular(4), + ), + child: value + ? Center( + child: Container( + width: outWidth != null ? outWidth! - 4 : 13, + height: outHeight != null ? outHeight! - 4 : 13, + decoration: BoxDecoration( + color: ColorsManager.secondaryColor, + borderRadius: BorderRadius.circular(2), + ), + child: const Icon( + Icons.check, + size: 12, + color: Colors.white, + ), + ), + ) + : null, + ), + ); + } +} diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/edit_bookable_space_button_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/edit_bookable_space_button_widget.dart index 8f82e08d..b1b0ea43 100644 --- a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/edit_bookable_space_button_widget.dart +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/edit_bookable_space_button_widget.dart @@ -45,12 +45,12 @@ class EditBookableSpaceButtonWidget extends StatelessWidget { }, style: ElevatedButton.styleFrom( padding: EdgeInsets.zero, - fixedSize: const Size(50, 30), + minimumSize: const Size(40, 30), elevation: 1, ), child: SvgPicture.asset( Assets.settings, - height: 15, + height: 13, color: ColorsManager.blue1, ), ), diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/main_manage_bookable_widgets/top_part_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/main_manage_bookable_widgets/top_part_widget.dart index 3c6694af..c0c27b1e 100644 --- a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/main_manage_bookable_widgets/top_part_widget.dart +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/main_manage_bookable_widgets/top_part_widget.dart @@ -27,6 +27,7 @@ class RowOfButtonsTitleWidget extends StatelessWidget { ElevatedButton( style: ElevatedButton.styleFrom( padding: EdgeInsets.zero, + minimumSize: const Size(50, 40), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12), ), diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/points_part_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/points_part_widget.dart index 1106f214..a716628e 100644 --- a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/points_part_widget.dart +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/points_part_widget.dart @@ -65,7 +65,7 @@ class _PointsPartWidgetState extends State { (Set states) { return ColorsManager.whiteColors; }), - activeTrackColor: ColorsManager.blueColor, + activeTrackColor: ColorsManager.dialogBlueTitle, inactiveTrackColor: ColorsManager.grayBorder, thumbColor: WidgetStateProperty.resolveWith( (Set states) { @@ -109,7 +109,10 @@ class _PointsPartWidgetState extends State { if (state is ActivatePointsSwitch) SearchUnbookableSpacesWidget( title: 'Ex: 0', - height: 40, + topPadding: 0, + blur: 1, + raduis: 10, + height: 34, onChanged: (p0) { final updatedCost = int.tryParse(widget.pointsController.text) ?? 0; diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/search_unbookable_spaces_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/search_unbookable_spaces_widget.dart index f2266874..ba7cea57 100644 --- a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/search_unbookable_spaces_widget.dart +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/search_unbookable_spaces_widget.dart @@ -1,22 +1,30 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:flutter_svg/svg.dart'; import 'package:syncrow_web/utils/color_manager.dart'; +import 'package:syncrow_web/utils/constants/assets.dart'; class SearchUnbookableSpacesWidget extends StatelessWidget { final String title; final Widget? suffix; final double? height; final double? width; + final double? blur; + final double? raduis; + final double? topPadding; final TextEditingController? controller; final List? inputFormatters; final void Function(String)? onChanged; const SearchUnbookableSpacesWidget({ required this.title, this.controller, + this.blur, this.onChanged, this.suffix, this.height, this.width, + this.topPadding, + this.raduis, this.inputFormatters, super.key, }); @@ -25,16 +33,18 @@ class SearchUnbookableSpacesWidget extends StatelessWidget { Widget build(BuildContext context) { return Container( width: width ?? 480, - height: height ?? 30, + height: height ?? 40, padding: const EdgeInsets.only(top: 4), decoration: BoxDecoration( color: ColorsManager.whiteColors, - borderRadius: BorderRadius.circular(12), - boxShadow: const [ + borderRadius: BorderRadius.circular(raduis ?? 15), + boxShadow: [ BoxShadow( - color: ColorsManager.shadowOfSearchTextfield, - offset: Offset(0, 4), - blurRadius: 5, + color: + ColorsManager.shadowOfSearchTextfield.withValues(alpha: 0.15), + offset: Offset.zero, + blurRadius: blur ?? 5, + spreadRadius: 0, ), ], ), @@ -43,14 +53,21 @@ class SearchUnbookableSpacesWidget extends StatelessWidget { inputFormatters: inputFormatters, onChanged: onChanged, decoration: InputDecoration( - contentPadding: - const EdgeInsets.symmetric(vertical: 5, horizontal: 15), + contentPadding: EdgeInsets.symmetric( + vertical: topPadding ?? 5, + horizontal: 15, + ), hintText: title, hintStyle: const TextStyle(color: ColorsManager.hintTextGrey), border: InputBorder.none, - suffixIcon: suffix ?? - const Icon(Icons.search, - size: 20, color: ColorsManager.hintTextGrey), + suffixIcon: Padding( + padding: const EdgeInsets.all(10), + child: suffix ?? + SvgPicture.asset( + Assets.searchIcon, + height: 12, + ), + ), ), style: const TextStyle( fontSize: 14, diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/step_two_details_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/step_two_details_widget.dart index bd5263fe..a1db9694 100644 --- a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/step_two_details_widget.dart +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/step_two_details_widget.dart @@ -26,7 +26,7 @@ class StepTwoDetailsWidget extends StatelessWidget { editingBookableSpace: editingBookableSpace, ), const SizedBox( - height: 20, + height: 30, ), BookingPeriodWidget( editingBookableSpace: editingBookableSpace, diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/stepper_part_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/stepper_part_widget.dart index 29e8ba42..89f9d1c5 100644 --- a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/stepper_part_widget.dart +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/stepper_part_widget.dart @@ -26,7 +26,7 @@ class StepperPartWidget extends StatelessWidget { Container( padding: const EdgeInsets.only(left: 3), alignment: Alignment.centerLeft, - height: 50, + height: 40, child: const VerticalDivider( width: 8, )), @@ -59,7 +59,7 @@ class StepperPartWidget extends StatelessWidget { Container( padding: const EdgeInsets.only(left: 3), alignment: Alignment.centerLeft, - height: 50, + height: 40, child: const VerticalDivider( width: 8, )), diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/time_picker_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/time_picker_widget.dart index da94341b..b72a714d 100644 --- a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/time_picker_widget.dart +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/time_picker_widget.dart @@ -53,7 +53,6 @@ class _TimePickerWidgetState extends State { setState(() {}); }, child: Container( - width: 100, height: 32, decoration: const BoxDecoration( borderRadius: BorderRadius.only( diff --git a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/week_checkbox_title_widget.dart b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/week_checkbox_title_widget.dart index 5d689748..3673ef1c 100644 --- a/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/week_checkbox_title_widget.dart +++ b/lib/pages/access_management/manage_bookable_spaces/presentation/widgets/week_checkbox_title_widget.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/domain/models/bookable_space_model.dart'; import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/blocs/setup_bookable_spaces_bloc/setup_bookable_spaces_bloc.dart'; +import 'package:syncrow_web/pages/access_management/manage_bookable_spaces/presentation/widgets/custom_checkbox_widget.dart'; class WeekDaysCheckboxRow extends StatefulWidget { final BookableSpacemodel? editingBookableSpace; @@ -40,52 +41,78 @@ class _WeekDaysCheckboxRowState extends State { @override Widget build(BuildContext context) { - return Row( + return Column( crossAxisAlignment: CrossAxisAlignment.start, - children: _daysChecked.entries.map((entry) { - return Expanded( - child: Row( - children: [ - Expanded( - child: Checkbox( - value: entry.value, - onChanged: (newValue) { - setState(() { - _daysChecked[entry.key] = newValue ?? false; - }); + children: [ + Row( + children: [ + Text( + '* ', + style: Theme.of(context) + .textTheme + .bodyMedium! + .copyWith(color: Colors.red), + ), + const Text('Days'), + ], + ), + const SizedBox( + height: 20, + ), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: _daysChecked.entries.map((entry) { + return Expanded( + child: Row( + children: [ + CustomCheckboxWidget( + outHeight: 16, + outWidth: 16, + value: entry.value, + onChanged: (newValue) { + setState(() { + _daysChecked[entry.key] = newValue ?? false; + }); - final selectedDays = _daysChecked.entries - .where((e) => e.value) - .map((e) => e.key) - .toList(); + final selectedDays = _daysChecked.entries + .where((e) => e.value) + .map((e) => e.key) + .toList(); - final bloc = context.read(); + final bloc = context.read(); - for (int i = 0; - i < bloc.selectedBookableSpaces.length; - i++) { - final space = bloc.selectedBookableSpaces[i]; - final updatedConfig = space.spaceConfig - ?.copyWith(bookableDays: selectedDays); - final updatedSpace = - space.copyWith(spaceConfig: updatedConfig); + for (int i = 0; + i < bloc.selectedBookableSpaces.length; + i++) { + final space = bloc.selectedBookableSpaces[i]; + final updatedConfig = space.spaceConfig + ?.copyWith(bookableDays: selectedDays); + final updatedSpace = + space.copyWith(spaceConfig: updatedConfig); - bloc.selectedBookableSpaces[i] = updatedSpace; - } + bloc.selectedBookableSpaces[i] = updatedSpace; + } - bloc.add(CheckConfigurValidityEvent()); - }, - ), + bloc.add(CheckConfigurValidityEvent()); + }, + ), + const SizedBox( + width: 8, + ), + Expanded( + child: Text( + entry.key, + style: const TextStyle( + fontSize: 13, + fontWeight: FontWeight.w400, + ), + )), + ], ), - Expanded( - child: Text( - entry.key, - style: const TextStyle(fontSize: 10), - )), - ], - ), - ); - }).toList(), + ); + }).toList(), + ), + ], ); } } diff --git a/lib/utils/color_manager.dart b/lib/utils/color_manager.dart index 20f129c1..75c2d671 100644 --- a/lib/utils/color_manager.dart +++ b/lib/utils/color_manager.dart @@ -38,6 +38,7 @@ abstract class ColorsManager { static const Color lightGrayColor = Color(0xB2999999); static const Color grayBorder = Color(0xFFCFCFCF); static const Color textGray = Color(0xffD5D5D5); + static const Color titleGray = Color(0xB2999999); static const Color btnColor = Color(0xFF00008B); static const Color blueColor = Color(0xFF0036E6); static const Color boxColor = Color(0xFFF5F6F7); @@ -90,4 +91,6 @@ abstract class ColorsManager { static const Color shadowOfSearchTextfield = Color(0x26000000); static const Color hintTextGrey = Colors.grey; static const Color shadowOfDetailsContainer = Color(0x40000000); + static const Color checkBoxBorderGray = Color(0xffD0D0D0); + static const Color timePickerColor = Color(0xff000000); }