chore: Redesign textfields

2021-01-24 17:26:59 +01:00 · 2021-01-24 17:26:59 +01:00 · aef809030d
parent 0bd0e58b95
commit aef809030d
9 changed files with 74 additions and 91 deletions
--- a/lib/components/default_app_bar_search_field.dart
+++ b/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,
        ),
      ),
    );
--- a/lib/config/themes.dart
+++ b/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,
--- a/lib/views/chat.dart
+++ b/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();
--- a/lib/views/homeserver_picker.dart
+++ b/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()
--- a/lib/views/login.dart
+++ b/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()
--- a/lib/views/new_group.dart
+++ b/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),
--- a/lib/views/new_private_chat.dart
+++ b/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(
--- a/lib/views/sign_up.dart
+++ b/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()
--- a/lib/views/sign_up_password.dart
+++ b/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()