AdminUI: Redesign of dialogs (#717)

* chore: redesign of dialogs * fix: add trailing comma * chore: rename buttons and title * fix: add trailing comma * chore: add more dialog redesign * fix: add trailing comma * chore: add required into the dialogs * chore: swap the field places * fix: remove duplicate create * refactor: code * fix: use contentPadding to wrap content instead of Padding * chore: add remove to translations * chore: use the default values except for bottom --------- Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
nmshd · Jul 10, 2024 · fae2cd4 · fae2cd4
1 parent c958875
commit fae2cd4
Show file tree

Hide file tree

Showing 11 changed files with 101 additions and 69 deletions.
diff --git a/..._ui/lib/core/modals/add_quota_dialog.dart → .../lib/core/modals/assign_quota_dialog.dart b/..._ui/lib/core/modals/add_quota_dialog.dart → .../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,12 +82,20 @@ 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),
+        contentPadding: const EdgeInsets.only(left: 24, right: 24, top: 20, bottom: 32),
         content: SizedBox(
           width: 500,
           child: Column(
             mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: [
+              Padding(
+                padding: const EdgeInsets.all(8),
+                child: Text('*${context.l10n.required}'),
+              ),
+              Gaps.h32,
               DropdownButtonFormField(
                 value: _selectedMetric,
                 items: widget.availableMetrics.map((metric) => DropdownMenuItem(value: metric.key, child: Text(metric.displayName))).toList(),
@@ -128,10 +136,7 @@ class _AddQuotaDialogState extends State<_AddQuotaDialog> {
               if (_errorMessage != null)
                 Padding(
                   padding: const EdgeInsets.only(top: 24),
-                  child: Text(
-                    _errorMessage!,
-                    style: TextStyle(color: Theme.of(context).colorScheme.error),
-                  ),
+                  child: Text(_errorMessage!, style: TextStyle(color: Theme.of(context).colorScheme.error)),
                 ),
             ],
           ),
@@ -143,7 +148,7 @@ class _AddQuotaDialogState extends State<_AddQuotaDialog> {
           ),
           FilledButton(
             onPressed: _isValid && !_saving ? _addQuota : null,
-            child: Text(context.l10n.add),
+            child: Text(context.l10n.assign),
           ),
         ],
       ),

diff --git a/AdminUi/apps/admin_ui/lib/core/modals/confirmation_dialog.dart b/AdminUi/apps/admin_ui/lib/core/modals/confirmation_dialog.dart
@@ -6,10 +6,11 @@ Future<bool> showConfirmationDialog({
   required BuildContext context,
   required String title,
   required String message,
+  required String actionText,
 }) async {
   final result = await showDialog<bool>(
     context: context,
-    builder: (BuildContext context) => _ConfirmationDialog(title: title, message: message),
+    builder: (BuildContext context) => _ConfirmationDialog(title: title, message: message, actionText: actionText),
   );
 
   return result ?? false;
@@ -18,13 +19,16 @@ Future<bool> showConfirmationDialog({
 class _ConfirmationDialog extends StatelessWidget {
   final String title;
   final String message;
+  final String actionText;
 
-  const _ConfirmationDialog({required this.title, required this.message});
+  const _ConfirmationDialog({required this.title, required this.message, required this.actionText});
 
   @override
   Widget build(BuildContext context) {
     return AlertDialog(
-      title: Text(title),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      title: Text(title, textAlign: TextAlign.center),
+      contentPadding: const EdgeInsets.only(left: 24, right: 24, top: 20, bottom: 32),
       content: Text(message),
       actions: [
         OutlinedButton(
@@ -33,7 +37,7 @@ class _ConfirmationDialog extends StatelessWidget {
         ),
         FilledButton(
           onPressed: () => Navigator.of(context).pop(true),
-          child: Text(context.l10n.confirm),
+          child: Text(actionText),
         ),
       ],
     );

diff --git a/AdminUi/apps/admin_ui/lib/core/modals/modals.dart b/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';
diff --git a/AdminUi/apps/admin_ui/lib/core/modals/settings_dialog.dart b/AdminUi/apps/admin_ui/lib/core/modals/settings_dialog.dart
@@ -18,7 +18,9 @@ class _SettingsDialog extends StatelessWidget with WatchItMixin {
     final themeMode = watchValue((ThemeModeModel x) => x.themeMode);
 
     return AlertDialog(
-      title: Text(context.l10n.settings),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      title: Text(context.l10n.settings, textAlign: TextAlign.center),
+      contentPadding: const EdgeInsets.only(left: 24, right: 24, top: 20, bottom: 32),
       content: Column(
         mainAxisSize: MainAxisSize.min,
         crossAxisAlignment: CrossAxisAlignment.start,

diff --git a/AdminUi/apps/admin_ui/lib/core/widgets/quotas_button_group.dart b/AdminUi/apps/admin_ui/lib/core/widgets/quotas_button_group.dart
@@ -66,6 +66,7 @@ class _QuotasButtonGroupState extends State<QuotasButtonGroup> {
       title: context.l10n.quotaButtonGroup_removeQuotas_title,
       message:
           '${context.l10n.quotaButtonGroup_deletionMessage} ${widget.identityAddress != null ? '${context.l10n.quotaButtonGroup_theIdentity} "${widget.identityAddress}"' : '${context.l10n.quotaButtonGroup_theTier} "${widget.tierId}"'}?',
+      actionText: context.l10n.remove,
     );
 
     if (!confirmed) return;

diff --git a/AdminUi/apps/admin_ui/lib/home/clients_overview/clients_overview.dart b/AdminUi/apps/admin_ui/lib/home/clients_overview/clients_overview.dart
@@ -155,6 +155,7 @@ class _ClientsOverviewState extends State<ClientsOverview> {
       context: context,
       title: context.l10n.clientsOverview_removeSelectedClients_title,
       message: context.l10n.clientsOverview_removeSelectedClients_message,
+      actionText: context.l10n.remove,
     );
 
     if (!confirmed) return;

diff --git a/AdminUi/apps/admin_ui/lib/home/clients_overview/modals/change_client_secret_dialog.dart b/AdminUi/apps/admin_ui/lib/home/clients_overview/modals/change_client_secret_dialog.dart
@@ -55,7 +55,9 @@ 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),
+        contentPadding: const EdgeInsets.only(left: 24, right: 24, top: 20, bottom: 32),
         content: SizedBox(
           width: 500,
           child: Column(

diff --git a/AdminUi/apps/admin_ui/lib/home/clients_overview/modals/create_client_dialog.dart b/AdminUi/apps/admin_ui/lib/home/clients_overview/modals/create_client_dialog.dart
@@ -63,7 +63,9 @@ class _CreateClientDialogState extends State<_CreateClientDialog> {
     return PopScope(
       canPop: !_saving,
       child: AlertDialog(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
         title: Text(context.l10n.createClientDialog_title, textAlign: TextAlign.center),
+        contentPadding: const EdgeInsets.only(left: 24, right: 24, top: 20, bottom: 32),
         content: SizedBox(
           width: 500,
           child: Column(
@@ -79,16 +81,6 @@ class _CreateClientDialogState extends State<_CreateClientDialog> {
                 ),
               ),
               Gaps.h24,
-              TextField(
-                controller: _displayNameController,
-                readOnly: _saveSucceeded,
-                decoration: InputDecoration(
-                  border: const OutlineInputBorder(),
-                  labelText: context.l10n.displayName,
-                  helperText: context.l10n.createClientDialog_displayName_message,
-                ),
-              ),
-              Gaps.h24,
               TextField(
                 controller: _clientSecretController,
                 readOnly: _saveSucceeded,
@@ -125,6 +117,16 @@ class _CreateClientDialogState extends State<_CreateClientDialog> {
                 ),
               ],
               Gaps.h24,
+              TextField(
+                controller: _displayNameController,
+                readOnly: _saveSucceeded,
+                decoration: InputDecoration(
+                  border: const OutlineInputBorder(),
+                  labelText: context.l10n.displayName,
+                  helperText: context.l10n.createClientDialog_displayName_message,
+                ),
+              ),
+              Gaps.h24,
               TextField(
                 controller: _maxIdentitiesController,
                 readOnly: _saveSucceeded,
@@ -155,10 +157,7 @@ class _CreateClientDialogState extends State<_CreateClientDialog> {
               ),
               if (_errorMessage != null) ...[
                 Gaps.h16,
-                Text(
-                  _errorMessage!,
-                  style: TextStyle(color: Theme.of(context).colorScheme.error),
-                ),
+                Text(_errorMessage!, style: TextStyle(color: Theme.of(context).colorScheme.error)),
               ],
             ],
           ),
@@ -168,7 +167,7 @@ class _CreateClientDialogState extends State<_CreateClientDialog> {
           if (!_saveSucceeded)
             FilledButton(
               onPressed: _chosenDefaultTier != null && !_saveSucceeded && !_saving ? _createClient : null,
-              child: Text(context.l10n.save),
+              child: Text(context.l10n.create),
             ),
         ],
       ),

diff --git a/AdminUi/apps/admin_ui/lib/home/identity_details/modals/change_tier.dart b/AdminUi/apps/admin_ui/lib/home/identity_details/modals/change_tier.dart
@@ -52,17 +52,22 @@ class _ShowChangeTierDialogState extends State<_ShowChangeTierDialog> {
     return PopScope(
       canPop: !_saving,
       child: AlertDialog(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
         title: Text(context.l10n.changeTier, textAlign: TextAlign.center),
-        content: DropdownButtonFormField<String>(
-          value: selectedTier,
-          decoration: const InputDecoration(border: OutlineInputBorder()),
-          onChanged: _saving ? null : (String? newValue) => setState(() => selectedTier = newValue!),
-          items: widget.availableTiers.where((tier) => tier.canBeManuallyAssigned).map((TierOverview tier) {
-            return DropdownMenuItem<String>(
-              value: tier.id,
-              child: Text(tier.name),
-            );
-          }).toList(),
+        contentPadding: const EdgeInsets.only(left: 24, right: 24, top: 20, bottom: 32),
+        content: SizedBox(
+          width: 500,
+          child: DropdownButtonFormField<String>(
+            value: selectedTier,
+            decoration: const InputDecoration(border: OutlineInputBorder()),
+            onChanged: _saving ? null : (String? newValue) => setState(() => selectedTier = newValue!),
+            items: widget.availableTiers.where((tier) => tier.canBeManuallyAssigned).map((TierOverview tier) {
+              return DropdownMenuItem<String>(
+                value: tier.id,
+                child: Text(tier.name),
+              );
+            }).toList(),
+          ),
         ),
         actions: [
           OutlinedButton(

diff --git a/AdminUi/apps/admin_ui/lib/home/tiers_overview/modals/show_create_tier_dialog.dart b/AdminUi/apps/admin_ui/lib/home/tiers_overview/modals/show_create_tier_dialog.dart
@@ -44,38 +44,48 @@ class _CreateTierDialogState extends State<_CreateTierDialog> {
     return PopScope(
       canPop: !_isLoading,
       child: AlertDialog(
-        title: Text(context.l10n.createTierDialog_title),
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+        title: Text(context.l10n.createTierDialog_title, textAlign: TextAlign.center),
+        contentPadding: const EdgeInsets.only(left: 24, right: 24, top: 20, bottom: 32),
         content: _isLoading
             ? const Padding(
                 padding: EdgeInsets.all(16),
                 child: Wrap(alignment: WrapAlignment.center, children: [CircularProgressIndicator()]),
               )
-            : Column(
-                mainAxisSize: MainAxisSize.min,
-                children: <Widget>[
-                  Text(context.l10n.createTierDialog_formMessage),
-                  Gaps.h16,
-                  TextField(
-                    controller: _tierNameController,
-                    focusNode: _focusNode,
-                    onChanged: (_) {
-                      if (_errorMessage == null) return;
-                      setState(() => _errorMessage = null);
-                    },
-                    onSubmitted: _onSubmitted,
-                    decoration: InputDecoration(
-                      border: const OutlineInputBorder(),
-                      labelText: context.l10n.name,
-                      error: _errorMessage != null
-                          ? Text(
-                              _errorMessage!,
-                              style: Theme.of(context).textTheme.labelSmall!.copyWith(color: Theme.of(context).colorScheme.error),
-                              textAlign: TextAlign.left,
-                            )
-                          : null,
+            : SizedBox(
+                width: 500,
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: <Widget>[
+                    Padding(
+                      padding: const EdgeInsets.all(8),
+                      child: Text('*${context.l10n.required}'),
                     ),
-                  ),
-                ],
+                    Gaps.h32,
+                    TextField(
+                      controller: _tierNameController,
+                      focusNode: _focusNode,
+                      onChanged: (_) {
+                        if (_errorMessage == null) return;
+                        setState(() => _errorMessage = null);
+                      },
+                      onSubmitted: _onSubmitted,
+                      decoration: InputDecoration(
+                        border: const OutlineInputBorder(),
+                        labelText: context.l10n.name,
+                        helperText: context.l10n.createTierDialog_formMessage,
+                        error: _errorMessage != null
+                            ? Text(
+                                _errorMessage!,
+                                style: Theme.of(context).textTheme.labelSmall!.copyWith(color: Theme.of(context).colorScheme.error),
+                                textAlign: TextAlign.left,
+                              )
+                            : null,
+                      ),
+                    ),
+                  ],
+                ),
               ),
         actions: <Widget>[
           OutlinedButton(

diff --git a/AdminUi/apps/admin_ui/lib/l10n/app_en.arb b/AdminUi/apps/admin_ui/lib/l10n/app_en.arb
@@ -3,8 +3,8 @@
  "add": "Add",
   "addQuota": "Add Quota",
   "address": "Address",
+  "assign": "Assign",
   "cancel": "Cancel",
-  "create": "Create",
   "changeClientSecret": "Change Client Secret",
   "changeTier": "Change Tier",
   "clientID": "Client ID",
@@ -15,6 +15,7 @@
   "clients": "Clients",
   "close": "Close",
   "confirm": "Confirm",
+  "create": "Create",
   "createdAt": "Created At",
   "dark": "Dark",
   "day": "Day",
@@ -37,6 +38,8 @@
   "period": "Period",
   "quotas": "Quotas",
   "retry": "Retry",
+  "required": "required",
+  "remove": "Remove",
   "save": "Save",
   "searchTiers": "Search Tiers",
   "settings": "Settings",