Merge pull request #3706 from grummbeer/unify-dialogs-step-2-input

Unify inputDecoration. All input fields are bordered rectangles with rounded corners

flutter/lib/common.dart

@@ -206,10 +206,8 @@ class MyTheme {
             fillColor: grayBg,
             filled: true,
             isDense: true,
-            contentPadding: EdgeInsets.all(15),
+            border: OutlineInputBorder(
-            border: UnderlineInputBorder(
+              borderRadius: BorderRadius.circular(8),
-              borderRadius: BorderRadius.circular(18),
-              borderSide: BorderSide.none,
             ),
           )
         : null,
@@ -302,10 +300,8 @@ class MyTheme {
             fillColor: Color(0xFF24252B),
             filled: true,
             isDense: true,
-            contentPadding: EdgeInsets.all(15),
+            border: OutlineInputBorder(
-            border: UnderlineInputBorder(
+              borderRadius: BorderRadius.circular(8),
-              borderRadius: BorderRadius.circular(18),
-              borderSide: BorderSide.none,
             ),
           )
         : null,

flutter/lib/common/widgets/address_book.dart

@@ -274,11 +274,7 @@ class _AddressBookState extends State<AddressBook> {
                 TextField(
                   controller: idController,
                   inputFormatters: [IDTextInputFormatter()],
-                  decoration: InputDecoration(
+                  decoration: InputDecoration(errorText: errorMsg),
-                      isDense: true,
-                      border: OutlineInputBorder(),
-                      errorText: errorMsg),
-                  style: style,
                 ),
                 Align(
                   alignment: Alignment.centerLeft,
@@ -289,11 +285,6 @@ class _AddressBookState extends State<AddressBook> {
                 ).marginOnly(top: 8, bottom: 2),
                 TextField(
                   controller: aliasController,
-                  decoration: InputDecoration(
-                    border: OutlineInputBorder(),
-                    isDense: true,
-                  ),
-                  style: style,
                 ),
                 Align(
                   alignment: Alignment.centerLeft,
@@ -379,7 +370,6 @@ class _AddressBookState extends State<AddressBook> {
                   child: TextField(
                     maxLines: null,
                     decoration: InputDecoration(
-                      border: const OutlineInputBorder(),
                       errorText: msg.isEmpty ? null : translate(msg),
                     ),
                     controller: controller,

flutter/lib/common/widgets/dialog.dart

@@ -106,7 +106,6 @@ void changeIdDialog() {
           TextField(
             decoration: InputDecoration(
                 labelText: translate('Your new ID'),
-                border: isDesktop ? const OutlineInputBorder() : null,
                 errorText: msg.isEmpty ? null : translate(msg),
                 suffixText: '${rxId.value.length}/16',
                 suffixStyle: const TextStyle(fontSize: 12, color: Colors.grey)),
@@ -182,7 +181,6 @@ void changeWhiteList({Function()? callback}) async {
                 child: TextField(
                     maxLines: null,
                     decoration: InputDecoration(
-                      border: isDesktop ? const OutlineInputBorder() : null,
                       errorText: msg.isEmpty ? null : translate(msg),
                     ),
                     controller: controller,

flutter/lib/common/widgets/login.dart

@@ -405,7 +405,6 @@ class DialogTextField extends StatelessWidget {
           child: TextField(
             decoration: InputDecoration(
                 labelText: title,
-                border: const OutlineInputBorder(),
                 prefixIcon: prefixIcon,
                 helperText: helperText,
                 helperMaxLines: 8,
@@ -635,9 +634,7 @@ Future<bool?> verificationCodeDialog(UserPayload? user) async {
                 offstage: user?.email == null,
                 child: TextField(
                   decoration: InputDecoration(
-                      labelText: "Email",
+                      labelText: "Email", prefixIcon: Icon(Icons.email)),
-                      prefixIcon: Icon(Icons.email),
-                      border: InputBorder.none),
                   readOnly: true,
                   controller: TextEditingController(text: user?.email),
                 )),

flutter/lib/common/widgets/peer_card.dart

@@ -1157,7 +1157,6 @@ void _rdpDialog(String id) async {
                     ],
                     decoration: InputDecoration(
                         labelText: isDesktop ? null : translate('Port'),
-                        border: isDesktop ? const OutlineInputBorder() : null,
                         hintText: '3389'),
                     controller: portController,
                     autofocus: true,
@@ -1178,8 +1177,7 @@ void _rdpDialog(String id) async {
                 Expanded(
                   child: TextField(
                     decoration: InputDecoration(
-                        labelText: isDesktop ? null : translate('Username'),
+                        labelText: isDesktop ? null : translate('Username')),
-                        border: isDesktop ? const OutlineInputBorder() : null),
                     controller: userController,
                   ),
                 ),
@@ -1200,8 +1198,6 @@ void _rdpDialog(String id) async {
                         obscureText: secure.value,
                         decoration: InputDecoration(
                             labelText: isDesktop ? null : translate('Password'),
-                            border:
-                                isDesktop ? const OutlineInputBorder() : null,
                             suffixIcon: IconButton(
                                 onPressed: () => secure.value = !secure.value,
                                 icon: Icon(secure.value

flutter/lib/desktop/pages/connection_page.dart

@@ -193,7 +193,7 @@ class _ConnectionPageState extends State<ConnectionPage>
                       style: const TextStyle(
                         fontFamily: 'WorkSans',
                         fontSize: 22,
-                        height: 1.25,
+                        height: 1.4,
                       ),
                       maxLines: 1,
                       cursorColor:
@@ -204,22 +204,8 @@ class _ConnectionPageState extends State<ConnectionPage>
                           hintText: _idInputFocused.value
                               ? null
                               : translate('Enter Remote ID'),
-                          border: OutlineInputBorder(
-                              borderRadius: BorderRadius.zero,
-                              borderSide: BorderSide(
-                                  color: MyTheme.color(context).border!)),
-                          enabledBorder: OutlineInputBorder(
-                              borderRadius: BorderRadius.zero,
-                              borderSide: BorderSide(
-                                  color: MyTheme.color(context).border!)),
-                          focusedBorder: const OutlineInputBorder(
-                            borderRadius: BorderRadius.zero,
-                            borderSide:
-                                BorderSide(color: MyTheme.button, width: 3),
-                          ),
-                          isDense: true,
                           contentPadding: const EdgeInsets.symmetric(
-                              horizontal: 10, vertical: 12)),
+                              horizontal: 15, vertical: 13)),
                       controller: _idController,
                       inputFormatters: [IDTextInputFormatter()],
                       onSubmitted: (s) {

flutter/lib/desktop/pages/desktop_home_page.dart

@@ -634,7 +634,6 @@ void setPasswordDialog() async {
                     obscureText: true,
                     decoration: InputDecoration(
                         labelText: translate('Password'),
-                        border: const OutlineInputBorder(),
                         errorText: errMsg0.isNotEmpty ? errMsg0 : null),
                     controller: p0,
                     autofocus: true,
@@ -662,7 +661,6 @@ void setPasswordDialog() async {
                   child: TextField(
                     obscureText: true,
                     decoration: InputDecoration(
-                        border: const OutlineInputBorder(),
                         labelText: translate('Confirmation'),
                         errorText: errMsg1.isNotEmpty ? errMsg1 : null),
                     controller: p1,

flutter/lib/desktop/pages/desktop_setting_page.dart

@@ -769,7 +769,7 @@ class _SafetyState extends State<_Safety> with AutomaticKeepAliveClientMixin {
               'Port',
               Row(children: [
                 SizedBox(
-                  width: 80,
+                  width: 95,
                   child: TextField(
                     controller: controller,
                     enabled: enabled && !locked,
@@ -778,13 +778,10 @@ class _SafetyState extends State<_Safety> with AutomaticKeepAliveClientMixin {
                       FilteringTextInputFormatter.allow(RegExp(
                           r'^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$')),
                     ],
-                    textAlign: TextAlign.end,
                     decoration: const InputDecoration(
                       hintText: '21118',
-                      border: OutlineInputBorder(),
                       contentPadding:
-                          EdgeInsets.only(bottom: 10, top: 10, right: 10),
+                          EdgeInsets.symmetric(vertical: 12, horizontal: 12),
-                      isCollapsed: true,
                     ),
                   ).marginOnly(right: 15),
                 ),
@@ -1704,9 +1701,6 @@ _LabeledTextField(
             enabled: enabled,
             obscureText: secure,
             decoration: InputDecoration(
-                isDense: true,
-                border: OutlineInputBorder(),
-                contentPadding: EdgeInsets.fromLTRB(14, 15, 14, 15),
                 errorText: errorText.isNotEmpty ? errorText : null),
             style: TextStyle(
               color: _disabledTextColor(context, enabled),
@@ -1748,15 +1742,16 @@ class _ComboBox extends StatelessWidget {
           color: enabled
               ? MyTheme.color(context).border2 ?? MyTheme.border
               : MyTheme.border,
-      )),
+        ),
-      height: 30,
+        borderRadius:
+            BorderRadius.circular(8), //border raiuds of dropdown button
+      ),
+      height: 42, // should be the height of a TextField
       child: Obx(() => DropdownButton<String>(
             isExpanded: true,
             value: ref.value,
             elevation: 16,
-            underline: Container(
+            underline: Container(),
-              height: 25,
-            ),
             style: TextStyle(
                 color: enabled
                     ? Theme.of(context).textTheme.titleMedium?.color
@@ -1764,7 +1759,7 @@ class _ComboBox extends StatelessWidget {
             icon: const Icon(
               Icons.expand_more_sharp,
               size: 20,
-            ),
+            ).marginOnly(right: 15),
             onChanged: enabled
                 ? (String? newValue) {
                     if (newValue != null && newValue != ref.value) {
@@ -1781,11 +1776,11 @@ class _ComboBox extends StatelessWidget {
                   value,
                   style: const TextStyle(fontSize: _kContentFontSize),
                   overflow: TextOverflow.ellipsis,
-                ).marginOnly(left: 5),
+                ).marginOnly(left: 15),
               );
             }).toList(),
           )),
-    );
+    ).marginOnly(bottom: 5);
   }
 }
 
@@ -1862,7 +1857,6 @@ void changeSocks5Proxy() async {
                 Expanded(
                   child: TextField(
                     decoration: InputDecoration(
-                        border: const OutlineInputBorder(),
                         errorText: proxyMsg.isNotEmpty ? proxyMsg : null),
                     controller: proxyController,
                     autofocus: true,
@@ -1880,9 +1874,6 @@ void changeSocks5Proxy() async {
                     ).marginOnly(right: 10)),
                 Expanded(
                   child: TextField(
-                    decoration: const InputDecoration(
-                      border: OutlineInputBorder(),
-                    ),
                     controller: userController,
                   ),
                 ),
@@ -1900,7 +1891,6 @@ void changeSocks5Proxy() async {
                   child: Obx(() => TextField(
                         obscureText: obscure.value,
                         decoration: InputDecoration(
-                            border: const OutlineInputBorder(),
                             suffixIcon: IconButton(
                                 onPressed: () => obscure.value = !obscure.value,
                                 icon: Icon(obscure.value

flutter/lib/desktop/pages/port_forward_page.dart

@@ -11,7 +11,7 @@ import 'package:wakelock/wakelock.dart';
 
 const double _kColumn1Width = 30;
 const double _kColumn4Width = 100;
-const double _kRowHeight = 50;
+const double _kRowHeight = 60;
 const double _kTextLeftMargin = 20;
 
 class _PortForward {
@@ -183,8 +183,6 @@ class _PortForwardPageState extends State<PortForwardPage>
             controller: remotePortController,
             inputFormatters: portInputFormatter),
         ElevatedButton(
-          style: ElevatedButton.styleFrom(
-              elevation: 0, side: const BorderSide(color: MyTheme.border)),
           onPressed: () async {
             int? localPort = int.tryParse(localPortController.text);
             int? remotePort = int.tryParse(remotePortController.text);
@@ -208,7 +206,7 @@ class _PortForwardPageState extends State<PortForwardPage>
           child: Text(
             translate('Add'),
           ),
-        ).marginAll(10),
+        ).marginSymmetric(horizontal: 10),
       ]),
     );
   }
@@ -217,26 +215,15 @@ class _PortForwardPageState extends State<PortForwardPage>
       {required TextEditingController controller,
       List<TextInputFormatter>? inputFormatters,
       String? hint}) {
-    final textColor = Theme.of(context).textTheme.titleLarge?.color;
     return Expanded(
+      child: Padding(
+          padding: const EdgeInsets.all(10.0),
           child: TextField(
               controller: controller,
               inputFormatters: inputFormatters,
-        cursorColor: textColor,
-        cursorHeight: 20,
-        cursorWidth: 1,
               decoration: InputDecoration(
-            border: OutlineInputBorder(
-                borderSide: BorderSide(color: MyTheme.color(context).border!)),
-            focusedBorder: OutlineInputBorder(
-                borderSide: BorderSide(color: MyTheme.color(context).border!)),
-            fillColor: Theme.of(context).colorScheme.background,
-            contentPadding: const EdgeInsets.all(10),
                 hintText: hint,
-            hintStyle:
+              ))),
-                TextStyle(color: Theme.of(context).hintColor, fontSize: 16)),
-        style: TextStyle(color: textColor, fontSize: 16),
-      ).marginAll(10),
     );
   }
 
@@ -322,14 +309,9 @@ class _PortForwardPageState extends State<PortForwardPage>
                       child: SizedBox(
                         width: 120,
                         child: ElevatedButton(
-                          style: ElevatedButton.styleFrom(
-                              elevation: 0,
-                              side: const BorderSide(color: MyTheme.border)),
                           onPressed: () => bind.sessionNewRdp(id: widget.id),
                           child: Text(
                             translate('New RDP'),
-                            style: const TextStyle(
-                                fontWeight: FontWeight.w300, fontSize: 14),
                           ),
                         ).marginSymmetric(vertical: 10),
                       ).marginOnly(left: 20),