fix(view): improve python and review views (#1586)

* fix(view): improve python and review views

* fix(view): align challenge description in Python view for better readability

---------

Co-authored-by: sembauke <[email protected]>

Author: huyenltnguyen

mobile-app/lib/ui/views/learn/challenge/templates/python/python_view.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:freecodecamp/extensions/i18n_extension.dart';
 import 'package:freecodecamp/models/learn/challenge_model.dart';
 import 'package:freecodecamp/models/learn/curriculum_model.dart';
+import 'package:freecodecamp/ui/theme/fcc_theme.dart';
 import 'package:freecodecamp/ui/views/learn/challenge/templates/python/python_viewmodel.dart';
 import 'package:freecodecamp/ui/views/learn/utils/challenge_utils.dart';
 import 'package:freecodecamp/ui/views/learn/widgets/challenge_card.dart';
@@ -34,37 +35,43 @@ class PythonView extends StatelessWidget {
       onViewModelReady: (model) => model.initChallenge(challenge),
       builder: (context, model, child) {
         return Scaffold(
+          backgroundColor: FccColors.gray90,
           appBar: AppBar(
             title: Text(handleChallengeTitle(challenge, block)),
           ),
           body: SafeArea(
             bottom: false,
             child: ListView(
               children: [
-                Center(
-                  child: Text(
-                    challenge.title,
-                    textAlign: TextAlign.center,
-                    style: const TextStyle(
-                      fontSize: 20,
-                      fontWeight: FontWeight.bold,
+                Container(
+                  margin: const EdgeInsets.all(8),
+                  child: Center(
+                    child: Text(
+                      challenge.title,
+                      textAlign: TextAlign.center,
+                      style: const TextStyle(
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
                     ),
                   ),
                 ),
                 const SizedBox(height: 12),
                 if (challenge.description.isNotEmpty)
                   ChallengeCard(
                     title: 'Description',
-                    child: Column(
-                      children: parser.parse(
-                        challenge.description,
+                    child: Align(
+                      alignment: Alignment.centerLeft,
+                      child: Column(
+                        children: parser.parse(
+                          challenge.description,
+                        ),
                       ),
                     ),
                   ),
-                Padding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: 16,
-                  ),
+                const SizedBox(height: 12),
+                ChallengeCard(
+                  title: 'Video',
                   child: YoutubePlayerWidget(
                     videoId: challenge.videoId!,
                   ),

mobile-app/lib/ui/views/learn/challenge/templates/review/review_view.dart

@@ -49,10 +49,8 @@ class ReviewView extends StatelessWidget {
                 ),
                 if (challenge.videoId != null) ...[
                   const SizedBox(height: 12),
-                  Padding(
-                    padding: const EdgeInsets.symmetric(
-                      horizontal: 16,
-                    ),
+                  ChallengeCard(
+                    title: 'Video',
                     child: YoutubePlayerWidget(
                       videoId: challenge.videoId!,
                     ),

mobile-app/lib/ui/views/learn/widgets/youtube_player_widget.dart

@@ -32,9 +32,12 @@ class YoutubePlayerWidget extends StatelessWidget {
       },
     );
 
-    return YoutubePlayer(
-      controller: controller,
-      enableFullScreenOnVerticalDrag: false,
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 8.0),
+      child: YoutubePlayer(
+        controller: controller,
+        enableFullScreenOnVerticalDrag: false,
+      ),
     );
   }
 }