chore: Adjust design

lib/config/themes.dart

@@ -73,7 +73,9 @@ abstract class FluffyThemes {
       brightness: brightness,
       colorScheme: colorScheme,
       textTheme: fallbackTextTheme,
-      dividerColor: colorScheme.surfaceContainer,
+      dividerColor: brightness == Brightness.dark
+          ? colorScheme.surfaceContainerHighest
+          : colorScheme.surfaceContainer,
       popupMenuTheme: PopupMenuThemeData(
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(AppConfig.borderRadius),

lib/pages/chat/chat_view.dart

@@ -181,6 +181,7 @@ class ChatView extends StatelessWidget {
                       ? null
                       : theme.colorScheme.primary,
                 ),
+                automaticallyImplyLeading: false,
                 leading: controller.selectMode
                     ? IconButton(
                         icon: const Icon(Icons.close),
@@ -188,19 +189,21 @@ class ChatView extends StatelessWidget {
                         tooltip: L10n.of(context).close,
                         color: theme.colorScheme.primary,
                       )
-                    : StreamBuilder<Object>(
-                        stream: Matrix.of(context)
-                            .client
-                            .onSync
-                            .stream
-                            .where((syncUpdate) => syncUpdate.hasRoomUpdate),
-                        builder: (context, _) => UnreadRoomsBadge(
-                          filter: (r) => r.id != controller.roomId,
-                          badgePosition: BadgePosition.topEnd(end: 8, top: 4),
-                          child: const Center(child: BackButton()),
-                        ),
-                      ),
-                titleSpacing: 0,
+                    : FluffyThemes.isColumnMode(context)
+                        ? null
+                        : StreamBuilder<Object>(
+                            stream:
+                                Matrix.of(context).client.onSync.stream.where(
+                                      (syncUpdate) => syncUpdate.hasRoomUpdate,
+                                    ),
+                            builder: (context, _) => UnreadRoomsBadge(
+                              filter: (r) => r.id != controller.roomId,
+                              badgePosition:
+                                  BadgePosition.topEnd(end: 8, top: 4),
+                              child: const Center(child: BackButton()),
+                            ),
+                          ),
+                titleSpacing: FluffyThemes.isColumnMode(context) ? 32 : 0,
                 title: ChatAppBarTitle(controller),
                 actions: _appBarActions(context),
                 bottom: PreferredSize(

lib/pages/chat_details/participant_list_item.dart

@@ -90,7 +90,11 @@ class ParticipantListItem extends StatelessWidget {
                   ),
           ],
         ),
-        subtitle: Text(user.id),
+        subtitle: Text(
+          user.id,
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+        ),
         leading: Avatar(
           mxContent: user.avatarUrl,
           name: user.calcDisplayname(),

lib/pages/key_verification/key_verification_dialog.dart

@@ -185,20 +185,20 @@ class KeyVerificationPageState extends State<KeyVerificationDialog> {
           ],
         );
         buttons.add(
-          TextButton.icon(
-            icon: const Icon(Icons.close),
-            style: TextButton.styleFrom(foregroundColor: Colors.red),
-            label: Text(L10n.of(context).reject),
+          AdaptiveDialogAction(
             onPressed: () => widget.request
                 .rejectVerification()
                 .then((_) => Navigator.of(context, rootNavigator: false).pop()),
+            child: Text(
+              L10n.of(context).reject,
+              style: TextStyle(color: theme.colorScheme.error),
+            ),
           ),
         );
         buttons.add(
-          TextButton.icon(
-            icon: const Icon(Icons.check),
-            label: Text(L10n.of(context).accept),
+          AdaptiveDialogAction(
             onPressed: () => widget.request.acceptVerification(),
+            child: Text(L10n.of(context).accept),
           ),
         );
         break;
@@ -207,6 +207,7 @@ class KeyVerificationPageState extends State<KeyVerificationDialog> {
         body = Center(
           child: Column(
             children: <Widget>[
+              const SizedBox(height: 16),
               Stack(
                 alignment: Alignment.center,
                 children: [
@@ -230,10 +231,9 @@ class KeyVerificationPageState extends State<KeyVerificationDialog> {
           ),
         );
         buttons.add(
-          TextButton.icon(
-            icon: const Icon(Icons.close),
-            label: Text(L10n.of(context).cancel),
+          AdaptiveDialogAction(
             onPressed: () => widget.request.cancel(),
+            child: Text(L10n.of(context).cancel),
           ),
         );
 
@@ -271,20 +271,18 @@ class KeyVerificationPageState extends State<KeyVerificationDialog> {
           ],
         );
         buttons.add(
-          TextButton.icon(
-            icon: const Icon(Icons.close),
-            style: TextButton.styleFrom(
-              foregroundColor: Colors.red,
-            ),
-            label: Text(L10n.of(context).theyDontMatch),
+          AdaptiveDialogAction(
             onPressed: () => widget.request.rejectSas(),
+            child: Text(
+              L10n.of(context).theyDontMatch,
+              style: TextStyle(color: theme.colorScheme.error),
+            ),
           ),
         );
         buttons.add(
-          TextButton.icon(
-            icon: const Icon(Icons.check_outlined),
-            label: Text(L10n.of(context).theyMatch),
+          AdaptiveDialogAction(
             onPressed: () => widget.request.acceptSas(),
+            child: Text(L10n.of(context).theyMatch),
           ),
         );
         break;
@@ -295,8 +293,9 @@ class KeyVerificationPageState extends State<KeyVerificationDialog> {
         body = Column(
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
+            const SizedBox(height: 16),
             const CircularProgressIndicator.adaptive(strokeWidth: 2),
-            const SizedBox(height: 10),
+            const SizedBox(height: 16),
             Text(
               acceptText,
               textAlign: TextAlign.center,
@@ -305,20 +304,14 @@ class KeyVerificationPageState extends State<KeyVerificationDialog> {
         );
         break;
       case KeyVerificationState.done:
-        body = Column(
-          mainAxisSize: MainAxisSize.min,
-          children: <Widget>[
-            const Icon(
-              Icons.check_circle_outlined,
-              color: Colors.green,
-              size: 128.0,
-            ),
-            const SizedBox(height: 10),
-            Text(
-              L10n.of(context).verifySuccess,
-              textAlign: TextAlign.center,
-            ),
-          ],
+        title = Text(L10n.of(context).verifySuccess);
+        body = const Padding(
+          padding: EdgeInsets.all(16.0),
+          child: Icon(
+            Icons.verified_outlined,
+            color: Colors.green,
+            size: 128.0,
+          ),
         );
         buttons.add(
           AdaptiveDialogAction(
@@ -334,7 +327,8 @@ class KeyVerificationPageState extends State<KeyVerificationDialog> {
         body = Column(
           mainAxisSize: MainAxisSize.min,
           children: <Widget>[
-            const Icon(Icons.cancel, color: Colors.red, size: 128.0),
+            const SizedBox(height: 16),
+            Icon(Icons.cancel, color: theme.colorScheme.error, size: 64.0),
             const SizedBox(height: 16),
             // TODO: Add better error UI to user
             Text(

lib/widgets/layouts/max_width_body.dart

@@ -34,12 +34,18 @@ class MaxWidthBody extends StatelessWidget {
                       maxWidth: FluffyThemes.columnWidth * 1.5,
                     ),
                     child: Material(
-                      elevation: theme.appBarTheme.scrolledUnderElevation ?? 4,
+                      shape: RoundedRectangleBorder(
+                        borderRadius:
+                            BorderRadius.circular(AppConfig.borderRadius),
+                        side: BorderSide(
+                          color: theme.dividerColor,
+                        ),
+                      ),
                       clipBehavior: Clip.hardEdge,
-                      borderRadius:
-                          BorderRadius.circular(AppConfig.borderRadius),
-                      shadowColor: theme.appBarTheme.shadowColor,
-                      child: child,
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(vertical: 16.0),
+                        child: child,
+                      ),
                     ),
                   ),
                 );