added new style widgets and total grade counter

filcnaplo_mobile_ui/lib/pages/grades/grades_count.dart

@@ -16,12 +16,51 @@ class GradesCount extends StatelessWidget {
     return Padding(
       padding:
           const EdgeInsets.only(bottom: 6.0, top: 6.0, left: 12.0, right: 6.0),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceAround,
-        children: gradesCount
-            .mapIndexed(
-                (index, e) => GradesCountItem(count: e, value: index + 1))
-            .toList(),
+      child: IntrinsicHeight(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text.rich(
+              TextSpan(children: [
+                TextSpan(
+                  text: gradesCount.reduce((a, b) => a + b).toString(),
+                  style: const TextStyle(fontWeight: FontWeight.w600),
+                ),
+                const TextSpan(
+                  text: "x",
+                  style: TextStyle(
+                    fontSize: 13.0,
+                  ),
+                ),
+              ]),
+              style: const TextStyle(fontSize: 15.0),
+            ),
+            const SizedBox(
+              width: 10.0,
+            ),
+            ClipRRect(
+              borderRadius: BorderRadius.circular(10.0),
+              child: VerticalDivider(
+                width: 2,
+                thickness: 2,
+                indent: 2,
+                endIndent: 2,
+                color: MediaQuery.of(context).platformBrightness ==
+                        Brightness.light
+                    ? Colors.grey.shade300
+                    : Colors.grey.shade700,
+              ),
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceAround,
+              children: gradesCount
+                  .mapIndexed((index, e) => Padding(
+                      padding: const EdgeInsets.only(left: 10.0),
+                      child: GradesCountItem(count: e, value: index + 1)))
+                  .toList(),
+            ),
+          ],
+        ),
       ),
     );
   }

filcnaplo_mobile_ui/lib/pages/grades/grades_count_item.dart

@@ -25,7 +25,7 @@ class GradesCountItem extends StatelessWidget {
           ]),
           style: const TextStyle(fontSize: 15.0),
         ),
-        const SizedBox(width: 5.0),
+        const SizedBox(width: 3.0),
         GradeValueWidget(GradeValue(value, "Value", "Value", 100),
             size: 19.0, fill: true, shadow: false),
       ],