refactor ui

web/repertory/lib/constants.dart

@@ -15,6 +15,7 @@ const boxShadowAlpha = 0.20;
 const databaseTypeList = ['rocksdb', 'sqlite'];
 const dialogAlpha = 0.95;
 const downloadTypeList = ['default', 'direct', 'ring_buffer'];
+const dropDownAlpha = 99.0;
 const eventLevelList = ['critical', 'error', 'warn', 'info', 'debug', 'trace'];
 const gradientColors = [Color(0xFF0A0F1F), Color(0xFF1B1C1F)];
 const gradientColors2 = [Color(0x07FFFFFF), Color(0x00000000)];
@@ -24,13 +25,15 @@ const logonWidth = 300.0;
 const outlineAlpha = 0.15;
 const padding = 16.0;
 const paddingSmall = padding / 2.0;
-const primaryAlpha = 0.20;
+const paddingLarge = padding * 2.0;
+const primaryAlpha = 0.12;
 const primarySurfaceAlpha = 92.0;
 const protocolTypeList = ['http', 'https'];
 const providerTypeList = ['Encrypt', 'Remote', 'S3', 'Sia'];
 const ringBufferSizeList = ['128', '256', '512', '1024', '2048'];
 const secondaryAlpha = 0.45;
 const secondarySurfaceAlpha = 70.0;
+const smallIconSize = 18.0;
 const surfaceContainerLowDark = Color(0xFF292A2D);
 const surfaceDark = Color(0xFF202124);
 

web/repertory/lib/helpers.dart

