Merge pull request #24 from yaso-meth/app-icon-look-and-feel

App-icon-look-and-feel

Frontend/android/app/src/main/res/mipmap-anydpi-v26/launcher_icon.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <background android:drawable="@color/ic_launcher_background"/>
+  <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>

Frontend/android/app/src/main/res/values/colors.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#3A4454</color>
+</resources>

Frontend/flutter_launcher_icons.yaml

@@ -1,12 +1,12 @@
 # flutter pub run flutter_launcher_icons
 flutter_launcher_icons:
-  image_path: "images/app_icon/App_Icon_2.png"
+  image_path: "images/app_icon/App_Icon_1.png"
 
   android: "launcher_icon"
   # image_path_android: "assets/icon/icon.png"
   min_sdk_android: 21 # android min sdk min:16, default 21
   adaptive_icon_background: "#3A4454"
-  # adaptive_icon_foreground: "assets/icon/foreground.png"
+  adaptive_icon_foreground: "images/app_icon/App_Icon_1.png"
   # adaptive_icon_monochrome: "assets/icon/monochrome.png"
 
   ios: true
@@ -18,15 +18,15 @@ flutter_launcher_icons:
 
   web:
     generate: true
-    image_path: "images/app_icon/mih_app_icon.png"
-    background_color: "#hexcode"
-    theme_color: "#hexcode"
+    image_path: "images/app_icon/circle_logo.png"
+    background_color: "#3A4454"
+    theme_color: "#3A4454"
 
   windows:
     generate: true
-    image_path: "images/app_icon/mih_app_icon.png"
+    image_path: "images/app_icon/circle_logo.png"
     icon_size: 48 # min:48, max:256, default: 48
 
   macos:
     generate: true
-    image_path: "images/app_icon/mih_app_icon.png"
+    image_path: "images/app_icon/circle_logo.png"

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,
-          right: width / 10,
+          left: getHorizontalPaddingSize(size),
+          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(
-              height: widget.height,
-              child: Image.asset('images/loyalty_cards/bb_club.png'),
+            Column(
+              children: [
+                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(
-              height: widget.height,
-              child: Image.asset('images/loyalty_cards/checkers_xtra.png'),
+            Column(
+              children: [
+                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(
-              height: widget.height,
-              child: Image.asset('images/loyalty_cards/Clicks_Club.png'),
+            Column(
+              children: [
+                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(
-              height: widget.height,
-              child: Image.asset('images/loyalty_cards/cotton_on_perks.png'),
+            Column(
+              children: [
+                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(
-              height: widget.height,
-              child: Image.asset('images/loyalty_cards/dischem_benefit.png'),
+            Column(
+              children: [
+                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(
-              height: widget.height,
-              child: Image.asset('images/loyalty_cards/pnp_smart.png'),
+            Column(
+              children: [
+                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(
-              height: widget.height,
-              child: Image.asset('images/loyalty_cards/shoprite_xtra.png'),
+            Column(
+              children: [
+                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(
-              height: widget.height,
-              child: Image.asset('images/loyalty_cards/spar_rewards.png'),
+            Column(
+              children: [
+                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(
-              height: widget.height,
-              child: Image.asset('images/loyalty_cards/wrewards.png'),
+            Column(
+              children: [
+                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(),
         );
     }
   }

Frontend/web/manifest.json

@@ -3,8 +3,8 @@
     "short_name": "MIH",
     "start_url": ".",
     "display": "standalone",
-    "background_color": "#hexcode",
-    "theme_color": "#hexcode",
+    "background_color": "#3A4454",
+    "theme_color": "#3A4454",
     "description": "Digitizing Mzansi one process at a time. Discover essential Mzansi apps to streamline your personal and professional life. Simplify your daily tasks with our user-friendly solutions.",
     "orientation": "any",
     "prefer_related_applications": false,