From 4d4db491af9b8b135d4e7243064c8fde1c9d1c44 Mon Sep 17 00:00:00 2001
From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com>
Date: Wed, 18 Dec 2024 13:31:48 +0200
Subject: [PATCH 1/4] feat: use iati-card for report filters

---
 src/components/AppAccordion.vue          | 10 +++-
 src/components/CheckBox.vue              |  7 +--
 src/components/SearchFilter.vue          |  7 ++-
 src/components/report/ActivityErrors.vue |  4 +-
 src/components/report/DocumentReport.vue | 72 +++++++++---------------
 src/components/report/FeedbackGroup.vue  |  6 +-
 src/components/report/FileErrors.vue     |  3 +-
 src/components/report/SeverityItem.vue   | 23 ++++----
 8 files changed, 60 insertions(+), 72 deletions(-)

diff --git a/src/components/AppAccordion.vue b/src/components/AppAccordion.vue
index c8ae06a3..3b6dab14 100644
--- a/src/components/AppAccordion.vue
+++ b/src/components/AppAccordion.vue
@@ -1,7 +1,10 @@
 <script setup>
   import { ref } from "vue";
 
-  const props = defineProps({ open: { type: Boolean, default: false } });
+  const props = defineProps({
+    open: { type: Boolean, default: false },
+    headerClasses: { type: String, default: "" },
+  });
 
   const isOpen = ref(props.open);
 
@@ -13,14 +16,15 @@
 <template>
   <div v-auto-animate class="w-full">
     <button
-      class="relative flex w-full items-center space-x-3 p-0 border-none"
+      :class="props.headerClasses"
+      class="flex w-full items-center border-none"
       :aria-expanded="isOpen"
       @click="toggleAccordion()"
     >
       <slot name="title" />
 
       <svg
-        class="absolute right-4 w-3 transform transition-all duration-200"
+        class="w-3 h-3 transform transition-all duration-200 float-right"
         :class="{
           'rotate-180': isOpen,
           'rotate-0': !isOpen,
diff --git a/src/components/CheckBox.vue b/src/components/CheckBox.vue
index 4ccd76c9..e42039db 100644
--- a/src/components/CheckBox.vue
+++ b/src/components/CheckBox.vue
@@ -58,7 +58,6 @@
     position: relative;
     vertical-align: top;
     margin-bottom: 0;
-    font-weight: normal;
     cursor: pointer;
   }
 
@@ -156,12 +155,12 @@
 
   .icheck-green > input:first-child:not(:checked):not(:disabled):hover + label::before,
   .icheck-green > input:first-child:not(:checked):not(:disabled):hover + input[type="hidden"] + label::before {
-    border-color: #155336;
+    border-color: #155366;
   }
 
   .icheck-green > input:first-child:checked + label::before,
   .icheck-green > input:first-child:checked + input[type="hidden"] + label::before {
-    background-color: #155336;
-    border-color: #155336;
+    background-color: #155366;
+    border-color: #155366;
   }
 </style>
diff --git a/src/components/SearchFilter.vue b/src/components/SearchFilter.vue
index f05385fe..385ed733 100644
--- a/src/components/SearchFilter.vue
+++ b/src/components/SearchFilter.vue
@@ -32,16 +32,17 @@
 </script>
 
 <template>
-  <div class="flex w-full flex-row flex-wrap justify-around sm:w-[500px]">
+  <div class="iati-search-bar">
     <input
       id="search"
       v-model="search"
-      class="m-0 w-full border px-4 py-3 text-lg focus-visible:outline-none sm:w-[350px]"
       :class="props.inputClasses"
+      class="flex-1 p-4 border border-solid border-slate-200"
       :placeholder="props.placeholder"
       autofocus
       @blur="onLoseFocus"
     />
+    <!-- TODO: Button -->
     <button
       v-if="props.showButton"
       class="relative mt-4 inline w-full border-0 bg-iati-blue p-3 text-base uppercase sm:mt-0 sm:w-[150px]"
@@ -49,6 +50,6 @@
     >
       {{ props.buttonCaption }}
     </button>
-    <label id="search" for="search" class="invisible">Search</label>
+    <label id="search" for="search" class="hidden">Search</label>
   </div>
 </template>