@@ -18,9 +18,10 @@ Future doShowDialog(BuildContext context, Widget child) => showDialog(
     return Theme(
       data: theme.copyWith(
         dialogTheme: DialogThemeData(
-          backgroundColor: scheme.surfaceDim.withValues(
-            alpha: constants.dialogAlpha,
-          ),
+          backgroundColor: darken(
+            scheme.primary,
+            0.95,
+          ).withValues(alpha: constants.dropDownAlpha),
           surfaceTintColor: Colors.transparent,
           shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(constants.borderRadius),
@@ -492,3 +493,11 @@ SettingsThemeData createSettingsTheme(ColorScheme scheme) {
     ),
   );
 }
+
+Color darken(Color color, [double percentage = 0.1]) {
+  final hsl = HSLColor.fromColor(color);
+  final hslDark = hsl.withLightness(
+    (hsl.lightness - (hsl.lightness * percentage)).clamp(0.0, 1.0),
+  );
+  return hslDark.toColor();
+}

web/repertory/lib/models/settings.dart

@@ -8,7 +8,7 @@ import 'package:repertory/models/auth.dart';
 class Settings with ChangeNotifier {
   final Auth _auth;
   bool _autoStart = false;
-  bool _enableAnimations = false;
+  bool _enableAnimations = true;
 
   Settings(this._auth) {
     _auth.addListener(() {

web/repertory/lib/screens/auth_screen.dart

@@ -151,7 +151,7 @@ class _AuthScreenState extends State<AuthScreen> {
                           ),
                           child: Padding(
                             padding: const EdgeInsets.all(
-                              constants.padding * 2.0,
+                              constants.paddingLarge,
                             ),
                             child: Form(
                               key: _formKey,
@@ -187,7 +187,7 @@ class _AuthScreenState extends State<AuthScreen> {
                                         ],
                                       ),
                                       padding: const EdgeInsets.all(
-                                        constants.borderRadiusSmall,
+                                        constants.borderRadius,
                                       ),
                                       child: Image.asset(
                                         'assets/images/repertory.png',
@@ -196,7 +196,7 @@ class _AuthScreenState extends State<AuthScreen> {
                                           return Icon(
                                             Icons.folder,
                                             color: scheme.primary,
-                                            size: 40,
+                                            size: constants.largeIconSize,
                                           );
                                         },
                                       ),
@@ -225,7 +225,7 @@ class _AuthScreenState extends State<AuthScreen> {
                                         ?.copyWith(color: scheme.onSurface),
                                   ),
                                   const SizedBox(
-                                    height: constants.padding * 2.0,
+                                    height: constants.paddingLarge,
                                   ),
                                   AppTextField(
                                     autofocus: true,
@@ -275,9 +275,7 @@ class _AuthScreenState extends State<AuthScreen> {
                                       doLogin(auth);
                                     },
                                   ),
-                                  const SizedBox(
-                                    height: constants.padding * 2.0,
-                                  ),
+                                  const SizedBox(height: constants.padding),
                                   SizedBox(
                                     height: 46,
                                     child: ElevatedButton(

web/repertory/lib/screens/home_screen.dart

@@ -62,7 +62,9 @@ class _HomeScreeState extends State<HomeScreen> {
                 child: const SizedBox(
                   width: 56,
                   height: 56,
-                  child: Center(child: Icon(Icons.add, size: 28)),
+                  child: Center(
+                    child: Icon(Icons.add, size: constants.largeIconSize),
+                  ),
                 ),
               ),
             ),

web/repertory/lib/widgets/app_dropdown.dart

@@ -78,7 +78,7 @@ class AppDropdown<T> extends StatelessWidget {
     final pad = contentPadding ?? const EdgeInsets.all(constants.paddingSmall);
     final padW = (pad is EdgeInsets)
         ? (pad.left + pad.right)
-        : constants.paddingSmall * 2;
+        : constants.padding;
 
     final base = labelW + prefixW + arrowW + padW;
 
@@ -93,7 +93,8 @@ class AppDropdown<T> extends StatelessWidget {
     final scheme = theme.colorScheme;
 
     final effectiveFill =
-        fillColor ?? scheme.primary.withValues(alpha: constants.primaryAlpha);
+        fillColor ??
+        darken(scheme.primary, 0.95).withValues(alpha: constants.dropDownAlpha);
 
     final effectiveTextStyle =
         textStyle ??

web/repertory/lib/widgets/app_edit_path_button.dart

@@ -0,0 +1,43 @@
+// app_edit_path_button.dart
+
+import 'package:flutter/material.dart';
+import 'package:repertory/constants.dart' as constants;
+
+class AppEditPathButton extends StatelessWidget {
+  final bool enabled;
+  final VoidCallback onPressed;
+
+  const AppEditPathButton({
+    super.key,
+    required this.enabled,
+    required this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+
+    return Opacity(
+      opacity: enabled ? 1.0 : constants.secondaryAlpha,
+      child: OutlinedButton.icon(
+        onPressed: enabled ? onPressed : null,
+        icon: const Icon(Icons.edit, size: constants.smallIconSize),
+        label: const Text('Edit path'),
+        style: OutlinedButton.styleFrom(
+          foregroundColor: scheme.primary,
+          side: BorderSide(
+            color: scheme.primary.withValues(alpha: constants.secondaryAlpha),
+            width: 1.2,
+          ),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(constants.borderRadiusSmall),
+          ),
+          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
+          backgroundColor: scheme.primary.withValues(
+            alpha: constants.outlineAlpha,
+          ),
+        ),
+      ),
+    );
+  }
+}

web/repertory/lib/widgets/app_scaffold.dart

@@ -74,7 +74,7 @@ class AppScaffold extends StatelessWidget {
                               return Icon(
                                 Icons.folder,
                                 color: scheme.primary,
-                                size: 32,
+                                size: constants.largeIconSize,
                               );
                             },
                           ),

web/repertory/lib/widgets/mount_widget.dart

@@ -7,6 +7,7 @@ import 'package:repertory/constants.dart' as constants;
 import 'package:repertory/helpers.dart';
 import 'package:repertory/models/mount.dart';
 import 'package:repertory/utils/safe_set_state_mixin.dart';
+import 'package:repertory/widgets/app_edit_path_button.dart';
 import 'package:repertory/widgets/app_icon_button_framed.dart';
 import 'package:repertory/widgets/app_toggle_button_framed.dart';
 
@@ -93,7 +94,7 @@ class _MountWidgetState extends State<MountWidget>
                   const SizedBox(height: constants.padding),
                   Row(
                     children: [
-                      _EditPathButton(
+                      AppEditPathButton(
                         enabled: mount.mounted == false,
                         onPressed: () async {
                           if (!_editEnabled) {
@@ -240,38 +241,3 @@ class _MountWidgetState extends State<MountWidget>
     super.dispose();
   }
 }
-
-class _EditPathButton extends StatelessWidget {
-  final bool enabled;
-  final VoidCallback onPressed;
-
-  const _EditPathButton({required this.enabled, required this.onPressed});
-
-  @override
-  Widget build(BuildContext context) {
-    final scheme = Theme.of(context).colorScheme;
-
-    return Opacity(
-      opacity: enabled ? 1.0 : constants.secondaryAlpha,
-      child: OutlinedButton.icon(
-        onPressed: enabled ? onPressed : null,
-        icon: const Icon(Icons.edit, size: 18),
-        label: const Text('Edit path'),
-        style: OutlinedButton.styleFrom(
-          foregroundColor: scheme.primary,
-          side: BorderSide(
-            color: scheme.primary.withValues(alpha: constants.secondaryAlpha),
-            width: 1.2,
-          ),
-          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(constants.borderRadiusSmall),
-          ),
-          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
-          backgroundColor: scheme.primary.withValues(
-            alpha: constants.outlineAlpha,
-          ),
-        ),
-      ),
-    );
-  }
-}