loyalty card display fix

Frontend/lib/mih_packages/mzansi_wallet/builder/build_loyalty_card_list.dart

@@ -101,18 +101,26 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
     );
   }
 
+  double getHorizontalPaddingSize(Size screenSize) {
+    if (MzanziInnovationHub.of(context)!.theme.screenType == "desktop") {
+      return screenSize.width / 10;
+    } else {
+      return 20;
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final Size size = MediaQuery.sizeOf(context);
-    final double width = size.width;
+    // final double width = size.width;
     //final double height = size.height;
     if (widget.cardList.isNotEmpty) {
       return GridView.builder(
-        //physics: const NeverScrollableScrollPhysics(),
+        physics: const NeverScrollableScrollPhysics(),
         shrinkWrap: true,
         padding: EdgeInsets.only(
-          left: width / 10,
+          left: getHorizontalPaddingSize(size),
-          right: width / 10,
+          right: getHorizontalPaddingSize(size),
           //bottom: height / 5,
           //top: 20,
         ),
@@ -120,7 +128,9 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
         // shrinkWrap: true,
         itemCount: widget.cardList.length,
         gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-            mainAxisSpacing: 15, maxCrossAxisExtent: 200),
+          //mainAxisSpacing: 15,
+          maxCrossAxisExtent: 175,
+        ),
         itemBuilder: (context, index) {
           return GestureDetector(
             child: MihCardDisplay(

Frontend/lib/mih_packages/mzansi_wallet/components/mih_card_display.dart

@@ -1,3 +1,4 @@
+import 'package:Mzansi_Innovation_Hub/main.dart';
 import 'package:flutter/material.dart';
 
 class MihCardDisplay extends StatefulWidget {
@@ -20,9 +21,24 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            SizedBox(
+            Column(
-              height: widget.height,
+              children: [
-              child: Image.asset('images/loyalty_cards/bb_club.png'),
+                SizedBox(
+                  height: widget.height,
+                  child: Image.asset('images/loyalty_cards/bb_club.png'),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Best Before",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                ),
+              ],
             ),
           ],
         );
@@ -30,9 +46,24 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            SizedBox(
+            Column(
-              height: widget.height,
+              children: [
-              child: Image.asset('images/loyalty_cards/checkers_xtra.png'),
+                SizedBox(
+                  height: widget.height,
+                  child: Image.asset('images/loyalty_cards/checkers_xtra.png'),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Checkers",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                ),
+              ],
             ),
           ],
         );
@@ -40,9 +71,24 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            SizedBox(
+            Column(
-              height: widget.height,
+              children: [
-              child: Image.asset('images/loyalty_cards/Clicks_Club.png'),
+                SizedBox(
+                  height: widget.height,
+                  child: Image.asset('images/loyalty_cards/Clicks_Club.png'),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Clicks",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                ),
+              ],
             ),
           ],
         );
@@ -50,9 +96,25 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            SizedBox(
+            Column(
-              height: widget.height,
+              children: [
-              child: Image.asset('images/loyalty_cards/cotton_on_perks.png'),
+                SizedBox(
+                  height: widget.height,
+                  child:
+                      Image.asset('images/loyalty_cards/cotton_on_perks.png'),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Cotton:On",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                ),
+              ],
             ),
           ],
         );
@@ -60,9 +122,25 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            SizedBox(
+            Column(
-              height: widget.height,
+              children: [
-              child: Image.asset('images/loyalty_cards/dischem_benefit.png'),
+                SizedBox(
+                  height: widget.height,
+                  child:
+                      Image.asset('images/loyalty_cards/dischem_benefit.png'),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Dis-Chem",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                ),
+              ],
             ),
           ],
         );
@@ -70,9 +148,24 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            SizedBox(
+            Column(
-              height: widget.height,
+              children: [
-              child: Image.asset('images/loyalty_cards/pnp_smart.png'),
+                SizedBox(
+                  height: widget.height,
+                  child: Image.asset('images/loyalty_cards/pnp_smart.png'),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Pick 'n Pay",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                ),
+              ],
             ),
           ],
         );
@@ -80,9 +173,24 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            SizedBox(
+            Column(
-              height: widget.height,
+              children: [
-              child: Image.asset('images/loyalty_cards/shoprite_xtra.png'),
+                SizedBox(
+                  height: widget.height,
+                  child: Image.asset('images/loyalty_cards/shoprite_xtra.png'),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Shoprite",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                ),
+              ],
             ),
           ],
         );
@@ -90,9 +198,24 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            SizedBox(
+            Column(
-              height: widget.height,
+              children: [
-              child: Image.asset('images/loyalty_cards/spar_rewards.png'),
+                SizedBox(
+                  height: widget.height,
+                  child: Image.asset('images/loyalty_cards/spar_rewards.png'),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Spar",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                ),
+              ],
             ),
           ],
         );
@@ -100,16 +223,31 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
         return Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            SizedBox(
+            Column(
-              height: widget.height,
+              children: [
-              child: Image.asset('images/loyalty_cards/wrewards.png'),
+                SizedBox(
+                  height: widget.height,
+                  child: Image.asset('images/loyalty_cards/wrewards.png'),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "WoolWorths",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                ),
+              ],
             ),
           ],
         );
       default:
         return const SizedBox(
           height: 150,
-          //child: Placeholder(),
+          child: Placeholder(),
         );
     }
   }