almost done with new grades page

refilc/lib/ui/widgets/grade/grade_tile.dart

@@ -86,15 +86,19 @@ class GradeTile extends StatelessWidget {
           visualDensity: VisualDensity.compact,
           contentPadding: isSubjectView
               ? grade.type != GradeType.ghost
-                  ? const EdgeInsets.symmetric(horizontal: 12.0)
+                  ? const EdgeInsets.symmetric(horizontal: 8.0)
-                  : const EdgeInsets.only(left: 12.0, right: 4.0)
+                  : const EdgeInsets.only(left: 8.0, right: 0.0)
               : const EdgeInsets.only(left: 8.0, right: 12.0),
           onTap: onTap,
           // onLongPress: kDebugMode ? () => log(jsonEncode(grade.json)) : null,
           shape:
               RoundedRectangleBorder(borderRadius: BorderRadius.circular(14.0)),
           leading: isSubjectView
-              ? GradeValueWidget(grade.value)
+              ? GradeValueWidget(
+                  grade.value,
+                  fill: true,
+                  size: 27.5,
+                )
               : GradeValueWidget(
                   grade.value,
                   fill: true,

refilc_mobile_ui/lib/common/hero_scrollview.dart

@@ -1,5 +1,7 @@
+import 'package:flutter_svg/svg.dart';
 import 'package:refilc/theme/colors/colors.dart';
 import 'package:flutter/material.dart';
+import 'package:refilc/theme/colors/utils.dart';
 import 'package:refilc/utils/format.dart';
 import 'package:refilc_mobile_ui/common/round_border_icon.dart';
 
@@ -101,22 +103,76 @@ class HeroScrollViewState extends State<HeroScrollView> {
                 }
               }),
           actions: widget.navBarItems,
