addressing review comments (apache#25255)

learning/tour-of-beam/frontend/assets/translations/en.yaml

@@ -22,7 +22,6 @@ ui:
   continueGitHub: Continue with GitHub
   continueGoogle: Continue with Google
   copyright: © The Apache Software Foundation
-  hint: Hint
   deleteMyAccount: Delete my account
   deleteTobAccount: Delete my Tour of Beam account
   privacyPolicy: Privacy Policy
@@ -41,7 +40,8 @@ pages:
   tour:
     assignment: Assignment
     completeUnit: Complete Unit
-    showSolution: Show
+    hint: Hint
+    showSolution: Show the solution
     solution: Solution
     solveYourself: Before revealing the solution, try solving the challenge on your own. Remember, the more you practice, the better you will become. Give it a shot and see how far you can get.
     summaryTitle: Table of Contents

learning/tour-of-beam/frontend/lib/components/profile/user_menu.dart

@@ -129,11 +129,11 @@ class _Buttons extends StatelessWidget {
             closeOverlayCallback();
             showDialog(
               context: context,
-              builder: (context) => BeamAlertDialog(
-                text: 'dialogs.deleteAccountWarning'.tr(),
-                continueLabel: 'ui.deleteMyAccount'.tr(),
+              builder: (context) => ActionApprovalDialog(
+                actionLabel: 'ui.deleteMyAccount'.tr(),
+                bodyText: 'dialogs.deleteAccountWarning'.tr(),
                 title: 'ui.deleteTobAccount'.tr(),
-                onContinue: () async {
+                onActionPressed: () async {
                   Navigator.pop(context);
                   await BeamOverlays.showProgressOverlay(
                     context,

learning/tour-of-beam/frontend/lib/pages/tour/widgets/hints.dart

@@ -46,7 +46,7 @@ class HintsWidget extends StatelessWidget {
         }
       },
       icon: SvgPicture.asset(Assets.svg.hint),
-      label: const Text('ui.hint').tr(),
+      label: const Text('pages.tour.hint').tr(),
     );
   }
 }
@@ -69,7 +69,7 @@ class _Popup extends StatelessWidget {
           mainAxisSize: MainAxisSize.min,
           children: [
             Text(
-              'ui.hint',
+              'pages.tour.hint',
               style: Theme.of(context).textTheme.headlineLarge,
             ).tr(),
             const SizedBox(height: BeamSizes.size8),

learning/tour-of-beam/frontend/lib/pages/tour/widgets/solution_button.dart

@@ -45,20 +45,25 @@ class SolutionButton extends StatelessWidget {
         ),
         onPressed: () {
           // TODO(nausharipov): resolve the conflict with save user code
-          showDialog(
-            context: context,
-            builder: (context) => BeamAlertDialog(
-              continueLabel: 'pages.tour.showSolution'.tr(),
-              title: 'pages.tour.solveYourself'.tr(),
-              onContinue: () {
-                tourNotifier.toggleShowingSolution();
-                Navigator.pop(context);
-              },
-            ),
-          );
+          if (tourNotifier.isShowingSolution) {
+            tourNotifier.toggleShowingSolution();
+          } else {
+            showDialog(
+              context: context,
+              builder: (context) => ActionApprovalDialog(
+                bodyText: 'pages.tour.solveYourself'.tr(),
+                actionLabel: 'pages.tour.showSolution'.tr(),
+                title: 'pages.tour.solution'.tr(),
+                onActionPressed: () {
+                  Navigator.pop(context);
+                  tourNotifier.toggleShowingSolution();
+                },
+              ),
+            );
+          }
         },
         icon: SvgPicture.asset(Assets.svg.solution),
-        label: const Text('ui.solution').tr(),
+        label: const Text('pages.tour.solution').tr(),
       ),
     );
   }

playground/frontend/playground_components/lib/playground_components.dart

@@ -60,7 +60,7 @@ export 'src/util/string.dart';
 export 'src/widgets/bubble.dart';
 export 'src/widgets/clickable.dart';
 export 'src/widgets/complexity.dart';
-export 'src/widgets/dialogs/alert_dialog.dart';
+export 'src/widgets/dialogs/action_approval.dart';
 export 'src/widgets/divider.dart';
 export 'src/widgets/header_icon_button.dart';
 export 'src/widgets/loading_error.dart';

playground/frontend/playground_components/lib/src/widgets/dialogs/action_approval.dart

@@ -0,0 +1,84 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+
+import '../../../playground_components.dart';
+
+/// Dialog to approve or cancel user actions.
+class ActionApprovalDialog extends StatelessWidget {
+  final String actionLabel;
+  final VoidCallback onActionPressed;
+  final String title;
+  final String? bodyText;
+
+  const ActionApprovalDialog({
+    required this.actionLabel,
+    required this.onActionPressed,
+    required this.title,
+    this.bodyText,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      backgroundColor: Colors.transparent,
+      child: OverlayBody(
+        child: Container(
+          width: BeamSizes.popupWidth,
+          padding: const EdgeInsets.all(BeamSizes.size16),
+          child: SingleChildScrollView(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  title,
+                  style: Theme.of(context).textTheme.headlineMedium,
+                ),
+                if (bodyText != null)
+                  Padding(
+                    padding: const EdgeInsets.only(top: BeamSizes.size8),
+                    child: Text(bodyText!),
+                  ),
+                const SizedBox(height: BeamSizes.size8),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.end,
+                  children: [
+                    TextButton(
+                      onPressed: () {
+                        Navigator.pop(context);
+                      },
+                      child: const Text('dialogs.cancel').tr(),
+                    ),
+                    const SizedBox(width: BeamSizes.size8),
+                    TextButton(
+                      onPressed: onActionPressed,
+                      child: Text(actionLabel),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

playground/frontend/playground_components/lib/src/widgets/overlay/overlays.dart

@@ -20,7 +20,9 @@ import 'package:flutter/material.dart';
 
 import '../../../playground_components.dart';
 
+/// Shows different types of overlays.
 class BeamOverlays {
+  /// Undismissable overlay of a progress indicator.
   static Future<void> showProgressOverlay(
     BuildContext context,
     Future Function() future,