UI enhancements 3

lib/src/screens/backup/backup_page.dart

@@ -26,12 +26,6 @@ class BackupPage extends BasePage {
   @override
   String get title => S.current.backup;
 
-  @override
-  Widget trailing(BuildContext context) => TrailButton(
-      caption: S.of(context).change_password,
-      onPressed: () => Navigator.of(context).pushNamed(Routes.editBackupPassword),
-      textColor: Palette.blueCraiola);
-
   @override
   Widget body(BuildContext context) {
     return Stack(
@@ -53,7 +47,9 @@ class BackupPage extends BasePage {
                           builder: (_) => GestureDetector(
                                 onTap: () {
                                   ClipboardUtil.setSensitiveDataToClipboard(
-                                      ClipboardData(text: backupViewModelBase.backupPassword));
+                                      ClipboardData(
+                                          text: backupViewModelBase
+                                              .backupPassword));
                                   showBar<void>(
                                       context,
                                       S.of(context).transaction_details_copied(
@@ -74,15 +70,25 @@ class BackupPage extends BasePage {
                       ))
                 ]))),
         Positioned(
-          child: Observer(
-            builder: (_) => LoadingPrimaryButton(
-              isLoading: backupViewModelBase.state is IsExecutingState,
-              onPressed: () => onExportBackup(context),
-              text: S.of(context).export_backup,
-              color: Theme.of(context).primaryColor,
+          child: Column(children: [
+            PrimaryButton(
+              onPressed: () =>
+                  Navigator.of(context).pushNamed(Routes.editBackupPassword),
+              text: S.of(context).change_password,
+              color: Theme.of(context).cardColor,
               textColor: Colors.white,
             ),
-          ),
+            SizedBox(height: 10),
+            Observer(
+              builder: (_) => LoadingPrimaryButton(
+                isLoading: backupViewModelBase.state is IsExecutingState,
+                onPressed: () => onExportBackup(context),
+                text: S.of(context).export_backup,
+                color: Theme.of(context).primaryColor,
+                textColor: Colors.white,
+              ),
+            ),
+          ]),
           bottom: 24,
           left: 24,
           right: 24,
@@ -130,7 +136,8 @@ class BackupPage extends BasePage {
               rightButtonText: S.of(context).save_to_downloads,
               leftButtonText: S.of(context).share,
               actionRightButton: () async {
-                await backupViewModelBase.saveToDownload(backup.name, backup.content);
+                await backupViewModelBase.saveToDownload(
+                    backup.name, backup.content);
                 Navigator.of(dialogContext).pop();
               },
               actionLeftButton: () async {
@@ -142,13 +149,15 @@ class BackupPage extends BasePage {
 
   Future<void> share(BackupExportFile backup, BuildContext context) async {
     final path = await backupViewModelBase.saveBackupFileLocally(backup);
-    await ShareUtil.shareFile(filePath: path, fileName: backup.name, context: context);
+    await ShareUtil.shareFile(
+        filePath: path, fileName: backup.name, context: context);
     await backupViewModelBase.removeBackupFileLocally(backup);
   }
 
   Future<void> _saveFile(BackupExportFile backup) async {
-    String? outputFile = await FilePicker.platform
-        .saveFile(dialogTitle: 'Save Your File to desired location', fileName: backup.name);
+    String? outputFile = await FilePicker.platform.saveFile(
+        dialogTitle: 'Save Your File to desired location',
+        fileName: backup.name);
 
     try {
       File returnedFile = File(outputFile!);

lib/src/screens/contact/contact_list_page.dart

@@ -110,10 +110,12 @@ class _ContactPageBodyState extends State<ContactPageBody> with SingleTickerProv
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.only(left: 24),
+      padding: const EdgeInsets.only(),
       child: Column(
         children: [
-          Align(
+          Padding(
+            padding: const EdgeInsets.only(left: 24, right: 24, bottom: 8),
+          child: Align(
             alignment: Alignment.centerLeft,
             child: TabBar(
               controller: _tabController,
@@ -135,7 +137,7 @@ class _ContactPageBodyState extends State<ContactPageBody> with SingleTickerProv
               indicatorColor: Theme.of(context).appBarTheme.titleTextStyle!.color,
               indicatorPadding: EdgeInsets.zero,
               labelPadding: EdgeInsets.only(right: 24),
-              tabAlignment: TabAlignment.center,
+              tabAlignment: TabAlignment.start,
               dividerColor: Colors.transparent,
               padding: EdgeInsets.zero,
               tabs: [
@@ -144,6 +146,7 @@ class _ContactPageBodyState extends State<ContactPageBody> with SingleTickerProv
               ],
             ),
           ),
+          ),
           Expanded(
             child: TabBarView(
               controller: _tabController,
@@ -173,7 +176,7 @@ class _ContactPageBodyState extends State<ContactPageBody> with SingleTickerProv
       itemCount: groupedContacts.length * 2,
       itemBuilder: (context, index) {
         if (index.isOdd) {
-          return StandardListSeparator();
+          return StandardListSeparator(height: 0);
         } else {
           final groupIndex = index ~/ 2;
           final groupName = groupedContacts.keys.elementAt(groupIndex);
@@ -188,7 +191,9 @@ class _ContactPageBodyState extends State<ContactPageBody> with SingleTickerProv
               orElse: () => groupContacts[0],
             );
 
-            return ExpansionTile(
+            return Padding(
+              padding: const EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 4),
+                child: ExpansionTile(
               title: Text(
                 groupName,
                 style: TextStyle(
@@ -198,11 +203,16 @@ class _ContactPageBodyState extends State<ContactPageBody> with SingleTickerProv
                 ),
               ),
               leading: _buildCurrencyIcon(activeContact),
-              tilePadding: EdgeInsets.zero,
+              tilePadding: const EdgeInsets.only(left: 16, right: 16),
               childrenPadding: const EdgeInsets.only(left: 16),
               expandedCrossAxisAlignment: CrossAxisAlignment.start,
               expandedAlignment: Alignment.topLeft,
+              backgroundColor: Theme.of(context).cardColor,
+              collapsedBackgroundColor: Theme.of(context).cardColor,
+              collapsedShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
               children: groupContacts.map((contact) => generateRaw(context, contact)).toList(),
+            ),
             );
           }
         }
@@ -234,7 +244,12 @@ class _ContactPageBodyState extends State<ContactPageBody> with SingleTickerProv
       },
       behavior: HitTestBehavior.opaque,
       child: Container(
-        padding: const EdgeInsets.only(top: 16, bottom: 16, right: 24),
+    decoration: BoxDecoration(
+    borderRadius: BorderRadius.all(Radius.circular(10)),
+    color: Theme.of(context).cardColor,
+    ),
+        margin: const EdgeInsets.only(top: 4, bottom: 4, left: 16, right: 16),
+        padding: const EdgeInsets.only(top: 16, bottom: 16, right: 16, left: 16),
         child: Row(
           mainAxisSize: MainAxisSize.min,
           mainAxisAlignment: MainAxisAlignment.start,
@@ -375,7 +390,12 @@ class _ContactListBodyState extends State<ContactListBody> {
       children: [
         Container(
           key: Key('${contact.name}'),
-          padding: const EdgeInsets.only(top: 16, bottom: 16, right: 24),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.all(Radius.circular(8)),
+            color: Theme.of(context).cardColor,
+          ),
+          margin: const EdgeInsets.only(top: 4, bottom: 4, left: 16, right: 16),
+          padding: const EdgeInsets.only(top: 16, bottom: 16, right: 16, left: 16),
           child: Row(
             mainAxisSize: MainAxisSize.min,
             mainAxisAlignment: MainAxisAlignment.start,
@@ -396,7 +416,6 @@ class _ContactListBodyState extends State<ContactListBody> {
             ],
           ),
         ),
-        StandardListSeparator()
       ],
     );
   }