-          expandedHeight: 155.69,
+          expandedHeight: 165.69,
           stretch: true,
           flexibleSpace: FlexibleSpaceBar(
             background: Stack(
               children: [
+                Stack(
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.only(top: 26.0),
+                      child: SvgPicture.asset(
+                        "assets/svg/mesh_bg.svg",
+                        // ignore: deprecated_member_use
+                        color: ColorsUtils()
+                            .darken(
+                              Theme.of(context).colorScheme.primary,
+                              amount: 0.4,
+                            )
+                            .withOpacity(0.4),
+                        width: MediaQuery.of(context).size.width,
+                        fit: BoxFit.cover,
+                      ),
+                    ),
+                    Container(
+                      decoration: BoxDecoration(
+                        gradient: LinearGradient(
+                          colors: [
+                            Theme.of(context).scaffoldBackgroundColor,
+                            Theme.of(context)
+                                .scaffoldBackgroundColor
+                                .withOpacity(0.1),
+                            Theme.of(context)
+                                .scaffoldBackgroundColor
+                                .withOpacity(0.1),
+                            Theme.of(context).scaffoldBackgroundColor,
+                          ],
+                          stops: const [0.1, 0.5, 0.7, 0.98],
+                          begin: Alignment.topCenter,
+                          end: Alignment.bottomCenter,
+                        ),
+                      ),
+                      width: MediaQuery.of(context).size.width,
+                      height: double.infinity,
+                    ),
+                  ],
+                ),
                 Center(
-                  child: Padding(
+                  child: Container(
-                    padding: const EdgeInsets.only(top: 46.0),
+                    decoration: BoxDecoration(
+                      color: Theme.of(context).scaffoldBackgroundColor,
+                      borderRadius: BorderRadius.circular(50.0),
+                    ),
+                    margin: const EdgeInsets.only(top: 30.0),
                     child: RoundBorderIcon(
-                      color: AppColors.of(context).text.withOpacity(.9),
+                      color: ColorsUtils()
+                          .darken(
+                            Theme.of(context).colorScheme.primary,
+                            amount: 0.4,
+                          )
+                          .withOpacity(0.9),
                       width: 1.5,
                       padding: 12.0,
                       icon: Icon(
                         widget.icon,
                         size: widget.iconSize / 2,
-                        color: AppColors.of(context).text.withOpacity(.8),
+                        color: ColorsUtils()
+                            .darken(
+                              Theme.of(context).colorScheme.primary,
+                              amount: 0.4,
+                            )
+                            .withOpacity(0.8),
                       ),
                     ),
                   ),
@@ -124,18 +180,19 @@ class HeroScrollViewState extends State<HeroScrollView> {
                 if (widget.showTitleUnscroll)
                   Container(
                     alignment: Alignment.center,
-                    margin: const EdgeInsets.only(top: 82),
+                    margin: const EdgeInsets.only(top: 133),
                     padding: const EdgeInsets.symmetric(horizontal: 12.0),
                     child: Text(
-                      widget.title.capital(),
+                      widget.title,
                       maxLines: 2,
                       overflow: TextOverflow.ellipsis,
                       textAlign: TextAlign.center,
                       style: TextStyle(
-                          fontSize: 36.0,
+                        fontSize: 26.0,
-                          color: AppColors.of(context).text.withOpacity(.9),
+                        color: AppColors.of(context).text.withOpacity(.8),
-                          fontStyle: widget.italic ? FontStyle.italic : null,
+                        fontStyle: widget.italic ? FontStyle.italic : null,
-                          fontWeight: FontWeight.bold),
+                        fontWeight: FontWeight.bold,
+                      ),
                     ),
                   ),
               ],

refilc_mobile_ui/lib/common/widgets/cretification/certification_tile.dart

@@ -11,11 +11,18 @@ import 'package:provider/provider.dart';
 import 'certification_tile.i18n.dart';
 
 class CertificationTile extends StatelessWidget {
-  const CertificationTile(this.grade, {super.key, this.onTap, this.padding});
+  const CertificationTile(
+    this.grade, {
+    super.key,
+    this.onTap,
+    this.padding,
+    this.newStyle = false,
+  });
 
   final Function()? onTap;
   final Grade grade;
   final EdgeInsetsGeometry? padding;
+  final bool newStyle;
 
   @override
   Widget build(BuildContext context) {
@@ -57,13 +64,15 @@ class CertificationTile extends StatelessWidget {
       child: Padding(
         padding: padding ?? const EdgeInsets.symmetric(horizontal: 8.0),
         child: ListTile(
+          tileColor: gradeColor(
+                  context: context, value: grade.value.value, nocolor: false)
+              .withOpacity(.1),
           visualDensity: VisualDensity.compact,
           contentPadding: isSubjectView
-              ? const EdgeInsets.only(
+              ? const EdgeInsets.only(left: 20.0, right: 12.0, bottom: 6.0)
-                  left: 12.0, right: 12.0, top: 2.0, bottom: 8.0)
               : const EdgeInsets.only(left: 8.0, right: 12.0),
           shape:
-              RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
+              RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
           onTap: onTap,
           leading: isSubjectView
               ? GradeValueWidget(

refilc_mobile_ui/lib/pages/grades/grade_subject_view.dart

@@ -146,18 +146,39 @@ class _GradeSubjectViewState extends State<GradeSubjectView> {
 
     if (!gradeCalcMode) {
       subjectGrades.sort((a, b) => -a.date.compareTo(b.date));
+
+      _gradeTiles.add(const SizedBox(
+        height: 4.0,
+      ));
+
       for (var grade in subjectGrades) {
         if (grade.type == GradeType.midYear) {
           _gradeTiles.add(GradeViewable(grade));
         } else {
-          _gradeTiles.add(CertificationTile(grade, padding: EdgeInsets.zero));
+          _gradeTiles.add(CertificationTile(
+            grade,
+            padding: const EdgeInsets.only(bottom: 6.0, top: 12.0),
+            newStyle: true,
+          ));
         }
       }
+
+      _gradeTiles.add(const SizedBox(
+        height: 4.0,
+      ));
     } else if (subjectGrades.isNotEmpty) {
+      _gradeTiles.add(const SizedBox(
+        height: 8.0,
+      ));
+
       subjectGrades.sort((a, b) => -a.date.compareTo(b.date));
       for (var grade in subjectGrades) {
         _gradeTiles.add(GradeTile(grade));
       }
+
+      _gradeTiles.add(const SizedBox(
+        height: 8.0,
+      ));
     }
     tiles.add(
       PageTransitionSwitcher(
@@ -188,7 +209,7 @@ class _GradeSubjectViewState extends State<GradeSubjectView> {
     );
 
     tiles.add(Padding(
-        padding: EdgeInsets.only(bottom: !gradeCalcMode ? 24.0 : 250.0)));
+        padding: EdgeInsets.only(bottom: !gradeCalcMode ? 24.0 : 269.0)));
     gradeTiles = List.castFrom(tiles);
   }
 
@@ -313,35 +334,56 @@ class _GradeSubjectViewState extends State<GradeSubjectView> {
                 const SizedBox(width: 6.0),
                 if (widget.groupAverage != 0)
                   Center(
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: Theme.of(context).scaffoldBackgroundColor,
+                        borderRadius: BorderRadius.circular(50.0),
+                      ),
                       child: AverageDisplay(
-                          average: widget.groupAverage, border: true)),
+                          average: widget.groupAverage, border: true),
+                    ),
+                  ),
                 const SizedBox(width: 6.0),
                 if (average != 0)
-                  Center(child: AverageDisplay(average: average)),
+                  Center(
+                    child: Container(
+                      decoration: BoxDecoration(
+                        color: Theme.of(context).scaffoldBackgroundColor,
+                        borderRadius: BorderRadius.circular(50.0),
+                      ),
+                      child: AverageDisplay(average: average),
+                    ),
+                  ),
                 const SizedBox(width: 6.0),
                 if (plan != '')
                   Center(
-                    child: GestureDetector(
+                    child: Container(
-                      onTap: () {
+                      decoration: BoxDecoration(
-                        Navigator.of(context).push(CupertinoPageRoute(
+                        color: Theme.of(context).scaffoldBackgroundColor,
-                            builder: (context) =>
+                        borderRadius: BorderRadius.circular(50.0),
-                                GoalStateScreen(subject: widget.subject)));
+                      ),
-                      },
+                      child: GestureDetector(
-                      child: Container(
+                        onTap: () {
-                        width: 54.0,
+                          Navigator.of(context).push(CupertinoPageRoute(
-                        padding: const EdgeInsets.symmetric(vertical: 8.0),
+                              builder: (context) =>
-                        decoration: BoxDecoration(
+                                  GoalStateScreen(subject: widget.subject)));
-                          borderRadius: BorderRadius.circular(45.0),
+                        },
-                          color: Theme.of(context)
+                        child: Container(
-                              .colorScheme
+                          width: 54.0,
-                              .primary
+                          padding: const EdgeInsets.symmetric(vertical: 8.0),
-                              .withOpacity(.15),
+                          decoration: BoxDecoration(
-                        ),
+                            borderRadius: BorderRadius.circular(45.0),
-                        child: Icon(
+                            color: Theme.of(context)
-                          FeatherIcons.flag,
+                                .colorScheme
-                          size: 17.0,
+                                .primary
-                          weight: 2.5,
+                                .withOpacity(.15),
-                          color: Theme.of(context).colorScheme.primary,
+                          ),
+                          child: Icon(
+                            FeatherIcons.flag,
+                            size: 17.0,
+                            weight: 2.5,
+                            color: Theme.of(context).colorScheme.primary,
+                          ),
                         ),
                       ),
                     ),