TF-888 Apply new design for vacation on desktop

lib/features/base/widget/border_button_field.dart

@@ -1,10 +1,7 @@
 
 import 'package:core/presentation/extensions/color_extension.dart';
-import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/style_utils.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
-import 'package:get/get.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/datetime_extension.dart';
 
 typedef OnTapActionCallback<T> = Function(T? value);
@@ -18,9 +15,12 @@ class BorderButtonField<T> extends StatelessWidget {
   final MouseCursor? mouseCursor;
   final String? hintText;
   final bool isEmpty;
+  final Color? backgroundColor;
+  final String? label;
 
   const BorderButtonField({
     super.key,
+    this.label,
     this.value,
     this.tapActionCallback,
     this.icon,
@@ -28,13 +28,12 @@ class BorderButtonField<T> extends StatelessWidget {
     this.mouseCursor,
     this.hintText,
     this.isEmpty = false,
+    this.backgroundColor,
   });
 
   @override
   Widget build(BuildContext context) {
-    final _imagePaths = Get.find<ImagePaths>();
-
-    return InkWell(
+    final buttonField = InkWell(
       onTap: () => tapActionCallback?.call(value),
       mouseCursor: mouseCursor,
       child: Container(
@@ -43,9 +42,9 @@ class BorderButtonField<T> extends StatelessWidget {
             borderRadius: BorderRadius.circular(10),
             border: Border.all(
                 color: _getBorderColor(),
-                width: 1),
-            color: Colors.white),
-        padding: const EdgeInsets.only(left: 12, right: 10),
+                width: 0.5),
+            color: backgroundColor ?? Colors.white),
+        padding: const EdgeInsets.symmetric(horizontal: 12),
         child: Row(children: [
           Expanded(child: Text(
             _getName(context, value),
@@ -54,10 +53,22 @@ class BorderButtonField<T> extends StatelessWidget {
             softWrap: CommonTextStyle.defaultSoftWrap,
             overflow: CommonTextStyle.defaultTextOverFlow,
           )),
-          icon ?? SvgPicture.asset(_imagePaths.icDropDown)
+          if (icon != null) icon!
         ]),
       ),
     );
+    if (label != null) {
+      return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+        Text(label!, style: const TextStyle(
+          fontSize: 14,
+          fontWeight: FontWeight.normal,
+          color: AppColor.colorContentEmail)),
+        const SizedBox(height: 8),
+        buttonField
+      ]);
+    } else {
+      return buttonField;
+    }
   }
 
   TextStyle? _getTextStyle(T? value) {

lib/features/base/widget/text_input_decoration_builder.dart

@@ -0,0 +1,53 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+
+class TextInputDecorationBuilder extends InputDecorationBuilder {
+
+  @override
+  InputDecoration build() {
+    return InputDecoration(
+      enabledBorder: enabledBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+        borderSide: BorderSide(
+            width: 0.5,
+            color: AppColor.colorInputBorderCreateMailbox)),
+      focusedBorder: enabledBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+        borderSide: BorderSide(
+            width: 0.5,
+            color: AppColor.colorTextButton)),
+      errorBorder: errorBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+        borderSide: BorderSide(
+            width: 0.5,
+            color: AppColor.colorInputBorderErrorVerifyName)),
+      focusedErrorBorder: errorBorder ?? const OutlineInputBorder(
+          borderRadius: BorderRadius.all(Radius.circular(10)),
+          borderSide: BorderSide(
+              width: 0.5,
+              color: AppColor.colorInputBorderErrorVerifyName)),
+      prefixText: prefixText,
+      labelText: labelText,
+      floatingLabelBehavior: FloatingLabelBehavior.never,
+      labelStyle: labelStyle ?? const TextStyle(
+          color: Colors.black,
+          fontSize: 16),
+      hintText: hintText,
+      isDense: true,
+      hintStyle: hintStyle ?? const TextStyle(
+          color: AppColor.loginTextFieldHintColor,
+          fontSize: 16),
+      contentPadding: contentPadding ?? const EdgeInsets.symmetric(
+          horizontal: 12,
+          vertical: 12),
+      errorText: errorText,
+      errorStyle: errorTextStyle ?? const TextStyle(
+          color: AppColor.colorInputBorderErrorVerifyName,
+          fontSize: 13),
+      filled: true,
+      fillColor: errorText?.isNotEmpty == true
+          ? AppColor.colorInputBackgroundErrorVerifyName
+          : fillColor ?? AppColor.colorInputBackgroundCreateMailbox);
+  }
+}

lib/features/base/widget/text_input_field_builder.dart

@@ -0,0 +1,69 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/base/widget/text_input_decoration_builder.dart';
+
+typedef OnChangeInputAction = Function(String? value);
+
+class TextInputFieldBuilder extends StatelessWidget {
+
+  final String? label;
+  final String? error;
+  final String? hint;
+  final TextEditingController? editingController;
+  final FocusNode? focusNode;
+  final TextInputType? inputType;
+  final bool isMandatory;
+  final int? minLines;
+  final int? maxLines;
+  final Color? backgroundColor;
+  final OnChangeInputAction? onChangeInputAction;
+
+  const TextInputFieldBuilder({
+    Key? key,
+    this.label,
+    this.hint,
+    this.error,
+    this.isMandatory = false,
+    this.editingController,
+    this.focusNode,
+    this.inputType,
+    this.minLines,
+    this.maxLines,
+    this.backgroundColor,
+    this.onChangeInputAction,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+      if (label != null)
+        ...[
+          Text(isMandatory ? '${label!}*' : label!,
+              style: const TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.normal,
+                  color: AppColor.colorContentEmail)),
+          const SizedBox(height: 8)
+        ],
+      (TextFieldBuilder()
+          ..onChange((value) => onChangeInputAction?.call(value))
+          ..textInputAction(TextInputAction.next)
+          ..addController(editingController ?? TextEditingController())
+          ..addFocusNode(focusNode)
+          ..textStyle(const TextStyle(color: Colors.black, fontSize: 16))
+          ..keyboardType(inputType ?? TextInputType.text)
+          ..minLines(minLines)
+          ..maxLines(maxLines)
+          ..textDecoration((TextInputDecorationBuilder()
+                ..setContentPadding(const EdgeInsets.symmetric(
+                    vertical: BuildUtils.isWeb ? 16 : 12,
+                    horizontal: 12))
+                ..setHintText(hint)
+                ..setFillColor(backgroundColor)
+                ..setErrorText(error))
+              .build()))
+        .build()
+    ]);
+  }
+}