chore: Redesign textfields

lib/components/default_app_bar_search_field.dart

@@ -64,41 +64,34 @@ class _DefaultAppBarSearchFieldState extends State<DefaultAppBarSearchField> {
     return Container(
       height: 40,
       padding: widget.padding ?? EdgeInsets.only(right: 12),
-      child: Material(
-        color: Theme.of(context).secondaryHeaderColor,
-        borderRadius: BorderRadius.circular(32),
-        child: TextField(
-          autofocus: widget.autofocus,
-          autocorrect: false,
-          controller: _searchController,
-          onChanged: widget.onChanged,
-          focusNode: _focusNode,
-          readOnly: widget.readOnly,
-          decoration: InputDecoration(
-            prefixText: widget.prefixText,
-            contentPadding: EdgeInsets.only(
-              top: 8,
-              bottom: 8,
-              left: 16,
-            ),
-            border: OutlineInputBorder(
-              borderRadius: BorderRadius.circular(32),
-            ),
-            hintText: widget.hintText,
-            suffixIcon: !widget.readOnly &&
-                    (_focusNode.hasFocus ||
-                        (widget.suffix == null &&
-                            (_searchController.text?.isNotEmpty ?? false)))
-                ? IconButton(
-                    icon: Icon(Icons.backspace_outlined),
-                    onPressed: () {
-                      _searchController.clear();
-                      widget.onChanged?.call('');
-                      _focusNode.unfocus();
-                    },
-                  )
-                : widget.suffix,
+      child: TextField(
+        autofocus: widget.autofocus,
+        autocorrect: false,
+        controller: _searchController,
+        onChanged: widget.onChanged,
+        focusNode: _focusNode,
+        readOnly: widget.readOnly,
+        decoration: InputDecoration(
+          prefixText: widget.prefixText,
+          contentPadding: EdgeInsets.only(
+            top: 8,
+            bottom: 8,
+            left: 16,
           ),
+          hintText: widget.hintText,
+          suffixIcon: !widget.readOnly &&
+                  (_focusNode.hasFocus ||
+                      (widget.suffix == null &&
+                          (_searchController.text?.isNotEmpty ?? false)))
+              ? IconButton(
+                  icon: Icon(Icons.backspace_outlined),
+                  onPressed: () {
+                    _searchController.clear();
+                    widget.onChanged?.call('');
+                    _focusNode.unfocus();
+                  },
+                )
+              : widget.suffix,
         ),
       ),
     );

lib/config/themes.dart

@@ -53,6 +53,11 @@ abstract class FluffyThemes {
       backgroundColor: AppConfig.primaryColor,
       foregroundColor: Colors.white,
     ),
+    inputDecorationTheme: InputDecorationTheme(
+      border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
+      filled: true,
+      fillColor: Color(0xFFECECF2),
+    ),
     appBarTheme: AppBarTheme(
       brightness: Brightness.light,
       color: Colors.white,

lib/views/chat.dart

@@ -1085,6 +1085,7 @@ class _ChatState extends State<Chat> {
                                               L10n.of(context).writeAMessage,
                                           hintMaxLines: 1,
                                           border: InputBorder.none,
+                                          filled: false,
                                         ),
                                         onChanged: (String text) {
                                           typingCoolDown?.cancel();

lib/views/homeserver_picker.dart

@@ -108,13 +108,13 @@ class _HomeserverPickerState extends State<HomeserverPicker> {
               tag: 'loginButton',
               child: Container(
                 width: double.infinity,
-                height: 50,
+                height: 56,
                 padding: EdgeInsets.symmetric(horizontal: 12),
                 child: RaisedButton(
                   elevation: 7,
                   color: Theme.of(context).primaryColor,
                   shape: RoundedRectangleBorder(
-                    borderRadius: BorderRadius.circular(6),
+                    borderRadius: BorderRadius.circular(12),
                   ),
                   child: _isLoading
                       ? LinearProgressIndicator()

lib/views/login.dart

@@ -172,39 +172,32 @@ class _LoginState extends State<Login> {
               horizontal:
                   max((MediaQuery.of(context).size.width - 600) / 2, 0)),
           children: <Widget>[
-            ListTile(
-              leading: CircleAvatar(
-                child: Icon(Icons.account_box_outlined,
-                    color: Theme.of(context).primaryColor),
-              ),
-              title: TextField(
+            Padding(
+              padding: const EdgeInsets.all(12.0),
+              child: TextField(
                 readOnly: loading,
                 autocorrect: false,
                 autofocus: true,
                 onChanged: (t) => _checkWellKnownWithCoolDown(t, context),
                 controller: usernameController,
                 decoration: InputDecoration(
+                    prefixIcon: Icon(Icons.account_box_outlined),
                     hintText:
                         '@${L10n.of(context).username.toLowerCase()}:domain',
                     errorText: usernameError,
                     labelText: L10n.of(context).username),
               ),
             ),
-            ListTile(
-              leading: CircleAvatar(
-                backgroundColor: Theme.of(context).brightness == Brightness.dark
-                    ? Color(0xff121212)
-                    : Colors.white,
-                child: Icon(Icons.lock_outlined,
-                    color: Theme.of(context).primaryColor),
-              ),
-              title: TextField(
+            Padding(
+              padding: const EdgeInsets.all(12.0),
+              child: TextField(
                 readOnly: loading,
                 autocorrect: false,
                 controller: passwordController,
                 obscureText: !showPassword,
                 onSubmitted: (t) => login(context),
                 decoration: InputDecoration(
+                    prefixIcon: Icon(Icons.lock_outlined),
                     hintText: '****',
                     errorText: passwordError,
                     suffixIcon: IconButton(
@@ -217,17 +210,17 @@ class _LoginState extends State<Login> {
                     labelText: L10n.of(context).password),
               ),
             ),
-            SizedBox(height: 20),
+            SizedBox(height: 12),
             Hero(
               tag: 'loginButton',
               child: Container(
-                height: 50,
+                height: 56,
                 padding: EdgeInsets.symmetric(horizontal: 12),
                 child: RaisedButton(
                   elevation: 7,
                   color: Theme.of(context).primaryColor,
                   shape: RoundedRectangleBorder(
-                    borderRadius: BorderRadius.circular(6),
+                    borderRadius: BorderRadius.circular(12),
                   ),
                   child: loading
                       ? LinearProgressIndicator()

lib/views/new_group.dart

@@ -48,7 +48,7 @@ class _NewGroupState extends State<NewGroup> {
         mainAxisSize: MainAxisSize.min,
         children: <Widget>[
           Padding(
-            padding: const EdgeInsets.all(16.0),
+            padding: const EdgeInsets.all(12.0),
             child: TextField(
               controller: controller,
               autofocus: true,
@@ -56,7 +56,6 @@ class _NewGroupState extends State<NewGroup> {
               textInputAction: TextInputAction.go,
               onSubmitted: (s) => submitAction(context),
               decoration: InputDecoration(
-                  border: OutlineInputBorder(),
                   labelText: L10n.of(context).optionalGroupName,
                   prefixIcon: Icon(Icons.people_outlined),
                   hintText: L10n.of(context).enterAGroupName),

lib/views/new_private_chat.dart

@@ -93,7 +93,7 @@ class _NewPrivateChatState extends State<NewPrivateChat> {
       body: Column(
         children: <Widget>[
           Padding(
-            padding: const EdgeInsets.all(16.0),
+            padding: const EdgeInsets.all(12.0),
             child: Form(
               key: _formKey,
               child: TextFormField(
@@ -121,7 +121,6 @@ class _NewPrivateChatState extends State<NewPrivateChat> {
                   return null;
                 },
                 decoration: InputDecoration(
-                  border: OutlineInputBorder(),
                   labelText: L10n.of(context).enterAUsername,
                   prefixIcon: loading
                       ? Container(

lib/views/sign_up.dart

@@ -88,6 +88,22 @@ class _SignUpState extends State<SignUp> {
               tag: 'loginBanner',
               child: Image.asset('assets/banner.png'),
             ),
+            SizedBox(height: 16),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 12.0),
+              child: TextField(
+                autocorrect: false,
+                controller: usernameController,
+                onSubmitted: (s) => signUpAction(context),
+                decoration: InputDecoration(
+                  prefixIcon: Icon(Icons.account_circle_outlined),
+                  hintText: L10n.of(context).username,
+                  errorText: usernameError,
+                  labelText: L10n.of(context).chooseAUsername,
+                ),
+              ),
+            ),
+            SizedBox(height: 8),
             ListTile(
               leading: CircleAvatar(
                 backgroundImage:
@@ -115,37 +131,17 @@ class _SignUpState extends State<SignUp> {
                   ? setAvatarAction
                   : () => setState(() => avatar = null),
             ),
-            ListTile(
-              leading: CircleAvatar(
-                backgroundColor: Theme.of(context).brightness == Brightness.dark
-                    ? Color(0xff121212)
-                    : Colors.white,
-                child: Icon(
-                  Icons.account_circle_outlined,
-                  color: Theme.of(context).primaryColor,
-                ),
-              ),
-              title: TextField(
-                autocorrect: false,
-                controller: usernameController,
-                onSubmitted: (s) => signUpAction(context),
-                decoration: InputDecoration(
-                    hintText: L10n.of(context).username,
-                    errorText: usernameError,
-                    labelText: L10n.of(context).chooseAUsername),
-              ),
-            ),
-            SizedBox(height: 20),
+            SizedBox(height: 16),
             Hero(
               tag: 'loginButton',
               child: Container(
-                height: 50,
+                height: 56,
                 padding: EdgeInsets.symmetric(horizontal: 12),
                 child: RaisedButton(
                   elevation: 7,
                   color: Theme.of(context).primaryColor,
                   shape: RoundedRectangleBorder(
-                    borderRadius: BorderRadius.circular(6),
+                    borderRadius: BorderRadius.circular(12),
                   ),
                   child: loading
                       ? LinearProgressIndicator()

lib/views/sign_up_password.dart

@@ -127,19 +127,16 @@ class _SignUpPasswordState extends State<SignUpPassword> {
         padding: EdgeInsets.symmetric(
             horizontal: max((MediaQuery.of(context).size.width - 600) / 2, 0)),
         children: <Widget>[
-          ListTile(
-            leading: CircleAvatar(
-              backgroundColor: Colors.white,
-              child: Icon(Icons.lock_outlined,
-                  color: Theme.of(context).primaryColor),
-            ),
-            title: TextField(
+          Padding(
+            padding: const EdgeInsets.all(12.0),
+            child: TextField(
               controller: passwordController,
               obscureText: !showPassword,
               autofocus: true,
               autocorrect: false,
               onSubmitted: (t) => _signUpAction(context),
               decoration: InputDecoration(
+                  prefixIcon: Icon(Icons.lock_outlined),
                   hintText: '****',
                   errorText: passwordError,
                   suffixIcon: IconButton(
@@ -152,17 +149,17 @@ class _SignUpPasswordState extends State<SignUpPassword> {
                   labelText: L10n.of(context).password),
             ),
           ),
-          SizedBox(height: 20),
+          SizedBox(height: 12),
           Hero(
             tag: 'loginButton',
             child: Container(
-              height: 50,
+              height: 56,
               padding: EdgeInsets.symmetric(horizontal: 12),
               child: RaisedButton(
                 elevation: 7,
                 color: Theme.of(context).primaryColor,
                 shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(6),
+                  borderRadius: BorderRadius.circular(12),
                 ),
                 child: loading
                     ? LinearProgressIndicator()