From 83428b0eee158628ba2e0e147a7a5c4986cf4065 Mon Sep 17 00:00:00 2001
From: aquilaafuadajo <aquilaafuadajo@gmail.com>
Date: Thu, 28 Mar 2024 17:32:22 +0100
Subject: [PATCH 1/2] - change list items to router links - change list
 structure to grid

---
 .../add-post-modal/add-post-modal.component.html    |  7 ++++---
 .../add-post-modal/add-post-modal.component.scss    |  6 ++++--
 .../post/add-post-modal/add-post-modal.component.ts | 13 ++++++++++++-
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.html b/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.html
index 9f96fa86c9..07039ca330 100644
--- a/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.html
+++ b/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.html
@@ -16,13 +16,14 @@
 <div mat-dialog-content>
   <app-spinner class="spinner" *ngIf="!types"></app-spinner>
   <ul role="list" class="types-list" *ngIf="!!types" [data-qa]="'add-post-modal-surveys'">
-    <li *ngFor="let type of types">
+    <li *ngFor="let type of types" [attr.aria-label]="type.name">
       <div
         matRipple
         *ngIf="type.visible"
-        role="listitem"
         [ngStyle]="{ '--color': type.color }"
-        [mat-dialog-close]="{ type: type.id }"
+        [routerLink]="['/post/create/', type.id]"
+        (keydown.enter)="gotoForm(type.id)"
+        mat-dialog-close
         class="type-item"
         [data-qa]="'add-post-modal-surveys-item' + type.id"
       >
diff --git a/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.scss b/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.scss
index 0b1479be70..734f673c8f 100644
--- a/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.scss
+++ b/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.scss
@@ -4,9 +4,12 @@
   margin: 0;
   padding: 0;
   list-style: none;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 5px;
 
   @include breakpoint-min($tablet) {
-    columns: 2;
+    grid-template-columns: repeat(2, 1fr);
   }
 }
 
@@ -14,7 +17,6 @@
   cursor: pointer;
   padding: 15px 12px;
   position: relative;
-  margin-bottom: 8px;
   background: var(--color-neutral-10);
   border-radius: 4px;
   border-inline-start: 5px solid var(--color);
diff --git a/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.ts b/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.ts
index 717ffb79b3..a0a2be841b 100644
--- a/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.ts
+++ b/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.ts
@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
 import { SurveysService, SurveyItem, generalHelpers } from '@mzima-client/sdk';
 
 @Component({
@@ -9,7 +11,11 @@ import { SurveysService, SurveyItem, generalHelpers } from '@mzima-client/sdk';
 export class AddPostModalComponent {
   public types: SurveyItem[];
 
-  constructor(private surveysService: SurveysService) {
+  constructor(
+    private surveysService: SurveysService,
+    private dialog: MatDialog,
+    private router: Router,
+  ) {
     this.getPostAllowedTypes();
   }
 
@@ -27,4 +33,9 @@ export class AddPostModalComponent {
       },
     });
   }
+
+  public gotoForm(id: number) {
+    this.dialog.closeAll();
+    this.router.navigate(['/post/create/', id]);
+  }
 }

From ea39d03bc56b1684b87625bb7272de9a11d1a057 Mon Sep 17 00:00:00 2001
From: aquilaafuadajo <aquilaafuadajo@gmail.com>
Date: Mon, 1 Apr 2024 10:17:49 +0100
Subject: [PATCH 2/2] fix unequal row height

---
 .../src/app/post/add-post-modal/add-post-modal.component.scss    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.scss b/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.scss
index 734f673c8f..6fbf5bf092 100644
--- a/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.scss
+++ b/apps/web-mzima-client/src/app/post/add-post-modal/add-post-modal.component.scss
@@ -20,6 +20,7 @@
   background: var(--color-neutral-10);
   border-radius: 4px;
   border-inline-start: 5px solid var(--color);
+  height: 100%;
 }
 
 .spinner {