diff --git a/src/components/report/ActivityErrors.vue b/src/components/report/ActivityErrors.vue
index cfa7161f..bd30e0a1 100644
--- a/src/components/report/ActivityErrors.vue
+++ b/src/components/report/ActivityErrors.vue
@@ -61,9 +61,9 @@
 </script>
 
 <template>
-  <AppAccordion :open="true" class="iati-accordion">
+  <AppAccordion :open="true" :header-classes="'text-white bg-iati-green px-4 py-2'">
     <template #title>
-      <div class="w-full bg-iati-green px-4 py-2 text-left text-white">
+      <div class="w-full text-left">
         {{ props.title }}
       </div>
     </template>
diff --git a/src/components/report/DocumentReport.vue b/src/components/report/DocumentReport.vue
index a1deaab6..c960cf4a 100644
--- a/src/components/report/DocumentReport.vue
+++ b/src/components/report/DocumentReport.vue
@@ -155,45 +155,33 @@
 </script>
 
 <template>
-  <div class="flex flex-wrap">
-    <div v-if="hasMessages" class="relative flex shrink grow flex-col sm:w-full md:basis-1/3">
-      <div class="sticky top-0 m-2.5">
-        <h3>Search and filter</h3>
-        <div class="bg-slate-300">
-          <div class="px-4 py-2">
-            <SearchFilter
-              placeholder="Search activity title and identifier..."
-              :search-text="searchText"
-              class="mb-4 mt-2 !w-full"
-              input-classes="!py-2 border-iati-blue text-base w-full"
-              :show-button="false"
-              @on-search="onFilter"
-              @on-lose-focus="onSearchLoseFocus"
-            />
-            <h4>View by message type</h4>
-            <div class="text-sm text-slate-700">Click to show or hide individual message types</div>
-          </div>
-          <SeverityItem
-            v-for="severity in severities"
-            :key="severity.id"
-            :severity="severity"
-            @select="onFilterBySeverity"
-          />
-          <div class="px-4 pt-2">
-            <h4>View by category</h4>
-          </div>
-          <div class="px-4 py-2">
-            <CategoryItem
-              v-for="category in categories"
-              :key="category.id"
-              :category="category"
-              @select="onFilterByCategory"
-            />
-          </div>
-          <div v-if="hasActiveFilter()" class="px-4 pt-2 pb-4">
-            <button class="iati-button w-full" @click="onClearFilters">Clear Filters</button>
-          </div>
-        </div>
+  <div class="flex gap-x-4 flex-col md:flex-row">
+    <div v-if="hasMessages" class="iati-card md:self-start md:sticky md:top-6 md:w-[400px]">
+      <p class="iati-card__title">Search</p>
+      <SearchFilter
+        placeholder="Search activity title and identifier..."
+        :search-text="searchText"
+        :show-button="false"
+        @on-search="onFilter"
+        @on-lose-focus="onSearchLoseFocus"
+      />
+      <p class="iati-card__title pt-2">Filter</p>
+      <p class="iati-card__subtitle">Filter by message type</p>
+      <SeverityItem
+        v-for="severity in severities"
+        :key="severity.id"
+        :severity="severity"
+        @select="onFilterBySeverity"
+      />
+      <p class="iati-card__subtitle pt-2">Filter by category</p>
+      <CategoryItem
+        v-for="category in categories"
+        :key="category.id"
+        :category="category"
+        @select="onFilterByCategory"
+      />
+      <div v-if="hasActiveFilter()" class="mt-4">
+        <button class="iati-button w-full" @click="onClearFilters">Clear Filters</button>
       </div>
     </div>
     <div class="flex shrink grow flex-col" :class="hasMessages ? 'sm:w-full  md:basis-2/3' : 'w-full'">
@@ -215,9 +203,3 @@
     </div>
   </div>
 </template>
-
-<style>
-  .iati-accordion > button > svg {
-    color: #ffffff;
-  }
-</style>
diff --git a/src/components/report/FeedbackGroup.vue b/src/components/report/FeedbackGroup.vue
index 0f81cf0b..f7e3f56e 100644
--- a/src/components/report/FeedbackGroup.vue
+++ b/src/components/report/FeedbackGroup.vue
@@ -52,9 +52,9 @@
   };
 </script>
 <template>
-  <AppAccordion :open="false" class="mb-4">
+  <AppAccordion :open="false" class="mb-4" :header-classes="'bg-slate-100 px-4 py-2'">
     <template #title>
