some ui fixes

lib/logic/common_enum/common_enum.dart

@@ -1,6 +1,5 @@
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
-import 'package:ionicons/ionicons.dart';
 import 'package:selfprivacy/ui/components/brand_icons/brand_icons.dart';
 
 enum LoadingStatus {
@@ -134,7 +133,7 @@ extension ServiceTypesExt on ServiceTypes {
       case ServiceTypes.git:
         return BrandIcons.git;
       case ServiceTypes.vpn:
-        return Ionicons.shield_checkmark_outline;
+        return Icons.vpn_lock_outlined;
     }
   }
 

lib/ui/components/brand_header/brand_header.dart

@@ -1,20 +1,17 @@
 import 'package:flutter/material.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/pre_styled_buttons/pre_styled_buttons.dart';
 
 class BrandHeader extends StatelessWidget {
   const BrandHeader({
     Key? key,
     this.title = '',
     this.hasBackButton = false,
-    this.hasFlashButton = false,
     this.onBackButtonPressed,
   }) : super(key: key);
 
   final String title;
   final bool hasBackButton;
-  final bool hasFlashButton;
   final VoidCallback? onBackButtonPressed;
 
   @override
@@ -37,7 +34,6 @@ class BrandHeader extends StatelessWidget {
           ],
           BrandText.h4(title),
           const Spacer(),
-          if (hasFlashButton) PreStyledButtons.flash(),
         ],
       ),
     );

