TF-4004 Apply new design for create rule view on web

lib/features/base/widget/default_field/default_input_field_widget.dart

@@ -9,6 +9,8 @@ typedef OnTextChange = void Function(String text);
 class DefaultInputFieldWidget extends StatelessWidget {
   final TextEditingController textEditingController;
   final String? hintText;
+  final String? errorText;
+  final Color? inputColor;
   final FocusNode? focusNode;
   final OnTextChange? onTextChange;
   final OnTextSubmitted? onTextSubmitted;
@@ -17,7 +19,9 @@ class DefaultInputFieldWidget extends StatelessWidget {
     super.key,
     required this.textEditingController,
     this.hintText,
+    this.errorText,
     this.focusNode,
+    this.inputColor,
     this.onTextChange,
     this.onTextSubmitted,
   });
@@ -29,16 +33,22 @@ class DefaultInputFieldWidget extends StatelessWidget {
       maxLines: 1,
       textInputAction: TextInputAction.next,
       textStyle: ThemeUtils.textStyleBodyBody3(
-        color: AppColor.m3SurfaceBackground,
+        color: inputColor ?? AppColor.m3SurfaceBackground,
       ),
       focusNode: focusNode,
       onTextSubmitted: onTextSubmitted,
       onTextChange: onTextChange,
       decoration: InputDecoration(
-        constraints: const BoxConstraints(maxHeight: 40),
+        constraints: BoxConstraints(
+          maxHeight: errorText?.isNotEmpty == true ? 60 : 40,
+        ),
         filled: true,
-        fillColor: Colors.white,
-        contentPadding: const EdgeInsetsDirectional.only(start: 12, end: 8),
+        fillColor: errorText?.isNotEmpty == true
+            ? AppColor.colorInputBackgroundErrorVerifyName
+            : Colors.white,
+        contentPadding: errorText?.isNotEmpty == true
+          ? const EdgeInsetsDirectional.only(start: 12, end: 8)
+          : const EdgeInsetsDirectional.only(start: 12, end: 8, top: 12, bottom: 12),
         enabledBorder: const OutlineInputBorder(
           borderRadius: BorderRadius.all(Radius.circular(10)),
           borderSide: BorderSide(width: 1, color: AppColor.m3Neutral90),
@@ -51,8 +61,18 @@ class DefaultInputFieldWidget extends StatelessWidget {
           borderRadius: BorderRadius.all(Radius.circular(10)),
           borderSide: BorderSide(width: 1, color: AppColor.primaryColor),
         ),
+        errorBorder: const OutlineInputBorder(
+          borderRadius: BorderRadius.all(Radius.circular(10)),
+          borderSide: BorderSide(width: 1, color: AppColor.redFF3347),
+        ),
+        focusedErrorBorder: const OutlineInputBorder(
+          borderRadius: BorderRadius.all(Radius.circular(10)),
+          borderSide: BorderSide(width: 1, color: AppColor.redFF3347),
+        ),
         hintText: hintText,
         hintStyle: ThemeUtils.textStyleBodyBody3(color: AppColor.m3Tertiary),
+        errorText: errorText,
+        errorStyle: ThemeUtils.textStyleBodyBody3(color: AppColor.redFF3347),
       ),
     );
   }

lib/features/base/widget/drop_down_button_widget.dart

@@ -35,6 +35,8 @@ class DropDownButtonWidget<T> extends StatelessWidget {
   final double? dropdownWidth;
   final double? dropdownMaxHeight;
   final String? hintText;
+  final TextStyle? labelTextStyle;
+  final TextStyle? hintTextStyle;
 
   const DropDownButtonWidget({
     Key? key,
@@ -54,6 +56,8 @@ class DropDownButtonWidget<T> extends StatelessWidget {
     this.colorButton = Colors.white,
     this.tooltip = '',
     this.hintText,
+    this.labelTextStyle,
+    this.hintTextStyle,
   }) : super(key: key);
 
   @override
@@ -68,7 +72,7 @@ class DropDownButtonWidget<T> extends StatelessWidget {
               ? Row(children: [
                   Expanded(child: Text(
                     _getTextItemDropdown(context, item: itemSelected),
-                    style: ThemeUtils.defaultTextStyleInterFont.copyWith(fontSize: 16,
+                    style: hintTextStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(fontSize: 16,
                         fontWeight: FontWeight.normal,
                         color: Colors.black.withValues(alpha: opacity)),
                     maxLines: 1,
@@ -86,7 +90,7 @@ class DropDownButtonWidget<T> extends StatelessWidget {
                         height: heightItem,
                         child: Row(children: [
                           Expanded(child: Text(_getTextItemDropdown(context, item: item),
-                            style: ThemeUtils.defaultTextStyleInterFont.copyWith(
+                            style: labelTextStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(
                                 fontSize: 16,
                                 fontWeight: FontWeight.normal,
                                 color: Colors.black),
@@ -122,7 +126,7 @@ class DropDownButtonWidget<T> extends StatelessWidget {
                   child: Row(children: [
                     Expanded(child: Text(
                       _getTextItemDropdown(context, item: itemSelected),
-                      style: ThemeUtils.defaultTextStyleInterFont.copyWith(fontSize: 16,
+                      style: labelTextStyle ?? ThemeUtils.defaultTextStyleInterFont.copyWith(fontSize: 16,
                           fontWeight: FontWeight.normal,
                           color: itemSelected != null ? Colors.black.withValues(alpha: opacity) : AppColor.textFieldHintColor),
                       maxLines: 1,

lib/features/base/widget/label_input_field_builder.dart

@@ -7,8 +7,12 @@ class LabelInputFieldBuilder extends StatelessWidget {
   final TextEditingController textEditingController;
   final String? errorText;
   final String? hintText;
+  final TextStyle? labelStyle;
   final FocusNode? focusNode;
+  final double? runSpacing;
+  final double? inputFieldMaxWidth;
   final bool arrangeHorizontally;
+  final bool isLabelHasColon;
   final OnTextChange? onTextChange;
 
   const LabelInputFieldBuilder({
@@ -16,19 +20,24 @@ class LabelInputFieldBuilder extends StatelessWidget {
     required this.label,
     required this.textEditingController,
     this.arrangeHorizontally = true,
+    this.isLabelHasColon = true,
     this.hintText,
     this.errorText,
     this.focusNode,
+    this.labelStyle,
+    this.runSpacing,
+    this.inputFieldMaxWidth,
     this.onTextChange,
   });
 
   @override
   Widget build(BuildContext context) {
     Widget bodyWidget = ConstrainedBox(
-      constraints: const BoxConstraints(maxWidth: 565),
+      constraints: BoxConstraints(maxWidth: inputFieldMaxWidth ?? 565),
       child: DefaultInputFieldWidget(
         textEditingController: textEditingController,
         hintText: hintText,
+        errorText: errorText,
         focusNode: focusNode,
         onTextChange: onTextChange,
       ),
@@ -41,7 +50,7 @@ class LabelInputFieldBuilder extends StatelessWidget {
           ConstrainedBox(
             constraints: const BoxConstraints(minWidth: 83),
             child: Text(
-              '$label:',
+              isLabelHasColon ? '$label:' : label,
               style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
             ),
           ),
@@ -54,10 +63,10 @@ class LabelInputFieldBuilder extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Text(
-            '$label:',
-            style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+            isLabelHasColon ? '$label:' : label,
+            style: labelStyle ?? ThemeUtils.textStyleBodyBody3(color: Colors.black),
           ),
-          const SizedBox(height: 10),
+          SizedBox(height: runSpacing ?? 10),
           bodyWidget,
         ],
       );