-      <div class="w-full bg-slate-100 px-4 py-2 text-left">
+      <div class="w-full text-left">
         <div class="font-medium">
           {{ props.activity.title || "Untitled Activity" }}
           <span v-if="show" class="text-[12px]">Link copied</span>
@@ -80,7 +80,7 @@
       </div>
     </template>
     <template #content>
-      <div class="border border-gray-100 px-4 py-2">
+      <div class="border border-solid border-gray-100 px-4 py-2">
         <FeedbackList v-for="(message, index) in messages" :key="index" :message="message" class="pb-2" />
         <span v-if="!messages.length">There is no feedback to display</span>
       </div>
diff --git a/src/components/report/FileErrors.vue b/src/components/report/FileErrors.vue
index 3412348b..26ee6d91 100644
--- a/src/components/report/FileErrors.vue
+++ b/src/components/report/FileErrors.vue
@@ -23,9 +23,10 @@
     v-if="(report && report.summary.critical === 0) || messages.length"
     :open="true"
     class="iati-accordion mb-4"
+    :header-classes="'text-white bg-iati-green px-4 py-2'"
   >
     <template #title>
-      <div class="flex w-full items-center bg-iati-green px-4 py-2 text-left text-white">
+      <div class="flex w-full items-center text-left">
         <span class="mr-2">{{ props.title }}</span>
         <AppBadge v-for="messageType in messageTypes" :key="messageType.type" :variant="messageType.type">
           {{ messageType.count }}
diff --git a/src/components/report/SeverityItem.vue b/src/components/report/SeverityItem.vue
index 8b1f5c1d..97a58e45 100644
--- a/src/components/report/SeverityItem.vue
+++ b/src/components/report/SeverityItem.vue
@@ -26,15 +26,15 @@
     const visibleErrorTypes = errorTypes.value.filter((type) => type.show);
 
     return visibleErrorTypes.length !== errorTypes.value.length
-      ? `${visibleErrorTypes.length} of ${errorTypes.value.length} messages selected`
+      ? `${visibleErrorTypes.length} of ${errorTypes.value.length} selected`
       : "";
   });
-  const bgClass = {
-    "bg-success": props.severity.id === "success",
-    "bg-advisory": props.severity.id === "advisory",
-    "bg-warning": props.severity.id === "warning",
-    "bg-error": props.severity.id === "error",
-    "bg-critical": props.severity.id === "critical",
+  const textClass = {
+    "text-success": props.severity.id === "success",
+    "text-advisory": props.severity.id === "advisory",
+    "text-warning": props.severity.id === "warning",
+    "text-error": props.severity.id === "error",
+    "text-critical": props.severity.id === "critical",
   };
 
   watch(
@@ -76,15 +76,16 @@
     emit("select", { ...props.severity, types: errorTypes.value });
   };
 </script>
+
 <template>
-  <AppAccordion class="iati-accordion">
+  <AppAccordion :header-classes="'bg-slate-100'">
     <template #title>
-      <div :class="bgClass" class="inline-block w-full px-4 py-2 text-left text-white">
+      <div :class="textClass" class="flex w-full text-left font-bold items-center">
         <CheckBox
           :id="props.severity.name"
-          :label="label"
           :name="props.severity.name"
           :checked="selectAll"
+          :label="label"
           class="inline"
           @checked="onToggleSeverity"
           @unchecked="onToggleSeverity"
@@ -95,7 +96,7 @@
       </div>
     </template>
     <template #content>
-      <div class="border border-gray-200 bg-gray-100 px-4">
+      <div class="border border-solid border-slate-100 px-2">
         <div class="py-2 text-sm text-slate-700">{{ props.severity.description }}</div>
         <CheckBox
           v-for="errorType in errorTypes"

From 9ba0d2a42a911bf5fe989d7e036261dacda6868f Mon Sep 17 00:00:00 2001
From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com>
Date: Wed, 18 Dec 2024 15:32:52 +0200
Subject: [PATCH 2/4] fix: fix border around document information on report
 page

---
 src/components/report/ReportDocumentStatus.vue | 2 +-
 src/pages/ReportPage.vue                       | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/report/ReportDocumentStatus.vue b/src/components/report/ReportDocumentStatus.vue
index 0d7e63c5..e2140aeb 100644
--- a/src/components/report/ReportDocumentStatus.vue
+++ b/src/components/report/ReportDocumentStatus.vue
@@ -41,7 +41,7 @@
 <template>
   <div
     v-if="props.document"
-    class="flex flex-col gap-0 border border-solid border-gray-300 odd:bg-white even:bg-slate-100 sm:grid sm:grid-cols-5 sm:border-0"
+    class="flex flex-col gap-0 odd:bg-white even:bg-slate-100 sm:grid sm:grid-cols-5 sm:border-0"
   >
     <div class="py-2 pb-2 first:pl-3.5" :class="textClasses">
       <div class="text-base font-bold sm:hidden">File Name</div>
diff --git a/src/pages/ReportPage.vue b/src/pages/ReportPage.vue
index 50d180d9..8dbb1e6e 100644
--- a/src/pages/ReportPage.vue
+++ b/src/pages/ReportPage.vue
@@ -34,7 +34,7 @@
     !isTestFile ? getDocumentURL(route.params?.name) : null,
     () => fetchDocument(route.params.name),
   );