lib/ui/components/brand_hero_screen/brand_hero_screen.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:selfprivacy/ui/components/brand_header/brand_header.dart';
+import 'package:selfprivacy/ui/components/pre_styled_buttons/flash_fab.dart';
 
 class BrandHeroScreen extends StatelessWidget {
   const BrandHeroScreen({
@@ -32,10 +33,10 @@ class BrandHeroScreen extends StatelessWidget {
           child: BrandHeader(
             title: headerTitle,
             hasBackButton: hasBackButton,
-            hasFlashButton: hasFlashButton,
             onBackButtonPressed: onBackButtonPressed,
           ),
         ),
+        floatingActionButton: hasFlashButton ? const BrandFab() : null,
         body: ListView(
           padding: const EdgeInsets.all(16.0),
           children: <Widget>[

lib/ui/pages/more/more.dart

@@ -30,7 +30,6 @@ class MorePage extends StatelessWidget {
         preferredSize: const Size.fromHeight(52),
         child: BrandHeader(
           title: 'basis.more'.tr(),
-          hasFlashButton: true,
         ),
       ),
       body: ListView(

lib/ui/pages/providers/providers.dart

@@ -70,7 +70,6 @@ class _ProvidersPageState extends State<ProvidersPage> {
         preferredSize: const Size.fromHeight(52),
         child: BrandHeader(
           title: 'providers.page_title'.tr(),
-          hasFlashButton: true,
         ),
       ),
       body: ListView(

lib/ui/pages/root_route.dart

@@ -16,20 +16,36 @@ class RootPage extends StatefulWidget {
   State<RootPage> createState() => _RootPageState();
 }
 
-class _RootPageState extends State<RootPage>
+class _RootPageState extends State<RootPage> with TickerProviderStateMixin {
-    with SingleTickerProviderStateMixin {
   late TabController tabController;
 
+  late final AnimationController _controller = AnimationController(
+    duration: const Duration(milliseconds: 400),
+    vsync: this,
+  );
+  late final Animation<double> _animation = CurvedAnimation(
+    parent: _controller,
+    curve: Curves.fastOutSlowIn,
+  );
+
   @override
   void initState() {
     tabController = TabController(length: 4, vsync: this);
+    tabController.addListener(() {
+      setState(() {
+        tabController.index == 2
+            ? _controller.forward()
+            : _controller.reverse();
+      });
+    });
     super.initState();
   }
 
   @override
   void dispose() {
-    super.dispose();
     tabController.dispose();
+    _controller.dispose();
+    super.dispose();
   }
 
   var selfprivacyServer = ServerApi();
@@ -37,10 +53,10 @@ class _RootPageState extends State<RootPage>
   @override
   Widget build(BuildContext context) {
     return SafeArea(
-      child: Scaffold(
+      child: Provider<ChangeTab>(
-        body: Provider<ChangeTab>(
+        create: (_) => ChangeTab(tabController.animateTo),
-          create: (_) => ChangeTab(tabController.animateTo),
+        child: Scaffold(
-          child: TabBarView(
+          body: TabBarView(
             controller: tabController,
             children: const [
               ProvidersPage(),
@@ -49,11 +65,40 @@ class _RootPageState extends State<RootPage>
               MorePage(),
             ],
           ),
+          bottomNavigationBar: BrandTabBar(
+            controller: tabController,
+          ),
+          floatingActionButton: SizedBox(
+            height: 104 + 16,
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.end,
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: [
+                ScaleTransition(
+                  scale: _animation,
+                  child: FloatingActionButton.small(
+                    heroTag: 'new_user_fab',
+                    onPressed: () {
+                      showModalBottomSheet<void>(
+                        context: context,
+                        isScrollControlled: true,
+                        backgroundColor: Colors.transparent,
+                        builder: (BuildContext context) {
+                          return Padding(
+                              padding: MediaQuery.of(context).viewInsets,
+                              child: NewUser());
+                        },
+                      );
+                    },
+                    child: const Icon(Icons.person_add_outlined),
+                  ),
+                ),
+                const SizedBox(height: 16),
+                const BrandFab(),
+              ],
+            ),
+          ),
         ),
-        bottomNavigationBar: BrandTabBar(
-          controller: tabController,
-        ),
-        floatingActionButton: const BrandFab(),
       ),
     );
   }

lib/ui/pages/services/services.dart

@@ -65,7 +65,6 @@ class _ServicesPageState extends State<ServicesPage> {
         preferredSize: const Size.fromHeight(52),
         child: BrandHeader(
           title: 'basis.services'.tr(),
-          hasFlashButton: true,
         ),
       ),
       body: ListView(

lib/ui/pages/users/fab.dart

@@ -1,36 +0,0 @@
-part of 'users.dart';
-
-class _Fab extends StatelessWidget {
-  const _Fab({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return SizedBox(
-      width: 48.0,
-      height: 48.0,
-      child: RawMaterialButton(
-        fillColor: BrandColors.blue,
-        shape: const CircleBorder(),
-        elevation: 0.0,
-        highlightElevation: 2,
-        child: const Icon(
-          Icons.add,
-          color: Colors.white,
-          size: 34,
-        ),
-        onPressed: () {
-          showModalBottomSheet<void>(
-            context: context,
-            isScrollControlled: true,
-            backgroundColor: Colors.transparent,
-            builder: (BuildContext context) {
-              return Padding(
-                  padding: MediaQuery.of(context).viewInsets,
-                  child: _NewUser());
-            },
-          );
-        },
-      ),
-    );
-  }
-}

lib/ui/pages/users/new_user.dart

@@ -1,6 +1,6 @@
 part of 'users.dart';
 
-class _NewUser extends StatelessWidget {
+class NewUser extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     var config = context.watch<ServerInstallationCubit>().state;

lib/ui/pages/users/users.dart

@@ -27,7 +27,6 @@ import 'package:share_plus/share_plus.dart';
 import '../../../utils/route_transitions/basic.dart';
 
 part 'empty.dart';
-part 'fab.dart';
 part 'new_user.dart';
 part 'user.dart';
 part 'user_details.dart';
@@ -77,10 +76,8 @@ class UsersPage extends StatelessWidget {
         preferredSize: const Size.fromHeight(52),
         child: BrandHeader(
           title: 'basis.users'.tr(),
-          hasFlashButton: true,
         ),
       ),
-      floatingActionButton: isReady ? const _Fab() : null,
       body: child,
     );
   }