chore: bottom menu UI fixes (#150)

chore: fixed bottom menu UI issues: [Task](https://www.notion.so/leftclick/Bottom-menu-fixes-3e2a783ccdfe4c88a29d38629422e8b0) <img width="741" alt="Screenshot 2024-08-19 at 16 05 16" src="https://github.com/user-attachments/assets/7a6bbfea-6628-4cd0-bc33-5f92e6ec9de6">
ice-blockchain · Aug 19, 2024 · 53b88ce · 53b88ce
1 parent a98347a
commit 53b88ce
Show file tree

Hide file tree

Showing 11 changed files with 110 additions and 79 deletions.
diff --git a/lib/app/features/feed/views/pages/feed_main_modal/components/feed_modal_item.dart b/lib/app/features/feed/views/pages/feed_main_modal/components/feed_modal_item.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:ice/app/components/list_item/list_item.dart';
+import 'package:ice/app/components/screen_offset/screen_side_offset.dart';
 import 'package:ice/app/extensions/extensions.dart';
 import 'package:ice/app/features/feed/views/pages/feed_main_modal/components/feed_modal_separator.dart';
 import 'package:ice/app/features/wallet/model/feed_type.dart';
@@ -18,22 +19,40 @@ class FeedModalItem extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        ListItem(
-          title: Text(feedType.getDisplayName(context)),
-          subtitle: Text(feedType.getDescription(context)),
-          leading: Container(
-            width: 42.0.s,
-            height: 42.0.s,
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(12),
-              color: feedType.getIconColor(context),
-            ),
-            child: Center(
-              child: feedType.iconAsset.icon(size: 24.0.s, color: Colors.white),
+        ScreenSideOffset.small(
+          child: Padding(
+            padding: EdgeInsets.only(top: 2.0.s, bottom: 1.0.s),
+            child: ListItem(
+              title: Text(
+                feedType.getDisplayName(context),
+                style: context.theme.appTextThemes.subtitle2.copyWith(
+                  color: context.theme.appColors.primaryText,
+                ),
+              ),
+              subtitle: Text(
+                feedType.getDescription(context),
+                style: context.theme.appTextThemes.caption.copyWith(
+                  color: context.theme.appColors.tertararyText,
+                ),
+              ),
+              leading: Padding(
+                padding: EdgeInsets.only(left: 12.0.s),
+                child: Container(
+                  width: 42.0.s,
+                  height: 42.0.s,
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(12),
+                    color: feedType.getIconColor(context),
+                  ),
+                  child: Center(
+                    child: feedType.iconAsset.icon(size: 24.0.s, color: Colors.white),
+                  ),
+                ),
+              ),
+              backgroundColor: Colors.transparent,
+              onTap: onTap,
             ),
           ),
-          backgroundColor: Colors.transparent,
-          onTap: onTap,
         ),
         const FeedModalSeparator(),
       ],

diff --git a/lib/app/features/feed/views/pages/feed_main_modal/components/feed_modal_separator.dart b/lib/app/features/feed/views/pages/feed_main_modal/components/feed_modal_separator.dart
@@ -13,10 +13,17 @@ class FeedModalSeparator extends StatelessWidget {
       width: separatorWidth,
       height: 0.5,
       decoration: const BoxDecoration(
-        gradient: RadialGradient(
-          center: Alignment.bottomCenter,
-          radius: 0,
-          colors: <Color>[Color(0xFFC2C2C2), Color(0x47D9D9D9)],
+        gradient: LinearGradient(
+          colors: [
+            Color(0xFFF4F4F4),
+            Color(0xFFC2C2C2),
+            Color(0xFFF4F4F4),
+          ],
+          stops: [
+            0.0,
+            0.5,
+            1.0,
+          ],
         ),
       ),
     );

diff --git a/lib/app/features/feed/views/pages/feed_main_modal/feed_main_modal_page.dart b/lib/app/features/feed/views/pages/feed_main_modal/feed_main_modal_page.dart
@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:ice/app/components/screen_offset/screen_side_offset.dart';
 import 'package:ice/app/extensions/extensions.dart';
 import 'package:ice/app/features/feed/views/pages/feed_main_modal/components/feed_modal_item.dart';
 import 'package:ice/app/features/feed/views/pages/feed_main_modal/components/feed_modal_separator.dart';
@@ -16,37 +15,26 @@ class FeedMainModalPage extends StatelessWidget {
   Widget build(BuildContext context) {
     return SheetContent(
       backgroundColor: context.theme.appColors.secondaryBackground,
-      body: ScreenSideOffset.small(
-        child: SingleChildScrollView(
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              NavigationAppBar.screen(
-                title: Text(context.i18n.feed_modal_title),
-                showBackButton: false,
-              ),
-              const FeedModalSeparator(),
-              ListView.separated(
-                shrinkWrap: true,
-                padding: EdgeInsets.only(bottom: 10.0.s),
-                itemCount: feedTypeValues.length,
-                separatorBuilder: (BuildContext context, int index) {
-                  return SizedBox(
-                    height: 12.0.s,
-                  );
-                },
-                itemBuilder: (BuildContext context, int index) {
-                  return ScreenSideOffset.small(
-                    child: FeedModalItem(
-                      feedType: feedTypeValues[index],
-                      onTap: () {},
-                    ),
-                  );
-                },
-              ),
-            ],
+      body: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          NavigationAppBar.screen(
+            title: Text(context.i18n.feed_modal_title),
+            showBackButton: false,
           ),
-        ),
+          const FeedModalSeparator(),
+          ListView.builder(
+            shrinkWrap: true,
+            itemCount: feedTypeValues.length,
+            itemBuilder: (BuildContext context, int index) {
+              return FeedModalItem(
+                feedType: feedTypeValues[index],
+                onTap: () {},
+              );
+            },
+          ),
+          SizedBox(height: 2.0.s),
+        ],
       ),
     );
   }

diff --git a/lib/app/router/app_routes.dart b/lib/app/router/app_routes.dart
@@ -70,6 +70,8 @@ import 'package:ice/app/router/base_route_data.dart';
 import 'package:ice/app/router/components/modal_wrapper/modal_wrapper.dart';
 import 'package:ice/app/router/main_tabs/main_tab_navigation.dart';
 import 'package:smooth_sheets/smooth_sheets.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/app/extensions/theme_data.dart';
 
 part 'app_routes.g.dart';
 part 'auth_routes.dart';
@@ -166,6 +168,7 @@ class ModalShellRouteData extends ShellRouteData {
   ) {
     return ModalSheetPage(
       key: state.pageKey,
+      barrierColor: context.theme.appColors.backgroundSheet,
       swipeDismissible: true,
       child: ModalWrapper(child: navigator),
     );

diff --git a/lib/app/router/base_route_data.dart b/lib/app/router/base_route_data.dart
@@ -2,6 +2,8 @@ import 'package:flutter/cupertino.dart';
 import 'package:go_router/go_router.dart';
 import 'package:ice/app/router/components/sheet_content/main_modal_content.dart';
 import 'package:smooth_sheets/smooth_sheets.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/app/extensions/theme_data.dart';
 
 enum IceRouteType {
   single,
@@ -27,6 +29,7 @@ abstract class BaseRouteData extends GoRouteData {
       IceRouteType.slideFromLeft => SlideFromLeftTransitionPage(child: child, state: state),
       IceRouteType.mainModalSheet => ModalSheetPage<void>(
           swipeDismissible: true,
+          barrierColor: context.theme.appColors.backgroundSheet,
           key: state.pageKey,
           // DraggableSheet does not work with scrollable widgets.
           // If you want to use a scrollable widget as its content,

diff --git a/lib/app/router/components/sheet_content/sheet_content.dart b/lib/app/router/components/sheet_content/sheet_content.dart
@@ -30,7 +30,6 @@ class SheetContent extends StatelessWidget {
       appBar: SheetDragHandle(topPadding: topPadding),
       body: SheetShape(
         backgroundColor: backgroundColor,
-        bottomPadding: bottomPadding,
         child: body,
       ),
     );

diff --git a/lib/app/router/components/sheet_content/sheet_shape.dart b/lib/app/router/components/sheet_content/sheet_shape.dart
@@ -1,19 +1,15 @@
 import 'package:flutter/material.dart';
-import 'package:ice/app/components/screen_offset/screen_bottom_offset.dart';
 import 'package:ice/app/extensions/extensions.dart';
 
 class SheetShape extends StatelessWidget {
   SheetShape({
     required this.child,
     super.key,
     this.backgroundColor,
-    double? bottomPadding,
-  }) : bottomPadding = bottomPadding ?? ScreenBottomOffset.defaultMargin;
+  });
 
   final Widget child;
 
-  final double bottomPadding;
-
   final Color? backgroundColor;
 
   @override
@@ -27,10 +23,7 @@ class SheetShape extends StatelessWidget {
           topRight: Radius.circular(30.0.s),
         ),
       ),
-      child: Padding(
-        padding: EdgeInsets.only(bottom: bottomPadding),
-        child: child,
-      ),
+      child: child,
     );
   }
 }
diff --git a/lib/app/router/main_tabs/main_tab_navigation.dart b/lib/app/router/main_tabs/main_tab_navigation.dart
@@ -19,26 +19,35 @@ class MainTabNavigation extends StatelessWidget {
 
     return Scaffold(
       body: shell,
-      bottomNavigationBar: BottomNavigationBar(
-        type: BottomNavigationBarType.fixed,
-        backgroundColor: context.theme.appColors.secondaryBackground,
-        selectedItemColor: context.theme.appColors.primaryAccent,
-        unselectedItemColor: context.theme.appColors.tertararyText,
-        showSelectedLabels: false,
-        showUnselectedLabels: false,
-        currentIndex: shell.currentIndex,
-        onTap: (index) => _onTabSelected(context, index, currentTab),
-        items: TabItem.values.map((tabItem) {
-          return BottomNavigationBarItem(
-            icon: tabItem == TabItem.main
-                ? const MainTabButton()
-                : TabIcon(
-                    icon: tabItem.icon,
-                    isSelected: currentTab == tabItem,
-                  ),
-            label: '',
-          );
-        }).toList(),
+      bottomNavigationBar: Container(
+        decoration: state.isMainModalOpen
+            ? null
+            : BoxDecoration(
+                boxShadow: [
+                  BoxShadow(color: context.theme.appColors.darkBlue.withAlpha(14), blurRadius: 10),
+                ],
+              ),
+        child: BottomNavigationBar(
+          type: BottomNavigationBarType.fixed,
+          backgroundColor: context.theme.appColors.secondaryBackground,
+          selectedItemColor: context.theme.appColors.primaryAccent,
+          unselectedItemColor: context.theme.appColors.tertararyText,
+          showSelectedLabels: false,
+          showUnselectedLabels: false,
+          currentIndex: shell.currentIndex,
+          onTap: (index) => _onTabSelected(context, index, currentTab),
+          items: TabItem.values.map((tabItem) {
+            return BottomNavigationBarItem(
+              icon: tabItem == TabItem.main
+                  ? const MainTabButton()
+                  : TabIcon(
+                      icon: tabItem.icon,
+                      isSelected: currentTab == tabItem,
+                    ),
+              label: '',
+            );
+          }).toList(),
+        ),
       ),
     );
   }

diff --git a/linux/flutter/generated_plugin_registrant.cc b/linux/flutter/generated_plugin_registrant.cc
@@ -7,12 +7,16 @@
 #include "generated_plugin_registrant.h"
 
 #include <file_selector_linux/file_selector_plugin.h>
+#include <flutter_secure_storage_linux/flutter_secure_storage_linux_plugin.h>
 #include <url_launcher_linux/url_launcher_plugin.h>
 
 void fl_register_plugins(FlPluginRegistry* registry) {
   g_autoptr(FlPluginRegistrar) file_selector_linux_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "FileSelectorPlugin");
   file_selector_plugin_register_with_registrar(file_selector_linux_registrar);
+  g_autoptr(FlPluginRegistrar) flutter_secure_storage_linux_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "FlutterSecureStorageLinuxPlugin");
+  flutter_secure_storage_linux_plugin_register_with_registrar(flutter_secure_storage_linux_registrar);
   g_autoptr(FlPluginRegistrar) url_launcher_linux_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "UrlLauncherPlugin");
   url_launcher_plugin_register_with_registrar(url_launcher_linux_registrar);

diff --git a/linux/flutter/generated_plugins.cmake b/linux/flutter/generated_plugins.cmake
@@ -4,6 +4,7 @@
 
 list(APPEND FLUTTER_PLUGIN_LIST
   file_selector_linux
+  flutter_secure_storage_linux
   url_launcher_linux
 )
 

diff --git a/pubspec_overrides.yaml b/pubspec_overrides.yaml
@@ -0,0 +1,5 @@
+# melos_managed_dependency_overrides: ion_identity_client,js
+dependency_overrides:
+  ion_identity_client:
+    path: packages/ion_identity_client
+  js: ^0.7.1