style: Enhanced chat details design

lib/pages/chat_details/chat_details_view.dart

@@ -100,42 +100,47 @@ class ChatDetailsView extends StatelessWidget {
                           crossAxisAlignment: CrossAxisAlignment.stretch,
                           children: <Widget>[
                             ListTile(
-                              leading: room.canSendEvent('m.room.topic')
-                                  ? CircleAvatar(
-                                      backgroundColor: Theme.of(context)
-                                          .scaffoldBackgroundColor,
-                                      foregroundColor: iconColor,
-                                      radius: Avatar.defaultSize / 2,
-                                      child: const Icon(Icons.edit_outlined),
-                                    )
+                              onTap: room.canSendEvent(EventTypes.RoomTopic)
+                                  ? controller.setTopicAction
                                   : null,
-                              title: Text(
-                                  '${L10n.of(context)!.groupDescription}:',
-                                  style: TextStyle(
+                              trailing: room.canSendEvent(EventTypes.RoomTopic)
+                                  ? Icon(
+                                      Icons.edit_outlined,
                                       color: Theme.of(context)
                                           .colorScheme
-                                          .secondary,
-                                      fontWeight: FontWeight.bold)),
-                              subtitle: LinkText(
-                                text: room.topic.isEmpty
-                                    ? L10n.of(context)!.addGroupDescription
-                                    : room.topic,
-                                linkStyle:
-                                    const TextStyle(color: Colors.blueAccent),
-                                textStyle: TextStyle(
-                                  fontSize: 14,
-                                  color: Theme.of(context)
-                                      .textTheme
-                                      .bodyMedium!
-                                      .color,
+                                          .onBackground,
+                                    )
+                                  : null,
+                              title: Text(
+                                L10n.of(context)!.groupDescription,
+                                style: TextStyle(
+                                  color:
+                                      Theme.of(context).colorScheme.secondary,
+                                  fontWeight: FontWeight.bold,
                                 ),
-                                onLinkTap: (url) =>
-                                    UrlLauncher(context, url).launchUrl(),
                               ),
-                              onTap: room.canSendEvent('m.room.topic')
-                                  ? controller.setTopicAction
-                                  : null,
                             ),
+                            if (room.topic.isNotEmpty)
+                              Padding(
+                                padding: const EdgeInsets.symmetric(
+                                    horizontal: 16.0),
+                                child: LinkText(
+                                  text: room.topic.isEmpty
+                                      ? L10n.of(context)!.addGroupDescription
+                                      : room.topic,
+                                  linkStyle:
+                                      const TextStyle(color: Colors.blueAccent),
+                                  textStyle: TextStyle(
+                                    fontSize: 14,
+                                    color: Theme.of(context)
+                                        .textTheme
+                                        .bodyMedium!
+                                        .color,
+                                  ),
+                                  onLinkTap: (url) =>
+                                      UrlLauncher(context, url).launchUrl(),
+                                ),
+                              ),
                             const SizedBox(height: 8),
                             const Divider(height: 1),
                             ListTile(

lib/pages/chat_details/participant_list_item.dart

@@ -39,17 +39,27 @@ class ParticipantListItem extends StatelessWidget {
         title: Row(
           children: <Widget>[
             Text(user.calcDisplayname()),
-            permissionBatch.isEmpty
-                ? Container()
-                : Container(
-                    padding: const EdgeInsets.all(4),
-                    margin: const EdgeInsets.symmetric(horizontal: 8),
-                    decoration: BoxDecoration(
-                      color: Theme.of(context).secondaryHeaderColor,
-                      borderRadius: BorderRadius.circular(8),
-                    ),
-                    child: Center(child: Text(permissionBatch)),
+            if (permissionBatch.isNotEmpty)
+              Container(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 4,
+                  vertical: 2,
+                ),
+                margin: const EdgeInsets.symmetric(horizontal: 8),
+                decoration: BoxDecoration(
+                    color: Theme.of(context).colorScheme.primaryContainer,
+                    borderRadius: BorderRadius.circular(8),
+                    border: Border.all(
+                      color: Theme.of(context).colorScheme.primary,
+                    )),
+                child: Text(
+                  permissionBatch,
+                  style: TextStyle(
+                    fontSize: 14,
+                    color: Theme.of(context).colorScheme.primary,
                   ),
+                ),
+              ),
             membershipBatch[user.membership]!.isEmpty
                 ? Container()
                 : Container(