refactor: Tweak the design of the BrokenDomainOutlinedCard

assets/translations/en.json

@@ -452,7 +452,7 @@
         "server_rebooted": "Server rebooted. Waiting for the last verification…",
         "server_started": "Server started. It will be validated and rebooted now…",
         "server_created": "Server created. DNS checks and server boot in progress…",
-        "domain_critical_error": "We can't reach it! Read more…",
+        "domain_critical_error": "We can't reach this domain! Tap to read more…",
         "until_the_next_check": "Until the next check: ",
         "check": "Check",
         "one_more_restart": "One more restart to apply your security certificates.",

lib/ui/pages/setup/initializing/broken_domain_outlined_card.dart

@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:selfprivacy/logic/cubit/providers/providers_cubit.dart';
 import 'package:selfprivacy/logic/cubit/support_system/support_system_cubit.dart';
 import 'package:selfprivacy/logic/providers/dns_providers/dns_provider.dart';
-import 'package:selfprivacy/ui/components/cards/outlined_card.dart';
+import 'package:selfprivacy/ui/components/cards/filled_card.dart';
 
 class BrokenDomainOutlinedCard extends StatelessWidget {
   const BrokenDomainOutlinedCard({
@@ -18,9 +18,8 @@ class BrokenDomainOutlinedCard extends StatelessWidget {
   @override
   Widget build(final BuildContext context) => SizedBox(
         width: double.infinity,
-        child: OutlinedCard(
-          borderColor: Theme.of(context).colorScheme.error,
-          borderWidth: 1,
+        child: FilledCard(
+          error: true,
           child: InkResponse(
             highlightShape: BoxShape.rectangle,
             onTap: () => context.read<SupportSystemCubit>().showArticle(
@@ -28,7 +27,7 @@ class BrokenDomainOutlinedCard extends StatelessWidget {
                   context: context,
                 ),
             child: Padding(
-              padding: const EdgeInsets.all(8.0),
+              padding: const EdgeInsets.all(16.0),
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.start,
                 crossAxisAlignment: CrossAxisAlignment.center,
@@ -36,18 +35,22 @@ class BrokenDomainOutlinedCard extends StatelessWidget {
                   Icon(
                     Icons.error,
                     color: Theme.of(context).colorScheme.error,
+                    size: 24.0,
                   ),
-                  const SizedBox(width: 8),
-                  Column(
-                    mainAxisAlignment: MainAxisAlignment.start,
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Text(
-                        domain,
-                        style: Theme.of(context).textTheme.bodyLarge,
-                      ),
-                      Text('initializing.domain_critical_error'.tr()),
-                    ],
+                  const SizedBox(width: 12.0),
+                  Flexible(
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.start,
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          domain,
+                          overflow: TextOverflow.ellipsis,
+                          style: Theme.of(context).textTheme.bodyLarge,
+                        ),
+                        Text('initializing.domain_critical_error'.tr()),
+                      ],
+                    ),
                   ),
                 ],
               ),