fix: search empty state improvements

school/public/css/style.css

@@ -1376,7 +1376,7 @@ pre {
 }
 
 .search-course {
-	background-image: url(/assets/frappe/icons/timeless/search.svg);
+    background-image: url(/assets/frappe/icons/timeless/search.svg);
   border: 1px solid #C8CFD5;
   box-sizing: border-box;
   border-radius: 6px;
@@ -1384,8 +1384,8 @@ pre {
   padding: 0.625rem 0.75rem;
   height: 36px;
   background-repeat: no-repeat;
-	text-indent: 1.5rem;
-	background-position: 1rem 0.65rem;
+    text-indent: 1.5rem;
+    background-position: 1rem 0.65rem;
 }
 
 .section-heading {
@@ -1461,3 +1461,22 @@ pre {
   top: 4rem;
   margin-bottom: 5rem;
 }
+
+.close-search-empty-state {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.75rem 1.25rem;
+  float: right;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  color: #000;
+  text-shadow: 0 1px 0 #fff;
+  opacity: .5;
+}
+
+.close-search-empty-state:hover {
+  text-decoration: none;
+  color: #000;
+}

school/templates/search_course/search_course.html

@@ -1,7 +1,7 @@
 <input class="search-course w-25 float-right" placeholder="{{ _("Try `Manufacturing` or `Accounting`") }}">
 
 <div id="" class="alert alert-dismissible empty-state search-empty-state hide">
-  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+  <a href="#" class="close-search-empty-state" aria-label="close">&times;</a>
   <img class="icon icon-xl" src="/assets/frappe/images/ui-states/search-empty-state.svg">
   <div class="course-home-headings mt-4 mb-0" style="color: inherit;"> {{ _("No results found") }} </div>
   <div class="small mb-6"> {{ _("Try some other keyword or explore our list of courses.") }} </div>

school/templates/search_course/search_course.js

@@ -2,6 +2,11 @@ frappe.ready(() => {
   $(".search-course").keyup((e) => {
     search_course(e);
   });
+
+  $(".close-search-empty-state").click((e) => {
+    close_search_empty_state(e);
+  });
+
 });
 
 const search_course = (e) => {
@@ -62,3 +67,8 @@ const fix_heading_styles = () => {
   $(".course-home-headings").removeClass("hide");
   $(".upcoming-courses").addClass("mt-10");
 }
+
+const close_search_empty_state = (e) => {
+  $(".search-empty-state").addClass("hide");
+  $(".search-course").val("");
+}