visually changed settings page

lib/pages/settings_page.dart

@@ -17,55 +17,89 @@ class SettingsPage extends StatefulWidget {
 }
 
 class _SettingsPageState extends State<SettingsPage> {
+  bool storagePermissionIsGranted = false;
+  final tileSpacing = 16.0;
+
+  @override
+  void initState() {
+    PermissionService.storagePermissionStatus.then((value) {
+      storagePermissionIsGranted = value.isGranted;
+      if (context.mounted) setState(() {});
+    });
+    super.initState();
+  }
+
   @override
   Widget build(BuildContext context) {
+    final titlePadding = Theme.of(context).listTileTheme.contentPadding!;
+    checkStoragePermission;
     return Scaffold(
       appBar: AppBar(title: Text(AppLocalizations.of(context)!.settings)),
-      body: SizedBox(
-        width: MediaQuery.of(context).size.width * 0.9,
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
-            Text(
-              AppLocalizations.of(context)!.appData,
-              style: Theme.of(context).textTheme.titleLarge,
-            ),
-            ElevatedButton(
-              onPressed: () => onActivateJsonImportPressed(),
-              child: Text(AppLocalizations.of(context)!.import),
-            ),
-            ElevatedButton(
-              onPressed: () => onActivateJsonExportPressed(),
-              child: Text(AppLocalizations.of(context)!.export),
-            ),
-          ],
+      body: Center(
+        child: SizedBox(
+          width: MediaQuery.of(context).size.width * 0.9,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Padding(
+                padding: titlePadding,
+                child: Text(
+                  AppLocalizations.of(context)!.appData,
+                  style: Theme.of(context).textTheme.titleLarge,
+                ),
+              ),
+              SizedBox(height: tileSpacing),
+              ListTile(
+                title: Text('Grant storage permisson'),
+                subtitle: Text(
+                  'For app-data settings to work, you need to grant the app permissions to manage internal storage.',
+                ),
+                onTap: () => PermissionService.requestStoragePermission,
+                trailing: Icon(Icons.arrow_forward_ios_rounded),
+                enabled: !storagePermissionIsGranted,
+              ),
+              SizedBox(height: tileSpacing),
+              ListTile(
+                title: Text(AppLocalizations.of(context)!.import),
+                subtitle: Text('Import app-data from a json file.'),
+                onTap: () => onActivateJsonImportPressed(),
+                trailing: Icon(Icons.arrow_forward_ios_rounded),
+                enabled: storagePermissionIsGranted,
+              ),
+              SizedBox(height: tileSpacing),
+              ListTile(
+                title: Text(AppLocalizations.of(context)!.export),
+                subtitle: Text(
+                  'Export app-data to a json file in the selected directory.',
+                ),
+                onTap: () => onActivateJsonExportPressed(),
+                trailing: Icon(Icons.arrow_forward_ios_rounded),
+                enabled: storagePermissionIsGranted,
+              ),
+            ],
+          ),
         ),
       ),
     );
   }
 
   void onActivateJsonExportPressed() async {
-    if (!await checkStoragePermission) return;
-
+    if (!await PermissionService.storagePermissionStatus.isGranted) return;
     Storage.exportToJsonFile().then(showExportInfo);
   }
 
   void onActivateJsonImportPressed() async {
-    if (!await checkStoragePermission) return;
+    if (!await PermissionService.storagePermissionStatus.isGranted) return;
     Storage.importFromJsonFile().then(showImportInfo);
   }
 
-  Future<bool> get checkStoragePermission async {
-    if (!(await PermissionService.requestStoragePermission).isGranted) {
-      if (mounted) {
-        Notifying.showErrorSnackbar(
-          context,
-          AppLocalizations.of(context)!.errorStoragePermisson,
-        );
-        return false;
+  Future<void> get checkStoragePermission async {
+    PermissionService.storagePermissionStatus.then((value) {
+      storagePermissionIsGranted = value.isGranted;
+      if (context.mounted && value.isGranted != storagePermissionIsGranted) {
+        setState(() {});
       }
-    }
-    return true;
+    });
   }
 
   void showExportInfo(bool success) => Notifying.showSnackbar(
@@ -73,7 +107,7 @@ class _SettingsPageState extends State<SettingsPage> {
     text: success
         ? AppLocalizations.of(context)!.exportSuccess
         : AppLocalizations.of(context)!.exportFailed,
-    isError: success,
+    isError: !success,
   );
 
   void showImportInfo(bool success) => Notifying.showSnackbar(
@@ -81,6 +115,6 @@ class _SettingsPageState extends State<SettingsPage> {
     text: success
         ? AppLocalizations.of(context)!.importSuccess
         : AppLocalizations.of(context)!.importFailed,
-    isError: success,
+    isError: !success,
   );
 }

lib/service/json_file_service.dart

@@ -32,7 +32,7 @@ class JsonFileService {
     } catch (e) {
       return false;
     }
-    return false;
+    return true;
   }
 
   static Future<({List<Collection> collections, List<Bookmark> bookmarks})>

lib/service/notifying.dart

@@ -12,7 +12,7 @@ class Notifying {
     ScaffoldMessenger.of(context).hideCurrentSnackBar();
     ScaffoldMessenger.of(context).showSnackBar(
       SnackBar(
-        backgroundColor: Theme.of(context).colorScheme.error,
+        backgroundColor: isError ? Theme.of(context).colorScheme.error : null,
         content: SizedBox(
           height: 30,
           child: Row(
@@ -29,7 +29,7 @@ class Notifying {
                     ScaffoldMessenger.of(context).hideCurrentSnackBar(),
                 icon: Icon(
                   Icons.close_rounded,
-                  color: Theme.of(context).colorScheme.onError,
+                  color: isError ? Theme.of(context).colorScheme.onError : null,
                 ),
               ),
             ],

lib/theme.dart

@@ -22,5 +22,6 @@ ThemeData _baseTheme(ColorScheme scheme) =>
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadiusGeometry.circular(12),
         ),
+        contentPadding: EdgeInsetsDirectional.only(start: 16.0, end: 24.0),
       ),
     );