feat: question text field theme (#77)

VGVentures · Dec 11, 2023 · ab9ad69 · ab9ad69
1 parent 30d7e2a
commit ab9ad69
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 26 deletions.
diff --git a/lib/question/widgets/search_box.dart b/lib/question/widgets/search_box.dart
@@ -24,7 +24,6 @@ class SearchBox extends StatelessWidget {
         return QuestionInputTextField(
           shouldAnimate: shouldAnimate,
           shouldDisplayClearTextButton: searchQuery == submittedQuery,
-          icon: vertexIcons.stars.image(),
           hint: l10n.questionHint,
           actionText: l10n.ask,
           onTextUpdated: (String query) =>

diff --git a/packages/app_ui/lib/src/theme/vertex_theme.dart b/packages/app_ui/lib/src/theme/vertex_theme.dart
@@ -36,20 +36,6 @@ class VertexTheme {
       hintStyle: VertexTextStyles.bodyLargeRegular
           .copyWith(color: VertexColors.mediumGrey),
       isDense: true,
-      enabledBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(100),
-        borderSide: const BorderSide(
-          color: VertexColors.googleBlue,
-          width: 2,
-        ),
-      ),
-      focusedBorder: OutlineInputBorder(
-        borderRadius: BorderRadius.circular(100),
-        borderSide: const BorderSide(
-          color: VertexColors.googleBlue,
-          width: 2,
-        ),
-      ),
       contentPadding: const EdgeInsets.symmetric(vertical: 32),
       hoverColor: Colors.transparent,
     );

diff --git a/packages/app_ui/lib/src/widgets/question_input_text_field.dart b/packages/app_ui/lib/src/widgets/question_input_text_field.dart
@@ -8,7 +8,6 @@ import 'package:flutter/material.dart';
 class QuestionInputTextField extends StatefulWidget {
   /// {@macro question_input_text_field}
   const QuestionInputTextField({
-    required this.icon,
     required this.hint,
     required this.actionText,
     required this.onTextUpdated,
@@ -19,9 +18,6 @@ class QuestionInputTextField extends StatefulWidget {
     super.key,
   });
 
-  /// The icon to display on the left side of the text field.
-  final Widget icon;
-
   /// The hint text to display in the text field.
   final String hint;
 
@@ -68,6 +64,8 @@ class _QuestionTextFieldState extends State<QuestionInputTextField>
   late Animation<double> _hintAnimationPadding;
   static const _width = 659.0;
 
+  final FocusNode _focus = FocusNode();
+
   @override
   void initState() {
     super.initState();
@@ -101,26 +99,41 @@ class _QuestionTextFieldState extends State<QuestionInputTextField>
           }
         });
     }
+
+    _focus.addListener(_onFocusChange);
+  }
+
+  void _onFocusChange() {
+    setState(() {});
   }
 
   @override
   void dispose() {
     _controller.dispose();
     _textFieldAnimationController.dispose();
     _hintAnimationController.dispose();
+    _focus.removeListener(() {});
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
     final textTheme = Theme.of(context).textTheme;
+    final baseBorder = OutlineInputBorder(
+      borderRadius: BorderRadius.circular(100),
+      borderSide: const BorderSide(
+        color: VertexColors.lightGrey,
+        width: 2,
+      ),
+    );
     return Container(
       constraints: const BoxConstraints(maxWidth: _width, maxHeight: 100),
       child: Stack(
         fit: StackFit.expand,
         children: [
           Align(
             child: TextField(
+              focusNode: _focus,
               controller: _controller,
               style: textTheme.bodyMedium?.copyWith(
                 color: VertexColors.flutterNavy,
@@ -129,9 +142,23 @@ class _QuestionTextFieldState extends State<QuestionInputTextField>
               onSubmitted: (_) => widget.onActionPressed(),
               decoration: InputDecoration(
                 filled: true,
+                border: MaterialStateOutlineInputBorder.resolveWith((states) {
+                  if (states.contains(MaterialState.focused)) {
+                    return baseBorder.copyWith(
+                      borderSide: baseBorder.borderSide.copyWith(
+                        color: VertexColors.googleBlue,
+                      ),
+                    );
+                  }
+                  return baseBorder;
+                }),
                 prefixIcon: Padding(
                   padding: const EdgeInsets.only(left: 12),
-                  child: widget.icon,
+                  child: vertexIcons.stars.image(
+                    color: _controller.text.isNotEmpty
+                        ? VertexColors.googleBlue
+                        : VertexColors.mediumGrey,
+                  ),
                 ),
                 hintText: widget.hint,
                 suffixIcon: Padding(

diff --git a/packages/app_ui/test/src/widgets/question_input_text_field_test.dart b/packages/app_ui/test/src/widgets/question_input_text_field_test.dart
@@ -10,7 +10,6 @@ void main() {
       await tester.pumpApp(
         Material(
           child: QuestionInputTextField(
-            icon: SizedBox.shrink(),
             hint: 'hint',
             actionText: 'actionText',
             onActionPressed: () {},
@@ -27,7 +26,6 @@ void main() {
       await tester.pumpApp(
         Material(
           child: QuestionInputTextField(
-            icon: SizedBox.shrink(),
             hint: 'hint',
             actionText: 'actionText',
             onActionPressed: () {},
@@ -64,7 +62,6 @@ void main() {
       await tester.pumpApp(
         Material(
           child: QuestionInputTextField(
-            icon: SizedBox.shrink(),
             hint: 'hint',
             actionText: 'actionText',
             onActionPressed: () {},
@@ -83,7 +80,6 @@ void main() {
       await tester.pumpApp(
         Material(
           child: QuestionInputTextField(
-            icon: SizedBox.shrink(),
             hint: 'hint',
             actionText: 'actionText',
             onActionPressed: () {
@@ -107,7 +103,6 @@ void main() {
         await tester.pumpApp(
           Material(
             child: QuestionInputTextField(
-              icon: SizedBox.shrink(),
               hint: 'hint',
               actionText: 'actionText',
               onActionPressed: () {
@@ -131,7 +126,6 @@ void main() {
             child: QuestionInputTextField(
               text: 'hello world',
               shouldDisplayClearTextButton: true,
-              icon: SizedBox.shrink(),
               hint: 'hint',
               actionText: 'actionText',
               onActionPressed: () {},