make verification badge more visible

assets/icons/verified_badge_green.svg

@@ -1,4 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#57CC99" class="bi bi-patch-check" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#57CC99" class="bi bi-patch-check-fill" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M10.354 6.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708 0"/>
+  <path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708"/>
-  <path d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911z"/>
+</svg>
-</svg>

assets/icons/verified_badge_red.svg

@@ -1,4 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ff0000" class="bi bi-patch-check" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ff0000" class="bi bi-patch-exclamation-fill" viewBox="0 0 16 16">
-  <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
+  <path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
-  <path d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911z"/>
+</svg>
-</svg>

lib/src/localization/generated/app_localizations.dart

@@ -2842,6 +2842,12 @@ abstract class AppLocalizations {
   /// **'Scan other profile'**
   String get scanOtherProfile;
 
+  /// No description provided for @openYourOwnQRcode.
+  ///
+  /// In en, this message translates to:
+  /// **'Open your own QR code'**
+  String get openYourOwnQRcode;
+
   /// No description provided for @skipForNow.
   ///
   /// In en, this message translates to:

lib/src/localization/generated/app_localizations_de.dart

@@ -1568,6 +1568,9 @@ class AppLocalizationsDe extends AppLocalizations {
   @override
   String get scanOtherProfile => 'Scanne ein anderes Profil';
 
+  @override
+  String get openYourOwnQRcode => 'Eigenen QR-Code öffnen';
+
   @override
   String get skipForNow => 'Vorerst überspringen';
 

lib/src/localization/generated/app_localizations_en.dart

@@ -1558,6 +1558,9 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   String get scanOtherProfile => 'Scan other profile';
 
+  @override
+  String get openYourOwnQRcode => 'Open your own QR code';
+
   @override
   String get skipForNow => 'Skip for now';
 

lib/src/localization/generated/app_localizations_sv.dart

@@ -1558,6 +1558,9 @@ class AppLocalizationsSv extends AppLocalizations {
   @override
   String get scanOtherProfile => 'Scan other profile';
 
+  @override
+  String get openYourOwnQRcode => 'Open your own QR code';
+
   @override
   String get skipForNow => 'Skip for now';
 

lib/src/views/chats/chat_list_components/group_list_item.dart

@@ -17,6 +17,7 @@ import 'package:twonly/src/views/chats/chat_messages_components/message_send_sta
 import 'package:twonly/src/views/components/avatar_icon.component.dart';
 import 'package:twonly/src/views/components/flame.dart';
 import 'package:twonly/src/views/components/group_context_menu.component.dart';
+import 'package:twonly/src/views/components/verified_shield.dart';
 
 class GroupListItem extends StatefulWidget {
   const GroupListItem({
@@ -206,8 +207,18 @@ class _UserListItem extends State<GroupListItem> {
     return GroupContextMenu(
       group: widget.group,
       child: ListTile(
-        title: Text(
+        title: Row(
-          substringBy(widget.group.groupName, 30),
+          children: [
+            Text(
+              substringBy(widget.group.groupName, 30),
+            ),
+            const SizedBox(width: 3),
+            VerifiedShield(
+              group: widget.group,
+              showOnlyIfVerified: true,
+              size: 12,
+            ),
+          ],
         ),
         subtitle: (_currentMessage == null)
             ? (widget.group.totalMediaCounter == 0)

lib/src/views/components/verified_shield.dart

@@ -12,11 +12,14 @@ class VerifiedShield extends StatefulWidget {
     this.group,
     super.key,
     this.size = 15,
+    this.showOnlyIfVerified = false,
   });
   final Group? group;
   final Contact? contact;
   final double size;
 
+  final bool showOnlyIfVerified;
+
   @override
   State<VerifiedShield> createState() => _VerifiedShieldState();
 }
@@ -33,13 +36,13 @@ class _VerifiedShieldState extends State<VerifiedShield> {
       stream = twonlyDB.groupsDao
           .watchGroupContact(widget.group!.groupId)
           .listen((contacts) {
-        if (contacts.length == 1) {
+            if (contacts.length == 1) {
-          contact = contacts.first;
+              contact = contacts.first;
-        }
+            }
-        setState(() {
+            setState(() {
-          isVerified = contacts.every((t) => t.verified);
+              isVerified = contacts.every((t) => t.verified);
-        });
+            });
-      });
+          });
     } else if (widget.contact != null) {
       isVerified = widget.contact!.verified;
       contact = widget.contact;
@@ -56,19 +59,24 @@ class _VerifiedShieldState extends State<VerifiedShield> {
 
   @override
   Widget build(BuildContext context) {
+    if (!isVerified && widget.showOnlyIfVerified) return Container();
     return GestureDetector(
       onTap: (contact == null)
           ? null
-          : () => context.push(Routes.settingsPublicProfile),
+          : () => context.push(Routes.settingsHelpFaqVerifyBadge),
-      child: Tooltip(
+      child: ColoredBox(
-        message: isVerified
+        color: Colors.transparent,
-            ? 'You verified this contact'
-            : 'You have not verifies this contact.',
         child: Padding(
-          padding: const EdgeInsetsGeometry.only(top: 2),
+          padding: const EdgeInsetsGeometry.only(
+            top: 4,
+            left: 3,
+            right: 3,
+            bottom: 3,
+          ),
           child: SvgIcon(
-            assetPath:
+            assetPath: isVerified
-                isVerified ? SvgIcons.verifiedGreen : SvgIcons.verifiedRed,
+                ? SvgIcons.verifiedGreen
+                : SvgIcons.verifiedRed,
             size: widget.size,
           ),
         ),

lib/src/views/contact/contact.view.dart

@@ -210,18 +210,18 @@ class _ContactViewState extends State<ContactView> {
           MaxFlameListTitle(
             contactId: widget.userId,
           ),
-          BetterListTile(
+          if (!contact.verified)
-            leading: SvgIcon(
+            BetterListTile(
-              assetPath: SvgIcons.verifiedGreen,
+              leading: VerifiedShield(
-              size: 20,
+                contact: contact,
-              color: IconTheme.of(context).color,
+                size: 20,
+              ),
+              text: context.lang.contactVerifyNumberTitle,
+              onTap: () async {
+                await context.push(Routes.settingsHelpFaqVerifyBadge);
+                setState(() {});
+              },
             ),
-            text: context.lang.contactVerifyNumberTitle,
-            onTap: () async {
-              await context.push(Routes.settingsPublicProfile);
-              setState(() {});
-            },
-          ),
           BetterListTile(
             icon: FontAwesomeIcons.flag,
             text: context.lang.reportUser,

lib/src/views/settings/help/faq/verifybadge.dart

@@ -1,7 +1,13 @@
 import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+import 'package:go_router/go_router.dart';
+import 'package:twonly/src/constants/routes.keys.dart';
 import 'package:twonly/src/utils/misc.dart';
+import 'package:twonly/src/views/components/better_list_title.dart';
 import 'package:twonly/src/views/components/svg_icon.dart';
 
+const colorVerificationBadgeYellow = Color(0xffffa500);
+
 class VerificationBadeFaqView extends StatefulWidget {
   const VerificationBadeFaqView({super.key});
 
@@ -33,7 +39,7 @@ class _VerificationBadeFaqViewState extends State<VerificationBadeFaqView> {
             icon: const SvgIcon(
               assetPath: SvgIcons.verifiedGreen,
               size: 40,
-              color: Color.fromARGB(255, 227, 227, 3),
+              color: colorVerificationBadgeYellow,
             ),
             description: context.lang.verificationBadgeYellowDesc,
           ),
@@ -41,6 +47,18 @@ class _VerificationBadeFaqViewState extends State<VerificationBadeFaqView> {
             icon: const SvgIcon(assetPath: SvgIcons.verifiedRed, size: 40),
             description: context.lang.verificationBadgeRedDesc,
           ),
+          const SizedBox(height: 20),
+          const SizedBox(height: 20),
+          BetterListTile(
+            leading: const FaIcon(FontAwesomeIcons.camera),
+            text: context.lang.scanOtherProfile,
+            onTap: () => context.push(Routes.cameraQRScanner),
+          ),
+          BetterListTile(
+            leading: const FaIcon(FontAwesomeIcons.qrcode),
+            text: context.lang.openYourOwnQRcode,
+            onTap: () => context.push(Routes.settingsPublicProfile),
+          ),
         ],
       ),
     );