AdminUI: Redesign of dialogs

AdminUi/apps/admin_ui/lib/core/modals/add_quota_dialog.dart → AdminUi/apps/admin_ui/lib/core/modals/assign_quota_dialog.dart

@@ -22,7 +22,7 @@ Future<void> showAddQuotaDialog({
 
   await showDialog<void>(
     context: context,
-    builder: (BuildContext context) => _AddQuotaDialog(
+    builder: (BuildContext context) => _AssignQuotaDialog(
       availableMetrics: metrics.data,
       addQuota: ({required String metricKey, required int max, required String period}) {
         if (tierId != null) {
@@ -36,22 +36,22 @@ Future<void> showAddQuotaDialog({
   );
 }
 
-class _AddQuotaDialog extends StatefulWidget {
+class _AssignQuotaDialog extends StatefulWidget {
   final List<Metric> availableMetrics;
   final Future<ApiResponse<dynamic>> Function({required String metricKey, required int max, required String period}) addQuota;
   final VoidCallback onQuotaAdded;
 
-  const _AddQuotaDialog({
+  const _AssignQuotaDialog({
     required this.availableMetrics,
     required this.addQuota,
     required this.onQuotaAdded,
   });
 
   @override
-  State<_AddQuotaDialog> createState() => _AddQuotaDialogState();
+  State<_AssignQuotaDialog> createState() => _AssignQuotaDialogState();
 }
 
-class _AddQuotaDialogState extends State<_AddQuotaDialog> {
+class _AssignQuotaDialogState extends State<_AssignQuotaDialog> {
   final _maxAmountController = TextEditingController();
 
   bool _saving = false;
@@ -82,58 +82,65 @@ class _AddQuotaDialogState extends State<_AddQuotaDialog> {
     return PopScope(
       canPop: !_saving,
       child: AlertDialog(
-        title: Text(context.l10n.addQuota),
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+        title: Text(context.l10n.addQuota, textAlign: TextAlign.center),
         content: SizedBox(
           width: 500,
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              DropdownButtonFormField(
-                value: _selectedMetric,
-                items: widget.availableMetrics.map((metric) => DropdownMenuItem(value: metric.key, child: Text(metric.displayName))).toList(),
-                onChanged: _saving ? null : (String? selected) => setState(() => _selectedMetric = selected),
-                decoration: InputDecoration(
-                  border: const OutlineInputBorder(),
-                  labelText: '${context.l10n.metric}*',
+          child: Padding(
+            padding: const EdgeInsets.only(bottom: 32),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Padding(
+                  padding: const EdgeInsets.all(8),
+                  child: Text('*${context.l10n.required}'),
                 ),
-              ),
-              Gaps.h24,
-              TextField(
-                controller: _maxAmountController,
-                enabled: !_saving,
-                decoration: InputDecoration(
-                  border: const OutlineInputBorder(),
-                  labelText: '${context.l10n.maxAmount}*',
-                  helperText: context.l10n.addQuotaDialog_maxAmount_message,
+                Gaps.h32,
+                DropdownButtonFormField(
+                  value: _selectedMetric,
+                  items: widget.availableMetrics.map((metric) => DropdownMenuItem(value: metric.key, child: Text(metric.displayName))).toList(),
+                  onChanged: _saving ? null : (String? selected) => setState(() => _selectedMetric = selected),
+                  decoration: InputDecoration(
+                    border: const OutlineInputBorder(),
+                    labelText: '${context.l10n.metric}*',
+                  ),
                 ),
-                inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
-                keyboardType: TextInputType.number,
-              ),
-              Gaps.h24,
-              DropdownButtonFormField(
-                value: _selectedPeriod,
-                items: [
-                  DropdownMenuItem(value: 'Hour', child: Text(context.l10n.hour)),
-                  DropdownMenuItem(value: 'Day', child: Text(context.l10n.day)),
-                  DropdownMenuItem(value: 'Week', child: Text(context.l10n.week)),
-                  DropdownMenuItem(value: 'Month', child: Text(context.l10n.month)),
-                  DropdownMenuItem(value: 'Year', child: Text(context.l10n.year)),
-                ],
-                onChanged: _saving ? null : (String? selected) => setState(() => _selectedPeriod = selected),
-                decoration: InputDecoration(
-                  border: const OutlineInputBorder(),
-                  labelText: '${context.l10n.period}*',
+                Gaps.h24,
+                TextField(
+                  controller: _maxAmountController,
+                  enabled: !_saving,
+                  decoration: InputDecoration(
+                    border: const OutlineInputBorder(),
+                    labelText: '${context.l10n.maxAmount}*',
+                    helperText: context.l10n.addQuotaDialog_maxAmount_message,
+                  ),
+                  inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
+                  keyboardType: TextInputType.number,
                 ),
-              ),
-              if (_errorMessage != null)
-                Padding(
-                  padding: const EdgeInsets.only(top: 24),
-                  child: Text(
-                    _errorMessage!,
-                    style: TextStyle(color: Theme.of(context).colorScheme.error),
+                Gaps.h24,
+                DropdownButtonFormField(
+                  value: _selectedPeriod,
+                  items: [
+                    DropdownMenuItem(value: 'Hour', child: Text(context.l10n.hour)),
+                    DropdownMenuItem(value: 'Day', child: Text(context.l10n.day)),
+                    DropdownMenuItem(value: 'Week', child: Text(context.l10n.week)),
+                    DropdownMenuItem(value: 'Month', child: Text(context.l10n.month)),
+                    DropdownMenuItem(value: 'Year', child: Text(context.l10n.year)),
+                  ],
+                  onChanged: _saving ? null : (String? selected) => setState(() => _selectedPeriod = selected),
+                  decoration: InputDecoration(
+                    border: const OutlineInputBorder(),
+                    labelText: '${context.l10n.period}*',
                   ),
                 ),
-            ],
+                if (_errorMessage != null)
+                  Padding(
+                    padding: const EdgeInsets.only(top: 24),
+                    child: Text(_errorMessage!, style: TextStyle(color: Theme.of(context).colorScheme.error)),
+                  ),
+              ],
+            ),
           ),
         ),
         actions: [
@@ -143,7 +150,7 @@ class _AddQuotaDialogState extends State<_AddQuotaDialog> {
           ),
           FilledButton(
             onPressed: _isValid && !_saving ? _addQuota : null,
-            child: Text(context.l10n.add),
+            child: Text(context.l10n.assign),
           ),
         ],
       ),

AdminUi/apps/admin_ui/lib/core/modals/confirmation_dialog.dart

@@ -24,16 +24,20 @@ class _ConfirmationDialog extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return AlertDialog(
-      title: Text(title),
-      content: Text(message),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      title: Text(title, textAlign: TextAlign.center),
+      content: Padding(
+        padding: const EdgeInsets.only(bottom: 32, top: 32),
+        child: Text(message),
+      ),
       actions: [
         OutlinedButton(
           onPressed: () => Navigator.of(context).pop(false),
           child: Text(context.l10n.cancel),
         ),
         FilledButton(
           onPressed: () => Navigator.of(context).pop(true),
-          child: Text(context.l10n.confirm),
+          child: const Text('Remove'),
         ),
       ],
     );

AdminUi/apps/admin_ui/lib/core/modals/modals.dart

@@ -1,3 +1,3 @@
-export 'add_quota_dialog.dart';
+export 'assign_quota_dialog.dart';
 export 'confirmation_dialog.dart';
 export 'settings_dialog.dart';

AdminUi/apps/admin_ui/lib/core/modals/settings_dialog.dart

@@ -18,24 +18,29 @@ class _SettingsDialog extends StatelessWidget with WatchItMixin {
     final themeMode = watchValue((ThemeModeModel x) => x.themeMode);
 
     return AlertDialog(
-      title: Text(context.l10n.settings),
-      content: Column(
-        mainAxisSize: MainAxisSize.min,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Text(context.l10n.theme, style: Theme.of(context).textTheme.bodyLarge),
-          Gaps.h4,
-          SegmentedButton(
-            showSelectedIcon: false,
-            segments: [
-              ButtonSegment(value: ThemeMode.light, icon: const Icon(Icons.light_mode), label: Text(context.l10n.light)),
-              ButtonSegment(value: ThemeMode.system, icon: const Icon(Icons.settings), label: Text(context.l10n.system)),
-              ButtonSegment(value: ThemeMode.dark, icon: const Icon(Icons.dark_mode), label: Text(context.l10n.dark)),
-            ],
-            selected: {themeMode},
-            onSelectionChanged: (selected) => GetIt.I<ThemeModeModel>().setThemeMode(selected.first),
-          ),
-        ],
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      title: Text(context.l10n.settings, textAlign: TextAlign.center),
+      content: Padding(
+        padding: const EdgeInsets.only(bottom: 32),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Gaps.h8,
+            Text(context.l10n.theme, style: Theme.of(context).textTheme.bodyLarge),
+            Gaps.h4,
+            SegmentedButton(
+              showSelectedIcon: false,
+              segments: [
+                ButtonSegment(value: ThemeMode.light, icon: const Icon(Icons.light_mode), label: Text(context.l10n.light)),
+                ButtonSegment(value: ThemeMode.system, icon: const Icon(Icons.settings), label: Text(context.l10n.system)),
+                ButtonSegment(value: ThemeMode.dark, icon: const Icon(Icons.dark_mode), label: Text(context.l10n.dark)),
+              ],
+              selected: {themeMode},
+              onSelectionChanged: (selected) => GetIt.I<ThemeModeModel>().setThemeMode(selected.first),
+            ),
+          ],
+        ),
       ),
       actions: [FilledButton(onPressed: () => context.pop(), child: Text(context.l10n.close))],
     );

AdminUi/apps/admin_ui/lib/home/clients_overview/modals/change_client_secret_dialog.dart

@@ -55,58 +55,62 @@ class _ChangeClientSecretDialogState extends State<_ChangeClientSecretDialog> {
     return PopScope(
       canPop: !_saving,
       child: AlertDialog(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
         title: Text(context.l10n.changeClientSecret, textAlign: TextAlign.center),
         content: SizedBox(
           width: 500,
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              TextField(
-                controller: _newClientSecretController,
-                focusNode: _focusNode,
-                readOnly: _saveSucceeded,
-                obscureText: _isClientSecretVisible,
-                decoration: InputDecoration(
-                  border: const OutlineInputBorder(),
-                  labelText: context.l10n.clientSecret,
-                  helperText: context.l10n.clientSecret_message,
-                  suffixIcon: Padding(
-                    padding: const EdgeInsets.symmetric(horizontal: 8),
-                    child: Row(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        IconButton(
-                          icon: Icon(_isClientSecretVisible ? Icons.visibility_off : Icons.visibility),
-                          onPressed: () => setState(() => _isClientSecretVisible = !_isClientSecretVisible),
-                        ),
-                        Gaps.w4,
-                        CopyToClipboardButton(
-                          tooltip: context.l10n.changeClientSecretDialog_copyToClipboard,
-                          clipboardText: _newClientSecretController.text,
-                          successMessage: context.l10n.clientSecret_copiedToClipboard,
-                        ),
-                      ],
+          child: Padding(
+            padding: const EdgeInsets.only(bottom: 32, top: 32),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                TextField(
+                  controller: _newClientSecretController,
+                  focusNode: _focusNode,
+                  readOnly: _saveSucceeded,
+                  obscureText: _isClientSecretVisible,
+                  decoration: InputDecoration(
+                    border: const OutlineInputBorder(),
+                    labelText: context.l10n.clientSecret,
+                    helperText: context.l10n.clientSecret_message,
+                    suffixIcon: Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 8),
+                      child: Row(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          IconButton(
+                            icon: Icon(_isClientSecretVisible ? Icons.visibility_off : Icons.visibility),
+                            onPressed: () => setState(() => _isClientSecretVisible = !_isClientSecretVisible),
+                          ),
+                          Gaps.w4,
+                          CopyToClipboardButton(
+                            tooltip: context.l10n.changeClientSecretDialog_copyToClipboard,
+                            clipboardText: _newClientSecretController.text,
+                            successMessage: context.l10n.clientSecret_copiedToClipboard,
+                          ),
+                        ],
+                      ),
                     ),
                   ),
                 ),
-              ),
-              if (_saveSucceeded)
-                Padding(
-                  padding: const EdgeInsets.symmetric(vertical: 8),
-                  child: Text(
-                    context.l10n.clientSecret_save_message,
-                    style: TextStyle(color: Theme.of(context).colorScheme.primary),
+                if (_saveSucceeded)
+                  Padding(
+                    padding: const EdgeInsets.symmetric(vertical: 8),
+                    child: Text(
+                      context.l10n.clientSecret_save_message,
+                      style: TextStyle(color: Theme.of(context).colorScheme.primary),
+                    ),
                   ),
-                ),
-              if (_errorMessage != null)
-                Padding(
-                  padding: const EdgeInsets.symmetric(vertical: 8),
-                  child: Text(
-                    _errorMessage!,
-                    style: TextStyle(color: Theme.of(context).colorScheme.error),
+                if (_errorMessage != null)
+                  Padding(
+                    padding: const EdgeInsets.symmetric(vertical: 8),
+                    child: Text(
+                      _errorMessage!,
+                      style: TextStyle(color: Theme.of(context).colorScheme.error),
+                    ),
                   ),
-                ),
-            ],
+              ],
+            ),
           ),
         ),
         actions: [