new svg icon

gnolang · Oct 1, 2024 · f85e965 · f85e965
1 parent 56e4e44
commit f85e965
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 16 deletions.
diff --git a/gno.land/pkg/gnoweb/static/css/app.css b/gno.land/pkg/gnoweb/static/css/app.css
@@ -33,31 +33,64 @@
   }
 
 /* ############################################## SEARCH-BAR AND ICON */
+
 .text-Area {
   display: none;
-  width: 10em;
-  height: 30px;
-  background-color: var(--border-color);
+  width: 100%;
+  max-width: 20em;
+  height: 35px;
+  background-color: var(--background-color, #f9f9f9);
   border-radius: 5px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--border-color, #ccc);
   z-index: 1;
   position: relative;
-  padding: 5px;
-  color: white;
+  padding: 8px;
+  color: var(--text-color, #333);
   margin-right: 2rem;
+  font-size: 1em;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  }
+ .text-Area:hover {
+  border-color: var(--hover-border-color, #888);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+}
+
+.text-Area:focus {
+  outline: none;
+  border-color: var(--focus-border-color, #007bff);
+  background-color: var(--focus-background-color, #fff);
+  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
+}
+
+/* Placeholder styling */
+.text-Area::placeholder {
+  color: var(--placeholder-color, #aaa);
+  font-style: italic;
 }
+
+@media (max-width: 768px) {
+  .text-Area {
+  width: 90%;
+  margin-right: 1rem;
+  }
+}
+
 .search-icon {
-  width: 24px;
-  height: 24px;
+  width: 40px;
+  height: 40px;
   cursor: pointer;
   display: block;
+  border-color: white;
+  background-color: var(--docsearch-searchbox-background);
 }
+
 .text-Area.show {
   display: block;
 }
 .searchDiv {
-  width: max-content;
-  padding-right: 20px;
+  width: fit-content;
+  padding: .6rem;
 }
 
 /*** DARK/LIGHT THEME COLORS ***/

diff --git a/gno.land/pkg/gnoweb/static/js/filter.js b/gno.land/pkg/gnoweb/static/js/filter.js
@@ -11,11 +11,10 @@ function toggleSearch() {
     }
   }
 
-  // Filter function to show/hide elements based on the input value
+
   function filterContent(event) {
     const filterText = event.target.value.toLowerCase(); // Get search input text in lowercase
-    const contentElements = document.querySelectorAll('.filtrable'); // Get all elements with class 'filtrable'
-
+    const contentElements = document.querySelectorAll('.filtrable');
 
     contentElements.forEach(element => {
         const text = element.textContent.toLowerCase();

diff --git a/gno.land/pkg/gnoweb/views/funcs.html b/gno.land/pkg/gnoweb/views/funcs.html
@@ -20,9 +20,7 @@
 
         <div class="buttons">
           <div class="searchDiv">
-          <svg class="search-icon" id="search-icon" onclick="toggleSearch()" xmlns="http://www.w3.org/2000/svg"  width="40" height="40" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35m-1.9-2.1a7.5 7.5 0 1110.5-10.5 7.5 7.5 0 01-10.5 10.5z" />
-          </svg>
+            <svg class="search-icon" id="search-icon" onclick="toggleSearch()" width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g> <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M12 3C4.5885 3 3 4.5885 3 12C3 19.4115 4.5885 21 12 21C19.4115 21 21 19.4115 21 12C21 4.5885 19.4115 3 12 3ZM11.5 7.75C9.42893 7.75 7.75 9.42893 7.75 11.5C7.75 13.5711 9.42893 15.25 11.5 15.25C13.5711 15.25 15.25 13.5711 15.25 11.5C15.25 9.42893 13.5711 7.75 11.5 7.75Z" fill="#323232"></path> <path d="M3 12C3 4.5885 4.5885 3 12 3C19.4115 3 21 4.5885 21 12C21 19.4115 19.4115 21 12 21C4.5885 21 3 19.4115 3 12Z" stroke="white" stroke-width="2"></path> <path d="M14 14L16 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M15 11.5C15 13.433 13.433 15 11.5 15C9.567 15 8 13.433 8 11.5C8 9.567 9.567 8 11.5 8C13.433 8 15 9.567 15 11.5Z" stroke="white" stroke-width="2"></path> </g></svg>
           <textarea class="text-Area" id="searchArea" placeholder="Search..."></textarea>
           </div>