Improve design of the Material Design delete account dialog (#1728)

| Before | After |
|--------|--------|
| ![Screenshot 2024-09-08 at 18 23
25](https://github.com/user-attachments/assets/47e24b10-f5ac-478b-8aa9-99516875f49a)
| ![Screenshot 2024-09-08 at 18 20
57](https://github.com/user-attachments/assets/cf5937e7-a80c-43d8-abc2-8ea024b6a30d)
|

Changes:

* Add `MaxWidthConstraintBox`
* Add `Padding` for `DeleteConfirmationCheckbox`

app/lib/settings/src/subpages/my_profile/my_profile_page.dart

@@ -543,62 +543,69 @@ class _DeleteAccountDialogContentState
  );
  }
 
- return AlertDialog(
- title: const _DeleteAccountDialogTitle(),
- contentPadding: const EdgeInsets.only(top: 24),
- content: SingleChildScrollView(
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- mainAxisSize: MainAxisSize.min,
- children: <Widget>[
- const Padding(
- padding: EdgeInsets.symmetric(horizontal: 24),
- child: _DeleteAccountDialogText(),
- ),
- provider == Provider.email
- ? Padding(
- padding: const EdgeInsets.symmetric(horizontal: 24),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- mainAxisSize: MainAxisSize.min,
- children: <Widget>[
- const SizedBox(height: 16),
- const Text(
- "Bitte gib dein Passwort ein, um deinen Account zu löschen."),
- TextField(
- onChanged: (s) => setState(() => password = s),
- onEditingComplete: () async =>
- tryToDeleteUser(context),
- autofocus: false,
- decoration: InputDecoration(
- labelText: 'Passwort',
- suffixIcon: GestureDetector(
- onTap: () {
- setState(() {
- _obscureText = !_obscureText;
- });
- },
- child: Icon(_obscureText
- ? Icons.visibility
- : Icons.visibility_off),
+ return MaxWidthConstraintBox(
+ maxWidth: 400,
+ child: AlertDialog(
+ title: const _DeleteAccountDialogTitle(),
+ contentPadding: const EdgeInsets.only(top: 24),
+ content: SingleChildScrollView(
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ mainAxisSize: MainAxisSize.min,
+ children: <Widget>[
+ const Padding(
+ padding: EdgeInsets.symmetric(horizontal: 24),
+ child: _DeleteAccountDialogText(),
+ ),
+ provider == Provider.email
+ ? Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 24),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ mainAxisSize: MainAxisSize.min,
+ children: <Widget>[
+ const SizedBox(height: 16),
+ const Text(
+ "Bitte gib dein Passwort ein, um deinen Account zu löschen."),
+ TextField(
+ onChanged: (s) => setState(() => password = s),
+ onEditingComplete: () async =>
+ tryToDeleteUser(context),
+ autofocus: false,
+ decoration: InputDecoration(
+ labelText: 'Passwort',
+ suffixIcon: GestureDetector(
+ onTap: () {
+ setState(() {
+ _obscureText = !_obscureText;
+ });
+ },
+ child: Icon(_obscureText
+ ? Icons.visibility
+ : Icons.visibility_off),
+ ),
  ),
+ obscureText: _obscureText,
  ),
- obscureText: _obscureText,
- ),
- ],
+ ],
+ ),
+ )
+ : Padding(
+ padding: const EdgeInsets.symmetric(
+ horizontal: 24, vertical: 4),
+ child: DeleteConfirmationCheckbox(
+ confirm: signOut!,
+ onChanged: (value) => setState(() => signOut = value),
+ text: text,
+ ),
  ),
- )
- : DeleteConfirmationCheckbox(
- confirm: signOut!,
- onChanged: (value) => setState(() => signOut = value),
- text: text,
- ),
- if (isNotEmptyOrNull(error))
- DeleteAccountDialogErrorText(text: error!)
- ],
+ if (isNotEmptyOrNull(error))
+ DeleteAccountDialogErrorText(text: error!)
+ ],
+ ),
  ),
+ actions: isLoading ? loadingCircle : actions(context),
  ),
- actions: isLoading ? loadingCircle : actions(context),
  );
  }
 }