fix(gui): Promotes the "Confirm" button (#651)

Team's feedback was that the button was not looking like a Yaru styled
button. It was, but a `TextButton` which is a low emphasis component.
Upon discussion, we settled with the higher emphasis `ElevatedButton`,
which is even higher in Yaru.

So this removes any further styling, convert the button to
`ElevatedButton` and detaches it from the text input field. No
functionality changes, yet some tests required updates in how they find
that button.


![image](https://github.com/canonical/ubuntu-pro-for-wsl/assets/11138291/fe7ed2ea-7bb7-45d2-a355-eca08cebca85)

UDENG-2376

gui/packages/ubuntupro/lib/pages/subscribe_now/subscribe_now_widgets.dart

@@ -70,24 +70,30 @@ class _ProTokenInputFieldState extends State<ProTokenInputField> {
       isExpanded: widget.isExpanded,
       child: ValueListenableBuilder(
         valueListenable: _token,
-        builder: (context, _, __) => TextField(
-          autofocus: false,
-          controller: _controller,
-          decoration: InputDecoration(
-            hintText: lang.tokenInputHint,
-            errorText: _token.errorOrNull?.localize(lang),
-            counterText: '',
-            suffixIcon: TextButton(
-              onPressed: canSubmit ? _handleApplyButton : null,
-              style: TextButton.styleFrom(
-                // allows the suffix button to stand out when enabled while keeping its custom look.
-                foregroundColor: Theme.of(context).colorScheme.onSurface,
+        builder: (context, _, __) => Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Expanded(
+              child: TextField(
+                autofocus: false,
+                controller: _controller,
+                decoration: InputDecoration(
+                  hintText: lang.tokenInputHint,
+                  errorText: _token.errorOrNull?.localize(lang),
+                  counterText: '',
+                ),
+                onChanged: _token.update,
+                onSubmitted: _onSubmitted,
               ),
+            ),
+            const SizedBox(
+              width: 8.0,
+            ),
+            ElevatedButton(
+              onPressed: canSubmit ? _handleApplyButton : null,
               child: Text(lang.confirm),
             ),
-          ),
-          onChanged: _token.update,
-          onSubmitted: _onSubmitted,
+          ],
         ),
       ),
     );

gui/packages/ubuntupro/test/pages/subcribe_now/subscribe_now_page_test.dart

@@ -42,12 +42,12 @@ void main() {
       final context = tester.element(find.byType(SubscribeNowPage));
       final lang = AppLocalizations.of(context);
 
-      final button = find.byType(ElevatedButton);
       // check that's the right button
-      expect(
-        find.descendant(of: button, matching: find.text(lang.subscribeNow)),
-        findsOneWidget,
+      final button = find.ancestor(
+        of: find.text(lang.subscribeNow),
+        matching: find.byType(ElevatedButton),
       );
+      expect(button, findsOneWidget);
       expect(tester.widget<ElevatedButton>(button).enabled, isFalse);
     });
     testWidgets('enabled', (tester) async {
@@ -58,12 +58,12 @@ void main() {
       final context = tester.element(find.byType(SubscribeNowPage));
       final lang = AppLocalizations.of(context);
 
-      final button = find.byType(ElevatedButton);
       // check that's the right button
-      expect(
-        find.descendant(of: button, matching: find.text(lang.subscribeNow)),
-        findsOneWidget,
+      final button = find.ancestor(
+        of: find.text(lang.subscribeNow),
+        matching: find.byType(ElevatedButton),
       );
+      expect(button, findsOneWidget);
       expect(tester.widget<ElevatedButton>(button).enabled, isTrue);
     });
   });

gui/packages/ubuntupro/test/pages/subcribe_now/subscribe_now_widgets_test.dart

@@ -89,7 +89,8 @@ void main() {
       testWidgets('starts with button disabled', (tester) async {
         await tester.pumpWidget(theApp);
 
-        final button = tester.firstWidget<TextButton>(find.byType(TextButton));
+        final button =
+            tester.firstWidget<ElevatedButton>(find.byType(ElevatedButton));
 
         expect(button.enabled, isFalse);
       });
@@ -105,7 +106,8 @@ void main() {
         expect(input.decoration!.errorText, isNotNull);
         expect(input.decoration!.errorText, contains('too short'));
 
-        final button = tester.firstWidget<TextButton>(find.byType(TextButton));
+        final button =
+            tester.firstWidget<ElevatedButton>(find.byType(ElevatedButton));
         expect(button.enabled, isFalse);
       });
 
@@ -120,7 +122,8 @@ void main() {
         expect(input.decoration!.errorText, isNotNull);
         expect(input.decoration!.errorText, contains('too long'));
 
-        final button = tester.firstWidget<TextButton>(find.byType(TextButton));
+        final button =
+            tester.firstWidget<ElevatedButton>(find.byType(ElevatedButton));
         expect(button.enabled, isFalse);
       });
 
@@ -134,7 +137,8 @@ void main() {
         final input = tester.firstWidget<TextField>(inputField);
         expect(input.decoration!.errorText, isNull);
 
-        final button = tester.firstWidget<TextButton>(find.byType(TextButton));
+        final button =
+            tester.firstWidget<ElevatedButton>(find.byType(ElevatedButton));
         expect(button.enabled, isTrue);
       });
     });
@@ -149,7 +153,7 @@ void main() {
       await tester.pump();
 
       expect(called, isFalse);
-      final button = find.byType(TextButton);
+      final button = find.byType(ElevatedButton);
       await tester.tap(button);
       await tester.pumpAndSettle();
       expect(called, isTrue);