design: Change design of verification page

assets/l10n/intl_en.arb

@@ -2397,6 +2397,7 @@
     "type": "text",
     "placeholders": {}
   },
+  "unverified": "Unverified",
   "verified": "Verified",
   "@verified": {
     "type": "text",

lib/pages/views/chat_encryption_settings_view.dart

@@ -94,26 +94,14 @@ class ChatEncryptionSettingsView extends StatelessWidget {
                                     .getUserByMXIDSync(deviceKeys[i].userId)
                                     .calcDisplayname(),
                               ),
-                              title: Row(
-                                children: [
-                                  Text(
-                                    room
-                                        .getUserByMXIDSync(deviceKeys[i].userId)
-                                        .calcDisplayname(),
-                                  ),
-                                  Spacer(),
-                                  Text(
-                                    deviceKeys[i].userId,
-                                    style: TextStyle(
-                                      fontSize: 14,
-                                      color: Theme.of(context)
-                                          .textTheme
-                                          .bodyText1
-                                          .color
-                                          .withAlpha(150),
-                                    ),
-                                  ),
-                                ],
+                              title: Text(
+                                room
+                                    .getUserByMXIDSync(deviceKeys[i].userId)
+                                    .calcDisplayname(),
+                              ),
+                              subtitle: Text(
+                                deviceKeys[i].userId,
+                                style: TextStyle(fontWeight: FontWeight.w300),
                               ),
                             ),
                           ),
@@ -149,10 +137,8 @@ class ChatEncryptionSettingsView extends StatelessWidget {
                           },
                           child: ListTile(
                             leading: CircleAvatar(
-                              foregroundColor:
-                                  Theme.of(context).textTheme.bodyText1.color,
-                              backgroundColor:
-                                  Theme.of(context).secondaryHeaderColor,
+                              foregroundColor: Colors.white,
+                              backgroundColor: deviceKeys[i].color,
                               child: Icon(deviceKeys[i].icon),
                             ),
                             title: Text(
@@ -164,14 +150,7 @@ class ChatEncryptionSettingsView extends StatelessWidget {
                               children: [
                                 Text(
                                   deviceKeys[i].deviceId,
-                                  style: TextStyle(
-                                    fontSize: 14,
-                                    color: Theme.of(context)
-                                        .textTheme
-                                        .bodyText1
-                                        .color
-                                        .withAlpha(150),
-                                  ),
+                                  style: TextStyle(fontWeight: FontWeight.w300),
                                 ),
                                 Spacer(),
                                 Text(
@@ -179,14 +158,10 @@ class ChatEncryptionSettingsView extends StatelessWidget {
                                       ? L10n.of(context).blocked
                                       : deviceKeys[i].verified
                                           ? L10n.of(context).verified
-                                          : L10n.of(context).unknownDevice,
+                                          : L10n.of(context).unverified,
                                   style: TextStyle(
                                     fontSize: 14,
-                                    color: deviceKeys[i].blocked
-                                        ? Colors.red
-                                        : deviceKeys[i].verified
-                                            ? Colors.green
-                                            : Colors.orange,
+                                    color: deviceKeys[i].color,
                                   ),
                                 ),
                               ],
@@ -203,3 +178,11 @@ class ChatEncryptionSettingsView extends StatelessWidget {
     );
   }
 }
+
+extension on DeviceKeys {
+  Color get color => blocked
+      ? Colors.red
+      : verified
+          ? Colors.green
+          : Colors.orange;
+}

lib/widgets/list_items/user_device_list_item.dart

@@ -93,8 +93,14 @@ class UserDeviceListItem extends StatelessWidget {
         }
       },
       leading: CircleAvatar(
-        foregroundColor: Theme.of(context).textTheme.bodyText1.color,
-        backgroundColor: Theme.of(context).secondaryHeaderColor,
+        foregroundColor: Colors.white,
+        backgroundColor: keys == null
+            ? Colors.grey[700]
+            : keys.blocked
+                ? Colors.red
+                : keys.verified
+                    ? Colors.green
+                    : Colors.orange,
         child: Icon(userDevice.icon),
       ),
       title: Row(
@@ -112,7 +118,10 @@ class UserDeviceListItem extends StatelessWidget {
       ),
       subtitle: Row(
         children: <Widget>[
-          Text(userDevice.deviceId),
+          Text(
+            userDevice.deviceId,
+            style: TextStyle(fontWeight: FontWeight.w300),
+          ),
           Spacer(),
           if (keys != null)
             Text(
@@ -120,7 +129,7 @@ class UserDeviceListItem extends StatelessWidget {
                   ? L10n.of(context).blocked
                   : keys.verified
                       ? L10n.of(context).verified
-                      : L10n.of(context).unknownDevice,
+                      : L10n.of(context).unverified,
               style: TextStyle(
                 color: keys.blocked
                     ? Colors.red