Introducing InfoBox widget, small UI fixes

lib/ui/components/info_box/info_box.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+class InfoBox extends StatelessWidget {
+  const InfoBox({
+    required this.text,
+    this.isWarning = false,
+    final super.key,
+  });
+
+  final String text;
+  final bool isWarning;
+
+  @override
+  Widget build(final BuildContext context) => Column(
+    crossAxisAlignment: CrossAxisAlignment.start,
+    children: [
+      Icon(
+        isWarning ? Icons.warning_amber_outlined : Icons.info_outline,
+        size: 24,
+        color: Theme.of(context).colorScheme.onBackground,
+      ),
+      const SizedBox(height: 16),
+      Text(
+        text,
+        style: Theme.of(context).textTheme.bodyMedium!.copyWith(
+          color: Theme.of(context).colorScheme.onBackground,
+        ),
+      ),
+    ],
+  );
+}

lib/ui/components/switch_block/switch_bloc.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:selfprivacy/config/brand_colors.dart';
 
+// TODO: Delete this file.
+
 class SwitcherBlock extends StatelessWidget {
   const SwitcherBlock({
     required this.child,
@@ -15,12 +17,7 @@ class SwitcherBlock extends StatelessWidget {
 
   @override
   Widget build(final BuildContext context) => Container(
-        padding: const EdgeInsets.only(top: 20, bottom: 5),
+        padding: const EdgeInsets.symmetric(vertical: 16),
-        decoration: const BoxDecoration(
-          border: Border(
-            bottom: BorderSide(width: 1, color: BrandColors.dividerColor),
-          ),
-        ),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisAlignment: MainAxisAlignment.spaceBetween,

lib/ui/pages/devices/devices.dart

@@ -6,6 +6,7 @@ import 'package:selfprivacy/logic/cubit/devices/devices_cubit.dart';
 import 'package:selfprivacy/logic/cubit/server_installation/server_installation_cubit.dart';
 import 'package:selfprivacy/logic/models/json/api_token.dart';
 import 'package:selfprivacy/ui/components/brand_hero_screen/brand_hero_screen.dart';
+import 'package:selfprivacy/ui/components/info_box/info_box.dart';
 import 'package:selfprivacy/ui/pages/devices/new_device.dart';
 import 'package:selfprivacy/utils/route_transitions/basic.dart';
 
@@ -51,20 +52,7 @@ class _DevicesScreenState extends State<DevicesScreen> {
             const SizedBox(height: 16),
             const Divider(height: 1),
             const SizedBox(height: 16),
-            Column(
+            InfoBox(text: 'devices.main_screen.tip'.tr(),),
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Icon(
-                  Icons.info_outline,
-                  color: Theme.of(context).colorScheme.onBackground,
-                ),
-                const SizedBox(height: 16),
-                Text(
-                  'devices.main_screen.tip'.tr(),
-                  style: Theme.of(context).textTheme.bodyMedium,
-                ),
-              ],
-            ),
           ],
           const SizedBox(height: 24),
         ],

lib/ui/pages/recovery_key/recovery_key_receiving.dart

@@ -2,6 +2,7 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:selfprivacy/ui/components/brand_button/filled_button.dart';
 import 'package:selfprivacy/ui/components/brand_hero_screen/brand_hero_screen.dart';
+import 'package:selfprivacy/ui/components/info_box/info_box.dart';
 
 class RecoveryKeyReceiving extends StatelessWidget {
   const RecoveryKeyReceiving({required this.recoveryKey, final super.key});
@@ -28,14 +29,7 @@ class RecoveryKeyReceiving extends StatelessWidget {
           const SizedBox(height: 16),
           const Divider(),
           const SizedBox(height: 16),
-          Column(
+          InfoBox(text: 'recovery_key.key_receiving_info'.tr(),),
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              const Icon(Icons.info_outlined, size: 24),
-              const SizedBox(height: 16),
-              Text('recovery_key.key_receiving_info'.tr()),
-            ],
-          ),
           const SizedBox(height: 16),
           FilledButton(
             title: 'recovery_key.key_receiving_done'.tr(),

lib/ui/pages/services/service_page.dart

@@ -48,6 +48,7 @@ class _ServicePageState extends State<ServicePage> {
             service.svgIcon,
             width: 48.0,
             height: 48.0,
+            color: Theme.of(context).colorScheme.onBackground,
           ),
         ),
         const SizedBox(height: 16),

lib/ui/pages/users/user_details.dart

@@ -53,15 +53,9 @@ class UserDetails extends StatelessWidget {
         const Divider(height: 8),
         Padding(
           padding: const EdgeInsets.all(16.0),
-          child: Column(
+          child: InfoBox(
-            crossAxisAlignment: CrossAxisAlignment.start,
+            text: 'users.no_sso_notice'.tr(),
-            children: [
+            isWarning: true,
-              const Icon(Icons.warning_amber_outlined, size: 24),
-              const SizedBox(height: 16),
-              Text(
-                'users.no_sso_notice'.tr(),
-              ),
-            ],
           ),
         ),
       ],

lib/ui/pages/users/users.dart

@@ -19,6 +19,7 @@ import 'package:selfprivacy/ui/components/brand_header/brand_header.dart';
 import 'package:selfprivacy/ui/components/brand_hero_screen/brand_hero_screen.dart';
 import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart';
 import 'package:selfprivacy/ui/components/brand_text/brand_text.dart';
+import 'package:selfprivacy/ui/components/info_box/info_box.dart';
 import 'package:selfprivacy/ui/components/not_ready_card/not_ready_card.dart';
 import 'package:selfprivacy/utils/ui_helpers.dart';