From 3360d7c5fa4124a4a285b9f23861310ec22dc7d9 Mon Sep 17 00:00:00 2001
From: Gabriellvl <vanlangenhovefga@gmail.com>
Date: Fri, 2 May 2025 09:49:32 +0200
Subject: [PATCH 1/3] fix: stijl + positie zoek kaart

---
 frontend/src/components/BrowseThemes.vue | 39 +++++++++++++-----------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/BrowseThemes.vue b/frontend/src/components/BrowseThemes.vue
index b65c4e26..7b1971d4 100644
--- a/frontend/src/components/BrowseThemes.vue
+++ b/frontend/src/components/BrowseThemes.vue
@@ -57,6 +57,22 @@
         </div>
 
         <v-row v-else>
+            <v-col
+                cols="12"
+                sm="6"
+                md="4"
+                lg="4"
+                class="d-flex"
+            >
+                <ThemeCard
+                    path="/learningPath/search"
+                    :is-absolute-path="true"
+                    :title="t('searchAllLearningPathsTitle')"
+                    :description="t('searchAllLearningPathsDescription')"
+                    icon="mdi-magnify"
+                    class="fill-height grey-bg-card"
+                />
+            </v-col>
             <v-col
                 v-for="card in cards"
                 :key="card.key"
@@ -74,24 +90,13 @@
                     class="fill-height"
                 />
             </v-col>
-            <v-col
-                cols="12"
-                sm="6"
-                md="4"
-                lg="4"
-                class="d-flex"
-            >
-                <ThemeCard
-                    path="/learningPath/search"
-                    :is-absolute-path="true"
-                    :title="t('searchAllLearningPathsTitle')"
-                    :description="t('searchAllLearningPathsDescription')"
-                    icon="mdi-magnify"
-                    class="fill-height"
-                />
-            </v-col>
         </v-row>
     </v-container>
 </template>
 
-<style scoped></style>
+<style scoped>
+    .grey-bg-card {
+        background-color: #f6faf2;
+        border: 2px solid #0e6942;
+    }
+</style>

From a6b8b6647bbcd87d54bc261b924bee324437d785 Mon Sep 17 00:00:00 2001
From: Gabriellvl <vanlangenhovefga@gmail.com>
Date: Tue, 6 May 2025 09:30:47 +0200
Subject: [PATCH 2/3] fix: stijl zoekpagina

---
 .../learning-paths/LearningPathSearchPage.vue | 57 +++++++++++--------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/frontend/src/views/learning-paths/LearningPathSearchPage.vue b/frontend/src/views/learning-paths/LearningPathSearchPage.vue
index 4e2c6475..47821666 100644
--- a/frontend/src/views/learning-paths/LearningPathSearchPage.vue
+++ b/frontend/src/views/learning-paths/LearningPathSearchPage.vue
@@ -17,32 +17,41 @@
 </script>
 
 <template>
-    <div class="search-field-container">
-        <learning-path-search-field class="search-field"></learning-path-search-field>
-    </div>
+    <v-container class="search-page-container">
+        <v-row justify="center" class="mb-6">
+            <v-col cols="12" sm="8" md="6" lg="4">
+                <learning-path-search-field class="search-field" />
+            </v-col>
+        </v-row>
 
-    <using-query-result
-        :query-result="searchQueryResults"
-        v-slot="{ data }: { data: LearningPath[] }"
-    >
-        <learning-paths-grid :learning-paths="data"></learning-paths-grid>
-    </using-query-result>
-    <div content="empty-state-container">
-        <v-empty-state
-            v-if="!query"
-            icon="mdi-magnify"
-            :title="t('enterSearchTerm')"
-            :text="t('enterSearchTermDescription')"
-        ></v-empty-state>
-    </div>
+        <v-row justify="center">
+            <v-col cols="12">
+                <using-query-result
+                    :query-result="searchQueryResults"
+                    v-slot="{ data }: { data: LearningPath[] }"
+                >
+                    <learning-paths-grid :learning-paths="data" />
+                </using-query-result>
+
+                <div v-if="!query" class="empty-state-container">
+                    <v-empty-state
+                        icon="mdi-magnify"
+                        :title="t('enterSearchTerm')"
+                        :text="t('enterSearchTermDescription')"
+                    />
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
 </template>
 
 <style scoped>
-    .search-field-container {
-        display: block;
-        margin: 20px;
-    }
-    .search-field {
-        max-width: 300px;
-    }
+.search-page-container {
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.search-field {
+    max-width: 100%;
+}
 </style>

From 2f28b801807c92816c34b0918f09f716370d4c9e Mon Sep 17 00:00:00 2001
From: Lint Action <lint-action@samuelmeuli.com>
Date: Tue, 6 May 2025 07:32:26 +0000
Subject: [PATCH 3/3] style: fix linting issues met Prettier

---
 .../learning-paths/LearningPathSearchPage.vue | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/frontend/src/views/learning-paths/LearningPathSearchPage.vue b/frontend/src/views/learning-paths/LearningPathSearchPage.vue
index 47821666..b6d75d15 100644
--- a/frontend/src/views/learning-paths/LearningPathSearchPage.vue
+++ b/frontend/src/views/learning-paths/LearningPathSearchPage.vue
@@ -18,8 +18,16 @@
 
 <template>
     <v-container class="search-page-container">
-        <v-row justify="center" class="mb-6">
-            <v-col cols="12" sm="8" md="6" lg="4">
+        <v-row
+            justify="center"
+            class="mb-6"
+        >
+            <v-col
+                cols="12"
+                sm="8"
+                md="6"
+                lg="4"
+            >
                 <learning-path-search-field class="search-field" />
             </v-col>
         </v-row>
@@ -33,7 +41,10 @@
                     <learning-paths-grid :learning-paths="data" />
                 </using-query-result>
 
-                <div v-if="!query" class="empty-state-container">
+                <div
+                    v-if="!query"
+                    class="empty-state-container"
+                >
                     <v-empty-state
                         icon="mdi-magnify"
                         :title="t('enterSearchTerm')"
@@ -46,12 +57,12 @@
 </template>
 
 <style scoped>
-.search-page-container {
-    padding-top: 40px;
-    padding-bottom: 40px;
-}
+    .search-page-container {
+        padding-top: 40px;
+        padding-bottom: 40px;
+    }
 
-.search-field {
-    max-width: 100%;
-}
+    .search-field {
+        max-width: 100%;
+    }
 </style>