Added dark mode feature in searchbar, helpfulsearch and search results (sugarlabs#4333)

* Added dark mode feature in searchbar, helpfulsearch and search results

* Added dark mode feature in searchbar, helpfulsearch and search results

---------

Co-authored-by: Walter Bender <[email protected]>

Author: subhas-pramanik-09

css/activities.css

@@ -16,6 +16,20 @@
   outline: none;
 }
 
+body:not(.dark-mode) #helpfulSearch,
+body:not(.dark-mode) .ui-autocomplete {
+    background-color: #fff !important;
+    color: #000 !important;
+}
+
+body:not(.dark-mode) .ui-autocomplete li:hover {
+    background-color: #ddd !important;
+}
+
+body:not(.dark-mode) #helpfulSearchDiv {
+    background-color: #f9f9f9 !important;
+}
+
 .modal {
   display: none;
   position: fixed;
@@ -92,7 +106,7 @@
   display: block !important;
   position: absolute;
   background-color: #f0f0f0;
-  padding: 5px;
+  padding: 2px;
   border: 1px solid #ccc;
   width: 230px;
   z-index: 1;
@@ -106,6 +120,17 @@
   font-size: large;
 }
 
+#crossButton {
+  position: absolute;
+  top: 50%;
+  right: -30px;
+  transform: translateY(-50%);
+  background: transparent;
+  border: none;
+  font-size: large;
+  cursor: pointer;
+}
+
 .trash-view {
   position: relative;
   background-color: white;

css/darkmode.css

@@ -62,3 +62,20 @@
 .dark-mode #submitLilypond {
     background-color: rgb(0, 102, 255);
 }
+
+.dark-mode #search, #helpfulSearch, .ui-autocomplete{
+    background-color: #1c1c1c;
+    color: #fff;
+}
+
+.dark-mode .ui-autocomplete li:hover{
+    background-color: #225a91;
+}
+
+.dark-mode #helpfulSearchDiv{
+    background-color: transparent;
+}
+
+.dark-mode #crossButton{
+    color: #fff;
+}

js/activity.js

@@ -443,27 +443,18 @@ class Activity {
             const closeButtonDiv = document.createElement("div");
             closeButtonDiv.style.cssText =
                 "position: absolute;" +
-                "top: 10px;" +  // Adjust the top position to center it vertically
-                "right: 10px;" + // Position the button on the right side of the helpfulSearchDiv
+                "top: 10px;" +
+                "right: 10px;" +
                 "cursor: pointer;";
 
             // Create the cross button itself
             const closeButton = document.createElement("button");
-            closeButton.textContent = "×"; // You can use HTML entity or an icon
-            closeButton.style.cssText =
-            "position: absolute;" +
-                "top: 50%;" +  // Center vertically
-                "right: -30px;" +  // Place it outside the input, adjust as needed
-                "transform: translateY(-50%);" +  // Align with vertical center of input
-                "background: transparent;" +
-                "border: none;" +
-                "font-size: large;" +
-                "cursor: pointer;";
+            closeButton.textContent = "×";
+            closeButton.id = "crossButton";
+            document.body.appendChild(closeButton);
 
-            // Append the cross button to the closeButtonDiv
             closeButtonDiv.appendChild(closeButton);
 
-            // Append the closeButtonDiv to the helpfulSearchDiv
             this.helpfulSearchDiv.appendChild(closeButtonDiv);
 
             // Add event listener to remove the search div from the DOM