From e50480eddc657916458cb33c9025b54fdcf14f71 Mon Sep 17 00:00:00 2001
From: nntthuy-axonivy <thuy.nguyenngocthanh@axonactive.com>
Date: Mon, 22 Jul 2024 17:40:54 +0700
Subject: [PATCH] Alter not-found search text

---
 .../src/app/modules/product/product.component.html  | 13 +++++++++++--
 .../src/app/modules/product/product.component.scss  | 13 ++++++++++++-
 marketplace-ui/src/assets/i18n/de.yaml              |  2 +-
 marketplace-ui/src/assets/i18n/en.yaml              |  4 ++--
 .../src/assets/images/misc/search-off.svg           | 11 +++++++++++
 5 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 marketplace-ui/src/assets/images/misc/search-off.svg

diff --git a/marketplace-ui/src/app/modules/product/product.component.html b/marketplace-ui/src/app/modules/product/product.component.html
index 333bbcbf6..853bf1d48 100644
--- a/marketplace-ui/src/app/modules/product/product.component.html
+++ b/marketplace-ui/src/app/modules/product/product.component.html
@@ -36,8 +36,17 @@ <h4 class="text-secondary">
       }
     </div>
   } @else {
-    <div class="h1 product-container text-center align-items-center">
-      {{ 'common.nothingFound' | translate }}
+    <div
+      class="d-flex flex-column align-items-center justify-content-center w-100">
+      <div class="not-found-result w-100">
+        <img
+          src="/assets/images/misc/search-off.svg"
+          alt="Search not found"
+          class="mx-auto d-block" />
+        <div
+          class="h5 text-center not-found-text"
+          [innerHTML]="'common.nothingFound' | translate"></div>
+      </div>
     </div>
   }
 
diff --git a/marketplace-ui/src/app/modules/product/product.component.scss b/marketplace-ui/src/app/modules/product/product.component.scss
index e01ebbe71..0b184b05f 100644
--- a/marketplace-ui/src/app/modules/product/product.component.scss
+++ b/marketplace-ui/src/app/modules/product/product.component.scss
@@ -2,6 +2,17 @@
   min-height: 6em;
 }
 
-.mt-8{
+.mt-8 {
   margin-top: 8rem;
 }
+
+.not-found-result {
+  max-width: 500px;
+  margin-bottom: 4rem;
+
+  .not-found-text {
+    line-height: 140%;
+    color: var(--text-no-rating-color);
+    margin-top: 20px;
+  }
+}
diff --git a/marketplace-ui/src/assets/i18n/de.yaml b/marketplace-ui/src/assets/i18n/de.yaml
index 0cc69d0ed..64524d90a 100644
--- a/marketplace-ui/src/assets/i18n/de.yaml
+++ b/marketplace-ui/src/assets/i18n/de.yaml
@@ -35,7 +35,7 @@ common:
       lowest: Niedrigste
   search:
     placeholder: Suche
-  nothingFound: Nichts gefunden
+  nothingFound: Leider hat deine Suche keinen Treffer ergeben.<br /> Ändere deinen Suchbegriff oder stöbere in unseren Kategorien nach ähnlichen Themen.
   header:
     download: Download
   footer:
diff --git a/marketplace-ui/src/assets/i18n/en.yaml b/marketplace-ui/src/assets/i18n/en.yaml
index 6b4d76a25..70876ac43 100644
--- a/marketplace-ui/src/assets/i18n/en.yaml
+++ b/marketplace-ui/src/assets/i18n/en.yaml
@@ -39,7 +39,7 @@ common:
       lowest: Lowest
   search:
     placeholder: Search a keyword
-  nothingFound: Nothing found
+  nothingFound: Your search did not yield any results.<br /> Please modify your search terms or browse our categories for related content.
   header:
     download: Download
   footer:
@@ -88,7 +88,7 @@ common:
           label: Choose artifact
   feedback:
     label: Feedback
-    successMessage: Your feedback has been successfully submitted! 
+    successMessage: Your feedback has been successfully submitted!
     thankMessage: Thank you for your contribution
     addFeedbackTitle: Give your feedback!
     addFeedbackDescription: By giving your feedback you are enabling us to constantly improve our products and always deliver the best quality to both you and your team.
diff --git a/marketplace-ui/src/assets/images/misc/search-off.svg b/marketplace-ui/src/assets/images/misc/search-off.svg
new file mode 100644
index 000000000..0ecde8570
--- /dev/null
+++ b/marketplace-ui/src/assets/images/misc/search-off.svg
@@ -0,0 +1,11 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2360_3789)">
+<path d="M15.117 15.1859C13.1689 17.138 11.6243 19.4547 10.5715 22.0038C9.51863 24.5528 8.97818 27.2842 8.98097 30.0421C8.98659 35.612 11.2046 40.9514 15.147 44.8859C19.0895 48.8204 24.4334 51.0276 30.0032 51.022C35.5731 51.0164 40.9126 48.7984 44.847 44.8559M49.599 37.5539C51.0628 33.7635 51.3955 29.6298 50.5568 25.6541C49.7181 21.6783 47.744 18.0313 44.8739 15.1551C42.0037 12.279 38.3608 10.2972 34.3869 9.45017C30.4129 8.60311 26.2785 8.92712 22.485 10.3829" stroke="#A3A3A3" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 9L63 63" stroke="#A3A3A3" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2360_3789">
+<rect width="72" height="72" fill="white"/>
+</clipPath>
+</defs>
+</svg>