Replace brand_radio_tile.dart with segmented_buttons.dart

lib/ui/components/brand_button/segmented_buttons.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+class SegmentedButtons extends StatelessWidget {
+  const SegmentedButtons({
+    required this.isSelected,
+    required this.onPressed,
+    required this.titles,
+    final super.key,
+  });
+
+  final List<bool> isSelected;
+  final Function(int)? onPressed;
+  final List<String> titles;
+
+  @override
+  Widget build(final BuildContext context) => LayoutBuilder(
+        builder: (final context, final constraints) => ToggleButtons(
+          constraints: BoxConstraints(
+            minWidth: (constraints.maxWidth - 8) / 3,
+            minHeight: 40,
+          ),
+          borderRadius: BorderRadius.circular(48),
+          borderColor: Theme.of(context).colorScheme.outline,
+          selectedBorderColor: Theme.of(context).colorScheme.outline,
+          fillColor: Theme.of(context).colorScheme.secondaryContainer,
+          selectedColor: Theme.of(context).colorScheme.onSecondaryContainer,
+          color: Theme.of(context).colorScheme.onSurface,
+          isSelected: isSelected,
+          onPressed: onPressed,
+          children: titles.asMap().entries.map((final entry) {
+            final index = entry.key;
+            final title = entry.value;
+            return Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                if (isSelected[index])
+                  Icon(
+                    Icons.check,
+                    size: 18,
+                    color: Theme.of(context).colorScheme.onSecondaryContainer,
+                  ),
+                if (isSelected[index]) const SizedBox(width: 8),
+                Text(
+                  title,
+                  style: Theme.of(context).textTheme.labelLarge,
+                ),
+              ],
+            );
+          }).toList(),
+        ),
+      );
+}

lib/ui/components/brand_radio_tile/brand_radio_tile.dart

@@ -1,37 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:selfprivacy/ui/components/brand_radio/brand_radio.dart';
-import 'package:selfprivacy/ui/components/brand_text/brand_text.dart';
-
-// TODO: Delete this file
-
-class BrandRadioTile extends StatelessWidget {
-  const BrandRadioTile({
-    required this.isChecked,
-    required this.text,
-    required this.onPress,
-    final super.key,
-  });
-
-  final bool isChecked;
-
-  final String text;
-  final VoidCallback onPress;
-
-  @override
-  Widget build(final BuildContext context) => GestureDetector(
-        onTap: onPress,
-        behavior: HitTestBehavior.translucent,
-        child: Padding(
-          padding: const EdgeInsets.all(2),
-          child: Row(
-            children: [
-              BrandRadio(
-                isChecked: isChecked,
-              ),
-              const SizedBox(width: 9),
-              BrandText.h5(text)
-            ],
-          ),
-        ),
-      );
-}

lib/ui/pages/server_details/charts/chart.dart

@@ -56,28 +56,30 @@ class _Chart extends StatelessWidget {
 
     return Column(
       children: [
-        Padding(
+        SegmentedButtons(
-          padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
+          isSelected: [
-          child: Row(
+            period == Period.month,
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            period == Period.day,
-            children: [
+            period == Period.hour,
-              BrandRadioTile(
+          ],
-                isChecked: period == Period.month,
+          onPressed: (final index) {
-                text: 'providers.server.chart.month'.tr(),
+            switch (index) {
-                onPress: () => cubit.changePeriod(Period.month),
+              case 0:
-              ),
+                cubit.changePeriod(Period.month);
-              BrandRadioTile(
+                break;
-                isChecked: period == Period.day,
+              case 1:
-                text: 'providers.server.chart.day'.tr(),
+                cubit.changePeriod(Period.day);
-                onPress: () => cubit.changePeriod(Period.day),
+                break;
-              ),
+              case 2:
-              BrandRadioTile(
+                cubit.changePeriod(Period.hour);
-                isChecked: period == Period.hour,
+                break;
-                text: 'providers.server.chart.hour'.tr(),
+            }
-                onPress: () => cubit.changePeriod(Period.hour),
+          },
-              ),
+          titles: [
-            ],
+            'providers.server.chart.month'.tr(),
-          ),
+            'providers.server.chart.day'.tr(),
+            'providers.server.chart.hour'.tr()
+          ],
         ),
         ...charts,
       ],

lib/ui/pages/server_details/server_details_screen.dart

@@ -9,12 +9,12 @@ import 'package:selfprivacy/logic/cubit/server_detailed_info/server_detailed_inf
 import 'package:selfprivacy/logic/cubit/server_installation/server_installation_cubit.dart';
 import 'package:selfprivacy/logic/cubit/server_volumes/server_volume_cubit.dart';
 import 'package:selfprivacy/logic/models/auto_upgrade_settings.dart';
+import 'package:selfprivacy/ui/components/brand_button/segmented_buttons.dart';
 import 'package:selfprivacy/ui/components/brand_cards/filled_card.dart';
 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_loader/brand_loader.dart';
-import 'package:selfprivacy/ui/components/brand_radio_tile/brand_radio_tile.dart';
 import 'package:selfprivacy/ui/components/brand_text/brand_text.dart';
 import 'package:selfprivacy/ui/components/switch_block/switch_bloc.dart';
 import 'package:selfprivacy/ui/pages/server_storage/storage_card.dart';

lib/ui/pages/server_storage/data_migration.dart

@@ -52,7 +52,9 @@ class _DataMigrationPageState extends State<DataMigrationPage> {
   /// subtract the used storage from the old volume and add it to the new volume.
   /// The old volume is the volume the service is currently on, shown in services list.
   DiskVolume recalculatedDiskUsages(
-      final DiskVolume volume, final List<Service> services) {
+    final DiskVolume volume,
+    final List<Service> services,
+  ) {
     DiskSize used = volume.sizeUsed;
 
     for (final Service service in services) {
@@ -105,7 +107,9 @@ class _DataMigrationPageState extends State<DataMigrationPage> {
                             children: [
                               ServerStorageListItem(
                                 volume: recalculatedDiskUsages(
-                                    volume, widget.services),
+                                  volume,
+                                  widget.services,
+                                ),
                                 dense: true,
                               ),
                               const SizedBox(height: headerVerticalPadding),