-  const headerClassNames = "hidden border-0 border-y border-solid border-gray-300 p-2.5 font-bold sm:block";
+  const headerClassNames = "hidden border-0 border-b border-solid border-gray-300 p-2.5 font-bold sm:block";
 
   const { data: organisation, error: organisationError } = useSWRV(
     () => document.value && getOrganisationURL(document.value.publisher, "id"),
@@ -144,15 +144,15 @@
     <CaptionedLoadingSpinner v-if="(!dataset || !dataset.report) && !errors.length">
       Loading Report ...
     </CaptionedLoadingSpinner>
-    <div class="grid-cols grid">
-      <div v-if="!isTestFile" class="grid grid-cols-5 gap-0 border-t-0 bg-white">
+    <div class="grid-cols grid border border-solid border-gray-300">
+      <div v-if="!isTestFile" class="grid grid-cols-5 gap-0 bg-white">
         <div class="first:pl-3.5" :class="headerClassNames">File Name</div>
         <div :class="headerClassNames">Identified in Registry</div>
         <div :class="headerClassNames">Validated</div>
         <div :class="headerClassNames">Validation Status</div>
         <div :class="headerClassNames">Available in IATI Datastore</div>
       </div>
-      <div v-else class="grid grid-cols-4 gap-0 border-t-0 bg-white">
+      <div v-else class="grid grid-cols-4 gap-0 bg-white">
         <div class="first:pl-3.5" :class="headerClassNames">File Name</div>
         <div :class="headerClassNames">Uploaded</div>
         <div :class="headerClassNames">Validated</div>

From 61432da68fc3caf1f47af26dff4ae725e88ec1e8 Mon Sep 17 00:00:00 2001
From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com>
Date: Wed, 18 Dec 2024 16:26:39 +0200
Subject: [PATCH 3/4] test: fix tests using data-cy attributes

---
 cypress/integration/validationReport.spec.js | 53 ++++++++++----------
 src/components/AppPagination.vue             |  7 ++-
 src/components/report/ActivityErrors.vue     |  7 ++-
 3 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/cypress/integration/validationReport.spec.js b/cypress/integration/validationReport.spec.js
index b845b509..646e1e98 100644
--- a/cypress/integration/validationReport.spec.js
+++ b/cypress/integration/validationReport.spec.js
@@ -7,7 +7,7 @@ describe("The Validation Report page", () => {
     cy.visit("/report/ares-activities");
     cy.wait("@validation");
     cy.contains("Error");
-    cy.get(".iati-accordion").eq(2).children("div").find("button").eq(0).click({ force: true });
+    cy.get("[data-cy='feedback-group']").eq(0).find("button").click({ force: true });
     cy.contains("An empty space was added to the attribute");
   });
 
@@ -20,8 +20,8 @@ describe("The Validation Report page", () => {
     cy.wait("@validation");
     cy.contains("Error");
     cy.get("#search").should("have.value", "BE-BCE_KBO-0546740696-PG2017-2021_CD");
-    cy.get(".iati-accordion").eq(2).children("div").find("button").should("have.length", 1);
-    cy.get(".iati-accordion").eq(2).children("div").find("button").eq(0).click({ force: true });
+    cy.get("[data-cy='feedback-group']").should("have.length", 1);
+    cy.get("[data-cy='feedback-group']").find("button").click({ force: true });
     cy.contains("An empty space was added to the attribute");
   });
 
@@ -32,10 +32,11 @@ describe("The Validation Report page", () => {
     }).as("validation");
     cy.visit("/report/ares-activities");
     cy.wait("@validation");
-    cy.get(".iati-accordion").eq(2).find("div.mb-4").should("have.length", 10);
-    cy.get(".iati-accordion").eq(2).find("span").eq(-1).should("contain", "Page 1 of");
-    cy.get(".iati-accordion").eq(2).children("div").find("button").eq(-1).click({ force: true });
-    cy.get(".iati-accordion").eq(2).find("div.mb-4").should("have.length", 3);
+    cy.get("[data-cy='feedback-group']").should("have.length", 10);
+    cy.contains("Page 1 of 2");
+    cy.get("[data-cy='next-page'").click({ force: true });
+    cy.contains("Page 2 of 2");
+    cy.get("[data-cy='feedback-group']").should("have.length", 3);
   });
 
   it("filters results when passed an IATI Identifier on query string and paging is in operation", () => {
@@ -47,10 +48,10 @@ describe("The Validation Report page", () => {
     cy.wait("@validation");
     cy.contains("Error");
     cy.get("#search").should("have.value", "XM-TEST-VALIDATION-01-A-PROJECT-01626");
-    cy.get(".iati-accordion").eq(2).children("div").find("button").should("have.length", 1);
-    cy.get(".iati-accordion").eq(2).children("div").find("button").eq(0).click({ force: true });
-    cy.contains("The organisation role is invalid");
-    cy.contains("Budget Period must not be longer than one year");
+    cy.get("[data-cy='feedback-group']").should("have.length", 1);
+    cy.get("[data-cy='feedback-group']").find("button").click({ force: true });
+    cy.get("[data-cy='feedback-group']").contains("The organisation role is invalid");
+    cy.get("[data-cy='feedback-group']").contains("Budget Period must not be longer than one year");
   });
 
   it("filters results and still uses paging when search for IATI Identifier on query string gives more than 10 results", () => {
@@ -62,10 +63,10 @@ describe("The Validation Report page", () => {
     cy.wait("@validation");
     cy.contains("Error");
     cy.get("#search").should("have.value", "XM-TEST-VALIDATION-01-A");
-    cy.get(".iati-accordion").eq(2).find("div.mb-4").should("have.length", 10);
-    cy.get(".iati-accordion").eq(2).find("span").eq(-1).should("contain", "Page 1 of");
-    cy.get(".iati-accordion").eq(2).children("div").find("button").eq(-1).click({ force: true });
-    cy.get(".iati-accordion").eq(2).find("div.mb-4").should("have.length", 1);
+    cy.get("[data-cy='feedback-group']").should("have.length", 10);
+    cy.contains("Page 1 of 2");
+    cy.get("[data-cy='next-page'").click({ force: true });
+    cy.get("[data-cy='feedback-group']").should("have.length", 1);
   });
 
   it("updates the displayed results after user does new search when on first page of search results", () => {
@@ -77,11 +78,11 @@ describe("The Validation Report page", () => {
     cy.wait("@validation");
     cy.contains("Error");
     cy.get("#search").should("have.value", "XM-TEST-VALIDATION-01-A");
-    cy.get(".iati-accordion").eq(2).find("div.mb-4").should("have.length", 10);
-    cy.get(".iati-accordion").eq(2).find("span").eq(-1).should("contain", "Page 1 of");
+    cy.get("[data-cy='feedback-group']").should("have.length", 10);
+    cy.contains("Page 1 of 2");
     cy.get("#search").clear();
     cy.get("#search").type("XM-TEST-VALIDATION-01-B-PROJECT-01926");
-    cy.get(".iati-accordion").eq(2).find("div.mb-4").should("have.length", 1);
+    cy.get("[data-cy='feedback-group']").should("have.length", 1);
   });
 
   it("updates the displayed results after user does new search when not on first page of search results", () => {
@@ -93,14 +94,14 @@ describe("The Validation Report page", () => {
     cy.wait("@validation");
     cy.contains("Error");
     cy.get("#search").should("have.value", "XM-TEST-VALIDATION-01-A");
-    cy.get(".iati-accordion").eq(2).find("div.mb-4").should("have.length", 10);
-    cy.get(".iati-accordion").eq(2).find("span").eq(-1).should("contain", "Page 1 of");
-    cy.get(".iati-accordion").eq(2).children("div").find("button").eq(-1).click({ force: true });
-    cy.get(".iati-accordion").eq(2).find("div.mb-4").should("have.length", 1);
+    cy.get("[data-cy='feedback-group']").should("have.length", 10);
+    cy.contains("Page 1 of 2");
+    cy.get("[data-cy='next-page'").click({ force: true });
+    cy.get("[data-cy='feedback-group']").should("have.length", 1);
 
     cy.get("#search").clear();
     cy.get("#search").type("XM-TEST-VALIDATION-01-B-PROJECT-01926");
-    cy.get(".iati-accordion").eq(2).find("div.mb-4").should("have.length", 1);
+    cy.get("[data-cy='feedback-group']").should("have.length", 1);
   });
 
   it("updates the query string after user loads page then does new search", () => {
@@ -115,9 +116,8 @@ describe("The Validation Report page", () => {
     cy.get("#search").clear();
     cy.get("#search").type("XM-TEST-VALIDATION-01-B-PROJECT-01926");
     cy.get("#search").blur();
-    cy.get(".iati-accordion").eq(2).find("div.mb-4").should("have.length", 1);
+    cy.get("[data-cy='feedback-group']").should("have.length", 1);
     cy.location().should((loc) => {
-      console.log(loc);
       expect(loc.search).to.eq("?id=XM-TEST-VALIDATION-01-B-PROJECT-01926");
     });
   });
@@ -134,9 +134,8 @@ describe("The Validation Report page", () => {
     cy.get("#search").clear();
     cy.get("#search").type("XM-TEST-VALIDATION-01-B");
     cy.get("#search").blur();
-    cy.get(".iati-accordion").eq(2).find("div.mb-4").should("have.length", 2);
+    cy.get("[data-cy='feedback-group']").should("have.length", 2);
     cy.location().should((loc) => {
-      console.log(loc);
       expect(loc.search).to.eq("?id=XM-TEST-VALIDATION-01-B");
     });
   });
diff --git a/src/components/AppPagination.vue b/src/components/AppPagination.vue
index 7c9f8179..56f9ce24 100644
--- a/src/components/AppPagination.vue
+++ b/src/components/AppPagination.vue
@@ -9,7 +9,12 @@
       <IconChevron />
     </button>
     <slot />
-    <button class="ml-1 rounded-md border border-slate-200 p-4" aria-label="Next" @click="emits('next')">
+    <button
+      class="ml-1 rounded-md border border-slate-200 p-4"
+      aria-label="Next"
+      data-cy="next-page"
+      @click="emits('next')"
+    >
       <IconChevron direction="right" />
     </button>
   </div>
diff --git a/src/components/report/ActivityErrors.vue b/src/components/report/ActivityErrors.vue
index bd30e0a1..ce3cb11e 100644
--- a/src/components/report/ActivityErrors.vue
+++ b/src/components/report/ActivityErrors.vue
@@ -69,7 +69,12 @@
     </template>
     <template #content>
       <div class="border border-solid border-gray-200 p-4">
-        <FeedbackGroup v-for="activity in pageData" :key="activity.identifier" :activity="activity" />
+        <FeedbackGroup
+          v-for="activity in pageData"
+          :key="activity.identifier"
+          :activity="activity"
+          data-cy="feedback-group"
+        />
         <AppPagination v-if="filteredData.length > 10" @next="onNext" @previous="onPrevious">
           <span class="text-sm">Page {{ page }} of {{ Math.ceil(filteredData.length / PAGE_LIMIT) }}</span>
         </AppPagination>

From f1a3e96599f19f4e43c435c9c741ef2275fab166 Mon Sep 17 00:00:00 2001
From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com>
Date: Tue, 7 Jan 2025 10:16:10 +0200
Subject: [PATCH 4/4] feat: add vertical whitespace around homepage cards

---
 src/pages/HomePage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 2bb7cd78..54f62777 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -5,7 +5,7 @@
     with data on development and humanitarian resources and results.
   </p>
 
-  <div class="iati-card-gallery">
+  <div class="iati-card-gallery my-12">
     <div class="iati-card">
       <p class="iati-card__title">Check Data</p>
       <p class="iati-card__subtitle">Check your IATI data</p>